                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /JavaScript进阶篇

如何让程序按照文本框中的秒数进行倒计时?

这是我的代码,直接运行,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-10-26

源自：JavaScript进阶篇 8-17

关注问题我要回答

1633

操作

收起

3 回答

DeLM
2015-11-17

用innerHTML的属性直接替换 HTML 元素的内容。

0 回复有任何疑惑可以回复我~

收起回答

花儿丶落了提问者
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()">
    
        <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赋值.

0 回复有任何疑惑可以回复我~

收起回答

qq_风的味道_1
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{

               };