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下过滤数组重复值的代码
Sep 10 Javascript
jQuery学习4 浏览器的事件模型
Feb 07 Javascript
JS简单操作select和dropdownlist实例
Nov 26 Javascript
JavaScript的Date()方法使用详解
Jun 09 Javascript
Bootstrap复选框和单选按钮美化插件(推荐)
Nov 23 Javascript
Bootstrap笔记之缩略图、警告框实例详解
Mar 09 Javascript
vue2.0全局组件之pdf详解
Jun 26 Javascript
JavaScript实现三级联动效果
Jul 15 Javascript
Vue框架里使用Swiper的方法示例
Sep 20 Javascript
PM2自动部署代码步骤流程总结
Dec 10 Javascript
vue实现压缩图片预览并上传功能(promise封装)
Jan 10 Javascript
javascript 原型与原型链的理解及实例分析
Nov 23 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
Zend引擎的发展 [15]
2006/10/09 PHP
joomla组件开发入门教程
2016/05/04 PHP
php文件系统处理方法小结
2016/05/23 PHP
Jquery Ajax.ashx 高效分页实现代码
2009/10/20 Javascript
js关于精确计算和数值格式化以及直接引js文件
2014/01/28 Javascript
使用angular写一个hello world
2015/01/23 Javascript
JS与jQuery遍历Table所有单元格内容的方法
2015/12/07 Javascript
jQuery实现鼠标跟随提示层效果代码(可显示文本,Div,Table,Html等)
2016/04/18 Javascript
JS获取子窗口中返回的数据实现方法
2016/05/28 Javascript
详述 Sublime Text 打开 GBK 格式中文乱码的解决方法
2017/10/26 Javascript
对mac下nodejs 更新到最新版本的最新方法(推荐)
2018/05/17 NodeJs
解决echarts的多个折现数据出现坐标和值对不上的问题
2018/12/28 Javascript
[04:51]TI10典藏宝瓶Ⅱ外观视频展示
2020/08/15 DOTA
Python列表(list)、字典(dict)、字符串(string)基本操作小结
2014/11/28 Python
给Python的Django框架下搭建的BLOG添加RSS功能的教程
2015/04/08 Python
学习python类方法与对象方法
2016/03/15 Python
Python栈算法的实现与简单应用示例
2017/11/01 Python
详解python中的装饰器
2018/07/10 Python
Python类中方法getitem和getattr详解
2019/08/30 Python
Python用input输入列表的实例代码
2020/02/07 Python
Keras自定义实现带masking的meanpooling层方式
2020/06/16 Python
tensorflow下的图片标准化函数per_image_standardization用法
2020/06/30 Python
CSS3中Transform动画属性用法详解
2016/07/04 HTML / CSS
数据库的约束含义
2012/09/09 面试题
会计学个人自荐信模板
2013/12/13 职场文书
毕业生求职信范文
2014/06/29 职场文书
捐款感谢信
2015/01/20 职场文书
看雷锋电影观后感
2015/06/10 职场文书
关于践行三严三实的心得体会
2016/01/05 职场文书
护士心得体会范文
2016/01/25 职场文书
利用ajax+php实现商品价格计算
2021/03/31 PHP
详解Python常用的魔法方法
2021/06/03 Python
vue项目多环境配置(.env)的实现
2021/07/21 Vue.js
Python  lambda匿名函数和三元运算符
2022/04/19 Python
MySQL选择合适的备份策略和备份工具
2022/06/01 MySQL
Java完整实现记事本代码
2022/06/16 Java/Android