用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 相关文章推荐
一个多次搜索+多次传值的解决方案
Jan 20 Javascript
基于jQuery的实现简单的分页控件
Oct 10 Javascript
javascript中判断一个值是否在数组中并没有直接使用
Dec 17 Javascript
JS实现两表格里数据来回转移的方法
May 28 Javascript
JavaScript对Cookie进行读写操作实例
Jul 25 Javascript
JavaScript中获取纯正的undefined的方法
Mar 06 Javascript
为jQuery-easyui的tab组件添加右键菜单功能的简单实例
Oct 10 Javascript
Angular2使用Angular-CLI快速搭建工程(二)
May 21 Javascript
详解JS构造函数中this和return
Sep 16 Javascript
vue axios请求频繁时取消上一次请求的方法
Nov 10 Javascript
ES6 新增的创建数组的方法(小结)
Aug 01 Javascript
微信小程序 根据不同用户切换不同TabBar
Apr 21 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
收音机频率指针指示不准确和灵敏度低问题
2021/03/02 无线电
在IIS上安装PHP4.0正式版
2006/10/09 PHP
php 注释规范
2012/03/29 PHP
PHP的简易冒泡法代码分享
2012/08/28 PHP
php动态绑定变量的用法
2015/06/16 PHP
PHP实现基本留言板功能原理与步骤详解
2020/03/26 PHP
javascript模拟select,jselect的方法实现
2012/11/08 Javascript
JavaScript动态操作表格实例(添加,删除行,列及单元格)
2013/11/25 Javascript
jQuery实现统计复选框选中数量
2014/11/24 Javascript
dreamweaver 8实现Jquery自动提示
2014/12/04 Javascript
jQuery实现字符串按指定长度加入特定内容的方法
2015/03/11 Javascript
jQuery使用slideUp方法实现控制元素缓慢收起
2015/03/27 Javascript
jQuery代码实现对话框右上角菜单带关闭×
2016/05/03 Javascript
jQuery使用正则表达式限制文本框只能输入数字
2016/06/18 Javascript
AngularJS控制器详解及示例代码
2016/08/16 Javascript
解析javascript图片懒加载与预加载的分析总结
2016/10/27 Javascript
vue-router 学习快速入门
2017/03/01 Javascript
BootStrap Validator 根据条件在JS中添加或移除校验操作
2017/10/12 Javascript
jQuery中库的引用方法
2018/01/06 jQuery
浅析vue给不同环境配置不同打包命令
2018/08/17 Javascript
element-ui 设置菜单栏展开的方法
2018/08/22 Javascript
浅谈javascript中的prototype和__proto__的理解
2019/04/07 Javascript
JS实现小星星特效
2019/12/24 Javascript
Django框架中render_to_response()函数的使用方法
2015/07/16 Python
python基于pygame实现响应游戏中事件的方法(附源码)
2015/11/11 Python
详谈Python基础之内置函数和递归
2017/06/21 Python
python实现多张图片拼接成大图
2019/01/15 Python
pytorch梯度剪裁方式
2020/02/04 Python
N:Philanthropy官网:美国洛杉矶基础款服装
2020/06/09 全球购物
应届生船舶驾驶求职信
2013/10/19 职场文书
楼面部长岗位职责范本
2014/02/14 职场文书
移交协议书
2014/08/19 职场文书
村安全生产责任书
2014/08/25 职场文书
演讲开场白和结束语
2015/05/29 职场文书
初三化学教学反思
2016/02/22 职场文书
一波干货,会议主持词开场白范文
2019/05/06 职场文书