时分秒自定义倒计时计时器

浏览：1390次- 评论：0次- 发布时间：2017-12-28

Html

Css

$(".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

立即下载收藏

积分说明：注册即送10牛币，每日签到可获得5牛币，成为VIP会员可永久免牛币下载！充值积分充值会员更多说明»

代码描述：计时器时分秒

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

讨论这个常用代码（0）回答他人问题或分享心得会奖励牛币

〒_〒居然一个评论都没有……

文明上网，理性发言！ 😉 阿里云幸运券，戳我领取