基于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 相关文章推荐
JAVASCRIPT对象及属性
Feb 13 Javascript
图片动画横条广告带上下滚动可自定义图片、链接等等
Oct 20 Javascript
jQuery is()函数用法3例
May 06 Javascript
小结Node.js中非阻塞IO和事件循环
Sep 18 Javascript
innerHTML动态添加html代码和脚本兼容多个浏览器
Oct 11 Javascript
JS实用技巧小结(屏蔽错误、div滚动条设置、背景图片位置等)
Jun 16 Javascript
EasyUI折叠表格层次显示detailview详解及实例
Dec 28 Javascript
js 将input框中的输入自动转化成半角大写(税号输入框)
Feb 16 Javascript
vue实现动态数据绑定
Apr 28 Javascript
JS实现网页抢购功能(触发,终止脚本)
Nov 27 Javascript
vue+element的表格实现批量删除功能示例代码
Aug 17 Javascript
toString.call()通用的判断数据类型方法示例
Aug 28 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中的float类型使用说明
2010/07/27 PHP
php中url函数介绍及使用示例
2014/02/13 PHP
php提示Warning:mysql_fetch_array() expects的解决方法
2014/12/16 PHP
php与c 实现按行读取文件实例代码
2017/01/03 PHP
yii2 上传图片的示例代码
2018/11/02 PHP
区分JS中的undefined,null,&quot;&quot;,0和false
2007/03/08 Javascript
ie 处理 gif动画 的onload 事件的一个 bug
2007/04/12 Javascript
syntaxhighlighter 使用方法
2007/07/02 Javascript
基于jQuery的公告无限循环滚动实现代码
2012/05/11 Javascript
深入解析jQuery中Deferred的deferred.promise()方法
2016/05/03 Javascript
JavaScript动态添加css样式和script标签
2016/07/19 Javascript
JS实现购物车特效
2017/02/02 Javascript
js 简易版滚动条实例(适用于移动端H5开发)
2017/06/26 Javascript
简单实现js放大镜效果
2017/07/24 Javascript
Vue集成Iframe页面的方法示例
2017/12/12 Javascript
React Native悬浮按钮组件的示例代码
2018/04/05 Javascript
JavaScript常用内置对象用法分析
2019/07/09 Javascript
Python中time模块与datetime模块在使用中的不同之处
2015/11/24 Python
Python过滤txt文件内重复内容的方法
2018/10/21 Python
python覆盖写入,追加写入的实例
2019/06/26 Python
Python实现敏感词过滤的4种方法
2020/09/12 Python
Python全局变量与global关键字常见错误解决方案
2020/10/05 Python
CSS3 transition 实现通知消息轮播条
2020/10/14 HTML / CSS
TUMI澳大利亚网站:美国旅行箱包品牌
2017/03/27 全球购物
TripAdvisor印尼站:全球领先的旅游网站
2018/03/15 全球购物
世界排名第一的万圣节服装店:Spirit Halloween
2018/10/16 全球购物
英国家居用品和床上用品零售商:P&B Home
2020/01/16 全球购物
统计员岗位职责
2013/11/14 职场文书
教师找工作推荐信
2013/11/23 职场文书
餐饮服务食品安全责任书
2014/07/25 职场文书
三人合伙协议书范本
2014/10/29 职场文书
大学生见习报告总结
2014/11/04 职场文书
2014年应急管理工作总结
2014/11/26 职场文书
2014年培训工作总结范文
2014/11/27 职场文书
2015学习委员工作总结范文
2015/04/03 职场文书
Go Grpc Gateway兼容HTTP协议文档自动生成网关
2022/06/16 Golang