js实现倒计时器自定义时间和暂停


Posted in Javascript onFebruary 25, 2019

js倒计时器可自定义时间和暂停,效果如下,点击start 开始计时,end结束计时

js实现倒计时器自定义时间和暂停

分别复制 H5 css js 代码即可实现,具体的算法在js控制函数中(都写了注释)

css

html,body{
width:100%;height:100%;
}
.content{
height:100%;width:100%; 
}
.row-center{
display:flex;flex-direction:row;justify-content:center;
align-items:center;
}
.tc-input-style{
outline:none;border:none;width:20%;height:80%;border-radius:10px;
}
.tc-span-style{
width:30%;height:100%;font-weight:bold;
}
.tc-font-style{
font-size:15px;font-weight:bold;
}
.tc-div-style1{
height:33%;width:100%
}
.tc-div-style0{
height:30%;width:100%
}
.tc-div-style2{
height:10%;width:100%; 
}
.tc-div-style3{
height:100%;width:30%
}
.column-center{
display:flex;flex-direction:column;justify-content:center;
align-items:center;
}
.column-start-center{
display:flex;flex-direction:column;justify-content:flex-start;
align-items:center;
}
#timecount{
height:50%;width:20%;
}
.button-style-0{
border-radius:10px;
}
.row-space-around{
display:flex;flex-direction:row;justify-content:space-around;
align-items:center;
}

h5

<body>
<div class="content row-center"> 

  <div id="timecount" class="column-center tc-font-style" >
  <div class="column-start-center tc-div-style0" >
  <div class="row-center tc-div-style1" ><span class="tc-span-style row-center">小时:</span><input class=tc-input-style id="hour_count" value="0"> </div>
  <div class="row-center tc-div-style1" ><span class="tc-span-style row-center">分钟:</span><input class=tc-input-style id="minute_count" value="0"> </div>
  <div class="row-center tc-div-style1" ><span class="tc-span-style row-center">秒:</span><input class=tc-input-style id="second_count" value="0"> </div>
  </div>

  <div class="row-center tc-div-style2">
  <div class="row-center tc-div-style3" id="hour_show" ></div>
  <div class="row-center tc-div-style3" id="minute_show"></div>
  <div class="row-center tc-div-style3" id="second_show"></div>
  </div>

  <div class="row-space-around tc-div-style2">
  <button class="button-style-0" onclick="timecounts()">start</button>
  <button class="button-style-0" onclick="timestop()">stop</button>
  </div>

  </div>


</div>
</body>

记得引入jq

<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>

JS

<script type="text/javascript">
var timecount;//定义一个全局变量
function timer(intDiff){
 //定义一个循环函数每一秒定时执行
 timecount=setInterval(function(){
 var hour=0,
 minute=0,
 second=0;//初始化时间默认值 
 //算法控制
 if(intDiff > 0){
 hour = Math.floor(intDiff / (60 * 60)) ;
 minute = Math.floor(intDiff / 60) - (hour * 60);
 second = Math.floor(intDiff) - (hour * 60 * 60) - (minute * 60);
 }
 if (minute <= 9) minute = '0' + minute;
 if (second <= 9) second = '0' + second;
 //打印到dom
 $('#hour_show').html('<s id="h"></s>'+hour+'时');
 $('#minute_show').html('<s></s>'+minute+'分');
 $('#second_show').html('<s></s>'+second+'秒');
 intDiff--;
 }, 1000);
 console.log(intDiff); 
}

function timecounts(){
 console.log($("#hour_count").val())
 count=parseInt($("#hour_count").val()*3600)+parseInt($("#minute_count").val()*60)+parseInt($("#second_count").val())
 timer(count);//调用计时器函数
 console.log(count);
}
function timestop(){
 var hour= $("#hour_show").text();
 var minute= $("#minute_show").text();
 var second= $("#second_show").text();
 var time=parseInt($("#hour_show").text())*3600+parseInt($("#minute_show").text())*60+parseInt($("#second_show").text())
 console.log(time);
 timecount=window.clearInterval(timecount);//停止计时器
}
</script>

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

