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 相关文章推荐
javascript写的一个链表实现代码
Oct 25 Javascript
node.js中的fs.appendFile方法使用说明
Dec 17 Javascript
jquery实现多屏多图焦点图切换特效的方法
May 04 Javascript
BootStrap的弹出框(Popover)支持鼠标移到弹出层上弹窗层不隐藏的原因及解决办法
Apr 03 Javascript
Vue 短信验证码组件开发详解
Feb 14 Javascript
Angularjs分页查询的实现
Feb 24 Javascript
js中document.write和document.writeln的区别
Mar 11 Javascript
JavaScript中的回调函数实例讲解
Jan 27 Javascript
微信小程序搜索功能(附:小程序前端+PHP后端)
Feb 28 Javascript
angular异步验证防抖踩坑实录
Dec 01 Javascript
详细分析Node.js 模块系统
Jun 28 Javascript
JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等属性学习笔记
Jul 15 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
Terran历史背景
2020/03/14 星际争霸
使用php实现截取指定长度
2013/08/06 PHP
php实现HTML实体编号与非ASCII字符串相互转换类实例
2016/11/02 PHP
PHP简单留言本功能实现代码
2017/06/09 PHP
php生出随机字符串
2017/07/06 PHP
用javascript实现的图片马赛克后显示并切换加文字功能
2007/04/21 Javascript
比较详细的关于javascript中void(0)的具体含义解释
2007/08/02 Javascript
JavaScript 学习笔记(十一)
2010/01/19 Javascript
jQuery关于导航条背景切换效果实现示例
2013/09/04 Javascript
Javascript的&amp;&amp;和||的另类用法
2014/07/23 Javascript
JavaScript学习笔记整理之引用类型
2016/01/22 Javascript
纯JS代码实现隔行变色鼠标移入高亮
2016/11/23 Javascript
JS公共小方法之判断对象是否为domElement的实例
2016/11/25 Javascript
js实现交通灯效果
2017/01/13 Javascript
jQuery插件DataTables分页开发心得体会
2017/08/22 jQuery
jQuery zTree树插件的使用教程
2019/08/16 jQuery
解决使用layui对select append元素无效或者未及时更新的问题
2019/09/18 Javascript
layui--select使用以及下拉框实现键盘选择的例子
2019/09/24 Javascript
javascript 高级语法之继承的基本使用方法示例
2019/11/11 Javascript
vue-quill-editor的使用及个性化定制操作
2020/08/04 Javascript
Vue利用localStorage本地缓存使页面刷新验证码不清零功能的实现
2020/09/04 Javascript
[01:10:58]KG vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
详解Python读取配置文件模块ConfigParser
2017/05/11 Python
Python中元组,列表,字典的区别
2017/05/21 Python
Python语言实现百度语音识别API的使用实例
2017/12/13 Python
python OpenCV学习笔记实现二维直方图
2018/02/08 Python
python区分不同数据类型的方法
2019/10/14 Python
pytorch模型存储的2种实现方法
2020/02/14 Python
详解appium自动化测试工具(monitor、uiautomatorviewer)
2021/01/27 Python
CSS3的column-fill属性对齐列内容高度的用法详解
2016/07/01 HTML / CSS
详解通过focusout事件解决IOS键盘收起时界面不归位的问题
2019/07/18 HTML / CSS
阿姆斯特丹城市卡:Amsterdam Pass
2019/12/01 全球购物
在Ajax应用中信息是如何在浏览器和服务器之间传递的
2016/05/31 面试题
《小壁虎借尾巴》教学反思
2014/02/16 职场文书
2014学习优秀共产党员先进事迹材料思想汇报
2014/09/14 职场文书
运动会100米广播稿
2015/08/19 职场文书