宜宾网站建设公司

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

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

h6



 

  

  

  
小时: 

  
分钟: 

  
秒:

记得引入jq

JS

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持创新互联。


本文题目：js实现倒计时器自定义时间和暂停
本文URL：http://ybzwz.com/article/jsdeje.html

其他资讯