小白学编程(JS):随机生成验证码

news2024/11/27 8:30:10

这道例题来自《JavaScipt从入门到精通》(第三版)中的【例6.6】。

书中给出的代码如下：

<body>
    <div id="result">&nbsp;&nbsp;产生的验证码：</div>
    <input type="button" name="Submit" class="go-wenbenkuang" value="生成" onclick="deal()">
   <script>
    function checkCode(digit){
             var result = "";
             for(i=0;i<parseInt(digit);i++){
                 result = result + (parseInt(Math.random()*10)).toString();
             }
             return result;
    }
   </script>
   <script>
    function deal(){
        result.innerHTML = "&nbsp;&nbsp;产生的验证码：" + checkCode(form1.digit.value);
    }
   </script>
</body>

浏览器显示效果：
在这里插入图片描述
点击“生成“按钮并没有获得想要的效果。说明程序出现了BUG。这里就体现的本书对于自学的初级者的不友好。不过，有BUG，找出BUG 再到解决BUG也是这个世界变强方式之一。当然我也相信，对于作者一定也会在后续的版本中有所改善。

修改后的代码：

<body>
    <div id="result">&nbsp;&nbsp;产生的验证码：</div>
   <form name="form1"> 
    位数：<input type="text" id="num">
      <input type="button" name="Submit" class="go-wenbenkuang" value="生成" onclick="deal()">
  </form>
   <script>
    function checkCode(digit){
             var result = "";
             for(let i=0;i < digit;i++){
                 result = result + (parseInt(Math.random()*10)).toString();
             }
            return result;
    }
    function deal(){
         var  result = document.getElementById("result");
         var num = document.getElementById("num").value;
        result.innerHTML = "&nbsp;&nbsp;产生的验证码：" + checkCode(num);
    }
   </script>
</body>