这个脚本用 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> <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> <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> <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> <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> <font color="blue" style='font-size:150px' id="num"></font> <br> </body> </html>
很好。