JavaScript实现前端网页版倒计时

使用原生JavaScript简单实现倒计时,供大家参考,具体内容如下

Posted in Javascript onMarch 24, 2021

效果

JavaScript实现前端网页版倒计时

代码

// An highlighted block
<!DOCTYPE html>
<html>
 
<head>
 <meta charset="utf-8">
 <title></title>
 
 <!-- css样式 -->
 <style type="text/css">
  * {
   margin: 0;
   padding: 0;
  }
 
  .onsell {
   height: 400px;
   width: 200px;
   border: 1px solid #F2F2F2;
   margin: 10px;
   box-shadow: 1px 2px 4px rgba(0, 0, 0, .2);
  }
 
  .box {
   /* display: none; */
   float: left;
   margin: 328px 34px 0;
  }
 
  .box div {
   position: relative;
   display: inline-block;
   width: 40px;
   height: 40px;
   background-color: #333;
   color: #fff;
   font-size: 20px;
   text-align: center;
   line-height: 40px;
   box-shadow: 1px 2px 4px rgba(0, 0, 0, .4);
  }
 </style>
 
</head>
 
<body>
 <!-- 要求:某商品在将来某一天进行促销一天,利用js制作倒计时效果: 时:分:秒 -->
 <div class="onsell">
  <div class="box">
   <div class="hour">00</div>
   <div class="minutes">00</div>
   <div class="seconds">00</div>
  </div>
 </div>
</body>
 
</html>
<script>
 window.onload = function () {
  let hour = document.querySelector('.hour')
  let minutes = document.querySelector('.minutes')
  let seconds = document.querySelector('.seconds')
 
  // 倒计时的时间戳 使用+将时间对象转为时间戳 等同于Date.now()
  let wantTime = +new Date('2021-3-17 18:00:00')
  countTime()
 
  let timer = setInterval(() => {
   countTime()
  }, 1000)
 
  function countTime() {
   let currentTime = +new Date()
   if (wantTime >= currentTime) {
    let times = (wantTime - currentTime) / 1000 // 总秒数 时间戳/1000 = 秒
    let remainDay = parseInt(times / 60 / 60 / 24) // 余数取整就是剩余的天数
    console.log(remainDay);
    if (remainDay === 0) {
     if(times < 1) {
     // 倒计时完毕
     // 这里触发操作
     }
     // 天数小于一天开始计时
     setTime(times)
    }
   } else {
    hour.innerHTML = '00'
    minutes.innerHTML = '00'
    seconds.innerHTML = '00'
   }
  }
 
 
  function setTime(time) {
 
   // 粗糙版
   let s = parseInt(time % 60)
   s = s < 10 ? '0' + s : s
   let m = parseInt(time / 60 % 60)
   m = m < 10 ? '0' + m : m
   let h = parseInt(time / 60 / 60 % 24)
   h = h < 10 ? '0' + h : h
   hour.innerHTML = h
   minutes.innerHTML = m
   seconds.innerHTML = s
 
  }
 
 }
</script>

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
javascript面向对象的方式实现的弹出层效果代码
Jan 28 Javascript
Javascript实现重力弹跳拖拽运动效果示例
Jun 28 Javascript
zTree插件之多选下拉菜单实例代码
Nov 06 Javascript
JS解析XML文件和XML字符串详解
Apr 17 Javascript
深入浅析JavaScript中prototype和proto的关系
Nov 15 Javascript
javascript字符串对象常用api函数小结(连接,替换,分割,转换等)
Sep 20 Javascript
javascript 解决浏览器不支持的问题
Sep 24 Javascript
node.js入门学习之url模块
Feb 25 Javascript
jQuery控制元素隐藏和显示
Mar 03 Javascript
Angular ui-roter 和AngularJS 通过 ocLazyLoad 实现动态(懒)加载模块和依赖
Nov 25 Javascript
微信小程序实现商城倒计时
Nov 01 Javascript
JS 逻辑判断不要只知道用 if-else 和 switch条件判断(小技巧)
May 27 Javascript
vue路由实现登录拦截
vue项目实现分页效果
Mar 24 #Vue.js
jQuery treeview树形结构应用
Mar 24 #jQuery
js实现弹框效果
Mar 24 #Javascript
vue实现倒计时功能
Mar 24 #Vue.js
Ajax实现页面无刷新留言效果
利用promise及参数解构封装ajax请求的方法
You might like
C# Assembly类访问程序集信息
2009/06/13 PHP
PHP PDO操作MySQL基础教程
2017/06/05 PHP
Laravel核心解读之异常处理的实践过程
2019/02/24 PHP
javascript实现二分查找法实现代码
2007/11/12 Javascript
javascript十个最常用的自定义函数(中文版)
2009/09/07 Javascript
javascript中字符串的定义示例代码
2013/12/19 Javascript
Javascript中arguments用法实例分析
2015/06/13 Javascript
ionic2 tabs使用 Modal底部tab弹出框
2016/12/30 Javascript
JQuery Dialog对话框 不能通过Esc关闭的原因分析及解决办法
2017/01/18 Javascript
JS实现仿UC浏览器前进后退效果的实例代码
2017/07/17 Javascript
Vue+Flask实现简单的登录验证跳转的示例代码
2018/01/13 Javascript
nodejs 十六进制字符串型数据与btye型数据相互转换
2018/07/30 NodeJs
vue+axios+mock.js环境搭建的方法步骤
2018/08/28 Javascript
vue实现打印功能的两种方法
2018/09/07 Javascript
Vue是怎么渲染template内的标签内容的
2020/06/05 Javascript
[06:07]DOTA2-DPC中国联赛3月5日Recap集锦
2021/03/11 DOTA
Python实现简单拆分PDF文件的方法
2015/07/30 Python
Python和Java进行DES加密和解密的实例
2018/01/09 Python
python实现在pandas.DataFrame添加一行
2018/04/04 Python
python实现得到当前登录用户信息的方法
2019/06/21 Python
Python发送邮件的实例代码讲解
2019/10/16 Python
Pytorch中.new()的作用详解
2020/02/18 Python
使用pth文件添加Python环境变量方式
2020/05/26 Python
Pandas对DataFrame单列/多列进行运算(map, apply, transform, agg)
2020/06/14 Python
基于 HTML5 WebGL 实现的医疗物流系统
2019/10/08 HTML / CSS
戴森美国官网:Dyson美国
2016/09/11 全球购物
Parfume Klik丹麦:香水网上商店
2018/07/10 全球购物
施华洛世奇匈牙利官网:SWAROVSKI匈牙利
2019/07/06 全球购物
事假请假条范文
2014/04/11 职场文书
项目经理任命书
2014/06/04 职场文书
创建文明城市标语
2014/06/16 职场文书
高中运动会广播稿
2014/09/16 职场文书
地陪导游欢迎词
2015/01/26 职场文书
2019学校请假条格式及范文
2019/06/25 职场文书
MySQL连表查询分组去重的实现示例
2021/07/01 MySQL
Python实现批量将文件复制到新的目录中再修改名称
2022/04/12 Python