基于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完成代码前最好对其做5件事
Apr 07 Javascript
JS对话框_JS模态对话框showModalDialog用法总结
Jan 11 Javascript
一个通过script自定义属性传递配置参数的方法
Sep 15 Javascript
什么是MEAN?JavaScript编程中的MEAN是什么意思?
Dec 18 Javascript
JS实现IE状态栏文字缩放效果代码
Oct 24 Javascript
概述jQuery的元素筛选
Nov 23 Javascript
jQuery实现拖拽可编辑模块功能代码
Jan 12 Javascript
实现图片首尾平滑轮播(JS原生方法—节流)
Oct 17 Javascript
vue按需加载实例详解
Sep 06 Javascript
three.js 制作动态二维码的示例代码
Jul 31 Javascript
解决vue elementUI 使用el-select 时 change事件的触发问题
Nov 17 Vue.js
JS中一些高效的魔法运算符总结
May 06 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
Jquery中增加参数与Json转换代码
2009/11/20 Javascript
javascript 导出数据到Excel(处理table中的元素)
2009/12/18 Javascript
基于Jquery的简单图片切换效果
2011/01/06 Javascript
JavaScript mapreduce工作原理简析
2012/11/25 Javascript
修改js Calendar日历控件 兼容IE9/谷歌/火狐
2013/01/04 Javascript
结合JQ1.9通过js正则判断各种浏览器版本的方法
2013/12/30 Javascript
通过jquery 获取URL参数并进行转码
2014/08/18 Javascript
JS实现点击按钮自动增加一个单元格的方法
2015/03/09 Javascript
使用console进行性能测试
2015/04/27 Javascript
基于jQuery实现的幻灯图片切换
2016/12/02 Javascript
[原创]SyntaxHighlighter自动识别并加载脚本语言
2017/02/07 Javascript
VUE中v-on:click事件中获取当前dom元素的代码
2018/08/22 Javascript
详解vue数组遍历方法forEach和map的原理解析和实际应用
2018/11/15 Javascript
Vue3 中的数据侦测的实现
2019/10/09 Javascript
python使用rabbitmq实现网络爬虫示例
2014/02/20 Python
在Python程序中实现分布式进程的教程
2015/04/28 Python
用Python编写简单的微博爬虫
2016/03/04 Python
pycharm中连接mysql数据库的步骤详解
2017/05/02 Python
python ansible服务及剧本编写
2017/12/29 Python
用python代码将tiff图片存储到jpg的方法
2018/12/04 Python
Python通过TensorFlow卷积神经网络实现猫狗识别
2019/03/14 Python
python射线法判断一个点在图形区域内外
2019/06/28 Python
Python实现元素等待代码实例
2019/11/11 Python
Python 写了个新型冠状病毒疫情传播模拟程序
2020/02/14 Python
Python JSON常用编解码方法代码实例
2020/09/05 Python
HTML5网页录音和上传到服务器支持PC、Android,支持IOS微信功能
2019/04/26 HTML / CSS
美国咖啡批发网站:Coffee.org
2017/06/29 全球购物
白俄罗斯大卖场:21vek.by
2019/07/25 全球购物
宏碁西班牙官网:Acer西班牙
2021/01/08 全球购物
大学生入党自我鉴定
2013/10/31 职场文书
开工典礼策划方案
2014/05/23 职场文书
生日宴会策划方案
2014/06/03 职场文书
2014年安全管理工作总结
2014/12/01 职场文书
医院合作意向书范本
2015/05/08 职场文书
教务处教学工作总结
2015/08/10 职场文书
Java 垃圾回收超详细讲解记忆集和卡表
2022/04/08 Java/Android