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可配置循环左右滚动例子
Sep 09 Javascript
javascript计时器事件使用详解
Jan 07 Javascript
JQuery中DOM加载与事件执行实例分析
Jun 13 Javascript
JavaScript根据CSS的Media Queries来判断浏览设备的方法
May 10 Javascript
JavaScript sort数组排序方法和自我实现排序方法小结
Jun 06 Javascript
JavaScript之生成器_动力节点Java学院整理
Jun 30 Javascript
weex slider实现滑动底部导航功能
Aug 28 Javascript
超详细动手搭建一个VuePress 站点及开启PWA与自动部署的方法
Jan 27 Javascript
Node.js + express实现上传大文件的方法分析【图片、文本文件】
Mar 14 Javascript
Vue-cli项目部署到Nginx服务器的方法
Nov 01 Javascript
antd Select下拉菜单动态添加option里的内容操作
Nov 02 Javascript
微信小程序实现首页弹出广告
Dec 03 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加密解密的代码
2006/10/09 PHP
杏林同学录(三)
2006/10/09 PHP
php使用codebase生成随机数
2014/03/25 PHP
MySql数据库查询结果用表格输出PHP代码示例
2015/03/20 PHP
Swoole扩展的6种模式深入详解
2021/03/04 PHP
跟我学Nodejs(一)--- Node.js简介及安装开发环境
2014/05/20 NodeJs
JavaScript实现的Tween算法及缓冲特效实例代码
2015/11/03 Javascript
js命名空间写法示例
2015/12/18 Javascript
JavaScript隐式类型转换
2016/03/15 Javascript
JavaScript中各种引用类型的常用操作方法小结
2016/05/05 Javascript
javascript事件处理模型实例说明
2016/05/31 Javascript
js检测离开或刷新页面时表单数据是否更改的方法
2016/08/02 Javascript
原生Javascript插件开发实践
2017/01/18 Javascript
Bootstrap显示与隐藏简单实现代码
2017/03/06 Javascript
vue的token刷新处理的方法
2018/07/17 Javascript
vue中多个倒计时实现代码实例
2019/03/27 Javascript
详解50行代码,Node爬虫练手项目
2019/04/22 Javascript
Python用Bottle轻量级框架进行Web开发
2016/06/08 Python
python Django里CSRF 对应策略详解
2019/08/05 Python
Python实现检测文件的MD5值来查找重复文件案例
2020/03/12 Python
jupyter notebook oepncv 显示一张图像的实现
2020/04/24 Python
详解如何在pyqt中通过OpenCV实现对窗口的透视变换
2020/09/20 Python
Python 如何实现数据库表结构同步
2020/09/29 Python
python switch 实现多分支选择功能
2020/12/21 Python
Sephora丝芙兰印尼官方网站:购买化妆品和护肤品
2018/07/02 全球购物
应聘教师自荐信
2013/10/12 职场文书
旅游管理毕业生自荐书
2014/02/02 职场文书
采购类个人求职的自我评价
2014/02/18 职场文书
2014年高考决心书
2014/03/11 职场文书
爱国卫生月活动总结范文
2014/04/25 职场文书
美丽家庭事迹材料
2014/05/03 职场文书
社保转移委托书范本
2014/10/08 职场文书
三年级上册科学教学计划
2015/01/21 职场文书
给上级领导的感谢信
2015/01/22 职场文书
Python 使用dict实现switch的操作
2021/04/07 Python
nginx部署多前端项目的几种方法
2021/05/25 Servers