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 相关文章推荐
Firebug 字幕文件JSON地址获取代码
Oct 28 Javascript
jQuery 阴影插件代码分享
Jan 09 Javascript
兼容ie、firefox的图片自动缩放的css跟js代码分享
Jan 21 Javascript
原生javascript模仿win8等待提示圆圈进度条
Apr 24 Javascript
字段太多jquey快速清空表单内容方法
Aug 21 Javascript
文本框倒叙输入让输入框的焦点始终在最开始的位置
Sep 01 Javascript
JavaScript 实现打印,打印预览,打印设置
Dec 30 Javascript
jQuery中inArray方法注意事项分析
Jan 25 Javascript
jquery中键盘事件小结
Feb 24 Javascript
基于jquery日历价格、库存等设置插件
Jul 05 jQuery
vue增加强缓存和版本号的实现方法
May 01 Javascript
vue改变循环遍历后的数据实例
Nov 07 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 数组遍历的差异(array_diff 的实现)
2008/03/23 PHP
php 面试碰到过的问题 在此做下记录
2011/06/09 PHP
php 根据url自动生成缩略图并处理高并发问题
2014/01/23 PHP
PHP的APC模块实现上传进度条
2015/10/27 PHP
纯PHP代码实现支付宝批量付款
2015/12/24 PHP
获取当前网页document.url location.href区别总结
2008/05/10 Javascript
juqery 学习之三 选择器 简单 内容
2010/11/25 Javascript
Javascript 检测键盘按键信息及键码值对应介绍
2013/01/03 Javascript
javascript根据像素点取位置示例
2014/01/27 Javascript
JavaScript中的事件委托及好处
2016/07/12 Javascript
Mac下使用charles遇到的问题以及解决办法
2017/01/10 Javascript
webpack分离css单独打包的方法
2018/06/12 Javascript
vue在手机中通过本机IP地址访问webApp的方法
2018/08/15 Javascript
js自定义input文件上传样式
2018/10/26 Javascript
jQuery Ajax实现Select多级关联动态绑定数据的实例代码
2018/10/26 jQuery
JavaScript学习笔记之数组基本操作示例
2019/01/09 Javascript
javascript实现点击星星小游戏
2019/12/24 Javascript
Taro小程序自定义顶部导航栏功能的实现
2020/12/17 Javascript
[44:50]DOTA2上海特级锦标赛B组小组赛#2 VG VS Fnatic第二局
2016/02/26 DOTA
python计算书页码的统计数字问题实例
2014/09/26 Python
Python实现统计单词出现的个数
2015/05/28 Python
简单解决Python文件中文编码问题
2015/11/22 Python
python定向爬虫校园论坛帖子信息
2018/07/23 Python
pytorch制作自己的LMDB数据操作示例
2019/12/18 Python
django 数据库 get_or_create函数返回值是tuple的问题
2020/05/15 Python
PyTorch的torch.cat用法
2020/06/28 Python
Python根据URL地址下载文件并保存至对应目录的实现
2020/11/15 Python
基于第一个PhoneGap(cordova)的应用详解
2013/05/03 HTML / CSS
日本无添加化妆品:HABA
2016/08/18 全球购物
Shell如何接收变量输入
2016/08/06 面试题
自我评价范文点评
2013/12/04 职场文书
幼儿发展评估方案
2014/06/11 职场文书
建筑工程造价专业自荐信
2014/07/08 职场文书
小兵张嘎观后感300字
2015/06/03 职场文书
详解Redis在SpringBoot工程中的综合应用
2021/10/16 Redis
「SHOW BY ROCK!!」“雫シークレットマインド”组合单曲MV公开
2022/03/21 日漫