基于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 相关文章推荐
提高 DHTML 页面性能
Dec 25 Javascript
JS 页面内容搜索,类似于 Ctrl+F功能的实现代码
Aug 13 Javascript
img onload事件绑定各浏览器均可执行
Dec 19 Javascript
jquery插件开发注意事项小结
Jun 04 Javascript
鼠标左键单击冲突的问题解决方法(防止冒泡)
May 14 Javascript
jQuery三级下拉列表导航菜单代码分享
Apr 15 Javascript
JavaScript中闭包的详解
Apr 01 Javascript
jQuery阻止事件冒泡实例分析
Jul 03 jQuery
Vue 实现列表动态添加和删除的两种方法小结
Sep 07 Javascript
ztree加载完成后显示勾选节点的实现代码
Oct 22 Javascript
JS中锚点链接点击平滑滚动并自由调整到顶部位置
Feb 06 Javascript
js正则匹配markdown里的图片标签的实现
Mar 24 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
ThinkPHP分组下自定义标签库实例
2014/11/01 PHP
PHP数组相加操作及与array_merge的区别浅析
2016/11/26 PHP
Laravel中encrypt和decrypt的实现方法
2017/09/24 PHP
javascript生成/解析dom的CDATA类型的字段的代码
2007/04/22 Javascript
JS的递增/递减运算符和带操作的赋值运算符的等价式
2007/12/08 Javascript
javascript显示选择目录对话框的代码
2008/11/10 Javascript
jQuery 判断页面元素是否存在的代码
2009/08/14 Javascript
在js中判断checkboxlist(.net控件客户端id)是否有选中
2013/04/11 Javascript
JS定义回车事件(实现代码)
2013/07/08 Javascript
JavaScript里实用的原生API汇总
2015/05/14 Javascript
1秒50万字!js实现关键词匹配
2016/08/01 Javascript
AngularJS实现select的ng-options功能示例
2017/07/12 Javascript
vue.js实现的绑定class操作示例
2018/07/06 Javascript
vue-cli 2.*中导入公共less文件的方法步骤
2018/11/22 Javascript
vue自定义键盘信息、监听数据变化的方法示例【基于vm.$watch】
2019/03/16 Javascript
JavaScript HTML DOM 元素 (节点)新增,编辑,删除操作实例分析
2020/03/02 Javascript
vue 修改 data 数据问题并实时显示操作
2020/09/07 Javascript
在MAC上搭建python数据分析开发环境
2016/01/26 Python
浅谈Python使用Bottle来提供一个简单的web服务
2017/12/27 Python
Python打印输出数组中全部元素
2018/03/13 Python
使用python3+xlrd解析Excel的实例
2018/05/04 Python
Python基于递归和非递归算法求两个数最大公约数、最小公倍数示例
2018/05/21 Python
Python实现随机漫步功能
2018/07/09 Python
python版大富翁源代码分享
2018/11/19 Python
使用Python控制摄像头拍照并发邮件
2019/04/23 Python
详解如何减少python内存的消耗
2019/08/09 Python
python pycharm最新版本激活码(永久有效)附python安装教程
2020/09/18 Python
django API 中接口的互相调用实例
2020/04/01 Python
水芝澳美国官网:H2O Plus
2016/10/15 全球购物
Kickers鞋英国官网:男士、女士和儿童鞋
2021/03/08 全球购物
甜品店的创业计划书范文
2014/01/02 职场文书
组织关系转移介绍信
2014/01/16 职场文书
保安的辞职报告怎么写
2014/01/20 职场文书
物业项目经理岗位职责
2015/04/01 职场文书
师德培训心得体会2016
2016/01/09 职场文书
《所见》教学反思
2016/02/23 职场文书