html倒计时功能,html 和js 中实现倒计时功能

倒计时主要用到的知识点：1、设置时间间隔的setInterval可以被clearInterval取消

2、毫秒转换为时分格式

这个是效果图

下面是js中的函数

var shijian=3600;

var time=null;

function start(){

time=setInterval("count()",1000);//返回值time只是为了需要暂停的时候clearInterval(time)清除时间间隔

}

function count(){

if(shijian<0){

alert("time out");

pause();//一般情况下这个if条件是用来提交数据用的,这里只是测试一下。

}else{

$("#time p").html(Math.floor(shijian/60)+":"+shijian%60);//这里用到将毫秒转换到时分格式

shijian--;

console.info(time);

}

}

function pause(){

clearInterval(time);

}

function goOn(){

time = setInterval("count()",1000);//重新设置时间间隔

}

第二个是html资源，为了方便我css直接写在html中了

Document

input{

background-color: #9fc5f1;

width: 100px;

height: 30px;

line-height: 30px;

text-align: center;

color: #fff;

font-size:14px;

font-weight: bold;

}

#time p{

color: #1f6dc2;

font-size: 48px;

font-weight: bold;

margin-left:90px;

margin-bottom:0px;

}

00:00