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 相关文章推荐
Dojo之路:如何利用Dojo实现Drag and Drop效果
Apr 10 Javascript
清空上传控件input file的值
Jul 03 Javascript
JavaScript中的作用域链和闭包
Jun 30 Javascript
js中Math之random,round,ceil,floor的用法总结
Dec 26 Javascript
jquery使用remove()方法删除指定class子元素
Mar 26 Javascript
理解javascript中的原型和原型链
Jul 30 Javascript
谈谈我对JavaScript DOM事件的理解
Dec 18 Javascript
jqGrid用法汇总(全经典)
Jun 28 Javascript
jQuery Masonry瀑布流布局神器使用详解
May 25 jQuery
js+html5实现手机九宫格密码解锁功能
Jul 30 Javascript
Koa日志中间件封装开发详解
Mar 09 Javascript
JavaScript复制变量三种方法实例详解
Jan 09 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电台频率大全 - 28 甘肃省
2020/03/11 无线电
ueditor 1.2.6 使用方法说明
2013/07/24 PHP
php PDO实现的事务回滚示例
2017/03/23 PHP
PHP自定义错误处理的方法分析
2018/12/19 PHP
AJAX跨域请求json数据的实现方法
2013/11/11 Javascript
基于jQuery实现发送短信验证码后的倒计时功能(无视页面关闭)
2016/09/02 Javascript
js实现String.Fomat的实例代码
2016/09/02 Javascript
JS防止网页被嵌入iframe框架的方法分析
2016/09/13 Javascript
字太多用...代替的方法(两种)
2017/03/15 Javascript
Vue实现动态响应数据变化
2017/04/28 Javascript
详解Vue.use自定义自己的全局组件
2017/06/14 Javascript
vue下跨域设置的相关介绍
2017/08/26 Javascript
原生js实现仿window10系统日历效果的实例
2017/10/31 Javascript
js判断文件类型大小并给出提示的实现方法
2018/01/03 Javascript
详解layui弹窗父子窗口之间传参数的方法
2018/01/16 Javascript
Vue实现美团app的影院推荐选座功能【推荐】
2018/08/29 Javascript
vue 项目接口管理的实现
2019/01/17 Javascript
微信小程序学习笔记之登录API与获取用户信息操作图文详解
2019/03/29 Javascript
对web.py设置favicon.ico的方法详解
2018/12/04 Python
将matplotlib绘图嵌入pyqt的方法示例
2020/01/08 Python
详解css3 flex弹性盒自动铺满写法
2020/09/17 HTML / CSS
HTML5画渐变背景图片并自动下载实现步骤
2013/11/18 HTML / CSS
英国厨房与餐具用品为主的设计品牌:Joseph Joseph
2018/04/26 全球购物
如何通过 CSS 写出火焰效果
2021/03/24 HTML / CSS
综合实践教学反思
2014/01/31 职场文书
班组长竞聘书
2014/03/31 职场文书
本科生就业推荐信
2014/05/19 职场文书
煤矿安全生产标语
2014/06/06 职场文书
小学社团活动总结
2014/06/27 职场文书
沈阳故宫导游词
2015/01/31 职场文书
《少年闰土》教学反思
2016/02/18 职场文书
2016见义勇为事迹材料汇总
2016/03/01 职场文书
文书工作总结(范文)
2019/07/11 职场文书
手残删除python之后的补救方法
2021/06/26 Python
mysql5.7的安装及Navicate长久免费使用的实现过程
2021/11/17 MySQL
Java练习之潜艇小游戏的实现
2022/03/16 Java/Android