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
