基于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 相关文章推荐
关于可运行代码无法正常执行的使用说明
May 13 Javascript
JS判断客户端是手机还是PC的2个代码
Apr 12 Javascript
jQuery实现简单二级下拉菜单
Apr 12 Javascript
浅谈Javascript中Object与Function对象
Sep 26 Javascript
浅析四种常见的Javascript声明循环变量的书写方式
Oct 14 Javascript
jQuery插件WebUploader实现文件上传
Nov 07 Javascript
JavaScript中值类型和引用类型的区别
Feb 23 Javascript
js自定义Tab选项卡效果
Jun 05 Javascript
js统计页面上每个标签的数量实例代码
May 29 Javascript
基于Vue实现微信小程序的图文编辑器
Jul 25 Javascript
vue 项目中当访问路由不存在的时候默认访问404页面操作
Aug 31 Javascript
vue项目中js-cookie的使用存储token操作
Nov 13 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模板之Phpbean的目录结构
2008/01/10 PHP
新安装的MySQL数据库需要注意的安全知识
2008/07/30 PHP
PHP代码维护,重构变困难的4种原因分析
2016/01/25 PHP
javascript 特殊字符串
2009/02/25 Javascript
关于this和self的使用说明
2010/08/01 Javascript
jquery下onpropertychange事件的绑定方法
2010/08/01 Javascript
Javascript简单实现可拖动的div
2013/10/22 Javascript
js关于精确计算和数值格式化以及直接引js文件
2014/01/28 Javascript
angularjs指令中的compile与link函数详解
2014/12/06 Javascript
JQuery勾选指定name的复选框集合并显示的方法
2015/05/18 Javascript
表单验证插件Validation应用的实例讲解
2015/10/10 Javascript
jquery ajax局部加载方法详解(实现代码)
2016/05/12 Javascript
值得分享和收藏的Bootstrap学习教程
2016/05/12 Javascript
JavaScript函数节流概念与用法实例详解
2016/06/20 Javascript
JavaScript中cookie工具函数封装的示例代码
2016/10/11 Javascript
jQuery实现删除li节点的方法
2016/12/06 Javascript
使用validate.js实现表单数据提交前的验证方法
2018/09/04 Javascript
vue组件从开发到发布的实现步骤
2018/11/11 Javascript
Python 字符串操作实现代码(截取/替换/查找/分割)
2013/06/08 Python
Python3.4编程实现简单抓取爬虫功能示例
2017/09/14 Python
Python+matplotlib实现华丽的文本框演示代码
2018/01/22 Python
python 对多个csv文件分别进行处理的方法
2019/01/07 Python
python3.6中anaconda安装sklearn踩坑实录
2020/07/28 Python
python+openCV对视频进行截取的实现
2020/11/27 Python
Python爬虫爬取ts碎片视频+验证码登录功能
2021/02/22 Python
香港莎莎官网Sasa.com:亚洲著名国际化妆品商城
2019/11/10 全球购物
Linux上比较文件的命令都有哪些
2013/09/28 面试题
农行实习自我鉴定
2013/09/22 职场文书
金融专业推荐信
2013/11/14 职场文书
《小熊住山洞》教学反思
2014/02/21 职场文书
刑事和解协议书范本
2014/11/19 职场文书
2014年医院后勤工作总结
2014/12/06 职场文书
简单的辞职信怎么写
2015/02/28 职场文书
企业宣传稿范文
2015/07/23 职场文书
python3 hdf5文件 遍历代码
2021/05/19 Python
Innodb存储引擎中的后台线程详解
2022/04/03 MySQL