基于JS代码实现简单易用的倒计时 x 天 x 时 x 分 x 秒效果


Posted in Javascript onJuly 13, 2017

废话不多说了,直接给大家贴代码了,具体代码如下所示:

<script>
 (function () {
  var tian = document.getElementsByClassName('JS-tian')[0];
  var shi = document.getElementsByClassName('JS-shi')[0];
  var fen = document.getElementsByClassName('JS-fen')[0];
  var miao = document.getElementsByClassName('JS-miao')[0];
  var endTime = new Date('2117/07/12 23:59:59').getTime() + 1000;
  var interval = null;
  interval = setInterval(function () {
   var syhm = endTime - Date.now(); // 剩余毫秒
   if (syhm >= 0) {
    tian.innerText = Math.floor(syhm / 1000 / 60 / 60 / 24);
    shi.innerText = Math.floor(syhm / 1000 / 60 / 60 % 24);
    fen.innerText = Math.floor(syhm / 1000 / 60 % 60);
    miao.innerText = Math.floor(syhm / 1000 % 60);
   } else {
    clearInterval(interval);
   }
  }, 0);
 })();
</script>

htmlDemo:

<div>
 距结束还剩:<span class="JS-tian"></span>天<span class="JS-shi"></span>时<span class="JS-fen"></span>分<span class="JS-miao"></span>秒
</div>

以上所述是小编给大家介绍的基于JS代码实现简单易用的倒计时 x 天 x 时 x 分 x 秒效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
获取HTML DOM节点元素的方法的总结
Aug 21 Javascript
jquery实现下拉菜单的二级联动利用json对象从DB取值显示联动
Mar 27 Javascript
js调试系列 控制台命令行API使用方法
Jun 18 Javascript
jquery+css3打造一款ajax分页插件(自写)
Jun 18 Javascript
js操作IE浏览器弹出浏览文件夹可以返回目录路径
Jul 14 Javascript
JavaScript实现通过select标签跳转网页的方法
Sep 29 Javascript
微信小程序--onShareAppMessage分享参数用处(页面分享)
Apr 18 Javascript
javascript实现二叉树的代码
Jun 08 Javascript
bootstrap精简教程_动力节点Java学院整理
Jul 14 Javascript
vue项目持久化存储数据的实现代码
Oct 01 Javascript
JS实现水平移动与垂直移动动画
Dec 19 Javascript
JavaScript Html实现移动端红包雨功能页面
Jan 10 Javascript
浅谈关于axios和session的一些事
Jul 13 #Javascript
详解JS数据类型的值拷贝函数(深拷贝)
Jul 13 #Javascript
JS+HTML5 FileReader实现文件上传前本地预览功能
Mar 27 #Javascript
js学习总结_选项卡封装(实例讲解)
Jul 13 #Javascript
用户管理的设计_jquery的ajax实现二级联动效果
Jul 13 #jQuery
通过命令行生成vue项目框架的方法
Jul 12 #Javascript
微信小程序实现点击返回顶层的方法
Jul 12 #Javascript
You might like
PHP遍历目录函数opendir()、readdir()、closedir()、rewinddir()总结
2014/11/18 PHP
php实现等比例不失真缩放上传图片的方法
2016/11/14 PHP
php获取微信共享收货地址的方法
2017/12/21 PHP
javascript getElementsByClassName函数
2010/04/01 Javascript
表单JS弹出填写提示效果代码
2011/04/16 Javascript
深入document.write()与HTML4.01的非成对标签的详解
2013/05/08 Javascript
js定时器的使用(实例讲解)
2014/01/06 Javascript
JS中JSON对象和String之间的互转及处理技巧
2016/04/06 Javascript
AngularJS入门(用ng-repeat指令实现循环输出
2016/05/05 Javascript
js实现动态创建的元素绑定事件
2016/07/19 Javascript
Node.js实现兼容IE789的文件上传进度条
2016/09/02 Javascript
BootStrap 下拉菜单点击之后不会出现下拉菜单(下拉菜单不弹出)的解决方案
2016/12/14 Javascript
解决npm管理员身份install时出现权限的问题
2018/03/16 Javascript
js循环map 获取所有的key和value的实现代码(json)
2018/05/09 Javascript
详解微信小程序开发之formId使用(模板消息)
2019/08/27 Javascript
[46:32]Fnatic vs OG 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python简单程序读取串口信息的方法
2015/03/13 Python
Python中subprocess模块用法实例详解
2015/05/20 Python
Python的多态性实例分析
2015/07/07 Python
Python Socket使用实例
2017/12/18 Python
Python编程实现tail-n查看日志文件的方法
2019/07/08 Python
深入了解Django中间件及其方法
2019/07/26 Python
Python3使用PySynth制作音乐的方法
2019/09/09 Python
centos+nginx+uwsgi+Django实现IP+port访问服务器
2019/11/15 Python
解决pytorch DataLoader num_workers出现的问题
2020/01/14 Python
教师评优的个人自我评价分享
2013/09/19 职场文书
求职自荐书范文
2013/12/04 职场文书
安全教育心得体会
2013/12/29 职场文书
创建市级文明单位实施方案
2014/03/01 职场文书
公司担保书格式范文
2014/05/12 职场文书
cf战队收人口号
2014/06/21 职场文书
2016自主招生教师推荐信范文
2015/03/23 职场文书
2016春节慰问信范文
2015/03/25 职场文书
2015年语文教师工作总结
2015/05/25 职场文书
给学校的建议书400字
2015/09/14 职场文书
导游词之嵊泗列岛
2019/10/30 职场文书