Javascript 相关文章推荐
JavaScript中的一些定位属性[图解]
Jul 14 Javascript
基于jquery创建的一个图片、视频缓冲的效果样式插件
Aug 28 Javascript
简介JavaScript中fixed()方法的使用
Jun 08 Javascript
Javascript实现的Map集合工具类完整实例
Jul 31 Javascript
javascript和jQuery实现网页实时聊天的ajax长轮询
Jul 20 Javascript
layer实现弹窗提交信息
Dec 12 Javascript
Vue + Webpack + Vue-loader学习教程之功能介绍篇
Mar 14 Javascript
easyui关于validatebox实现多重规则验证的方法(必看)
Apr 12 Javascript
利用JavaScript在网页实现八数码启发式A*算法动画效果
Apr 16 Javascript
利用纯js + transition动画实现移动端web轮播图详解
Sep 10 Javascript
D3.js(v3)+react 实现带坐标与比例尺的散点图 (V3版本)
May 09 Javascript
基于JavaScript实现省市联动效果
Jun 22 Javascript
JS module的导出和导入的实现代码
Feb 25 #Javascript
js实现多个倒计时并行 js拼团倒计时
Feb 25 #Javascript
js实现网页同时进行多个倒计时功能
Feb 25 #Javascript
js实现一个页面多个倒计时的3种方法
Feb 25 #Javascript
Vue自定义指令上报Google Analytics事件统计的方法
Feb 25 #Javascript
写一个Vue Popup组件
Feb 25 #Javascript
利用Webpack实现小程序多项目管理的方法
Feb 25 #Javascript
You might like
使用PHP生成二维码的两种方法(带logo图像)
2014/03/14 PHP
PHP获取数组最大值下标的方法
2015/05/12 PHP
PHP+Ajax实现无刷新分页实例详解(附demo源码下载)
2016/04/07 PHP
php图片裁剪函数
2018/10/31 PHP
jquery实现微博文字输入框 输入时显示输入字数 效果实现
2013/07/12 Javascript
5个JavaScript经典面试题
2014/10/13 Javascript
js实现延迟加载的方法
2015/06/24 Javascript
JS动态的把左边列表添加到右边的实现代码(可上下移动)
2016/11/17 Javascript
前端 Vue.js 和 MVVM 详细介绍
2016/12/29 Javascript
详解vuex 中的 state 在组件中如何监听
2017/05/23 Javascript
详解ES7 Decorator 入门解析
2019/02/18 Javascript
你知道JavaScript Symbol类型怎么用吗
2020/01/08 Javascript
[02:22]完美世界DOTA2联赛PWL S3 集锦第一期
2020/12/15 DOTA
Python 登录网站详解及实例
2017/04/11 Python
使用Python设计一个代码统计工具
2018/04/04 Python
python中使用zip函数出现错误的原因
2018/09/28 Python
python3实现名片管理系统
2020/11/29 Python
python opencv鼠标事件实现画框圈定目标获取坐标信息
2020/04/18 Python
python 采用paramiko 远程执行命令及报错解决
2019/10/21 Python
Python序列对象与String类型内置方法详解
2019/10/22 Python
关于sys.stdout和print的区别详解
2019/12/05 Python
Django 实现 Websocket 广播、点对点发送消息的代码
2020/06/03 Python
Python装饰器结合递归原理解析
2020/07/02 Python
Python爬虫实现自动登录、签到功能的代码
2020/08/20 Python
CSS3对背景图片的裁剪及尺寸和位置的设定方法
2016/03/07 HTML / CSS
Pretty Little Thing美国:时尚女性服饰
2018/08/27 全球购物
女娲补天教学反思
2014/02/05 职场文书
手机被没收检讨书
2014/02/22 职场文书
医学生毕业自我鉴定
2014/03/26 职场文书
《充气雨衣》教学反思
2014/04/07 职场文书
2014财务人员自我评价范文
2014/09/21 职场文书
时尚女魔头观后感
2015/06/04 职场文书
创业开店,这样方式更合理
2019/08/26 职场文书
Python实现学生管理系统(面向对象版)
2021/06/24 Python
Python爬虫基础之简单说一下scrapy的框架结构
2021/06/26 Python
Java图书管理系统,课程设计必用(源码+文档)
2021/06/30 Java/Android