用javascript实现倒计时效果


Posted in Javascript onFebruary 09, 2021

用Javascript实现倒计时效果,供大家参考,具体内容如下

正在学习大前端中,有代码和思路不规范不正确的地方往多多包涵,感谢指教

在某些商城网站中,我们常常可以看见其网站或者app上有一个区域放的是倒计时,来用来提醒用户还有多少时间将会发生什么事情,下面我们用代码来对其进行实现

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <style>
 div {
  margin: 300px;
  border: 1px solid pink;
 }

 span {
  display: inline-block;
  width: 40px;
  height: 40px;
  background-color: blue;
  font-size: 20px;
  color: #fff;
  text-align: center;
  line-height: 40px;
 }
 </style>
</head>
<body>
<div>
 <span class="hour">1</span>
 <span class="minute">2</span>
 <span class="second">3</span>
</div>
<script>
 var hours=document.querySelector('.hour')
 var min=document.querySelector('.minute')
 var sce=document.querySelector('.second')
 var inputTime=+new Date('2021-2-8 16:40:00')
 //countDown()//先1调用,防止第一次刷新有空白
 //开启定时器,这是等了1000ms后才开启的定时器
 setInterval(countDown,1)
 function countDown() {
 var nowTime = +new Date(); // 返回的是当前时间总的毫秒数
 var times = (inputTime - nowTime) / 1000; // times是剩余时间总的秒数
 var h = parseInt(times / 60 / 60 % 24); //时
 h = h < 10 ? '0' + h : h;
 hours.innerHTML = h; // 把剩余的小时给 小时黑色盒子
 var m = parseInt(times / 60 % 60); // 分
 m = m < 10 ? '0' + m : m;
 min.innerHTML = m;
 var s = parseInt(times % 60); // 当前的秒
 s = s < 10 ? '0' + s : s;
 sce.innerHTML = s;
 }
</script>
</body>
</html>

演示效果:

用javascript实现倒计时效果

时间一秒一秒得倒计时

代码解释:

这里我把三个行内元素span放在了块元素div里面,由于行内元素不能改宽高,所以都换成行内块元素。

这里因为倒计时要修改的地方是三个span盒子,分别对应这小时,分钟,秒数所以获取这三个span的事件。然后用inputTime这个变量来接收我们的目的时间。

然后创建一个countDown为名字的函数。函数里面用nowTime这个变量来接收当前的时间。因为接收到的时间是以毫秒为单位,所以用一个变量times来接收目的时间和现在时间的时间差,然后再除以1000,因为1s=1000ms,这里就得到了剩余的秒数。

用h表示剩余的小时一天=24小时,一个小时=60分钟,1分钟=60s。所以这里用总的秒数/60/60%24就得到了剩余的小时数。然后为了让样式更好看,我们把显示小数设置为两位,这里用的是三元运算符:小时小于10?如果小于就在前面+‘0';如果大于10就只返回数字。并用h来进行接收,然后把h给hours这个盒子。下面的分钟和秒数都是一样的原理。
然后函数写好了,我们再用定时器来调用这个函数,间隔时间为1/1000ms。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
很可爱的输入框
Aug 03 Javascript
jQuery获取文本节点之 text()/val()/html() 方法区别
Mar 01 Javascript
PHP使用方法重载实现动态创建属性的get和set方法
Nov 17 Javascript
jQuery/CSS3图片特效插件整理推荐
Dec 07 Javascript
通过扫描二维码打开app的实现代码
Nov 10 Javascript
BootStrap组件之进度条的基本用法
Jan 19 Javascript
Node.js模块全局安装路径配置方法
May 17 Javascript
JS+H5 Canvas实现时钟效果
Jul 20 Javascript
如何为vue的项目添加单元测试
Dec 19 Javascript
vue使用codemirror的两种用法
Aug 27 Javascript
js 对象使用的小技巧实例分析
Nov 08 Javascript
JS面向对象编程——ES6 中class的继承用法详解
Mar 03 Javascript
javascript实现倒计时关闭广告
Feb 09 #Javascript
javascript实现固定侧边栏
Feb 09 #Javascript
JavaScript实现前端倒计时效果
Feb 09 #Javascript
Vue+Bootstrap实现简易学生管理系统
Feb 09 #Vue.js
JavaScript 获取滚动条位置并将页面滑动到锚点
Feb 08 #Javascript
详解Vue的七种传值方式
Feb 08 #Vue.js
Handtrack.js库实现实时监测手部运动(推荐)
Feb 08 #Javascript
You might like
PHP对字符串的递增运算分析
2010/08/08 PHP
两种设置php载入页面时编码的方法
2014/07/29 PHP
php面向对象基础详解【星际争霸游戏案例】
2020/01/23 PHP
PHP类的自动加载与命名空间用法实例分析
2020/06/05 PHP
影响jQuery使用的14个方面
2014/09/01 Javascript
JavaScript中变量声明有var和没var的区别示例介绍
2014/09/15 Javascript
jQuery浏览器CSS3特写兼容实例
2015/01/19 Javascript
Jsonp post 跨域方案
2015/07/06 Javascript
Javascript简单改变表单元素背景的方法
2015/07/15 Javascript
JS实现网页上随机产生超链接地址的方法
2015/11/09 Javascript
JS实用的带停顿的逐行文本循环滚动效果实例
2016/11/23 Javascript
关于foreach循环中遇到的问题小结
2017/05/08 Javascript
Javascript别踩白块儿(钢琴块儿)小游戏实现代码
2017/07/20 Javascript
vuejs事件中心管理组件间的通信详解
2017/08/09 Javascript
教你如何用Node实现API的转发(某音乐)
2019/09/20 Javascript
Vue数据双向绑定原理实例解析
2020/05/15 Javascript
Node.js API详解之 net模块实例分析
2020/05/18 Javascript
Python中方法链的使用方法
2016/02/23 Python
手把手教你用python抢票回家过年(代码简单)
2018/01/21 Python
PyTorch快速搭建神经网络及其保存提取方法详解
2018/04/28 Python
django多对多表的创建,级联删除及手动创建第三张表
2019/07/25 Python
Python 等分切分数据及规则命名的实例代码
2019/08/16 Python
Python爬虫实现的根据分类爬取豆瓣电影信息功能示例
2019/09/15 Python
python中threading开启关闭线程操作
2020/05/02 Python
让IE9以下版本的浏览器兼容HTML5的方法
2014/03/12 HTML / CSS
为什么UNION ALL比UNION快
2016/03/17 面试题
员工薪酬福利制度
2014/01/17 职场文书
十一酒店活动方案
2014/02/20 职场文书
好媳妇事迹材料
2014/12/24 职场文书
先进班集体事迹材料
2014/12/25 职场文书
六一亲子活动感想
2015/08/07 职场文书
新手入门Mysql--概念
2021/06/18 MySQL
springboot拦截器无法注入redisTemplate的解决方法
2021/06/27 Java/Android
基于HTML十秒做出淘宝页面
2021/10/24 HTML / CSS
python数据可视化使用pyfinance分析证券收益示例详解
2021/11/20 Python
CSS三大特性继承性、层叠性和优先级详解
2022/01/18 HTML / CSS