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 相关文章推荐
js onload处理html页面加载之后的事件
Oct 30 Javascript
JavaScript函数的4种调用方法详解
Apr 22 Javascript
Javascript限制网页只能在微信内置浏览器中访问
Nov 09 Javascript
深入解析JavaScript中的数字对象与字符串对象
Oct 21 Javascript
基于javascript实现右下角浮动广告效果
Jan 08 Javascript
AngularJS中isolate scope的用法分析
Nov 22 Javascript
JavaScript实现的CRC32函数示例
Nov 23 Javascript
微信小程序实现顶部选项卡(swiper)
Jun 19 Javascript
jQuery实现弹出层效果
Dec 10 jQuery
Node.js API详解之 assert模块用法实例分析
May 26 Javascript
何时/使用 Vue3 render 函数的教程详解
Jul 25 Javascript
vuex页面刷新导致数据丢失的解决方案
Dec 10 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
基于PHP服务端图片生成缩略图的方法详解
2013/06/20 PHP
30个精美的jQuery幻灯片效果插件和教程
2011/08/23 Javascript
高性能Javascript笔记 数据的存储与访问性能优化
2012/08/02 Javascript
jquery中选择块并改变属性值的方法
2013/07/31 Javascript
屏蔽script注入小例子
2013/11/12 Javascript
JS中使用apply、bind实现为函数或者类传入动态个数的参数
2016/04/26 Javascript
浅谈JavaScript中的分支结构
2016/07/01 Javascript
JavaScript奇技淫巧44招【实用】
2016/12/11 Javascript
JS打开摄像头并截图上传示例
2017/02/18 Javascript
BootStrap selectpicker后台动态绑定数据
2017/06/01 Javascript
使用JS和canvas实现gif动图的停止和播放代码
2017/09/01 Javascript
zTree异步加载展开第一级节点的实现方法
2017/09/05 Javascript
Vue 2.0入门基础知识之内部指令详解
2017/10/15 Javascript
详解如何在angular2中获取节点
2017/11/23 Javascript
JQuery常用简单动画操作方法回顾与总结
2019/12/07 jQuery
Vue+abp微信扫码登录的实现代码示例
2020/01/06 Javascript
Node.js 中如何收集和解析命令行参数
2021/01/08 Javascript
[01:09:23]KG vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
实践Python的爬虫框架Scrapy来抓取豆瓣电影TOP250
2016/01/20 Python
Python中的条件判断语句基础学习教程
2016/02/07 Python
Python语言的面相对象编程方式初步学习
2016/03/12 Python
深入理解Python中的内置常量
2017/05/20 Python
python将数组n等分的实例
2019/12/02 Python
一款CSS3实现多功能下拉菜单(带分享按)的教程
2014/11/05 HTML / CSS
HTML5全屏(Fullscreen)API详细介绍
2015/04/24 HTML / CSS
德国最大的网上足球商店:11teamsports
2019/09/11 全球购物
C&A巴西网上商店:时尚、衣服、手机和鞋子
2020/06/07 全球购物
十岁生日家长答谢词
2014/01/17 职场文书
学校招生宣传广告词
2014/03/19 职场文书
客运企业隐患排查工作方案
2014/06/06 职场文书
商场父亲节活动方案
2014/08/27 职场文书
学校查摆问题整改措施
2014/09/28 职场文书
审计局2014法制宣传日活动总结
2014/11/01 职场文书
2014年个人工作总结范文
2014/11/07 职场文书
导游词之无锡丝业博物馆
2019/11/12 职场文书
Elasticsearch 索引操作和增删改查
2022/04/19 Python