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 相关文章推荐
jQuery 1.0.2
Oct 11 Javascript
HTML5附件拖拽上传drop &amp; google.gears实现代码
Apr 28 Javascript
文字溢出实现溢出的部分再放入一个新生成的div中具体代码
May 17 Javascript
深入理解javascript的执行顺序
Apr 04 Javascript
jquery操作 iframe的方法
Dec 03 Javascript
JavaScript获取伪元素(Pseudo-Element)属性的方法技巧
Mar 13 Javascript
javascript实现获取字符串hash值
May 10 Javascript
jquery ztree实现模糊搜索功能
Feb 25 Javascript
canvas绘制的直线动画
Jan 23 Javascript
基于axios封装fetch方法及调用实例
Feb 05 Javascript
TypeScript中使用getElementXXX()的示例代码
Sep 12 Javascript
vue下canvas裁剪图片实例讲解
Apr 16 Javascript
原生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
php park、unpark、ord 函数使用方法(二进制流接口应用实例)
2010/10/19 PHP
web站点获取用户IP的安全方法 HTTP_X_FORWARDED_FOR检验
2013/06/01 PHP
PHP中exec函数和shell_exec函数的区别
2014/08/20 PHP
PHP实现的自定义数组排序函数与排序类示例
2016/11/18 PHP
Yii框架 session 数据库存储操作方法示例
2019/11/18 PHP
PHP实现本地图片转base64格式并上传
2020/05/29 PHP
jquery.jstree 增加节点的双击事件代码
2010/07/27 Javascript
css配合jquery美化 select
2013/11/29 Javascript
js返回上一页并刷新的多种实现方法
2014/02/26 Javascript
自定义jQuery插件方式实现强制对象重绘的方法
2015/03/23 Javascript
jquery实现表单输入时提示文字滑动向上效果
2015/08/10 Javascript
gameboy网页闯关游戏(riddle webgame)--仿微信聊天的前端页面设计和难点
2016/02/21 Javascript
BootStrap实现树形目录组件代码详解
2016/06/21 Javascript
在 Angular2 中实现自定义校验指令(确认密码)的方法
2017/01/23 Javascript
提高Web性能的前端优化技巧总结
2017/02/27 Javascript
AngularJS中$http的交互问题
2017/03/29 Javascript
xmlplus组件设计系列之列表(4)
2017/04/26 Javascript
nodejs实现的连接MySQL数据库功能示例
2018/01/25 NodeJs
解决vuecli3.0热更新失效的问题
2018/09/19 Javascript
Node.js 如何利用异步提升任务处理速度
2019/01/07 Javascript
Vue中实现回车键切换焦点的方法
2020/02/19 Javascript
Python linecache.getline()读取文件中特定一行的脚本
2008/09/06 Python
django ajax json的实例代码
2018/05/29 Python
Flask框架Jinjia模板常用语法总结
2018/07/19 Python
使用python代码进行身份证号校验的实现示例
2019/11/21 Python
鼠标滚轮事件和Mac触控板双指事件
2019/12/23 HTML / CSS
高中毕业生生活的自我评价
2013/12/08 职场文书
棉花姑娘教学反思
2014/02/15 职场文书
小学生元旦广播稿
2014/02/21 职场文书
研究生考核个人自我鉴定
2014/03/27 职场文书
基层党员学习党的群众路线教育实践活动心得体会
2014/11/04 职场文书
检讨书怎么写
2015/01/23 职场文书
2015年乡镇环保工作总结
2015/04/22 职场文书
导游词之山东红叶谷
2019/10/31 职场文书
Mysql事务索引知识汇总
2022/03/17 MySQL
解决vue中provide inject的响应式监听
2022/04/19 Vue.js