js實現(xiàn)的簡單文本框倒計時
<!DOCTYPE html>
<html>
<head>
<title> countdown counter</title>
<meta charset="UTF-8">
<style type="text/css">
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>
共同學(xué)習(xí)，寫下你的評論
評論加載中...
作者其他優(yōu)質(zhì)文章
