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的public、private和privileged模式
Dec 28 Javascript
关于jQuery的inArray 方法介绍
Oct 08 Javascript
jQuery+ajax实现鼠标单击修改内容的思路
Jun 29 Javascript
jquery简单实现图片切换效果的方法
May 12 Javascript
javascript中undefined与null的区别
Aug 16 Javascript
原生js+cookie实现购物车功能的方法分析
Dec 21 Javascript
解决Vue 通过下表修改数组,页面不渲染的问题
Mar 08 Javascript
vue组件之间通信实例总结(点赞功能)
Dec 05 Javascript
vue实现微信分享链接添加动态参数的方法
Apr 29 Javascript
vue+element表格导出为Excel文件
Sep 26 Javascript
vue更改数组中的值实例代码详解
Feb 07 Javascript
vue实现点击按钮“查看详情”弹窗展示详情列表操作
Sep 09 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
动态加载js的几种方法
2006/10/23 Javascript
同一个表单 根据要求递交到不同页面的实现方法小结
2009/08/05 Javascript
JS关闭窗口与JS关闭页面的几种方法小结
2013/12/17 Javascript
jquery 操作css样式、位置、尺寸方法汇总
2014/11/28 Javascript
JavaScript判断IE版本型号
2015/07/27 Javascript
分析js闭包引起的事件注册问题
2016/03/29 Javascript
简单实现AngularJS轮播图效果
2020/04/10 Javascript
js仿淘宝商品放大预览功能
2017/03/15 Javascript
vue2组件实现懒加载浅析
2017/03/29 Javascript
3分钟掌握常用的JS操作JSON方法总结
2017/04/25 Javascript
JavaScript实现图片无缝滚动效果
2017/07/07 Javascript
vue滚动轴插件better-scroll使用详解
2017/10/17 Javascript
jQuery实现新闻播报滚动及淡入淡出效果示例
2018/03/23 jQuery
D3.js实现简洁实用的动态仪表盘的示例
2018/04/04 Javascript
微信小程序简单的canvas裁剪图片功能详解
2019/07/12 Javascript
JS动态图片的实现方法完整示例
2020/01/13 Javascript
python实现定制交互式命令行的方法
2014/07/03 Python
python异常和文件处理机制详解
2016/07/19 Python
Python实现KNN邻近算法
2021/01/28 Python
python3 pandas 读取MySQL数据和插入的实例
2018/04/20 Python
python 统计文件中的字符串数目示例
2019/12/24 Python
在Tensorflow中实现梯度下降法更新参数值
2020/01/23 Python
windows上彻底删除jupyter notebook的实现
2020/04/13 Python
python 模拟登陆163邮箱
2020/12/15 Python
医学专业应届生的自我评价
2014/02/28 职场文书
幼儿园中班上学期评语
2014/04/18 职场文书
护理专业毕业生自荐信
2014/06/15 职场文书
私人委托书格式
2014/09/10 职场文书
文员转正自我鉴定怎么写
2014/09/29 职场文书
司机岗位职责
2015/02/04 职场文书
公司市场部岗位职责
2015/04/15 职场文书
军事理论课感想
2015/08/11 职场文书
党员反腐倡廉学习心得体会
2015/08/15 职场文书
幼儿教师继续教育培训心得体会
2016/01/19 职场文书
Python实现DBSCAN聚类算法并样例测试
2021/06/22 Python
Redis源码阅读:Redis字符串SDS详解
2021/07/15 Redis