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的掌握程度的代码
Dec 09 Javascript
突发奇想的一个jquery插件
Nov 19 Javascript
jquery使用remove()方法删除指定class子元素
Mar 26 Javascript
BootStrap中Tab页签切换实例代码
May 30 Javascript
原生JS查找元素的方法(推荐)
Nov 22 Javascript
实现JavaScript高性能的数据存储
Dec 11 Javascript
AngularJS constant和value区别详解
Feb 28 Javascript
JS实现读取xml内容并输出到div中的方法示例
Apr 19 Javascript
Vue.js 实现地址管理页面思路详解(地址添加、编辑、删除和设置默认地址)
Dec 11 Javascript
Vue清除定时器setInterval优化方案分享
Jul 21 Javascript
vue循环中点击选中再点击取消(单选)的实现
Sep 10 Javascript
vue 获取到数据但却渲染不到页面上的解决方法
Nov 19 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知道与问问的采集插件代码
2010/10/12 PHP
UCenter 批量添加用户的php代码
2012/07/17 PHP
跨浏览器PHP下载文件名中的中文乱码问题解决方法
2015/03/05 PHP
php简单生成随机数的方法
2015/07/30 PHP
PHP爬虫之百万级别知乎用户数据爬取与分析
2016/01/22 PHP
PHP简单留言本功能实现代码
2017/06/09 PHP
用javascript实现兼容IE7的类库 IE7_0_9.zip提供下载
2007/08/08 Javascript
JS实现模仿微博发布效果实例代码
2013/12/16 Javascript
jQuery判断复选框是否勾选的原理及示例
2014/05/21 Javascript
使用jQuery判断浏览器滚动条位置的方法
2016/05/30 Javascript
谈谈JavaScript的New关键字
2016/08/26 Javascript
AngularJS入门教程之过滤器用法示例
2016/11/02 Javascript
JavaScript简单拖拽效果(1)
2017/05/17 Javascript
JS实现批量上传文件并显示进度功能
2017/06/27 Javascript
详解vue.js的事件处理器v-on:click
2017/06/27 Javascript
深入浅析Vue不同场景下组件间的数据交流
2017/08/15 Javascript
shiro授权的实现原理
2017/09/21 Javascript
vue几个常用跨域处理方式介绍
2018/02/07 Javascript
vue2.0 实现导航守卫的具体用法(路由守卫)
2018/05/17 Javascript
JavaScript实现异步图像上传功能
2018/07/12 Javascript
JavaScript中AOP的实现与应用
2019/05/06 Javascript
Vue封装全局过滤器Filters的步骤
2020/09/16 Javascript
[02:50]【扭转乾坤,只此一招】DOTA2全新版本永雾林渊开启新篇章
2020/12/24 DOTA
python删除指定类型(或非指定)的文件实例详解
2015/07/06 Python
python爬取个性签名的方法
2018/06/17 Python
django创建简单的页面响应实例教程
2019/09/06 Python
HTML最新标准HTML5总结(必看)
2016/06/13 HTML / CSS
Timex手表官网:美国运动休闲手表品牌
2017/01/28 全球购物
美国最大的高尔夫发球时间预订网站:TeeOff.com
2018/03/28 全球购物
The Beach People美国:澳洲海滨奢华品牌
2018/07/05 全球购物
vue路由实现登录拦截
2021/03/24 Vue.js
大学生的创业计划书就该这么写
2014/01/30 职场文书
教师中国梦演讲稿
2014/04/23 职场文书
面试必备的求职信
2014/05/25 职场文书
请假条应该怎么写?
2019/06/24 职场文书
java中如何截取字符串最后一位
2022/07/07 Java/Android