jQuery随机数(原创)

所属分类:其他-杂项,独立的部件

 36046  329  查看评论 (15)
分享到微信朋友圈
X
jQuery随机数(原创) ie兼容6

无聊的时候可以用它和朋友进行互动

这是由玩家进行自主选择的小游戏,需玩家输入任意范围的整数,点击“开始”按钮,

计算机会产生玩家输入范围内的随机数;点击“停止”按钮,将显示数字最终结果

版权归午后的阳光所有,欢迎使用和反馈 dellshouji@163.com;

感兴趣的,可以查看制作源码;

涉及的知识点:

html,css,javaScript,jQury


相关插件-杂项,独立的部件

Jquery 二维码美化(高度定制)

Jquery 二维码生成插件,高度定制
  杂项
 61559  429

鼠标移动监听

鼠标移动监听页面跳转
  杂项
 30230  318

在线PDF预览插件PDFObject.js

PDFObject.js,是一个 JavaScript 库用来在HTML中动态嵌入 PDF 文档。
  杂项
 251771  578

jQuery步骤条进度条插件setStep.js

一款简单额步骤条,可点击 也可按钮控制。
  杂项
 57456  377

讨论这个项目(15)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    ccc1 0
    2018/1/31 15:25:44

    求第二版本代码链接

    回复
    甄展 0
    2017/4/24 17:04:54

    随机数的三个值 有可能会一样

        午后的阳光0
        2017/5/17 13:16:36

        在2.0版本中,已修改

        午后的阳光0
        2017/5/17 14:04:06
        感谢您的指正,此问题已在2.0版本中得到解决。较1.0,2.0版本主要针对网友提出的问题,进行了优化与修改。新增知识点:函数式编程,JSON对象的使用及递归
    回复
    CIMI-Sherry 0
    2016/10/26 17:10:27
    有问题喔~如果范围输入太大了,那么出来的随机数范围就会更广,数字过长之后的结果就是第一个格子里面的数字出来了,遮住了第二个格子里面的数字,谷歌测出来的
        午后的阳光0
        2017/5/17 14:05:00

        感谢您的指正,此问题已在2.0版本中得到解决。较1.0,2.0版本主要针对网友提出的问题,进行了优化与修改。

        新增知识点:函数式编程,JSON对象的使用及递归
    回复
    午后的阳光 3
    2016/10/17 14:10:29

    目前陆续做了三次优化

    优化一:

    禁用按钮设置

    方式一:

    $(":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("请输入正整数!");
        }
    });
    回复
    ki?mi 0
    2016/10/11 23:10:47
    大神,你太棒了,代码借我研究,刚入门,谢谢 回复
    ki?mi 0
    2016/10/11 22:10:48
    界面很干净,如果更绚丽点是不是更适合大型活动。
        午后的阳光1
        2016/10/17 14:10:45

        你可以根据你的需求进行改善和优化,我在此再做一点优化:优化内容:去除div与浏览器间的上边距去掉#bigDiv的css样式-- 

        margin: 0px auto;
        /* div网页居中*/

        ,添加该css样式:

        *{ margin: 0px auto;}

        即可。另外,我之前还有个想法就是,三个div的宽度能够随着输入数字的大小而进行变化,要是可以的话,你可以坐下尝试。记得分享给我哦!

    回复
    小洋 0
    2016/8/4 16:08:11
    NaN
        午后的阳光1
        2016/8/17 14:08:34
        Nan表示你所输入的内容是非数字,也就是说输入的内容只能是数字;你可以在代码里,设置输入框里的内容只能是数字
        午后的阳光1
        2016/10/17 14:10:54

        今天顺便把这个显示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("请输入正整数!");
            }
        });
    回复
    z 0
    2016/6/13 10:06:43
    大神,这个是用什么工具写的?
        午后的阳光3
        2016/8/17 15:08:21

        用什么工具主要是看个人喜好,我常用的是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);
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复