基于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 相关文章推荐
jQuery hover 延时器实现代码
Mar 12 Javascript
jQuery EasyUI API 中文文档 - Dialog对话框
Nov 15 Javascript
增强用户体验友好性之jquery easyui window 窗口关闭时的提示
Jun 22 Javascript
JavaScript模拟可展开、拖动与关闭的聊天窗口实例
May 12 Javascript
jQuery实现鼠标点击弹出渐变层的方法
Jul 09 Javascript
javascript实现密码验证
Nov 10 Javascript
详解JavaScript基于面向对象之创建对象(2)
Dec 10 Javascript
Angular实现form自动布局
Jan 28 Javascript
文件上传的几个示例分享【推荐】
Dec 16 Javascript
vue中实现Monaco Editor自定义提示功能
Jul 05 Javascript
node+multer实现图片上传的示例代码
Feb 18 Javascript
解决vue使用vant下拉框van-dropdown-item 绑定title值不变问题
Aug 05 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
配置支持SSI
2006/11/25 PHP
PHP安全防范技巧分享
2011/11/03 PHP
php用户登录之cookie信息安全分析
2016/05/13 PHP
动态加载js文件 document.createElement
2006/10/14 Javascript
js实现权限树的更新权限时的全选全消功能
2009/02/17 Javascript
js和jquery批量绑定事件传参数一(新猪猪原创)
2010/06/23 Javascript
简单实用的全选反选按钮例子
2013/10/18 Javascript
用原生JS获取CLASS对象(很简单实用)
2014/10/15 Javascript
jQuery幻灯片特效代码分享--鼠标滑过按钮时切换(2)
2020/11/18 Javascript
javascript基本常用排序算法解析
2017/09/27 Javascript
微信小程序富文本渲染引擎的详解
2017/09/30 Javascript
vue-cli3.0 特性解读
2018/04/22 Javascript
JavaScript执行环境及作用域链实例分析
2018/08/01 Javascript
微信小程序内拖动图片实现移动、放大、旋转的方法
2018/09/04 Javascript
JavaScript实现的鼠标跟随特效示例【2则实例】
2018/12/22 Javascript
实例详解带参数的 npm script
2019/05/28 Javascript
JavaScript 中的六种循环方法
2021/01/06 Javascript
[03:56]显微镜下的DOTA2第十一期——鬼畜的死亡先知播音员
2014/06/23 DOTA
python实现人人网登录示例分享
2014/01/19 Python
全面理解Python中self的用法
2016/06/04 Python
Python使用zip合并相邻列表项的方法示例
2018/03/17 Python
如何安装多版本python python2和python3共存以及pip共存
2018/09/18 Python
Python爬虫文件下载图文教程
2018/12/23 Python
利用rest framework搭建Django API过程解析
2019/08/31 Python
python多进程重复加载的解决方式
2019/12/13 Python
Python3内置函数chr和ord实现进制转换
2020/06/05 Python
matplotlib 画双轴子图无法显示x轴的解决方法
2020/07/27 Python
浅析CSS3 中的 transition,transform,translate之间区别和作用
2020/03/26 HTML / CSS
金讯Java笔试题目
2013/06/18 面试题
数据库基础的一些面试题
2012/02/25 面试题
学校办公室主任职责
2013/12/27 职场文书
就业协议书盖章的注意事项
2014/09/28 职场文书
2015年六一儿童节演讲稿
2015/03/19 职场文书
2015年度学校应急管理工作总结
2015/10/22 职场文书
Python 处理表格进行成绩排序的操作代码
2021/07/26 Python
windows server2012 R2下安装PaddleOCR服务的的详细步骤
2022/09/23 Servers