热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

js倒计时简单实现代码

这篇文章主要为大家详细介绍了js倒计时简单实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

倒计时: 

1.设置一个有效的结束日期 

2.计算剩余时间 

3.将时间转换成可用的格式 

4.输出时钟数据作为一个可重用的对象 

5.在页面上显示时钟,并在它到达0时停止

html

js代码 


/*计算剩余时间*/ function getTimeReamin(endtime){ //剩余的秒数 var remainSec=(Date.parse(endtime)-Date.parse(new Date()))/1000; var days=Math.floor(remainSec/(3600*24)); var hours=Math.floor(remainSec/3600%24); var minutes=Math.floor(remainSec/60%60); var secOnds=Math.floor(remainSec%60); return{"remainSec":remainSec, "days":days, "hours":hours, "minutes":minutes, "seconds":seconds } } var endtime="2016/10/10"; var clock=document.getElementById("clock"); //设置定时器 var timeid=setInterval(function () { var t=getTimeReamin(endtime); //判断时间格式 days= t.days>=0&& t.days<10&#63;"0"+t.days:t.days; hours= t.hours>=0&& t.hours<10&#63;"0"+t.hours:t.hours; minutes=t.minutes>=0&&t.minutes<10&#63;"0"+t.minutes:t.minutes; secOnds=t.seconds>=0&&t.seconds<10&#63;"0"+t.seconds:t.seconds; //设置时间 document.getElementById("days").innerText= days; document.getElementById("hours").innerText= hours; document.getElementById("minutes").innerText= minutes; document.getElementById("seconds").innerText=seconds;   //清除定时器 if(t.remainSec<=0){ clearInterval(timeid); } });

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。


推荐阅读
  • 本文详细介绍了Java API中文文档的位置、用途及其查看方法,帮助开发者更高效地利用这一资源。 ... [详细]
  • 本文探讨了React组件与普通HTML元素间间距不一致的问题,并提供了通过修改代码和使用CSS来解决这一问题的方法。 ... [详细]
  • 本文探讨了在SharePoint环境中使用BDC(Business Data Catalog)时遇到的问题及其解决策略,包括XML文件导入SSP后的不可见性问题以及与远程SQL Server 2005连接的难题。 ... [详细]
  • 本文深入分析了在使用JavaScript中的Date.UTC()方法初始化Date对象时,getDay()方法返回值与预期不符的原因,并提供了相应的解决方案。 ... [详细]
  • 本文详细介绍了JavaScript中数组的转换方法、栈方法、队列方法、重排序方法及操作方法,包括toLocaleString()、toString()、valueOf()等基本转换方法,以及push()、pop()、shift()、unshift()等用于模拟栈和队列行为的方法。 ... [详细]
  • MKVToolNix 37.0.0 正式发布:增强的 MKV 格式处理工具
    MKVToolNix 37.0.0 版本现已推出,这是一款专为处理 Matroska (MKV) 格式的强大工具。它能够将各种视频、音频及字幕格式整合进 MKV 文件中。本次更新带来了新的功能和多项 Bug 修复。 ... [详细]
  • 本文详细介绍了跨站脚本攻击(XSS)的基本概念、工作原理,并通过实际案例演示如何构建XSS漏洞的测试环境,以及探讨了XSS攻击的不同形式和防御策略。 ... [详细]
  • 本文探讨了在 PHP 的 Zend 框架下,使用 PHPUnit 进行单元测试时遇到的 Zend_Controller_Response_Exception 错误,并提供了解决方案。 ... [详细]
  • 探索OpenWrt中的LuCI框架
    本文深入探讨了OpenWrt系统中轻量级HTTP服务器uhttpd的工作原理及其配置,重点介绍了LuCI界面的实现机制。 ... [详细]
  • Git版本控制基础解析
    本文探讨了Git作为版本控制工具的基本概念及其重要性,不仅限于代码管理,还包括文件的历史记录与版本切换功能。通过对比Git与SVN,进一步阐述了分布式版本控制系统的独特优势。 ... [详细]
  • 分布式计算助力链力实现毫秒级安全响应,确保100%数据准确性
    随着分布式计算技术的发展,其在数据存储、文件传输、在线视频、社交平台及去中心化金融等多个领域的应用日益广泛。国际知名企业如Firefox、Google、Opera、Netflix、OpenBazaar等均已采用该技术,推动了技术创新和服务升级。 ... [详细]
  • 来自FallDream的博客,未经允许,请勿转载,谢谢。一天一套noi简直了.昨天勉强做完了noi2011今天教练又丢出来一套noi ... [详细]
  • LoadRunner中的IP欺骗配置与实践
    为了确保服务器能够有效地区分不同的用户请求,避免多人使用同一IP地址造成的访问限制,可以通过配置IP欺骗来解决这一问题。本文将详细介绍IP欺骗的工作原理及其在LoadRunner中的具体配置步骤。 ... [详细]
  • 本文探讨了Java编程语言中常用的两个比较操作符==和equals方法的区别及其应用场景。通过具体示例分析,帮助开发者更好地理解和使用这两个概念,特别是在处理基本数据类型和引用数据类型的比较时。 ... [详细]
  • 本文详细介绍了PHP中的几种超全局变量,包括$GLOBAL、$_SERVER、$_POST、$_GET等,并探讨了AJAX的工作原理及其优缺点。通过具体示例,帮助读者更好地理解和应用这些技术。 ... [详细]
author-avatar
东北的小爷们_366
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有