用javascript实现一个简易倒计时性能
发布时间：2022-04-20 09:27:53 所属栏目：语言 来源：互联网
导读：我们在访问购物网站时，经常会看到一些秒杀活动，一般在秒杀活动区域会放置一个倒计时，用作提醒用户活动结束时间。那么这样的倒计时功能是如何实现的呢？下面我们我们就用JavaScript来实现一个简易的倒计时效果，感兴趣的朋友继续往下看吧。 代码如下： !DO
|
我们在访问购物网站时，经常会看到一些秒杀活动，一般在秒杀活动区域会放置一个倒计时，用作提醒用户活动结束时间。那么这样的倒计时功能是如何实现的呢？下面我们我们就用JavaScript来实现一个简易的倒计时效果，感兴趣的朋友继续往下看吧。 代码如下： <!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; 时间一秒一秒得倒计时 代码解释： 这里我把三个行内元素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实现的倒计时功能介绍，对此感兴趣的朋友，能够参考上述代码，来实现一个天数、时、分、秒的倒计时。希望上述内容对大家学习有所帮助。 （编辑：云计算网_泰州站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
浙公网安备 33038102330476号