js实现的简单文本框倒计时-原创手记-慕课网

<!DOCTYPE html>
<html>
<head>
<title> countdown counter</title>
<meta charset="UTF-8">
<style type="text/css">

box{

        position: absolute;
        width: 350px;
        height: 350px;
        border: 3px solid #aaa;
        border-radius: 20px;
        margin: 100px 400px;
        background-color: #9cf;
    }
    input{
        float: left;
        width: 140px;
        height: 300px;
        margin-top: 25px;
        margin-left: 20px;
        border: 3px solid #aaa;
        border-radius: 20px;
        font-size: 220px;
        text-indent: 10px;
    }
    #btn{
        position: absolute;
        width: 80px;
        height: : 50px;
        font-size: 20px;
        top: 500px;
        left: 550px;
    }
</style>

</head>
<body>
<div id="box">
<form>
<input type="text" id="txt1">
<input type="text" id="txt2">
</form>
</div>
<button id="btn" onclick="func()">开始</button>
<script type="text/javascript">
function func(){
var txt1v = parseInt(document.getElementById("txt1").value);
var txt2v = parseInt(document.getElementById("txt2").value);
var txt1 = document.getElementById("txt1");
var txt2 = document.getElementById("txt2");
if (txt1v < 0 txt1v > 6 txt2v < 0 txt2v > 9 (txt1v == 6 && txt2v != 0)) {
alert("您的输入有误。");
}else{
var t = setInterval(function update(){
if (txt2v == 0) {
if (txt1v == 0) {
clearInterval(t);
location.href = "http://www.baidu.com";
return;
}
txt1v -= 1;
txt2v = 9;
txt1.value = txt1v;
txt2.value = txt2v;
}else{
txt2v -= 1;
txt2.value = txt2v;
}
}, 1000);
}
}
</script>
</body>
</html>