基于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 相关文章推荐
百度 popup.js 完美修正版非常的不错 脚本之家推荐
Apr 17 Javascript
javascript 原型继承介绍
Aug 30 Javascript
页面按钮禁用与解除禁用的方法
Feb 19 Javascript
页面刷新时记住滚动条的位置jquery代码
Jun 17 Javascript
jQuery实现带动画效果的多级下拉菜单代码
Sep 08 Javascript
javascript先序遍历DOM树的方法
Feb 27 Javascript
jQuery弹出窗口打开链接的实现代码
Dec 24 Javascript
JavaScript转换数据库DateTime字段类型方法
Jun 27 Javascript
Three.js利用orbit controls插件(轨道控制)控制模型交互动作详解
Sep 25 Javascript
node.js学习笔记之koa框架和简单爬虫练习
Dec 13 Javascript
scrapyd schedule.json setting 传入多个值问题
Aug 07 Javascript
vue使用高德地图点击下钻上浮效果的实现思路
Oct 12 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格式化工具Beautify PHP小小BUG
2008/04/24 PHP
php 3行代码的分页算法(求起始页和结束页)
2009/10/21 PHP
php 中文字符串首字母的获取函数分享
2013/11/04 PHP
php短信接口代码
2016/05/13 PHP
详解使用php-cs-fixer格式化代码
2020/09/16 PHP
javascript下function声明一些小结
2007/12/28 Javascript
JavaScript中的Window窗口对象
2008/01/16 Javascript
js计算页面刷新的次数
2009/07/20 Javascript
js利用与或运算符优先级实现if else条件判断表达式
2010/04/15 Javascript
JS正则验证邮箱的格式详细介绍
2013/11/19 Javascript
JavaScript中的console.profile()函数详细介绍
2014/12/29 Javascript
Javascript常用小技巧汇总
2015/06/24 Javascript
jQuery添加options点击事件并传值实例代码
2016/05/18 Javascript
详解用webpack2搭建angular2的项目
2017/06/22 Javascript
vue兄弟组件传递数据的实例
2018/09/06 Javascript
JS选取DOM元素常见操作方法实例分析
2018/12/10 Javascript
微信小程序调用天气接口并且渲染在页面过程详解
2019/06/24 Javascript
浅析微信小程序modal弹窗关闭默认会执行cancel问题
2019/10/14 Javascript
js中关于Blob对象的介绍与使用
2019/11/29 Javascript
jQuery 判断元素是否存在然后按需加载内容的实现代码
2020/01/16 jQuery
vue引用外部JS的两种种方法
2020/01/28 Javascript
[34:39]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#1COL VS EG第二局
2016/03/05 DOTA
[06:07]DOTA2-DPC中国联赛 正赛 Ehome vs VG 选手采访
2021/03/11 DOTA
python实现xlsx文件分析详解
2018/01/02 Python
Python程序控制语句用法实例分析
2020/01/14 Python
Python基于yield遍历多个可迭代对象
2020/03/12 Python
Python requests模块session代码实例
2020/04/14 Python
Keras自动下载的数据集/模型存放位置介绍
2020/06/19 Python
Python截图并保存的具体实例
2021/01/14 Python
Canvas获取视频第一帧缩略图的实现
2020/11/11 HTML / CSS
韩国家庭购物网上商店:Nsmall
2017/05/07 全球购物
美国滑雪和滑雪板商店:Buckman
2018/03/03 全球购物
机关党员进社区活动总结
2014/07/05 职场文书
学校交通安全责任书
2014/08/25 职场文书
优秀党员主要事迹范文
2015/11/05 职场文书
一文搞懂python异常处理、模块与包
2021/06/26 Python