HtmlCssJs

时：

分：

秒：

确定

00

:

00

:

00

开始

暂停

* {

padding:0;

margin:0;

}

ul,li {

list-style:none;

}

.big {

width:1000px;

height:500px;

border:1px solid black;

margin:0 auto;

}

.container {

width:800px;

height:200px;

margin:0 auto;

border:1px solid red;

padding-top:85px;

box-sizing:border-box;

}

.container>li {

float:left;

width:100px;

height:30px;

line-height:30px;

text-align:center;

border:1px solid blue;

box-sizing:border-box;

}

.container>li:nth-child(1) {

margin-left:150px;

}

.container>li:nth-child(6) {

border:0;

}

.pause {

width:60px;

outline:none;

display:none;

margin-left:28px;

margin-top:5px;

}

input {

outline:none;

width:100px;

}

.big>label:nth-child(1) {

margin-left:260px;

}

.button_1 {

width:60px;

outline:none;

}

.button_2 {

width:60px;

outline:none;

margin-left:20px;

margin-top:5px;

/*display:none;

*/

}

$(".button_1").on("click",function(){

// console.log($(".hour_input").val());

// 时 获取计时器的小时

if($(".hour_input").val() != ""){

// $(".hour").html($(".hour_input").val());

// 如果时输入的数字小于10则在前面+0

if( $(".hour_input").val() < 10){

if($(".hour_input").val() < 0){

$(".hour").html("00");

}

else{

$(".hour").html( "0" + $(".hour_input").val());

}

}

else if($(".hour_input").val() >= 10){

$(".hour").html($(".hour_input").val());

}

}

// 如果计时器的时没有输入则为00

else if($(".hour_input").val() == ""){

// alert("ok");

$(".hour").html("00");

}

// 分 获取计时器的分

if($(".minute_input").val() != ""){

if($(".minute_input").val() >= 60){

$(".minute").html("00");

}

else if($(".minute_input").val() >= 10){

$(".minute").html($(".minute_input").val());

}

else if($(".minute_input").val() < 10){

if($(".minute_input").val() < 0){

$(".minute").html("00");

}

else{

$(".minute").html("0" + $(".minute_input").val());

}

}

}

else if($(".minute_input").val() == ""){

$(".minute").html("00");

}

// 秒 获取计时器的秒

if($(".second_input").val() != ""){

if($(".second_input").val() >= 60){

$(".second").html("00");

}

else if($(".second_input").val() >= 10){

$(".second").html($(".second_input").val());

}

else if($(".second_input").val() < 10){

if($(".second_input").val() < 0){

$(".second").html("00");

}

else{

$(".second").html("0" + $(".second_input").val());

}

}

}

else if($(".second_input").val() == ""){

$(".second").html("00");

}

});

// 开始计时

$(".button_2").on("click",function(){

if($(".hour").html() == "00" && $(".minute").html() == "00" && $(".second").html() == "00"){

alert("请输入时间后按下确定然后按下开始即可");

}

else{

$(this).css({"display":"none"});

$(".pause").css({"display":"block"});

console.log($(".button_2").html());

if($(".button_2").html() == "开始"){

timer = timercontrol();

}

}

})

// 暂停计时

$(".pause").on("click",function(){

// alert("ok");

clearInterval(timer);

$(this).css({"display":"none"});

$(".button_2").css("display","block");

})

// 计时器函数

function timercontrol(){

return setInterval(function(){

if ($(".second").html() == "00") {

if($(".minute").html() == "00"){

if($(".hour").html() == "00"){

clearInterval(timer);

$(".button_2").css("display","block");

$(".pause").css("display","none");

$(".second").html("00");

}

else{

$(".minute").html(59);

$(".second").html(59)

var x = $(".hour").html();

x--;

// x隐式转换为数字类型了 必须转换为字符串类型

x = String(x);

// 判断是否只剩下一位数字如果只有一位数字 前面必须加0

if(x.length<2){

x = "0"+x;

}

$(".hour").html(x);

}

}

else{

// console.log($(".second").html());

$(".second").html(59);

var x = $(".minute").html();

x--;

// x隐式转换为数字类型了 必须转换为字符串类型

x = String(x);

// 判断是否只剩下一位数字如果只有一位数字 前面必须加0

if(x.length<2){

x = "0"+x;

}

$(".minute").html(x);

}

}

else{

var x = $(".second").html();

x--;

// x隐式转换为数字类型了 必须转换为字符串类型

x = String(x);

// 判断是否只剩下一位数字如果只有一位数字 前面必须加0

if(x.length<2){

x = "0"+x;

}

$(".second").html(x);

}

},1000)

}

// var timer = timercontrol();

↑上面代码改变，会自动显示代码结果

jQuery调用版本：1.11.3