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 index()方法 获取相应元素索引值
Oct 12 Javascript
HTML长文本截取含有HTML代码同样适用的两种方法
Jul 31 Javascript
javascript使用正则表达式实现去掉空格之后的字符
Feb 15 Javascript
jQuery基于图层模仿五星星评价功能的方法
May 07 Javascript
详解Bootstrap按钮
Jan 04 Javascript
Hammer.js+轮播原理实现简洁的滑屏功能
Feb 02 Javascript
jQuery筛选数组之grep、each、inArray、map的用法及遍历json对象
Jun 20 Javascript
将form表单通过ajax实现无刷新提交的简单实例
Oct 12 Javascript
JS正则表达式修饰符global(/g)用法分析
Dec 27 Javascript
js中变量的连续赋值(实例讲解)
Jul 08 Javascript
vue实现分页的三种效果
Jun 23 Javascript
如何vue使用el-table遍历循环表头和表体数据
Apr 26 Vue.js
在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中绘制图像的一些函数总结
2014/11/19 PHP
JS加ASP二级域名转向的代码
2007/05/17 Javascript
一组JS创建和操作表格的函数集合
2009/05/07 Javascript
Javascript学习笔记8 用JSON做原型
2010/01/11 Javascript
JavaScript继承方式实例
2010/10/29 Javascript
jquery select动态加载选择(兼容各种浏览器)
2013/02/01 Javascript
让低版本浏览器支持input的placeholder属性(js方法)
2013/04/03 Javascript
jquery mobile changepage的三种传参方法介绍
2013/09/13 Javascript
详解AngularJS Filter(过滤器)用法
2015/12/28 Javascript
js实现上传图片预览方法
2016/10/25 Javascript
layui前段框架日期控件使用方法详解
2017/05/19 Javascript
Node.js中流(stream)的使用方法示例
2017/07/16 Javascript
JS异步执行结果获取的3种解决方式
2019/02/19 Javascript
jQuery操作选中select下拉框的值代码实例
2020/02/07 jQuery
[01:36:17]DOTA2-DPC中国联赛 正赛 Ehome vs iG BO3 第一场 1月31日
2021/03/11 DOTA
python实现socket客户端和服务端简单示例
2014/02/24 Python
在Python中使用itertools模块中的组合函数的教程
2015/04/13 Python
详解Django中的form库的使用
2015/07/18 Python
Python selenium如何设置等待时间
2016/09/15 Python
使用python将图片按标签分入不同文件夹的方法
2018/12/08 Python
在Python 中同一个类两个函数间变量的调用方法
2019/01/31 Python
基于Python共轭梯度法与最速下降法之间的对比
2020/04/02 Python
Python绘制K线图之可视化神器pyecharts的使用
2021/03/02 Python
天猫超市:阿里巴巴打造的网上超市
2016/11/02 全球购物
Sasa莎莎海外旗舰店:香港莎莎美妆平台
2018/03/21 全球购物
英国领先的运动物理治疗供应公司:Vivomed
2018/07/14 全球购物
Bluebella法国官网:英国性感内衣品牌
2019/05/03 全球购物
Pottery Barn阿联酋:购买家具、家居装饰及更多
2019/12/08 全球购物
人力资源专业推荐信
2013/11/29 职场文书
我有一个梦想演讲稿
2014/05/05 职场文书
简单的个人租房协议书范本
2014/11/26 职场文书
幼儿园综治宣传月活动总结
2015/05/07 职场文书
检察院起诉书
2015/05/20 职场文书
小学生读书笔记范文
2015/06/30 职场文书
庆元旦主持词
2015/07/06 职场文书
幼儿教师师德培训心得体会
2016/01/09 职场文书