基于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数组
May 11 Javascript
Jquery 类网页微信二维码图块滚动效果具体实现
Oct 14 Javascript
jQuery Ajax使用FormData对象上传文件的方法
Sep 07 Javascript
jquery checkbox的相关操作总结
Oct 17 Javascript
原生js实现对Ajax的封装(仿jquery)
Jan 22 Javascript
Vue.js结合Ueditor富文本编辑器的实例代码
Jul 11 Javascript
浅谈react受控组件与非受控组件(小结)
Feb 09 Javascript
如何使用CSS3和JQuery easing 插件制作绚丽菜单
Jun 18 jQuery
原生JS实现顶部导航栏显示按钮+搜索框功能
Dec 25 Javascript
使用preload预加载页面资源时注意事项
Feb 03 Javascript
vue-cli点击实现全屏功能
Mar 07 Javascript
基于leaflet.js实现修改地图主题样式的流程分析
May 15 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 socket方式提交的post详解
2008/07/19 PHP
php操作sqlserver关于时间日期读取的小小见解
2009/11/29 PHP
学习php开源项目的源码指南
2014/12/21 PHP
thinkPHP基于ajax实现的菜单与分页示例
2016/07/12 PHP
Yii2框架制作RESTful风格的API快速入门教程
2016/11/08 PHP
两个JavaScript jsFiddle JSBin在线调试器
2010/03/14 Javascript
javascript 模式设计之工厂模式学习心得
2010/04/27 Javascript
Javascript 类、命名空间、代码组织代码
2011/07/31 Javascript
js阻止冒泡及jquery阻止事件冒泡示例介绍
2013/11/19 Javascript
js实现无限级树形导航列表效果代码
2015/09/23 Javascript
js获取鼠标点击的对象,点击另一个按钮删除该对象的实现代码
2016/05/13 Javascript
vue.js 使用v-if v-else发现没有执行解决办法
2017/05/15 Javascript
BootStrap Table复选框默认选中功能的实现代码(从数据库获取到对应的状态进行判断是否为选中状态)
2017/07/11 Javascript
Vue.js 2.0和Cordova开发webApp环境搭建方法
2018/02/26 Javascript
[01:40]2014DOTA2国际邀请赛 三冰SOLO赛后采访恶搞
2014/07/09 DOTA
Python数据结构之Array用法实例
2014/10/09 Python
在Django框架中编写Contact表单的教程
2015/07/17 Python
python中子类继承父类的__init__方法实例
2016/12/15 Python
python3 flask实现文件上传功能
2020/03/20 Python
torch 中各种图像格式转换的实现方法
2019/12/26 Python
Python实现Wordcloud生成词云图的示例
2020/03/30 Python
python使用多线程查询数据库的实现示例
2020/08/17 Python
Python2与Python3关于字符串编码处理的差别总结
2020/09/07 Python
印度尼西亚综合购物网站:Lazada印尼
2016/09/07 全球购物
英国花园家具中心:Garden Furniture Centre
2017/08/24 全球购物
Right-on官方网站:日本知名的休闲服装品牌
2019/07/12 全球购物
Bluebella德国官网:英国性感内衣和睡衣品牌
2019/11/08 全球购物
计算 s=(x*y)1/2,用两个宏定义来实现
2016/08/11 面试题
什么样的创业计划书可行性高?
2014/02/01 职场文书
地球一小时倡议书
2014/04/15 职场文书
投资合作协议书范本
2014/04/17 职场文书
班主任经验交流心得体会
2015/11/02 职场文书
遇事可以测出您的见识与格局
2019/09/16 职场文书
导游词之唐山景点
2019/12/18 职场文书
Java常用工具类汇总 附示例代码
2021/06/26 Java/Android
Nginx使用ngx_http_upstream_module实现负载均衡功能示例
2022/08/05 Servers