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中获得父窗口链接getParent方法以及各种打开窗口的方法
Jun 19 Javascript
juery框架写的弹窗效果适合新手
Nov 27 Javascript
jq实现酷炫的鼠标经过图片翻滚效果
Mar 12 Javascript
浅谈Jquery为元素绑定事件
Apr 27 Javascript
Javascript生成带参数的二维码示例
Oct 10 Javascript
Angular.js中$apply()和$digest()的深入理解
Oct 13 Javascript
JS中作用域和变量提升(hoisting)的深入理解
Oct 31 Javascript
基于 Vue.js 2.0 酷炫自适应背景视频登录页面实现方式
Jan 17 Javascript
vue中锚点的三种方法
Jul 06 Javascript
微信打开网址添加在浏览器中打开提示的办法
May 20 Javascript
深入理解令牌认证机制(token)
Aug 22 Javascript
jenkins自动构建发布vue项目的方法步骤
Jan 04 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
怎样在UNIX系统下安装MySQL
2006/10/09 PHP
php使用base64加密解密图片示例分享
2014/01/20 PHP
通过Email发送PHP错误的方法
2015/07/20 PHP
windows下apache搭建php开发环境
2015/08/27 PHP
PHP使用DOM和simplexml读取xml文档的方法示例
2017/02/08 PHP
javascript 鼠标悬浮图片显示原图 移出鼠标后原图消失(多图)
2009/12/28 Javascript
javascript qq右下角滑出窗口 sheyMsg
2010/03/21 Javascript
jquery获取tr并更改tr内容示例代码
2014/02/13 Javascript
AngularJS入门教程之控制器详解
2016/07/27 Javascript
AngularJs bootstrap搭载前台框架——基础页面
2016/09/01 Javascript
AngularJS ng-repeat数组有重复值的解决方法
2016/10/23 Javascript
纯js实现html转pdf的简单实例(推荐)
2017/02/16 Javascript
微信小程序中的canvas 文字断行和省略号显示功能的处理方法
2018/11/14 Javascript
JavaScript从原型到原型链深入理解
2019/06/03 Javascript
WEB前端性能优化的7大手段详解
2020/02/04 Javascript
JS代码检查工具ESLint介绍与使用方法
2020/02/04 Javascript
javascript实现贪吃蛇经典游戏
2020/04/10 Javascript
ES6对象操作实例详解
2020/05/23 Javascript
python分析nignx访问日志脚本分享
2015/02/26 Python
理解生产者消费者模型及在Python编程中的运用实例
2016/06/26 Python
利用Python画ROC曲线和AUC值计算
2016/09/19 Python
Python 常用的安装Module方式汇总
2017/05/06 Python
Python 爬虫图片简单实现
2017/06/01 Python
python绘制立方体的方法
2018/07/02 Python
通过python将大量文件按修改时间分类的方法
2018/10/17 Python
pytorch 加载(.pth)格式的模型实例
2019/08/20 Python
python Matplotlib数据可视化(1):简单入门
2020/09/30 Python
pyx文件 生成pyd 文件用于 cython调用的实现
2021/03/04 Python
STUBHUB日本:购买和出售全球活动门票
2018/07/01 全球购物
公共汽车、火车和飞机票的通用在线预订和销售平台:INFOBUS
2019/11/30 全球购物
全球最受追捧的运动服品牌领先数字目的地:Stylerunner
2020/11/25 全球购物
保密承诺书
2014/03/27 职场文书
2014年话务员工作总结
2014/11/19 职场文书
2015年试用期自我评价范文
2015/03/10 职场文书
幼儿园见习总结
2015/06/23 职场文书
sentinel支持的redis高可用集群配置详解
2022/04/01 Redis