如何讓程序按照文本框中的秒數進行倒計時?
這是我的代碼,直接運行,num是空,總是要程序運行一次,num才變化
<!DOCTYPE html>
<html>
?<head>
? <title>瀏覽器對象</title> ?
? <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
?? ?
?</head>
?<body>
? <!--先編寫好網頁布局-->
? <h2>操作成功</h2>
? <p><span id="countnum">10</span>秒后回到首頁 <a href="javascript:window.history.forward()">返回</a></p>
? <form action="" name="form1">
? <input type="button" name="" value="開始"onclick="count()" id="button1">
??? <input type="button" name="" value="停止" id="button2" onclick="stop()">
??? <input type="text" name="" value="" placeholder="" id="second">
??????? <script type="text/javascript">
??????? var num = parseInt(document.getElementById("second").value)
??????? var i
??????? function count(){
??????????? if (num>0) {
??????????????? window.document.getElementById("countnum").innerHTML = num
??????????????? document.getElementById("button1").disabled = true
??????????? } else{
??????????????? document.getElementById("button1").disabled = false
??????????????? window.location.href = "http:www.baidu.com"
??????????? };
??????? num--
??????? i = setTimeout("count()", 1000)
??????? }
??? function stop () {
??????? clearTimeout(i)
??????? document.getElementById("button1").disabled = false
??????? // body...
??? }
?? //獲取顯示秒數的元素,通過定時器來更改秒數。
?? //通過window的location和history對象來控制網頁的跳轉。
? ?
?</script>
</form>
</body>
</html>
2015-11-17
用innerHTML的屬性直接替換 HTML 元素的內容。
2015-10-27
<!DOCTYPE html>
<html>
?<head>
? <title>瀏覽器對象</title> ?
? <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
?? ?
?</head>
?<body>
? <!--先編寫好網頁布局-->
? <h2>操作成功</h2>
? <p><span id="countnum">10</span>秒后回到首頁 <a href="javascript:window.history.forward()">返回</a></p>
? <form action="" name="form1">
? <input type="button" name="" value="開始"onclick="count()" id="button1">
??? <input type="button" name="" value="停止" id="button2" onclick="stop()">
??? <input type="text" name="" value="" placeholder="" id="second" onblur="aa()">
??? <!-- 添加一個文本框失焦的事件,在此函數中給num賦值并返回num即可, -->
??????? <script type="text/javascript">
??????? var num //將num定義為全局變量
??????? var i
??????? function aa(){
??????????? num = parseInt(document.getElementById("second").value)
??????????? return num
??????? }
??????? function count(){
??????????? if (num>0) {
??????????????? window.document.getElementById("countnum").innerHTML = num
??????????????? document.getElementById("button1").disabled = true
??????????? } else{
??????????????? document.getElementById("button1").disabled = false
??????????????? window.location.href = "http:www.baidu.com"
??????????? };
??????? num--
??????? i = setTimeout("count()", 1000)
??????? }
??? function stop () {
??????? clearTimeout(i)
??????? document.getElementById("button1").disabled = false
??????? document.getElementById("second").focus()
??????? document.getElementById("second").select()
??????? // body...
??? }
?? //獲取顯示秒數的元素,通過定時器來更改秒數。
?? //通過window的location和history對象來控制網頁的跳轉。
? ?
?</script>
</form>
</body>
</html>
已經解決了,主要就是文本框中的值在改變之后要給num復制,所以我增加了一個文本框的失焦時間來給num賦值.
2015-10-26
var count = document.getElementById('count');
?? ??? ?var a = document.getElementsByTagName('a')[0];
?? ??? ?var num = 5;
?? ??? ?var timer = setInterval(function? () {
?? ??? ??? ??? ??? ?
?? ??? ??? ?
?? ??? ??? ??? ?num--;
?? ??? ??? ??? ?count.innerHTML = num;
?? ??? ??? ??? ?if (num == 0) {
?? ??? ??? ??? ??? ??? ?//window.history.back();
?? ??? ??? ??? ??? ?count.innerHTML = 0;
?? ??? ??? ??? ??? ?clearInterval(timer);
?? ??? ??? ??? ?} else{
?? ??? ??? ??? ?};