时分秒计时器

Html

Css

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

立即下载

时分秒计时器



代码描述：计时器时分秒

自己输入时间点击确定后点击开始就行了，因为没有写太多的样式，使用者可以按照自己的喜好添加和修改样式，使用之前请引入jquery文件

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

许嵩小迷弟

相关代码

时分秒计时器

最新