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 相关文章推荐
广告显示判断
Aug 31 Javascript
图片格式的JavaScript和CSS速查手册
Aug 20 Javascript
Jquery Ajax学习实例6 向WebService发出请求,返回DataSet(XML) 异步调用
Mar 18 Javascript
JavaScript 存在陷阱 删除某一区域所有节点
May 10 Javascript
jQuery:节点(插入,复制,替换,删除)操作
Mar 04 Javascript
Javascript Ajax异步读取RSS文档具体实现
Dec 12 Javascript
js获取视频时长代码
Apr 10 Javascript
jQuery级联操作绑定事件实例
Sep 02 Javascript
jquery.validate表单验证插件使用详解
Jun 21 jQuery
基于Vue实现支持按周切换的日历
Sep 24 Javascript
bootstrap动态调用select下拉框的实例代码
Aug 09 Javascript
微信小程序实现打卡签到页面
Sep 21 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 stream_context_create()作用和用法分析
2011/03/29 PHP
使用php的HTTP请求的库Requests实现美女图片墙
2015/02/22 PHP
PHP判断是否是微信打开,浏览器打开的方法
2018/03/14 PHP
javascript+xml技术实现分页浏览
2008/07/27 Javascript
JavaScript之编码规范 推荐
2012/05/23 Javascript
jquery实现网站超链接和图片提示效果
2013/03/21 Javascript
Javascript中常见的校验如域名、手机、邮箱等等
2014/01/02 Javascript
JavaScript原生对象之String对象的属性和方法详解
2015/03/13 Javascript
浅谈JavaScript正则表达式分组匹配
2015/04/10 Javascript
JavaScript学习总结之JS、AJAX应用
2016/01/29 Javascript
微信小程序 获取设备信息 API实例详解
2016/10/02 Javascript
原生js实现电商侧边导航效果
2017/01/19 Javascript
深入理解Node.js中的进程管理
2017/03/13 Javascript
js 简易版滚动条实例(适用于移动端H5开发)
2017/06/26 Javascript
JS实现手写parseInt的方法示例
2017/09/24 Javascript
VUE基于NUXT的SSR 服务端渲染
2018/11/30 Javascript
vue监听用户输入和点击功能
2019/09/27 Javascript
node爬取新型冠状病毒的疫情实时动态
2020/02/06 Javascript
原生JavaScript实现拖动校验功能
2020/09/29 Javascript
vue表单验证之禁止input输入框输入空格
2020/12/03 Vue.js
[00:56]2014DOTA2国际邀请赛 DK、iG 赛前探访
2014/07/10 DOTA
快速了解Python中的装饰器
2018/01/11 Python
如何利用python制作时间戳转换工具详解
2018/09/12 Python
wxPython实现分隔窗口
2019/11/19 Python
Python pandas RFM模型应用实例详解
2019/11/20 Python
俄罗斯有趣和原创礼物网上商店:MagicMag
2019/08/01 全球购物
澳大利亚和新西兰最大的在线旅行社之一:Aunt Betty
2019/08/07 全球购物
新闻专业大学生找工作的自我评价
2013/10/30 职场文书
大学生最常用的自我评价
2013/12/07 职场文书
工程力学专业自荐信范文
2014/03/17 职场文书
《花瓣飘香》教学反思
2014/04/15 职场文书
大学生励志演讲稿
2014/04/25 职场文书
大专生自荐书范文
2014/06/22 职场文书
公共场所标语
2014/06/30 职场文书
学校党员干部承诺书
2015/05/04 职场文书
创业不要错过,这4种餐饮新模式
2019/07/18 职场文书