JavaScript实现秒杀时钟倒计时
作者：小羽向前跑 时间：2024-05-11 09:31:32
本文实例为大家分享了JavaScript实现秒杀时钟倒计时的具体代码，供大家参考，具体内容如下
功能介绍：
1.时/分/秒倒计时直至为零
所有代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>倒计时</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
span{
display: inline-block;
width: 60px;
height: 60px;
border-radius: 50％;
background: black;
color: white;
font-size: 30px;
text-align: center;
line-height: 60px;
}
i{
font-style: normal;
font-size: 20px;
}
</style>
</head>
<body>
<span id="hs">1</span>
<i>:</i>
<span id="ms">59</span>
<i>:</i>
<span id="ss">47</span>
</body>
</html>
<script type="text/javascript">
//倒计时
var count = 1;
var Counter;
function countDown(){ //调用
Counter = setInterval(f,1000);
}
countDown(); //自运行
//倒计时
function f(){
var hs = Number(document.getElementById("hs").innerHTML);
var ms = Number(document.getElementById("ms").innerHTML);
var ss = Number(document.getElementById("ss").innerHTML);
if(hs==0&&ms==0&&ss==0||ss>60||ms>60||hs>24){
var hs = document.getElementById("hs").innerHTML = "00";
var ms = document.getElementById("ms").innerHTML = "00";
var ss = document.getElementById("ss").innerHTML = "00";
clearInterval(Counter);
console.log(count);
return;
}
if(ss>0){
ss--;
document.getElementById("ss").innerHTML = ss;
count++;
}
if(ss==0){
if(ms>0){
ms--;
document.getElementById("ms").innerHTML = ms;
document.getElementById("ss").innerHTML = 59;
}
}
if(ms==0){
if(hs>0){
hs--;
document.getElementById("hs").innerHTML = hs;
document.getElementById("ms").innerHTML = 59;
}
}
}
</script>
更多JavaScript时钟特效点击查看：JavaScript时钟特效专题
来源：https://blog.csdn.net/weixin_38404899/article/details/86557546
标签：js,时钟,倒计时
0
投稿猜你喜欢
python里将list中元素依次向前移动一位
2021-03-23 16:53:43
Go语言k8s kubernetes使用leader election实现选举
2024-04-26 17:20:53
Nodejs之TCP服务端与客户端聊天程序详解
2024-05-03 15:55:48
MySQL深分页问题原理与三种解决方案
2024-01-27 14:12:34
Python Numpy中数组的集合操作详解
2023-12-04 12:02:24
go doudou开发gRPC服务快速上手实现详解
2024-05-05 09:33:11
巧妙规划使用Oracle数据空间
2009-03-20 11:51:00
详解git submodule使用以及注意事项
2023-04-30 21:11:30
class类在python中获取金融数据的实例方法
2021-03-30 10:18:32
制作一个更漂亮一些的多选列表框
2007-10-16 13:04:00
Python计算一个点到所有点的欧式距离实现方法
2023-03-29 21:19:11
windows上安装python3教程以及环境变量配置详解
2023-11-11 08:09:35
如何用Idea或者webstorm跑一个Vue项目(步骤详解)
2022-08-20 17:06:23
python+splinter自动刷新抢票功能
2023-07-08 11:33:42
根据表名和索引获取需要的列名的存储过程
2024-01-23 04:24:14
FSO组件之驱动器操作asp源码
2010-05-03 10:59:00
java-SSH2实现数据库和界面的分页
2024-01-27 16:17:19
CentOS7安装Python3的教程详解
2023-10-17 02:40:28
ASP实现上传图片自动压缩图片大小
2010-01-25 12:47:00
Django admin禁用编辑链接和添加删除操作详解
2021-01-13 05:01:01