基于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 相关文章推荐
在js中单选框和复选框获取值的方式
Nov 06 Javascript
jquery animate实现鼠标放上去显示离开隐藏效果
Jul 21 Javascript
jQuery ajax dataType值为text json探索分享
Sep 23 Javascript
JS判断客服QQ号在线还是离线状态的方法
Jan 13 Javascript
jquery中animate的stop()方法作用实例分析
Jan 30 Javascript
javascript判断移动端访问设备并解析对应CSS的方法
Feb 05 Javascript
json实现添加、遍历与删除属性的方法
Jun 17 Javascript
Node+Express+MongoDB实现登录注册功能实例
Apr 23 Javascript
Angularjs实现页面模板清除的方法
Jul 20 Javascript
element-ui 中的table的列隐藏问题解决
Aug 24 Javascript
基于better-scroll 实现歌词联动功能的代码
May 07 Javascript
Ant design vue中的联动选择取消操作
Oct 31 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禁止个别IP访问网站
2013/10/30 PHP
PHP mail()函数使用及配置方法
2014/01/14 PHP
PHP判断表单复选框选中状态完整例子
2014/06/24 PHP
thinkPHP连接sqlite3数据库的实现方法(附Thinkphp代码生成器下载)
2016/05/27 PHP
php无限级分类实现方法分析
2016/10/19 PHP
PDO::setAttribute讲解
2019/01/29 PHP
使用tp框架和SQL语句查询数据表中的某字段包含某值
2019/10/18 PHP
js arguments对象应用介绍
2012/11/28 Javascript
Javascript中 关于prototype属性实现继承的原理图
2013/04/16 Javascript
jQuery焦点控制图层展示延迟隐藏的方法
2015/03/09 Javascript
微信浏览器内置JavaScript对象WeixinJSBridge使用实例
2015/05/25 Javascript
JavaScript实现基于十进制的四舍五入实例
2015/07/17 Javascript
手机端 HTML5使用photoswipe.js仿微信朋友圈图片放大效果
2016/08/25 Javascript
Javascript刷新页面的实例
2017/09/23 Javascript
node中的密码安全(加密)
2018/09/17 Javascript
vue-music 使用better-scroll遇到轮播图不能自动轮播问题
2018/12/03 Javascript
js回文数的4种判断方法示例
2019/06/04 Javascript
Python中用于检查英文字母大写的isupper()方法
2015/05/19 Python
Python设计模式之中介模式简单示例
2018/01/09 Python
Python selenium抓取微博内容的示例代码
2018/05/17 Python
python定时关机小脚本
2018/06/20 Python
Python使用修饰器进行异常日志记录操作示例
2019/03/19 Python
Python学习笔记之读取文件、OS模块、异常处理、with as语法示例
2019/06/04 Python
python文件读写代码实例
2019/10/21 Python
PYTHON发送邮件YAGMAIL的简单实现解析
2019/10/28 Python
python中安装django模块的方法
2020/03/12 Python
python3 logging日志封装实例
2020/04/08 Python
Python如何合并多个字典或映射
2020/07/24 Python
CSS3教程(4):网页边框和网页文字阴影
2009/04/02 HTML / CSS
BLACKMORES澳洲官网:澳大利亚排名第一的保健品牌
2018/09/27 全球购物
经典促销广告词大全
2014/03/19 职场文书
环保倡议书
2014/04/14 职场文书
防灾减灾标语
2014/10/07 职场文书
2016年五一促销广告语
2016/01/28 职场文书
mysql 8.0.24版本安装配置方法图文教程
2021/05/12 MySQL
再也不用花钱买漫画!Python爬取某漫画的脚本及源码
2021/06/09 Python