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 相关文章推荐
UserData用法总结 lanyu出品
Jul 01 Javascript
Node.js:Windows7下搭建的Node.js服务(来玩玩服务器端的javascript吧,这可不是前端js插件)
Jun 27 Javascript
js 获取计算后的样式写法及注意事项
Feb 25 Javascript
各种常用的JS函数整理
Oct 25 Javascript
jQuery显示和隐藏 常用的状态判断方法
Jan 29 Javascript
JS响应鼠标点击实现两个滑块区间拖动效果
Oct 26 Javascript
20分钟打造属于你的Bootstrap站点
Jul 27 Javascript
socket.io学习教程之基础介绍(一)
Apr 29 Javascript
seajs中模块依赖的加载处理实例分析
Oct 10 Javascript
vue通过style或者class改变样式的实例代码
Oct 30 Javascript
详解JavaScript中的强制类型转换
Apr 15 Javascript
ES6 Object属性新的写法实例小结
Jun 25 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中的 == 运算符进行字符串比较
2006/11/26 PHP
基于php 随机数的深入理解
2013/06/05 PHP
php导入导出excel实例
2013/10/25 PHP
php 批量查询搜狗sogou代码分享
2015/05/17 PHP
PHP中快速生成随机密码的几种方式
2017/04/17 PHP
PHP设计模式之PHP迭代器模式讲解
2019/03/22 PHP
关于include标签导致js路径找不到的问题分析及解决
2013/07/09 Javascript
在jquery中combobox多选的不兼容问题总结
2013/12/24 Javascript
Jquery图片延迟加载插件jquery.lazyload.js的使用方法
2014/05/21 Javascript
JavaScript DOM元素尺寸和位置
2015/04/13 Javascript
JQuery实现可直接编辑的表格
2015/04/16 Javascript
jquery转盘抽奖功能实现
2015/11/13 Javascript
JS中的二叉树遍历详解
2016/03/18 Javascript
辨析JavaScript中的Undefined类型与null类型
2016/05/26 Javascript
jQuery简单动画变换效果实例分析
2016/07/04 Javascript
详解vue.js组件化开发实践
2016/12/14 Javascript
基于Jquery Ajax type的4种类型(详解)
2017/08/02 jQuery
Bootstrap 模态框自定义点击和关闭事件详解
2018/08/10 Javascript
小程序识别身份证,银行卡,营业执照,驾照的实现
2019/11/05 Javascript
vue element自定义表单验证请求后端接口验证
2019/12/11 Javascript
vue实现导航标题栏随页面滚动渐隐渐显效果
2020/03/12 Javascript
Python中optionParser模块的使用方法实例教程
2014/08/29 Python
解析Python中的变量、引用、拷贝和作用域的问题
2015/04/07 Python
Python3遍历目录树实现方法
2015/05/22 Python
Windows系统下使用flup搭建Nginx和Python环境的方法
2015/12/25 Python
python与sqlite3实现解密chrome cookie实例代码
2018/01/20 Python
Win7 64位下python3.6.5安装配置图文教程
2020/10/27 Python
python中csv文件的若干读写方法小结
2018/07/04 Python
Sanic框架请求与响应实例分析
2018/07/16 Python
关于迟到的检讨书
2014/01/26 职场文书
中学生运动会口号
2014/06/07 职场文书
目标责任书格式
2014/07/28 职场文书
单位委托书怎么写
2014/08/02 职场文书
我为党旗添光彩演讲稿
2014/09/10 职场文书
见习报告格式范文
2014/11/08 职场文书
武当山导游词
2015/02/03 职场文书