基于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 相关文章推荐
ie focus bug 解决方法
Sep 03 Javascript
js 遍历对象的属性的代码
Dec 29 Javascript
JS简单实现登陆验证附效果图
Nov 19 Javascript
JavaScript获取表格(table)当前行的值、删除行、增加行
Jul 03 Javascript
javascript实现的网站访问量统计代码
Dec 20 Javascript
常用原生JS兼容性写法汇总
Apr 27 Javascript
把普通对象转换成json格式的对象的简单实例
Jul 04 Javascript
微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(二)
May 11 Javascript
node.js 中间件express-session使用详解
May 20 Javascript
vue中axios解决跨域问题和拦截器的使用方法
Mar 07 Javascript
通过jquery的ajax请求本地的json文件方法
Aug 08 jQuery
基于JQuery和DWR实现异步数据传递
Oct 16 jQuery
浅谈关于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
php5.3中连接sqlserver2000的两种方法(com与ODBC)
2012/12/29 PHP
php 判断服务器操作系统的类型
2014/02/17 PHP
PHP中使用xmlreader读取xml数据示例
2014/12/29 PHP
php 问卷调查结果统计
2015/10/08 PHP
PHP的数组中提高元素查找与元素去重的效率的技巧解析
2016/03/03 PHP
使用SMB共享来绕过php远程文件包含的限制执行RFI的利用
2019/05/31 PHP
PHP实现创建一个RPC服务操作示例
2020/02/23 PHP
js宝典学习笔记(上)
2007/01/10 Javascript
xml和web特殊字符
2009/04/28 Javascript
页面实时更新时间的JS实例代码
2013/12/18 Javascript
特殊情况下如何获取span里面的值
2014/05/20 Javascript
node.js中的querystring.unescape方法使用说明
2014/12/10 Javascript
简介AngularJS中使用factory和service的方法
2015/06/17 Javascript
javascript动画算法实例分析
2015/07/31 Javascript
jquery实现的3D旋转木马特效代码分享
2015/08/25 Javascript
JS函数的定义与调用方法推荐
2016/05/12 Javascript
实现React单页应用的方法详解
2016/08/02 Javascript
Vue.2.0.5实现Class 与 Style 绑定的实例
2017/06/20 Javascript
基于JavaScript实现报警器提示音效果
2017/10/27 Javascript
javascript自定义事件功能与用法实例分析
2017/11/08 Javascript
node vue项目开发之前后端分离实战记录
2017/12/13 Javascript
微信小程序滑动选择器的实现代码
2018/08/10 Javascript
Angular2之二级路由详解
2018/08/31 Javascript
vue使用i18n实现国际化的方法详解
2019/09/05 Javascript
Python正则表达式介绍
2012/08/06 Python
python3.0 模拟用户登录,三次错误锁定的实例
2017/11/02 Python
python2.6.6如何升级到python2.7.14
2018/04/08 Python
用python介绍4种常用的单链表翻转的方法小结
2020/02/24 Python
jupyter notebook 重装教程
2020/04/16 Python
python中time.ctime()实例用法
2021/02/03 Python
阿迪达斯奥地利官方商城:adidas.at
2016/10/16 全球购物
Lou & Grey美国官网:主打舒适性面料服饰
2017/12/21 全球购物
找工作最新求职信
2013/12/22 职场文书
商场父亲节活动方案
2014/08/27 职场文书
大学生个人简历自荐信
2015/03/06 职场文书
Python字符串对齐方法使用(ljust()、rjust()和center())
2021/04/26 Python