JavaScript实现秒杀时钟倒计时


Posted in Javascript onSeptember 29, 2019

本文实例为大家分享了JavaScript实现秒杀时钟倒计时的具体代码,供大家参考,具体内容如下

功能介绍:

1.时/分/秒倒计时直至为零

JavaScript实现秒杀时钟倒计时

所有代码

<!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时钟特效专题

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery 新手学习常见问题解决方法
Apr 18 Javascript
通过JavaScript控制字体大小的代码
Oct 04 Javascript
js操作textarea 常用方法总结
Dec 03 Javascript
ajax页面无刷新 IE下遭遇Ajax缓存导致数据不更新的问题
Dec 11 Javascript
解决jquery中美元符号命名冲突问题
Jan 08 Javascript
自己使用jquery写的一个无缝滚动的插件
Apr 30 Javascript
基于JavaScript实现快速转换文本语言(繁体中文和简体中文)
Mar 07 Javascript
利用D3.js实现最简单的柱状图示例代码
Dec 09 Javascript
原生js实现日期计算器功能
Feb 17 Javascript
Ionic3实现图片瀑布流布局
Aug 09 Javascript
微信小程序 swiper组件构建轮播图的实例
Sep 20 Javascript
小试小程序云开发(小结)
Jun 06 Javascript
在layui中对table中的数据进行判断(0、1)转换为提示信息的方法
Sep 28 #Javascript
layui+jquery支持IE8的表格分页方法
Sep 28 #jQuery
JavaScript获取页面元素的常用方法详解
Sep 28 #Javascript
解决Layui数据表格的宽高问题
Sep 28 #Javascript
解决layui-table单元格设置为百分比在ie8下不能自适应的问题
Sep 28 #Javascript
layui table 列宽百分比显示的实现方法
Sep 28 #Javascript
解决layui批量传值到后台操作时出现传值为空的问题
Sep 28 #Javascript
You might like
php ftp文件上传函数(基础版)
2010/06/03 PHP
基于PHP文件操作的详细诠释
2013/06/21 PHP
解析argc argv在php中的应用
2013/06/24 PHP
JavaScript框架(iframe)操作总结
2014/04/16 Javascript
jQuery时间轴插件使用详解
2015/07/16 Javascript
Node.js实现JS文件合并小工具
2016/02/02 Javascript
JavaScript函数柯里化原理与用法分析
2017/03/31 Javascript
Three.js开发实现3D地图的实践过程总结
2017/11/20 Javascript
vue实现公告栏文字上下滚动效果的示例代码
2020/06/16 Javascript
[47:22]Mineski vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
[02:23]完美世界全国高校联赛街访DOTA2第一期
2019/11/28 DOTA
[00:48]食人魔魔法师至宝“金鹏之幸”全新模型和自定义特效展示
2019/12/19 DOTA
python编写Logistic逻辑回归
2020/12/30 Python
python顺序的读取文件夹下名称有序的文件方法
2018/07/11 Python
python中单例常用的几种实现方法总结
2018/10/13 Python
python快排算法详解
2019/03/04 Python
python接口自动化(十六)--参数关联接口后传(详解)
2019/04/16 Python
Python redis操作实例分析【连接、管道、发布和订阅等】
2019/05/16 Python
python中enumerate() 与zip()函数的使用比较实例分析
2019/09/03 Python
python中元组的用法整理
2020/06/15 Python
python如何实现DES加密
2020/09/21 Python
HTML5 DeviceOrientation实现手机网站摇一摇功能代码实例
2015/04/24 HTML / CSS
详解前端HTML5几种存储方式的总结
2016/12/27 HTML / CSS
SneakerStudio英国:最佳运动鞋商店
2019/05/22 全球购物
params有什么用
2016/03/01 面试题
实习生自荐信范文
2013/11/13 职场文书
2014年庆元旦活动方案
2014/02/15 职场文书
工作所在部门证明
2014/09/21 职场文书
2014旅游局党组书记党建工作汇报材料
2014/11/02 职场文书
商铺租房协议书范本
2014/12/04 职场文书
地球一小时活动总结
2015/02/27 职场文书
学校开除通知书
2015/04/25 职场文书
班主任工作经验交流会总结
2015/11/02 职场文书
如何使用CocosCreator对象池
2021/04/14 Javascript
PostgreSQL13基于流复制搭建后备服务器的方法
2022/01/18 PostgreSQL
Python中Matplotlib的点、线形状、颜色以及绘制散点图
2022/04/07 Python