无聊的时候可以用它和朋友进行互动
这是由玩家进行自主选择的小游戏,需玩家输入任意范围的整数,点击“开始”按钮,
计算机会产生玩家输入范围内的随机数;点击“停止”按钮,将显示数字最终结果
版权归午后的阳光所有,欢迎使用和反馈 dellshouji@163.com;
感兴趣的,可以查看制作源码;
涉及的知识点:
html,css,javaScript,jQury
随机数的三个值 有可能会一样
目前陆续做了三次优化
优化一:
禁用按钮设置
方式一:
$(":button")[0].disabled=true; $(":button")[1].disabled=false;
方式二:
$("#start").attr("disabled",true); $("#stop").attr("disabled",false);
优化二:去除div与浏览器间的上边距去掉#bigDiv的css样式--
margin: 0px auto;
/*div网页居中*/,添加该css样式:
*{ margin: 0px auto;}
优化三:限制用户只能输入正整数,用到了正则表达式想省事的同学,直接将下面代码拷贝,替换掉源码的
$("#start").click(function () {}
函数就好了/*点击开始按钮,产生的事件*/
$("#start").click(function() { range = prompt("请输入随机数范围:", ""); if (/^[1-9]\d*$/.test(range)) { //将开始标签禁用,停止标签启用 $("#start")[0].disabled = true; $("#stop")[0].disabled = false; myNumber = setInterval(showRandomNum, 1); //多长时间运行一次 } else if (range != null) { alert("请输入正整数!"); } });回复
今天顺便把这个显示NaN问题给解决了,本来以为大家都能看懂的,优化二在下面,现在做优化三:优化内容:限制用户只能输入正整数,用到了正则表达式想省事的同学,直接将下面代码拷贝,替换掉源码的
$("#start").click(function () {}
函数就好了
/*点击开始按钮,产生的事件*/ $("#start").click(function() { range = prompt("请输入随机数范围:", ""); //限制用户输入的内容只能是正整数 if (/^[1-9]\d*$/.test(range)) { //将开始标签禁用,停止标签启用 $("#start")[0].disabled = true; $("#stop")[0].disabled = false; myNumber = setInterval(showRandomNum, 1); //多长时间运行一次 } else if (range != null) { alert("请输入正整数!"); } });
用什么工具主要是看个人喜好,我常用的是Editplus和webstorm,dreamweaver应该也不错,主要用了setInterval()这个函数;另外借此机会,进行一下优化:
$("#start")[0].disabled=true和$("#stop")[0].disabled=false;
禁用按钮设置现在看起来很不爽,可以改成这样:
方式一:
$(":button")[0].disabled=true;$(":button")[1].disabled=false;
方式二:
“$("#start").attr("disabled",true);$("#stop").attr("disabled",false);