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的Function详细
Nov 14 Javascript
List Installed Software Features
Jun 11 Javascript
js function使用心得
May 10 Javascript
JS实现上下左右对称的九九乘法表
Feb 22 Javascript
浅谈js中的延迟执行和定时执行
May 31 Javascript
Javascript函数中的arguments.callee用法实例分析
Sep 16 Javascript
探讨Vue.js的组件和模板
Oct 27 Javascript
jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】
Apr 27 jQuery
微信小程序下拉刷新PullDownRefresh的使用方法
Nov 29 Javascript
小程序实现左右来回滚动字幕效果
Dec 28 Javascript
微信小程序表单验证插件WxValidate的二次封装功能(终极版)
Sep 03 Javascript
解决微信小程序scroll-view组件无横向滚动的问题
Feb 04 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获取文件内容最后一行示例
2014/01/09 PHP
PHP调用JAVA的WebService简单实例
2014/03/11 PHP
使用CodeIgniter的类库做图片上传
2014/06/12 PHP
mac环境中使用brew安装php5.5.15
2014/08/18 PHP
实现PHP框架系列文章(6)mysql数据库方法
2016/03/04 PHP
微信公众号OAuth2.0网页授权问题浅析
2017/01/21 PHP
JavaScript 撑出页面文字换行
2009/06/15 Javascript
通过DOM脚本去设置样式信息
2010/09/19 Javascript
jQuery初学:find()方法及children方法的区别分析
2011/01/31 Javascript
使用JavaScript实现网页版Pongo设计思路及源代码分享
2014/06/16 Javascript
JavaScript解析json格式数据简单示例
2014/12/09 Javascript
JavaScript 浏览器对象模型BOM使用介绍
2015/04/13 Javascript
Bootstarp风格的toggle效果分享
2016/02/23 Javascript
Bootstrap面板(Panels)的简单实现代码
2017/03/17 Javascript
利用Vue v-model实现一个自定义的表单组件
2017/04/27 Javascript
vue-resource调用promise取数据方式详解
2017/07/21 Javascript
原生js实现点击轮播切换图片
2020/02/11 Javascript
python判断一个集合是否包含了另外一个集合中所有项的方法
2015/06/30 Python
WINDOWS 同时安装 python2 python3 后 pip 错误的解决方法
2017/03/16 Python
python logging重复记录日志问题的解决方法
2018/07/12 Python
Python3获取拉勾网招聘信息的方法实例
2019/04/03 Python
FFrpc python客户端lib使用解析
2019/08/24 Python
Python 剪绳子的多种思路实现(动态规划和贪心)
2020/02/24 Python
5分钟让你掌握css3阴影、倒影、渐变小技巧(小编推荐)
2016/08/15 HTML / CSS
html5 canvas-1.canvas介绍(hello canvas)
2013/01/07 HTML / CSS
Ralph Lauren法国官网:美国高品味时装品牌
2017/12/08 全球购物
FOREO斐珞尔官方旗舰店:LUNA露娜洁面仪
2018/03/11 全球购物
德国传统玻璃制造商:Cristalica
2018/04/23 全球购物
母校寄语大全
2014/04/10 职场文书
竞聘演讲稿精彩开头和结尾
2014/05/14 职场文书
家庭贫困证明范本(经典版)
2014/09/22 职场文书
2014年中学生检讨书大全
2014/10/09 职场文书
县委务虚会发言材料
2014/10/20 职场文书
2014年小学安全工作总结
2014/12/04 职场文书
办公用品管理制度
2015/08/04 职场文书
基于Nginx实现限制某IP短时间访问次数
2021/03/31 Servers