简单的倒计时

Html

Css

Js

    
倒计时
    

        
        开始
    
    
00:00:000

body { background-color:#222222; } .clearfix { content:""; display:block; clear:both; } .countTime { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); appearance:none; -webkit-appearance:none; -moz-appearance:textfield; background-color:#222222; } .countTime input,.countTime button,.countTime p,.countTime h2 { border:none; outline:none; display:block; box-sizing:border-box; margin:0 auto; color:#daf6ff; } .countTime h2 { text-align:center; font-weight:normal; font-size:24px; line-height:60px; } .countTime input { border:solid 1px #3272ba; font-size:14px; width:200px; height:24px; float:left; color:#333333; } .countTime button { width:50px; height:24px; background-color:#0088ff; border-radius:5px; float:left; margin-left:5px; } .countTime button:hover { background-color:#3272ba; } .countTime p { text-align:center; line-height:70px; font-size:40px; letter-spacing:0.1em; text-shadow:0 0 20px #0aafe6,0 0 20px rgba(10,175,230,0); } .countText { width:260px; height:24px; position:relative; top:0; left:50%; transform:translate(-50%,0); }

//倒计时 var timer; function counter(countTime, countObj) { if (countTime <= 0) { alert("请填写大于0的秒数"); return; } clearInterval(timer); var count = countTime * 1000; timer = setInterval(function() { count--; if (count == 0) { clearInterval(timer); alert("时间到了"); } countObj.html(countDown(count).min + ":" + countDown(count).s + ":" + countDown(count).ms); }, 1); } function countDown(count) { var ms = count % 1000; //毫秒 var s = (Math.floor(count / 1000)) % 60; //秒 var min = Math.floor(count / 1000 / 60); //分 if (ms < 10) { ms = '00' + ms; } else if (ms < 100) { ms = "0" + ms; } if (s < 10) { s = '0' + s; } if (min < 10) { min = "0" + min; } var otime = { ms: ms, s: s, min: min }; return otime; }

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

jQuery调用版本：2.1.4

countStart是“开始按钮”，调用counter函数，第一个参数是倒计时的秒数，第二个参数是倒计时显示的位置

$(".countStart").click(function(){
    var time=$(".time").val();
    counter(time,$(".count"));
})