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

最新推荐文章于 2024-05-22 01:53:01 发布

白马湖小龙王

最新推荐文章于 2024-05-22 01:53:01 发布

阅读量3.9k

点赞数 2

分类专栏：前端文章标签： js jq

本文链接：https://blog.csdn.net/weixin_39168678/article/details/79268497

版权

前端专栏收录该内容

33 篇文章 1 订阅

订阅专栏

js倒计时器可自定义时间和暂停，效果如下，点击start 开始计时，end结束计时
这里写图片描述

分别复制 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;
}

<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>

<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>

白马湖小龙王

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
js倒计时器可自定义时间和暂停

js倒计时器可自定义时间和暂停，效果如下，点击start 开始计时，end结束计时分别复制 H5 css js 代码即可实现，具体的算法在js控制函数中（都写了注释）css html,body{width:100%;height:100%;}.content{height:100%;width:100%; }.row-center{display:flex;flex-
复制链接

扫一扫

专栏目录