js实现简单的倒计时


Posted in Javascript onJanuary 28, 2021

本文实例为大家分享了js实现简单倒计时的具体代码,供大家参考,具体内容如下

js实现简单的倒计时

代码:

<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./3.小于10补零封装.js"></script>
  <style>
    div {
      float: left;
      width: 100px;
      height: 100px;
      background-color: #000;
      text-align: center;
      line-height: 100px;
      color: #fff;
      font-size: 30px;
      margin-right: 10px;
    }
  </style>
</head>
 
<body>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <script>
    var div = document.getElementsByTagName('div');
    var inputTime = +new Date('2021-02-05 00:00:00'); //用户输入时间距离1970年1月1日 总毫秒数
    setInterval(countTime, 1000);
    countTime();
 
    function countTime() {
      var nowTime = +new Date(); //当前时间距离1970年1月1日 总毫秒数
      // console.log(timer);
      var times = (inputTime - nowTime) / 1000; //秒
      var d = parseInt(times / 60 / 60 / 24); //天
      div[0].innerHTML = addZero(d) + '天';
      var h = parseInt(times / 60 / 60 % 24) //时
      div[1].innerHTML = addZero(h) + '时';
      var m = parseInt(times / 60 % 60); //分
      div[2].innerHTML = addZero(m) + '分';
      var s = parseInt(times % 60); //秒
      div[3].innerHTML = addZero(s) + '秒';
 
 
    }
  </script>
</body>
 
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript iframe的相互操作浅析
Oct 14 Javascript
新老版本juqery获取radio对象的方法
Mar 01 Javascript
javascript中简单的进制转换代码实例
Oct 26 Javascript
jQuery操作表格(table)的常用方法、技巧汇总
Apr 12 Javascript
js实现select跳转功能代码
Oct 22 Javascript
JS如何判断json是否为空
Jul 06 Javascript
jQuery实现带遮罩层效果的blockUI弹出层示例【附demo源码下载】
Sep 14 Javascript
BootstrapValidator实现注册校验和登录错误提示效果
Mar 10 Javascript
ajax+node+request爬取网络图片的实例(宅男福利)
Aug 28 Javascript
详解新手使用vue-router传参时注意事项
Jun 06 Javascript
JavaScript ES6的函数拓展
Jan 18 Javascript
Vue的过滤器你真了解吗
Feb 24 Vue.js
原生js实现无缝轮播图效果
Jan 28 #Javascript
JavaScript实现4位随机验证码的生成
Jan 28 #Javascript
JavaScript点击按钮生成4位随机验证码
Jan 28 #Javascript
Vue ​v-model相关知识总结
Jan 28 #Vue.js
Vue 数据响应式相关总结
Jan 28 #Vue.js
node使用async_hooks模块进行请求追踪
Jan 28 #Javascript
JavaScript如何实现防止重复的网络请求的示例
Jan 28 #Javascript
You might like
利用static实现表格的颜色隔行显示的代码
2007/09/02 PHP
PHP时间格式控制符对照表分享
2013/07/23 PHP
PHP树的深度编历生成迷宫及A*自动寻路算法实例分析
2015/03/10 PHP
laravel-admin 在列表页添加自定义按钮的例子
2019/09/30 PHP
PHP过滤器 filter_has_var() 函数用法实例分析
2020/04/23 PHP
jquery实现的下拉和收缩效果示例
2014/08/21 Javascript
html的DOM中document对象images集合用法实例
2015/01/21 Javascript
ionic+AngularJs实现获取验证码倒计时按钮
2017/04/22 Javascript
vue子组件使用自定义事件向父组件传递数据
2017/05/27 Javascript
Vue中计算属性computed的示例解读
2017/07/26 Javascript
JavaScript的Object.defineProperty详解
2018/07/09 Javascript
微信小程序scroll-x失效的完美解决方法
2018/07/18 Javascript
node.js实现http服务器与浏览器之间的内容缓存操作示例
2020/02/11 Javascript
JS实现分页导航效果
2020/02/19 Javascript
js与jquery获取input输入框中的值实例讲解
2020/02/27 jQuery
[19:54]夜魇凡尔赛茶话会 第一期02:看图识人
2021/03/11 DOTA
Python+django实现文件上传
2016/01/17 Python
基于Python和Scikit-Learn的机器学习探索
2017/10/16 Python
对Python中的@classmethod用法详解
2018/04/21 Python
Python针对给定列表中元素进行翻转操作的方法分析
2018/04/27 Python
基于pycharm导入模块显示不存在的解决方法
2018/10/13 Python
解决pycharm运行出错,代码正确结果不显示的问题
2018/11/30 Python
对Python3 goto 语句的使用方法详解
2019/02/16 Python
python+opencv3生成一个自定义纯色图教程
2020/02/19 Python
python基于socket函数实现端口扫描
2020/05/28 Python
Belvilla德国:在线预订度假屋
2018/04/10 全球购物
俄罗斯汽车零件和配件在线商店:CarvilleShop
2019/11/29 全球购物
致标枪运动员广播稿
2014/02/06 职场文书
洗发露广告词
2014/03/14 职场文书
公职人员索取回扣检举信
2014/04/04 职场文书
教师考核评语
2014/04/28 职场文书
大学生精神文明先进个人事迹材料
2014/05/02 职场文书
初中班级口号
2014/06/09 职场文书
Python selenium的这三种等待方式一定要会!
2021/06/10 Python
eval(cmd)与eval($cmd)的区别与联系
2021/07/07 PHP
动画电影《擅长捉弄人的高木同学》6月10日上映!
2022/03/20 日漫