基于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表单验证插件formValidator(改进版)
Feb 03 Javascript
通过上下左右键和回车键切换光标实现代码
Mar 08 Javascript
开源的javascript项目Kissy介绍
Nov 28 Javascript
javascript无刷新评论实现方法
May 13 Javascript
百度地图api如何使用
Aug 03 Javascript
Bootstrap Paginator分页插件与ajax相结合实现动态无刷新分页效果
May 27 Javascript
vue-router:嵌套路由的使用方法
Feb 21 Javascript
一个基于react的图片裁剪组件示例
Apr 18 Javascript
浅谈对于react-thunk中间件的简单理解
May 01 Javascript
javascript设计模式之装饰者模式
Jan 30 Javascript
JavaScript原型继承和原型链原理详解
Feb 04 Javascript
解决vue-loader加载不上的问题
Oct 21 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的password_hash()使用实例
2014/03/17 PHP
PHP常用的缓存技术汇总
2014/05/05 PHP
CodeIgniter中实现泛域名解析
2014/07/19 PHP
windows下配置php5.5开发环境及开发扩展
2014/12/25 PHP
php基于Fleaphp框架实现cvs数据导入MySQL的方法
2016/02/23 PHP
PHP实现文件上传与下载实例与总结
2016/03/13 PHP
基于thinkPHP框架实现留言板的方法
2016/10/17 PHP
用javascript父窗口控制只弹出一个子窗口
2007/04/10 Javascript
让 JavaScript 轻松支持函数重载 (Part 2 - 实现)
2009/08/04 Javascript
理解Javascript闭包
2013/11/01 Javascript
利用JavaScript检测CPU使用率自己写的
2014/03/22 Javascript
JS数组(Array)处理函数整理
2014/12/07 Javascript
JavaScript点击按钮后弹出透明浮动层的方法
2015/05/11 Javascript
Jsonp 关键字详解及json和jsonp的区别,ajax和jsonp的区别
2015/12/30 Javascript
React组件重构之嵌套+继承及高阶组件详解
2018/07/19 Javascript
IE9 elementUI文件上传的问题解决
2018/10/17 Javascript
Makefile/cmake/node-gyp中区分判断不同平台的方法
2018/12/18 Javascript
微信小程序用户授权,以及判断登录是否过期的方法
2019/05/10 Javascript
vue element中axios下载文件(后端Python)
2019/05/10 Javascript
解决Vue中的生命周期beforeDestory不触发的问题
2020/07/21 Javascript
selenium 反爬虫之跳过淘宝滑块验证功能的实现代码
2020/08/27 Javascript
[03:49]2016完美“圣”典风云人物:AMS专访
2016/12/06 DOTA
python使用marshal模块序列化实例
2014/09/25 Python
python根据出生日期返回年龄的方法
2015/03/26 Python
python决策树之C4.5算法详解
2017/12/20 Python
python中的变量如何开辟内存
2018/06/26 Python
浅述python2与python3的简单区别
2018/09/19 Python
python3用urllib抓取贴吧邮箱和QQ实例
2020/03/10 Python
django-利用session机制实现唯一登录的例子
2020/03/16 Python
解决numpy矩阵相减出现的负值自动转正值的问题
2020/06/03 Python
Python识别处理照片中的条形码
2020/11/16 Python
matplotlib相关系统目录获取方式小结
2021/02/03 Python
英国高街品牌:Miss Selfridge(塞尔弗里奇小姐)
2016/09/21 全球购物
SteelSeries赛睿官网:游戏外设和配件的领先制造商(耳机、键盘、鼠标和鼠标垫)
2018/06/17 全球购物
Groupon荷兰官方网站:高达70%的折扣
2019/11/01 全球购物
党员个人整改措施
2014/10/24 职场文书