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 相关文章推荐
让div层随鼠标移动的实现代码 ie ff
Dec 18 Javascript
jQuery选择头像并实时显示的代码
Jun 27 Javascript
json对象转字符串如何实现
Dec 02 Javascript
jQuery+CSS实现菜单滑动伸展收缩(仿淘宝)
Mar 22 Javascript
jQuery学习笔记之 Ajax操作篇(三) - 过程处理
Jun 23 Javascript
jquery实现不包含当前项的选择器实例
Jun 25 Javascript
jQuery实现的超链接提示效果示例【附demo源码下载】
Sep 09 Javascript
JS实现读取xml内容并输出到div中的方法示例
Apr 19 Javascript
vue2.0实现音乐/视频播放进度条组件
Jun 06 Javascript
JavaScrip数组去重操作实例小结
Jun 20 Javascript
Javascript中Math.max和Math.max.apply的区别和用法详解
Aug 24 Javascript
jquery实现异步文件上传ajaxfileupload.js
Oct 23 jQuery
在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与MySQL交互使用详解
2006/10/09 PHP
浅谈php中mysql与mysqli的区别分析
2013/06/10 PHP
修改ThinkPHP缓存为Memcache的方法
2014/06/25 PHP
jquery select下拉框操作的一些说明
2010/04/02 Javascript
jQuery 1.8 Release版本发布了
2012/08/14 Javascript
Jquery选择子控件&quot;大于号&quot;和&quot; &quot;区别介绍及使用示例
2013/06/25 Javascript
页面加载完毕后滚动条自动滚动一定位置
2014/02/20 Javascript
js获取上传文件大小示例代码
2014/04/10 Javascript
Bootstrap每天必学之下拉菜单
2015/11/25 Javascript
[原创]JavaScript语法高亮插件highlight.js用法详解【附highlight.js本站下载】
2016/11/01 Javascript
提高JavaScript执行效率的23个实用技巧
2017/03/01 Javascript
webpack组织模块打包Library的原理及实现
2018/03/10 Javascript
小程序和web画三角形实现解析
2019/09/02 Javascript
vue中的 $slot 获取插槽的节点实例
2019/11/12 Javascript
微信小程序关键字变色实现代码实例
2019/12/13 Javascript
Python多线程下载文件的方法
2015/07/10 Python
Python中的复制操作及copy模块中的浅拷贝与深拷贝方法
2016/07/02 Python
Numpy 改变数组维度的几种方法小结
2018/08/02 Python
Python列表list排列组合操作示例
2018/12/18 Python
python自定义函数实现一个数的三次方计算方法
2019/01/20 Python
Python使用crontab模块设置和清除定时任务操作详解
2019/04/09 Python
解决Mac下使用python的坑
2019/08/13 Python
python模式 工厂模式原理及实例详解
2020/02/11 Python
python matplotlib:plt.scatter() 大小和颜色参数详解
2020/04/14 Python
详解基于Scrapy的IP代理池搭建
2020/09/29 Python
西海岸男士和男童服装:Johnnie-O
2018/03/15 全球购物
Prototype中如何为一个元素添加一个方法
2014/12/08 面试题
人力资源专业推荐信
2013/11/29 职场文书
2014学习全国两会精神心得体会2000字
2014/03/11 职场文书
表彰大会策划方案
2014/05/13 职场文书
村党的群众路线教育实践活动工作总结
2014/10/25 职场文书
学习型家庭事迹材料
2014/12/20 职场文书
幼儿园六一儿童节活动总结
2015/02/10 职场文书
2015年学生会部门工作总结
2015/04/21 职场文书
计算机教师工作总结
2015/08/13 职场文书
Python+Tkinter打造签名设计工具
2022/04/01 Python