黑马程序员技术交流社区

标题: html一个问题 [打印本页]
作者: wang346351    时间: 2013-4-10 12:12
标题: html一个问题
本帖最后由 wang346351 于 2013-4-11 13:22 编辑

下面是代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>注册</title>
    <script type="text/javascript">
        var leftSeconds = 10;
        var intervalId;
        function CountDown() {
            var btnReg = document.getElementById("btnReg");
            if (btnReg) {
                if (leftSeconds <= 0) {
                    btnReg.value = "同意";
                    btnReg.disabled = "";
                    clearInterval(intervalId);
                }
                else {
                    btnReg.value = "请仔细阅读协议(还剩" + leftSeconds + "秒)";
                    leftSeconds--;
                }
            }
            intervalId = setInterval("CountDown()", 1000);
        }
    </script>
</head>
<body>
    <textarea></textarea>
    <input id="btnReg" type="button" value="同意" disabled="disabled" />
</body>
</html>

我想实现下图这个效果，老是实现不了，不知道是哪里有问题

作者: 郑丹丹1990    时间: 2013-4-10 12:51
js视频中这个讲解，你可以参考下！
作者: 绿树林    时间: 2013-4-10 13:33
这样改就行了，你写了函数，没有运行的原因

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>注册</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <script type="text/javascript">
        var leftSeconds = 10;
        var intervalId;
        function CountDown() {
            var btnReg = document.getElementById("btnReg");
                        btnReg.disabled="disabled"
            if (btnReg) {
                if (leftSeconds <= 0) {
                    btnReg.value = "同意";
                    btnReg.disabled = "";
                    clearInterval(intervalId);
                }
                else {
                    btnReg.value = "请仔细阅读协议(还剩" + leftSeconds + "秒)";
                    leftSeconds--;
                }
            }
            intervalId = setInterval("CountDown()", 1000);
        }
    </script>
</head>
<body>
    <textarea></textarea>
    <input id="btnReg" type="button" value="同意"  />
    <script type="text/javascript">
        CountDown();
    </script>
</body>
</body>
</html>
作者: 宋兴征    时间: 2013-4-10 22:17
郑丹丹1990 发表于 2013-4-10 12:51
js视频中这个讲解，你可以参考下！
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <title>注册</title>
  5.     <script type="text/javascript">
  6.         var leftSeconds = 10;
  7.         var intervalId;
  8.         function CountDown() {
  9.             var btnReg = document.getElementById("btnReg");
  10.             if (btnReg) {
  11.                 if (leftSeconds <= 0) {
  12.                     btnReg.value = "同意";
  13.                     btnReg.disabled = "";
  14.                     clearInterval(intervalId);
  15.                 }
  16.                 else {
  17.                     btnReg.value = "请仔细阅读协议(还剩" + leftSeconds + "秒)";
  18.                     leftSeconds--;
  19.                 }
  20.             }
  21. //            intervalId = setInterval("CountDown()", 1000);
  22.         }
  23.         setInterval("CountDown()", 1000);
  24.     </script>
  25. </head>
  26. <body >
  27.     <textarea></textarea>
  28.     <input id="btnReg" type="button" value="同意" disabled="disabled" />
  29. </body>
  30. </html>
复制代码
作者: 韦俊琳    时间: 2013-4-10 22:46
本帖最后由 韦俊琳 于 2013-4-10 22:48 编辑

楼主，要注意在<body>里面添加onload事件,代码修改如下：
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <title>注册</title>
  5.     <script type="text/javascript">
  6.         var leftSeconds = 10;
  7.         var intervalId;
  8.         function CountDown() {

  10.             var btnReg = document.getElementById("btnReg");
  11.             if (btnReg) {
  12.                 if (leftSeconds <= 0)
  13.                 {
  14.                 btnReg.value = "同意";
  15.                 btnReg.disabled = "";
  16.                 clearInterval(intervalId);
  17.                 }

  19.                 else {
  20.                 btnReg.value = "请仔细阅读协议(还剩" + leftSeconds + "秒)";
  21.                 leftSeconds--;
  22.                 }
  23.                
  24.             }
  25.         clearInterval(intervalId);
  26.         intervalId = setInterval("CountDown()", 1000);
  27.         }
  28.     </script>
  29. </head>
  30. <body onload="CountDown()">
  31.    <textarea></textarea>
  32.     <input id="btnReg" type="button" value="同意" disabled="disabled" />
  33. </body>
  34. </html>
复制代码
作者: HM刘磊    时间: 2013-4-11 10:07
本帖最后由 HM刘磊 于 2013-4-11 10:16 编辑


这是我照着视频学习写的实例，仅供参考，共同进步。
<html   >
<head>
    <title>无标题页</title>
    <script type="text/javascript">

  var renum=10;
    var clearNumID;
    function renums(){
       var obj=document.getElementById("ok");
       if(!obj){
       return;
       }
       if(renum<=0){
      
       obj.value="同意";
        obj.disabled="";
       clearInterval(clearNumID);
       }
       else{
            obj.value="请仔细阅读协议(还剩"+renum+"秒)";
            renum--;
      
      
    }
  }
     clearNumID=setInterval("renums()",1000);//这个表达式应该放在函数“renums（）”外面，以实现递归调用。
    </script>
</head>
<body >
<a href="javascript:window.history.back()">back</a>
<div ><span ></span><span> <textarea rows="100px" cols="50px"></textarea>
    <input type="button" disabled="disabled" id="ok" value="同意" /></span></div>
<span><input type="text" id="value1" /><label  style="width:1cm" >+</label><input type="text" id="value2" /><input type="button" value="=" /><input type="text" id="value" /></span>
</body>
</html>




欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2