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 相关文章推荐
CSS+Jquery实现页面圆角框方法大全
Dec 24 Javascript
javascript 模拟点击广告
Jan 02 Javascript
jquery实现的元素的left增加N像素 鼠标移开会慢慢的移动到原来的位置
Mar 21 Javascript
Jquery和JS获取ul中li标签的实现方法
Jun 02 Javascript
layui导航栏实现代码
May 19 Javascript
详解如何使用Node.js编写命令工具——以vue-cli为例
Jun 29 Javascript
JavaScript中如何判断一个值的类型
Sep 15 Javascript
微信小程序实现城市列表选择
Jun 05 Javascript
vue cli3.0结合echarts3.0与地图的使用方法示例
Mar 26 Javascript
JS实现扫码枪扫描二维码功能
Jan 03 Javascript
微信小程序实现二维码签到考勤系统
Jan 16 Javascript
js实现页面导航层级指示效果
Aug 25 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
屏蔽机器人从你的网站搜取email地址的php代码
2012/11/14 PHP
ThinkPHP使用UTFWry地址库进行IP定位实例
2014/04/01 PHP
codeigniter数据库操作函数汇总
2014/06/12 PHP
php抽象类使用要点与注意事项分析
2015/02/09 PHP
PHP的中使用非缓冲模式查询数据库的方法
2017/02/05 PHP
JS 非图片动态loading效果实现代码
2010/04/09 Javascript
jQuery学习笔记之jQuery的事件
2010/12/22 Javascript
js判断选择的时间是否大于今天的代码
2013/08/20 Javascript
javascript中数组的concat()方法使用介绍
2013/12/18 Javascript
js和jquery如何获取图片真实的宽度和高度
2014/09/28 Javascript
javascript跨域原因以及解决方案分享
2015/04/08 Javascript
代码分析jQuery四种静态方法使用
2015/07/23 Javascript
详解JavaScript操作HTML DOM的基本方式
2015/10/21 Javascript
jQuery获取多种input值的简单实现方法
2016/06/20 Javascript
Vue.js仿微信聊天窗口展示组件功能
2017/08/11 Javascript
vue+springboot前后端分离实现单点登录跨域问题解决方法
2018/01/30 Javascript
详解webpack-dev-server使用方法
2018/09/14 Javascript
vue中beforeRouteLeave实现页面回退不刷新的示例代码
2019/11/01 Javascript
Node.js API详解之 readline模块用法详解
2020/05/22 Javascript
Vue切换div显示隐藏,多选,单选代码解析
2020/07/14 Javascript
python开发之文件操作用法实例
2015/11/13 Python
Python常见加密模块用法分析【MD5,sha,crypt模块】
2017/05/24 Python
Python中用字符串调用函数或方法示例代码
2017/08/04 Python
Python实现比较扑克牌大小程序代码示例
2017/12/06 Python
python如何为被装饰的函数保留元数据
2018/03/21 Python
Python flask框架如何显示图像到web页面
2020/06/03 Python
python根据字典的键来删除元素的方法
2020/08/16 Python
python中使用np.delete()的实例方法
2021/02/01 Python
Html5之webcoekt播放JPEG图片流
2020/09/22 HTML / CSS
韩国著名的在线综合购物网站:Akmall
2016/08/07 全球购物
消防宣传口号
2014/06/16 职场文书
社区服务标语
2014/07/01 职场文书
调研汇报材料范文
2014/08/17 职场文书
生产操作工岗位职责
2014/09/16 职场文书
小学校长个人总结
2015/03/03 职场文书
运动与健康自我评价
2015/03/09 职场文书