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 查找select ,并触发事件的实现代码
Mar 30 Javascript
js鼠标滑过图片震动特效的方法
Feb 17 Javascript
jQuery实现的Div窗口震动效果实例
Aug 07 Javascript
cocos2dx骨骼动画Armature源码剖析(一)
Sep 08 Javascript
javascript实现checkbox复选框实例代码
Jan 10 Javascript
深究AngularJS中ng-drag、ng-drop的用法
Jun 12 Javascript
vue.js 微信支付前端代码分享
Feb 10 Javascript
React Hooks的深入理解与使用
Nov 12 Javascript
如何使用electron-builder及electron-updater给项目配置自动更新
Dec 24 Javascript
微信小程序实现日期格式化和倒计时
Nov 01 Javascript
微信小程序3种位置API的使用方法详解
Aug 05 Javascript
layui 对弹窗 form表单赋值的实现方法
Sep 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
全国FM电台频率大全 - 18 湖南省
2020/03/11 无线电
PHP的FTP学习(一)[转自奥索]
2006/10/09 PHP
驱动事件的addEvent.js代码
2007/03/27 Javascript
使图片旋转的3种解决方案
2013/11/21 Javascript
javascript中parseInt()函数的定义和用法分析
2014/12/20 Javascript
jquery渐隐渐显的图片幻灯闪烁切换实现方法
2015/02/26 Javascript
javascript对象的创建和访问
2016/03/08 Javascript
BootStrap智能表单实战系列(八)表单配置json详解
2016/06/13 Javascript
jquery实现界面无刷新加载登陆注册
2016/07/30 Javascript
JS实现HTML表格排序功能
2016/08/05 Javascript
JQuery手速测试小游戏实现思路详解
2016/09/20 Javascript
js图片加载效果实例代码(延迟加载+瀑布流加载)
2017/05/12 Javascript
NodeJS实现微信公众号关注后自动回复功能
2017/05/31 NodeJs
JavaScript实现各种排序的代码详解
2017/08/28 Javascript
菊花转动的jquery加载动画效果
2018/08/19 jQuery
Vue核心概念Action的总结
2019/01/18 Javascript
vue配置接口域名方法总结
2019/05/12 Javascript
详解vue中v-on事件监听指令的基本用法
2020/07/22 Javascript
vue 解决mintui弹窗弹起来,底部页面滚动bug问题
2020/11/12 Javascript
[01:29]Ti4循环赛第三日精彩回顾
2014/07/13 DOTA
python检测服务器是否正常
2014/02/16 Python
分析Python中解析构建数据知识
2018/01/20 Python
Python实现的rsa加密算法详解
2018/01/24 Python
django允许外部访问的实例讲解
2018/05/14 Python
python 解决动态的定义变量名,并给其赋值的方法(大数据处理)
2018/11/10 Python
python3+selenium实现qq邮箱登陆并发送邮件功能
2019/01/23 Python
什么是Python中的顺序表
2020/06/02 Python
美国殿堂级滑板、冲浪、滑雪服装品牌:Volcom(钻石)
2017/04/20 全球购物
酒店公关部经理岗位职责
2013/11/24 职场文书
应届行政管理专业个人自我评价
2013/12/28 职场文书
土木工程专业个人求职信
2013/12/30 职场文书
大二自我鉴定
2014/01/31 职场文书
精神文明单位申报材料
2014/05/02 职场文书
Python实战之OpenCV实现猫脸检测
2021/06/26 Python
PYTHON InceptionV3模型的复现详解
2022/05/06 Python
spring boot实现文件上传
2022/08/14 Java/Android