用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 相关文章推荐
破除网页鼠标右键被禁用的绝招大全
Dec 27 Javascript
jQuery表格行换色的三种实现方法
Jun 27 Javascript
js判断ie版本号的简单实现代码
Mar 05 Javascript
javascript学习笔记之10个原生技巧
May 21 Javascript
预防网页挂马的方法总结
Nov 03 Javascript
svg动画之动态描边效果
Feb 22 Javascript
js 客户端打印html 并且去掉页眉、页脚的实例
Nov 03 Javascript
Vue.set() this.$set()引发的视图更新思考及注意事项
Aug 30 Javascript
微信小程序顶部导航栏滑动tab效果
Jan 28 Javascript
AI小程序之语音听写来了,十分钟掌握百度大脑语音听写全攻略
Mar 13 Javascript
解决新建一个vue项目过程中遇到的问题
Oct 22 Javascript
用JS创建一个录屏功能
Nov 11 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 手机归属地查询 api
2010/02/08 PHP
php数据库抽象层 PDO
2011/05/07 PHP
PHP中使用curl伪造IP的简单方法
2015/08/07 PHP
yii框架使用分页的方法分析
2019/07/25 PHP
读jQuery之九 一些瑕疵说明
2011/06/21 Javascript
js实现按钮加背景图片常用方法
2014/11/01 Javascript
JS获得图片alt信息的方法
2015/04/01 Javascript
javascript运动效果实例总结(放大缩小、滑动淡入、滚动)
2016/01/08 Javascript
解析Node.js异常处理中domain模块的使用方法
2016/02/16 Javascript
JavaScipt中栈的实现方法
2016/02/17 Javascript
asp.net+jquery.form实现图片异步上传的方法(附jquery.form.js下载)
2016/05/05 Javascript
原生js实现ajax方法(超简单)
2016/09/20 Javascript
js面向对象实现canvas制作彩虹球喷枪效果
2016/09/24 Javascript
Bootstrap Table从服务器加载数据进行显示的实现方法
2016/09/29 Javascript
JS实现元素上下左右移动效果
2017/10/18 Javascript
实现div内部滚动条滚动到底部和顶部的代码
2017/11/15 Javascript
JS实现非首屏图片延迟加载的示例
2018/01/06 Javascript
详解angular2 控制视图的封装模式
2018/12/27 Javascript
基于Vue 实现一个中规中矩loading组件
2019/04/03 Javascript
python处理按钮消息的实例详解
2017/07/11 Python
python opencv 直方图反向投影的方法
2018/02/24 Python
PyQt5的PyQtGraph实践系列3之实时数据更新绘制图形
2019/05/13 Python
pyqt5 实现工具栏文字图片同时显示
2019/06/13 Python
Python实现区域填充的示例代码
2021/02/03 Python
中国专业的综合网上购物商城:京东
2016/08/02 全球购物
Rodd & Gunn澳大利亚官网:新西兰男装品牌
2018/09/25 全球购物
澳大利亚宠物食品和用品商店:PETstock
2020/01/02 全球购物
澳大利亚在线购买葡萄酒:The Wine Collective
2020/02/20 全球购物
安全检查管理制度
2014/02/02 职场文书
平安建设工作方案
2014/06/02 职场文书
资料员岗位职责
2015/02/10 职场文书
2015迎新晚会开场白
2015/07/17 职场文书
六年级数学教学反思
2016/02/16 职场文书
MyBatis配置文件解析与MyBatis实例演示
2022/04/07 Java/Android
spring IOC容器的Bean管理XML自动装配过程
2022/05/30 Java/Android
微信小程序实现轮播图指示器
2022/06/25 Javascript