用 javascript 实现随机抽奖 ( 从 1 到输入值之间任取一个整数值）

这个脚本用 javascript 实现随机抽奖 ( 从 1 到输入值之间任取一个整数值）。

比如输入10，点击 Start 就会显示从1到10之间的随机整数。

<html>
<head>
<title>randomnumber.html</title>
<script type="text/javascript">
    //该脚本实现了从1到100之间随机数
    function count() {
        if (document.getElementById("max").value.length > 0) {
            max = document.getElementById("max").value; //max， 全局变量
        } 
        else {
            max = 0;
            return false;
        }
        document.getElementById("num").innerHTML = 1 + parseInt(max * Math.random());
    }

    function start() {
        if (document.getElementById("max").value == 0) //此处是判断如果输入0，则提示用户
        //输入正整数，并不执行count()
        {
            alert("Positive integer is required.");
            return false;
        } 
        else
        {
            timeId = setInterval("count();", 100);//timeId 是个全局变量(没有 var) 而不是
            //局部变量。整体的含义是，每隔 xx 毫秒执行一次 count()
        }
    }
    function stop() {
        clearInterval(timeId);
    }
</script>
</head>

<body>
    <form>
        <input type="text" style='font-size:34px' id="max"> <br><br>
        <input type="button" style='font-size:40px' value="Start" onclick="start()">
        <input type="button" style='font-size:40px' value="Stop" onclick="stop();">
        <input type="reset" style='font-size:40px' value="Reset">
    </form>
    <br>
    <font color="blue" style='font-size:250px' id="num">0</font>
</body>
</html>

结果大家自己试试

但是上面 script 有的 bug 是，文本框应该只接受正整数，而脚本没有对输入是否为字符串，负数，小数进行验证。

于是更改如下：

<html>
<head>
<title>randomnumber.html</title>
<script type="text/javascript">
    //该脚本实现了从 1 到 xx 正整数之间随机数
    var errorString = "Please input a positive integer.";
    function count() {
        if (document.getElementById("max").value.length > 0) 
　　　　 {
            max = document.getElementById("max").value; //max， 全局变量
        } 
        else 
　　　　 {
            max = 0;
            return false;
        }
        document.getElementById("num").innerHTML = 1 + parseInt(max * Math.random());
    }

    function start() {
        if(isNaN(document.getElementById("max").value))//如果输入的不是数字，则报错。
        {
        alert(errorString);
        return false;
        }
        if (document.getElementById("max").value.toString().indexOf(".") >0)//如果输入小数
        //也就是包含了 "."， 则报错。
        {
        alert(errorString);
        return false;
        }
        if (document.getElementById("max").value < 1) //此处是判断如果输入0或负整数，则提示用户
        //输入正整数，并不执行count()
        {
            alert(errorString);
            return false;
        } 
        else
        {
            timeId = setInterval("count();", 100);//timeId 是个全局变量(没有 var) 而不是
            //局部变量。整体的含义是，每隔 xx 毫秒执行一次 count()
        }
    }
    function stop() {
        clearInterval(timeId);
    }
</script>
</head>

<body>
    <form>
        <input type="text" style='font-size:34px' id="max" onKeyPress="if(event.keyCode==13){start();};">
        <!-- 上面 event.keyCode==13是指如果按Enter 键，则。。。 -->
        <br><br>
        <input type="button" style='font-size:40px' value="Start" onclick="start()">
        <input type="button" style='font-size:40px' value="Stop" onclick="stop();">
        <input type="reset" style='font-size:40px' value="Reset">
    </form>
    <br>
    &nbsp;&nbsp;&nbsp;&nbsp;<font color="blue" style='font-size:250px' id="num">0</font>
</body>
</html>

这回基本完成了。但是仍然有一个问题。

就是如果我们输入一个很大的值，比如9999999999999999999999（22个9），结果在大部分事件都是1位数，也就是1-9。如果我们减少一个9（21个9），那么几乎所有结果都是最后4位为0.

这应该是和 Random（）函数本身的算法有关系。

为了让结果更好一些，通过实验，我应该把输入数字的Length限制在14以内。
结果如下

<html>
<head>
<title>randomnumber.html</title>
<script type="text/javascript">
    //该脚本实现了从 1 到 xx 正整数之间随机数
    var errorString1 = "Please input a positive integer.";
    var errorString2 = "Input is too big.";
    
    function count() {
        if (document.getElementById("max").value.length > 0) //如果文本框输入了值
        {
            max = document.getElementById("max").value; //max， 全局变量
        } 
        else //如果文本框没输入值，设置 max为0
        {
            max = 0;
            return false;
        }
        document.getElementById("num").innerHTML = 1 + parseInt(max * Math.random());
    }

    function start() {
        if(isNaN(document.getElementById("max").value))//如果输入的不是数字，则报错。
        {
        alert(errorString1);
        return false;
        }
        if (document.getElementById("max").value.toString().indexOf(".") >0)//如果输入小数
        //也就是包含了 "."， 则报错。
        {
        alert(errorString1);
        return false;
        }
        if (document.getElementById("max").value < 1) //此处是判断如果输入0或负整数，则提示用户
        //输入正整数，并不执行count()
        {
            alert(errorString1);
            return false;
        }
        if (document.getElementById("max").value.length > 14)//允许输入的最大程度为14
        {
            alert(errorString2);
            max = 0;
            return false;
        }
        else
        {
            timeId = setInterval("count();", 100);//timeId 是个全局变量(没有 var) 而不是
            //局部变量。整体的含义是，每隔 xx 毫秒执行一次 count()
        }
    }
    function stop() {
        clearInterval(timeId);
    }
</script>
</head>

<body>
    <form>
        <input type="text" style='font-size:34px' id="max" onKeyPress="if(event.keyCode==13){start();};">
        <!-- 上面 event.keyCode==13是指如果按Enter 键，则。。。 -->
        <br><br>
        <input type="button" style='font-size:40px' value="Start" onclick="start()">
        <input type="button" style='font-size:40px' value="Stop" onclick="stop();">
        <input type="reset" style='font-size:40px' value="Reset">
    </form>
    <br>
    &nbsp;&nbsp;&nbsp;&nbsp;<font color="blue" style='font-size:50px' id="num">0</font>
</body>
</html>

好了。这回基本上没有bug了。

但是我们其实对于 max TextField 限制输入14个字符有更好的方法。同时我们还希望一旦弹出错误消息后能够清空 max TextField 并设置焦点在它上面。看下面

<html>
<head>
<title>random number</title>
<script type="text/javascript">
    //该脚本实现了从 1 到 xx 正整数之间随机数
    var errorString = "Please input a positive integer.";
    function count() {
        if (document.getElementById("max").value.length > 0) 
　　　　 {
            max = document.getElementById("max").value; //max， 全局变量
        } 
        else 
　　　　 {
            max = 0;
            return false;
        }
        document.getElementById("num").innerHTML = 1 + parseInt(max * Math.random());
    }

    function start() {
        if(isNaN(document.getElementById("max").value))//如果输入的不是数字，则报错。
        {
        alert(errorString);
        document.forms[0].elements[0].value = ""; //清空 "max" TextField
        document.forms[0].elements[0].focus();//把焦点设置到 max TextField
        //document.getElementById("max").value="";//清空 "max" TextField
        //document.getElementById("max").focus();//把焦点设置到 max TextField
        return false;
        }
        if (document.getElementById("max").value.toString().indexOf(".") >0)//如果输入小数
        //也就是包含了 "."， 则报错。
        {
        alert(errorString);
        document.forms[0].elements[0].value = ""; //清空 "max" TextField
        document.forms[0].elements[0].focus();//把焦点设置到 max TextField
        //document.getElementById("max").value="";//清空 "max" TextField
        //document.getElementById("max").focus();//把焦点设置到 max TextField
        return false;
        }
        if (document.getElementById("max").value < 1) //此处是判断如果输入0或负整数，则提示用户
        //输入正整数，并不执行count()
        {
        alert(errorString);
        document.forms[0].elements[0].value = ""; //清空 "max" TextField
        document.forms[0].elements[0].focus();//把焦点设置到 max TextField
        //document.getElementById("max").value="";//清空 "max" TextField
        //document.getElementById("max").focus();//把焦点设置到 max TextField
        return false;
        } 
        else
        {
            timeId = setInterval("count();", 100);//timeId 是个全局变量(没有 var) 而不是
            //局部变量。整体的含义是，每隔 xx 毫秒执行一次 count()
        }
    }
    function stop() {
        clearInterval(timeId);
    }
</script>
</head>

<body>
    <form>
        <input type="text" style='font-size:34px' maxlength="14" id="max" >
        <!-- 上面 event.keyCode==13是指如果按Enter 键，则。。。 -->
        <br><br>
        <input type="button" style='font-size:40px' value="Start" onclick="start()">
        <input type="button" style='font-size:40px' value="Stop" onclick="stop();">
        <input type="reset" style='font-size:40px' value="Reset">
    </form>
    <br>
    &nbsp;&nbsp;&nbsp;&nbsp;<font color="blue" style='font-size:150px' id="num">0</font>
</body>
</html>

我们在看一个随机抽取人名：

<html>
<head>
<title>random number</title>
<script type="text/javascript">
    //随机抽取人名
    var errorString = "Please input a positive integer.";
    var arr = ["Alan C", "Alan T", "Cheney Ma", "Simon Zhao",
    "Jeade Kong", "Shawn Shang", "Phil Lew", "Jan", "Misly"];
    
    function count() {
        max = arr.length; //max， 全局变量
        document.getElementById("num").innerHTML = arr[parseInt(max * Math.random())];
    }

    function start()
    {
        timeId = setInterval("count();", 100);
    }
    function stop() {
        clearInterval(timeId);
    }
</script>
</head>

<body>
    <form>
        <input type="button" style='font-size:40px' value="Start" onclick="start()">
        <input type="button" style='font-size:40px' value="Stop" onclick="stop();">
    </form>
        <br>&nbsp;&nbsp;&nbsp;&nbsp;
        <font color="blue" style='font-size:150px' id="num"></font>
    <br>
</body>
</html>

这个就是随机抽取 hard code 好的人名。

上面还是有个 bug。就是如果连续点击 Start 。然后再点击 Stop。Stop 则不好使。下面 fix 了这个 bug。

<html>
<head>
<title>random number</title>
<script type="text/javascript">
    //随机抽取人名
    var errorString = "Please input a positive integer.";
    var arr = ["Alan C", "Alan T", "Cheney Ma", "Simon Zhao",
    "Jeade Kong", "Shawn Shang", "Phil Lew", "Jan", "Misly"];
    max = arr.length; //max， 全局变量    
    var flag = true;
    
    function count() {
        document.getElementById("num").innerHTML = arr[parseInt(max * Math.random())];
    }

    function start()
    {
        if (flag == true)
        {
        timeId = setInterval("count();", 100);
        flag = false;
        }
        else
        {}
    }
    function stop() {
        clearInterval(timeId);
        flag = true;
    }
</script>
</head>

<body>
    <form>
        <input type="button" style='font-size:40px' value="Start" onclick="start()">
        <input type="button" style='font-size:40px' value="Stop" onclick="stop();">
    </form>
        <br>&nbsp;&nbsp;&nbsp;&nbsp;
        <font color="blue" style='font-size:150px' id="num"></font>
    <br>
</body>
</html>

很好。

相关阅读:
在ASP.NET页面中推荐使用覆写（Override）而不是事件处理（Event Handler）［转帖］
box2dweb资料
 两个游戏开发相关的工具
 django中实现图片上传
 html5和webgame开发
 我的js游戏小引擎 —— 可使用canvas模式或DOM模式
 如何处理网络游戏网络延迟问题
 iphone5和ios6 对html5、web app带来的影响
 矩阵变化和坐标
 连连看游戏demo
原文地址：https://www.cnblogs.com/backpacker/p/2622426.html

用 javascript 实现随机抽奖 ( 从 1 到 输入值之间任取一个整数值）

用 javascript 实现随机抽奖 ( 从 1 到输入值之间任取一个整数值）