基于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 相关文章推荐
将string解析为json的几种方式小结
Nov 11 Javascript
读jQuery之七 判断点击了鼠标哪个键的代码
Jun 21 Javascript
js中设置元素class的三种方法小结
Aug 28 Javascript
新浪微博字数统计 textarea字数统计实现代码
Aug 28 Javascript
jQuery实现的Div窗口震动特效
Jun 09 Javascript
js中iframe调用父页面的方法
Oct 30 Javascript
关于JS中prototype的理解
Sep 07 Javascript
基于JS实现横线提示输入验证码随验证码输入消失(js验证码的实现)
Oct 27 Javascript
AngularJs中 ng-repeat指令中实现含有自定义指令的动态html的方法
Jan 19 Javascript
Vue响应式添加、修改数组和对象的值
Mar 20 Javascript
基于require.js的使用(实例讲解)
Sep 07 Javascript
vue 使用 sortable 实现 el-table 拖拽排序功能
Dec 26 Vue.js
浅谈关于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
四月新番又没了,《Re:从零开始的异世界生活》第二季延期至7月播出
2020/05/06 日漫
PHP 巧用数组降低程序的时间复杂度
2010/01/01 PHP
js prototype 格式化数字 By shawl.qiu
2007/04/02 Javascript
页面只能打开一次Cooike如何实现
2012/12/04 Javascript
javascript模拟地球旋转效果代码实例
2013/12/02 Javascript
js获取页面传来参数的方法
2014/09/06 Javascript
对比分析AngularJS中的$http.post与jQuery.post的区别
2015/02/27 Javascript
jQuery插件Elastislide实现响应式的焦点图无缝滚动切换特效
2015/04/12 Javascript
json+jQuery实现的无限级树形菜单效果代码
2015/08/27 Javascript
jQuery仿淘宝网产品品牌隐藏与显示效果
2015/09/01 Javascript
JS实现网页上随机产生超链接地址的方法
2015/11/09 Javascript
完美解决jQuery的hover事件在IE中不停闪动的问题
2017/02/10 Javascript
浅谈regExp的test方法取得的值变化的原因及处理方法
2017/03/01 Javascript
Angular之toDoList的实现代码示例
2017/12/02 Javascript
Vue中mintui的field实现blur和focus事件的方法
2018/08/25 Javascript
解决vue单页面应用中动态修改title问题
2019/06/09 Javascript
python实现根据ip地址反向查找主机名称的方法
2015/04/29 Python
python实现ID3决策树算法
2017/12/20 Python
python+matplotlib演示电偶极子实例代码
2018/01/12 Python
win10下tensorflow和matplotlib安装教程
2018/09/19 Python
Python读取Excel表格,并同时画折线图和柱状图的方法
2018/10/14 Python
python使用zip将list转为json的方法
2018/12/31 Python
使用Python向DataFrame中指定位置添加一列或多列的方法
2019/01/29 Python
Python实现将HTML转成PDF的方法分析
2019/05/04 Python
详解Python下载图片并保存本地的两种方式
2019/05/15 Python
PYQT5开启多个线程和窗口,多线程与多窗口的交互实例
2019/12/13 Python
Python3 集合set入门基础
2020/02/10 Python
pyautogui自动化控制鼠标和键盘操作的步骤
2020/04/01 Python
Django如何重置migration的几种情景
2021/02/24 Python
捷克多品牌在线时尚商店:ANSWEAR.cz
2020/10/03 全球购物
青年志愿者活动方案
2014/08/17 职场文书
个人专业技术总结
2015/03/05 职场文书
Python中seaborn库之countplot的数据可视化使用
2021/06/11 Python
eclipse创建项目没有dynamic web的解决方法
2021/06/24 Java/Android
Python利用机器学习算法实现垃圾邮件的识别
2021/06/28 Python
Python进程池与进程锁之语法学习
2022/04/11 Python