资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

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实现倒计时器自定义时间和暂停
网页地址:http://cdkjz.cn/article/jsdeje.html
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220