JavaScript实现秒杀时钟倒计时
作者：小羽向前跑 发布时间：2024-05-11 09:31:32
标签：js,时钟,倒计时
本文实例为大家分享了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
0
投稿猜你喜欢
- 也许你听说过Hibernate的大名，但可能一直不了解它，也许你一直渴望使用它进行开发，那么本文正是你所需要的！在本文中，我向大家重点介绍H
本文主要介绍在 windows 10 系统中安装 Anaconda3 的详细过程。下载Anaconda 官网下载地址目前最新版本是 pyth- 在知识库的建立的时候，用普通VARCHAR2存放文章是显然不够的，只有区区4000的字节，放不了多少字， 而CLOB数据类型，则能最多存放8
- 转化时间类型to_datetime()方法to_datetime()方法支持将 int, float, str, datetime, lis
- 前几天开始原来的google pr查询接口已经失效，导致很多站长工具pr查询功能不能使用原始pr查询接口：$string =&nb
- 文件操作的步骤：打开文件 -> 操作文件 -> 关闭文件切记：最后要关闭文件（否则可能会有意想不到的结果）打开文件文件句柄 =
- 错误提示如下：其实这是一个挺常见的系统报错，缺乏VC++库。我安装的是python3.5.2，这个版本需要的vc版本是2015的了，下载：M
- 前言网上很多例子都说cv2.minAreaRect函数的输出的角度范围在[-90,0]，但是实测输出范围在[0,90]。再进行调研，确定为o
- 处理mat文件的三种方式读书的时候，处理数据都是采用matlab，但毕业后当了程序员，matlab从此在自己的电脑上消失了（安装包太大，还要
- 本文实例讲述了Python实现将照片变成卡通图片的方法。分享给大家供大家参考，具体如下：之前的文章介绍了使用Photoshop将照片变成卡通
- 本文所述实例来自独立软件开发者 Alex Marandon，在他的博客中曾介绍了数个关于 Python Collection 的实用小技巧，
- pycharm全局修改pycharm 全局改函数方法1ctrl shift r全局替换方法2点击函数，右键 Refactor Ch
- 一、问题描述在用python开发时经常用到logging这个包，根据官方示例，如果要指定日志级别可以写成如下的方式。import loggi
- scikit-learn 是基于 Python 语言的机器学习工具简单高效的数据挖掘和数据分析工具可供大家在各种环境中重复使用建立在 Num
- 一、xlrd的安装打开cmd输入pip install xlrd安装完成即可二、xlrd模块的使用下面以这个工作簿为例1、导入模块impor
- IE>6 及其它浏览器不在此文论述范围内。img 的 onload 事件，是当图片加载完成之后，就处触发。img.complete 这
- 在最近的一个项目需要实现在MySQL单表多关键字模糊查询，但这数个关键字并不一定都存在于某个字段。例如现有table表，其中有title，t
- viper作为配置框架，其功能非常的强大，我们没有理由不去了解一下。我们先看官网对它的功能简介：viper是完整配置解决方案，他可以处理所有
- My Sql 大部分都是用绿色版(解压版) 然后注册服务 简单方便。但是。配置文件头痛的一逼。首先配置mysql的环境变量。mySQL 环境
- RPA流程自动化过程中，遇到时间的相关操作时，可以调用datetime库的一些方法进行处理。datetime 是 Python 处理日期和时
