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 相关文章推荐
求得div 下 img的src地址的js代码
Feb 28 Javascript
jquery+ajax验证不通过也提交表单问题处理
Dec 12 Javascript
jquery实现触发时更新下拉列表内容的方法
Dec 02 Javascript
jQuery+Ajax实现无刷新操作
Jan 04 Javascript
在javascript中创建对象的各种模式解析
May 16 Javascript
jquery实现页面加载效果
Feb 21 Javascript
前端构建工具之gulp的配置与搭建详解
Jun 12 Javascript
JavaScript标准对象_动力节点Java学院整理
Jun 27 Javascript
Angular实现的简单查询天气预报功能示例
Dec 27 Javascript
vue+element-ui+ajax实现一个表格的实例
Mar 09 Javascript
JS大坑之19位数的Number型精度丢失问题详解
Apr 22 Javascript
Layer.js实现表格溢出内容省略号显示,悬停显示全部的方法
Sep 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 empty(),isset(),is_null()的实例测试详解
2013/06/06 PHP
PHP的反射类ReflectionClass、ReflectionMethod使用实例
2014/08/05 PHP
php比较两个字符串长度的方法
2015/07/13 PHP
利用PHP如何实现Socket服务器
2015/09/23 PHP
php版微信支付api.mch.weixin.qq.com域名解析慢原因与解决方法
2016/10/12 PHP
PHP双向链表定义与用法示例
2018/01/31 PHP
PHP For循环字母A-Z当超过26个字母时输出AA,AB,AC
2020/02/16 PHP
Draggable Elements 元素拖拽功能实现代码
2011/03/30 Javascript
cnblogs 代码高亮显示后的代码复制问题解决实现代码
2011/12/14 Javascript
用最通俗易懂的代码帮助新手理解javascript闭包 推荐
2012/03/01 Javascript
javascript实现信息增删改查的方法
2015/07/25 Javascript
AngularJS指令用法详解
2016/11/02 Javascript
jQuery+ThinkPHP+Ajax实现即时消息提醒功能实例代码
2017/03/21 jQuery
JS实现的随机排序功能算法示例
2017/06/09 Javascript
Vue的MVVM实现方法
2017/08/16 Javascript
vue2.0在table中实现全选和反选的示例代码
2017/11/04 Javascript
ndm:NPM的桌面GUI应用程序
2018/10/15 Javascript
JavaScript实现密码强度实时验证
2020/03/18 Javascript
详解Django中Request对象的相关用法
2015/07/17 Python
Python使用defaultdict读取文件各列的方法
2017/05/11 Python
Python用户推荐系统曼哈顿算法实现完整代码
2017/12/01 Python
对Python中9种生成新对象的方法总结
2018/05/23 Python
Tensorflow使用支持向量机拟合线性回归
2018/09/07 Python
python集合的创建、添加及删除操作示例
2019/10/08 Python
Win10下python 2.7与python 3.7双环境安装教程图解
2019/10/12 Python
根据tensor的名字获取变量的值方式
2020/01/04 Python
python数据类型强制转换实例详解
2020/06/22 Python
PyCharm vs VSCode,作为python开发者,你更倾向哪种IDE呢?
2020/08/17 Python
基于CSS3实现的漂亮Menu菜单效果代码
2015/09/10 HTML / CSS
ECCO爱步加拿大官网:北欧丹麦鞋履及皮具品牌
2017/07/08 全球购物
英国最大的海报商店:GB Posters
2018/03/20 全球购物
蔻驰意大利官网:COACH意大利
2019/01/16 全球购物
学生爱国演讲稿
2014/01/14 职场文书
冰淇淋开店创业计划书
2014/02/01 职场文书
先进工作者主要事迹材料
2015/11/03 职场文书
Golang 正则匹配效率详解
2021/04/25 Golang