用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 相关文章推荐
js 设置缓存及获取设置的缓存
May 08 Javascript
javascript实现根据身份证号读取相关信息
Dec 17 Javascript
jQuery中:image选择器用法实例
Jan 03 Javascript
js去字符串前后空格的实现方法
Feb 26 Javascript
Vuejs第六篇之Vuejs与form元素实例解析
Sep 05 Javascript
fullpage.js全屏滚动插件使用实例
Sep 06 Javascript
js 事件的传播机制(实例讲解)
Jul 20 Javascript
JavaScript多线程运行库Nexus.js详解
Dec 22 Javascript
jQuery控制input只能输入数字和两位小数的方法
May 16 jQuery
jQuery实现图片随机切换、抽奖功能(实例代码)
Oct 23 jQuery
nuxt配置通过指定IP和端口访问的实现
Jan 08 Javascript
让mocha支持ES6模块的方法实现
Jan 14 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
escape unescape的php下的实现方法
2007/04/27 PHP
php单例模式实现(对象只被创建一次)
2012/12/05 PHP
PHP随机数函数rand()与mt_rand()的讲解
2019/03/25 PHP
WebGame《逆转裁判》完整版 代码下载(1月24日更新)
2007/01/29 Javascript
js 文件引入实现代码
2010/04/23 Javascript
javascript面向对象之Javascript 继承
2010/05/04 Javascript
JavaScript中各种编码解码函数的区别和注意事项
2010/08/19 Javascript
也说JavaScript中String类的replace函数
2011/09/22 Javascript
ie8本地图片上传预览示例代码
2014/01/12 Javascript
Javascript中使用A标签获取当前目录的绝对路径方法
2015/03/02 Javascript
jQuery实现类似淘宝网图片放大效果的方法
2015/07/08 Javascript
JS实现按比例缩放图片的方法(附C#版代码)
2015/12/08 Javascript
Jquery zTree 树控件异步加载操作
2016/02/25 Javascript
Node.js程序中的本地文件操作用法小结
2016/03/06 Javascript
JS封装的选项卡TAB切换效果示例
2016/09/20 Javascript
实例解析jQuery工具函数
2016/12/01 Javascript
jquery——九宫格大转盘抽奖实例
2017/01/16 Javascript
微信小程序 详解页面跳转与返回并回传数据
2017/02/13 Javascript
jQuery模拟下拉框选择对应菜单的内容
2017/03/07 Javascript
关于foreach循环中遇到的问题小结
2017/05/08 Javascript
[js高手之路]寄生组合式继承的优势详解
2017/08/28 Javascript
jQuery阻止事件冒泡实例分析
2018/07/03 jQuery
vue动态配置模板 'component is'代码
2019/07/04 Javascript
vue进入页面时不在顶部,检测滚动返回顶部按钮问题及解决方法
2019/10/30 Javascript
[00:32]2018DOTA2亚洲邀请赛Liquid出场
2018/04/03 DOTA
python3批量删除豆瓣分组下的好友的实现代码
2016/06/07 Python
Python爬虫beautifulsoup4常用的解析方法总结
2019/02/25 Python
浅谈PYTHON 关于文件的操作
2019/03/19 Python
大学生的四年学习自我评价
2013/12/13 职场文书
预防传染病方案
2014/06/14 职场文书
演讲比赛的活动方案
2014/08/28 职场文书
学校社团活动总结
2015/05/07 职场文书
美丽心灵观后感
2015/06/01 职场文书
爱心捐款倡议书:点燃希望,传递温暖
2019/11/04 职场文书
ThinkPHP5和ThinkPHP6的区别
2021/03/31 PHP
Python中zipfile压缩包模块的使用
2021/05/14 Python