Html随机数小程序

最新推荐文章于 2024-05-06 17:11:44 发布
最新推荐文章于 2024-05-06 17:11:44 发布
阅读量1.6k 收藏 3
点赞数 3
文章标签： html javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Sy_origami/article/details/124891694
版权

一个简单的随机数小程序

<html>

<head>
    <meta charset="UTF-8">
    <title>在线随机数生成器</title>
    <meta name="keywords" content="随机数生成器,随机摇号器,在线随机数生成器">
    <meta name="description" content="本网站提供在线随机数生成器，在线抽签摇号，在线抽奖，大转盘抽奖，双色球模拟摇号，并且可以方便用户自定义参数等功能">
    <meta name="baidu-site-verification" content="sA9lncqwpX">
    <meta name="shenma-site-verification" content="9b2a8806d0e679b68f0a30f5bcb67f08_1578560402">
    <meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0,user-scalable=no">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="base.css">

    <script>
        var _hmt = _hmt || [];
        (function () {
            var hm = document.createElement("script");
            hm.src = "https://hm.baidu.com/hm.js?7460c520f93b150eaea8298a605ed6f9";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(hm, s);
        })();
    </script>
</head>

<body>
    <div class="box1" style="height: 50px"></div>
    <div class="container jumbotron text-center top">
        <div class="row">
        </div>
        <h1 style="margin-bottom: 5%;" align="center">随机数生成器</h1>
        <div class="row">
            <div class="col-md-2 col-3" style="">
                <span for="shumu" class="input-label"
                    style="margin-bottom: 0;text-align: center;float: right;padding-top:5px;">数目&nbsp;:</span>
            </div>
            <div class="col-md-3 col-9">
                <input type="number" class="form-control" onkeyup="this.value=this.value.replace(/\D/g,'')"
                    onafterpaste="this.value=this.value.replace(/\D/g,'')" id="shumu" value="10">
            </div>
        </div>
        <div class="row" style="margin-top: 10px;">
            <div class="col-md-2 col-3 " style="float: right;">
                <span for="min" class="input-label"
                    style="margin-bottom: 0;text-align: center;float: right;padding-top:5px;">最小值&nbsp;:</span>
            </div>
            <div class="col-md-3 col-9">
                <input type="number" onkeyup="this.value=this.value.replace(/\D/g,'')"
                    onafterpaste="this.value=this.value.replace(/\D/g,'')" class="form-control" name="min" id="min"
                    value="0">
            </div>
            <div class="col-md-2 col-3 input_top" style="float: right;">
                <span for="max" class="input-label"
                    style="margin-bottom: 0;text-align: center;float: right;padding-top:5px;">最大值&nbsp;:</span>
            </div>
            <div class="col-md-3 col-9 input_top">
                <input type="number" onkeyup="this.value=this.value.replace(/\D/g,'')"
                    onafterpaste="this.value=this.value.replace(/\D/g,'')" class="form-control" name="max" id="max"
                    value="100">
            </div>
        </div>
        <div class="row" style="margin-top: 10px;">
            <div class="col-md-2 col-3" style="float: right;">
                <span for="only" class="input-label"
                    style="margin-bottom: 0;text-align: center;float: right;padding-top:5px;">是否唯一&nbsp;:</span>
            </div>
            <div class="col-md-3 col-9">
                <select id="only" class="form-control">
                    <option value="1" selected="selected">&nbsp;唯一</option>
                    <option value="2">&nbsp;不唯一</option>
                </select>
            </div>
        </div>
        <p style="margin-top: 5%;" align="center">
            <button class="col-lg-2 col-sm-8 btn-success" id="start"
                style="border-radius: 5px; height: 40px; border: 0px none; display: block;">生成</button>
            <button class="col-lg-2 col-sm-8 btn-success btn-info" id="stop"
                style="border-radius: 5px; height: 40px; border: 0px none; display: none;">结束</button>
        </p>
        <h1 class="random_font" id="shu">89 </h1>

    </div>

    <script src="../3_JavaScript/app.js"></script>
    <script>
        var timer;
        var number = 0;

        function random_number(min, max) {
            var rand = parseInt(Math.random() * (max - min + 1) + min);
            return rand;
        }

        function array_contain(array, obj) {
            for (var i = 0; i < array.length; i++) {
                if (array[i] == obj) 
                    return true;
            }
            return false;
        }

        window.onload = function () {
            var container = document.getElementById("shu"),
                start = document.getElementById("start"),
                stop = document.getElementById("stop");
            //事件调用
            start.onclick = play;
            stop.onclick = end;

            document.onkeyup = function (event) {
                event = event || window.event;
                if (event.keyCode == 13 || event.keyCode == 32) {
                    if (number == 0) {
                        play();
                        number = 1;
                    } else {
                        end();
                        number = 0;
                    }
                }
            }

            function play() {
                clearInterval(timer);
                timer = setInterval(function () {
                    start.style.display = "none";
                    stop.style.display = "block";
                    var x = document.getElementById("min").value;
                    var y = document.getElementById("max").value;
                    var shu = document.getElementById("shumu").value;
                    var only = document.getElementById("only").value;
                    var data = [];
                    for (var i = 0; i < 10000; i++) {
                        if (data.length >= shu) {
                            break;
                        }
                        var rand = random_number(x, y);
                        if (only == 1) {
                            if (!array_contain(data, rand)) {
                                data.push(rand + " ")
                            }
                        } else {
                            data.push(rand + " ")
                        }

                    }
                    container.innerText = data.join(" ");
                    start.classList.remove("btn-success");
                    start.classList.add("btn-primary");
                    stop.classList.add("btn-danger");
                }, 100);
            }

            function end() {
                stop.style.display = "none";
                start.style.display = "block";
                clearInterval(timer);
                stop.classList.remove("btn-danger");
                stop.classList.add("btn-info");
                start.classList.remove("btn-primary");
                start.classList.add("btn-success");

            }
        }
    </script>

</body>

</html>
Sy_origami
关注
  • 3
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
一个简单的抽取数字的抽奖小程序
01-05
小巧的抽奖程序，右键可设置抽取的范围。用于小型的抽奖，也可用于随机的抽取答题。
html随机数1至100代码,js生成1到100的随机数_WEB前端开发
weixin_34065550的博客
06-09 4354
Layui时间选择框介绍_WEB前端开发layui是一款采用自身模块规范编写的前端UI框架，事实上layui更多是面向于后端开发者，本文就来为大家介绍一下layui框架中设置时间选择框的方法。js生成1到100的随机数js生成随机数使用math.random()函数Math.random()具体实现：1、定义一个random()函数，原理是 随机数和最大值减最小值的差相乘 最后再加上最小值。htm...
Html随机数random
Boxzhang的博客
10-12 6627
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script> // document.writeln( Math.random() ); document.writeln(parseInt(
html中的random函数,random库的基本使用
weixin_29204749的博客
07-01 1254
random库是使用随机数的python标准库计算机产生的随机数是伪随机数，是采用梅森旋转算法生成的(伪)随机序列中的元素random库主要用于生成随机数使用random库：import randomrandom库包含两类函数，共八个基本随机数函数:seed(),andom()扩展随机数函数:randint(),getrandbits(),uniform(),randrange(),choice,...
随机数生成器代码HTML5
emptyset的博客
09-23 600
字符数量:随机数生成器
html随机数怎么控制概率,如何将概率添加到随机数生成器中
weixin_28969555的博客
06-23 235
我以前正在研究生成一个随机名称列表，模仿他美国国家人口基数;所需的数千个名字模仿了美国人口中的重复使用。为此，我需要一个名字列表以及Sur名称和它们的使用频率。因此，我从社会保障管理局获取种子数据，以获得1000个First和Sur名称，以及它们的使用频率。Think of three columns. The first column is a list of names, the second...
微信小程序生成随机数
蓝胖子的博客
12-17 6001
const charts = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']; const random = function generateMixed(n) { var res = ''
【前端小工程HTML+CSS+JS】随机数生成屋（简易随机数生成器）
m0_65787507的博客
01-29 1183
前端小工程
html 生成1-100的随机数
afufufufu的博客
11-02 3617
【代码】html 生成1-100的随机数。
使用微信小程序制作工具制作一个小游戏，猜数字游戏：游戏启动后随机生成一个0-100的数字后，在输入框中输入数字与生成的随机数进行比较，只能猜10次。“重新开始“按钮在初始状态是隐藏的，当猜对了或游戏结...
weixin_35750953的博客
12-29 508
首先，需要在小程序的 app.js 文件中声明全局变量 randomNumber，表示随机生成的数字。然后在小程序的 onLaunch 生命周期函数中，调用 Math.random() 方法随机生成一个0到1的数字，再将其乘以100并取整，即可得到一个0到100的随机数。 // app.js App({ onLaunch: function () { this.globalData.r...
微信小程序之随机数
weixin_47175781的博客
10-27 9023
微信小程序之随机数 我们的需求是用户是第一次进入或是选择拍照时给出一条随机文案 而当再一次进入或是选择同一张相片时，我们需要给出当时给用户展示的文案 随机数的语句是这样写的 //我规定随机数的大小不能大于文案的长度 var a = Math.floor((Math.random() * list.length)) 根据需求我们就需要把当时展示给用户的那一条文案存入缓存，方便比对 //判断用户点击的是拍照还是选择相片 //num=0的话是用户选择了拍照 if (num == 0) { //拍照永远给出
小游戏吃包子大赛 html+js 适应手机屏幕大小 适配微信小程序
01-10
html+ js+css小程序 随机数 可自行修改 编程 可以其他小程序 简单易读一看就懂 通过带着读者手写简化版 html+ jquery小程序，了解 html+ jquery核心原理。 在手写小程序的过程中会摘取整体框架中的核心逻辑， 有...
小程序 小游戏 微信 html 一个都不能死 可以修改编程 源码
02-14
html+ js+css小程序 随机数 可自行修改 编程 可以其他小程序 简单易读一看就懂 通过带着读者手写简化版 html+ jquery小程序，了解 html+ jquery核心原理。 在手写小程序的过程中会摘取整体框架中的核心逻辑， 有...
html+ jquery小程序 测测最近有多少异性暗恋你？
01-09
html+ jquery小程序 +php后端 随机数 可自行修改 编程 可以改成抽奖小程序 简单易读一看就懂 通过带着读者手写简化版 html+ jquery小程序，了解 html+ jquery核心原理。 在手写小程序的过程中会摘取整体框架中的...
2048小游戏 html+js+css适应手机屏幕大小 适配微信小程序
01-10
html+ js+css小程序 随机数 可自行修改 编程 可以其他小程序 简单易读一看就懂 通过带着读者手写简化版 html+ jquery小程序，了解 html+ jquery核心原理。 在手写小程序的过程中会摘取整体框架中的核心逻辑， 有...
WPF产生不重复的随机数功能
04-03
WPF产生不重复的随机数功能源码，在给定的区间范围（比如[50,99]）,产生给定数量的随机数（不如10个），要求产生的随机数不重复，首先给定变量min=50; max=99+1;//习惯与程序规定的编码不同所致 n=10; 好了，上代码 ...
jquery项目 html使用export import方式调用模块
最新发布
LlanyW的专栏
05-06 117
jquery的老项目，引入vue3, 需要方便使用export, import方式引用一些常用的方法与常量。
用html画一个四叶草
liulang68的博客
04-20 2403
以上是部分代码，需要请看主页加联系方式。
在HTML中使用JavaScript实时显示当前日期和时间（结尾完整例程）
weixin_67244432的博客
04-29 832
在Web开发中，经常需要在网页上显示当前的日期和时间。HTML本身并不具备这样的动态功能，但我们可以借助JavaScript来实现。JavaScript是一种常用的前端脚本语言，它可以轻松地获取系统时间，并将其插入到HTML元素中。现在，当您打开这个HTML页面时，它将实时显示当前的日期和时间，并且每秒都会自动更新。的JavaScript文件，并编写用于获取和格式化当前日期时间的函数。首先，我们创建一个HTML文件，并在其中添加一个用于显示日期和时间的。函数，以便实时更新显示的日期时间。
用Html、Css、JavaScript编写程序，实现产生随机数的程序，产生的随机数为1~33之间的六个不重复的随机数。要求按照由小到大输出，每两个数之间用逗号隔开。
05-09
以下是用Html、Css、JavaScript编写的产生随机数的程序： ```html <!DOCTYPE html> <html> <head> <title>随机数生成器</title> <style> body { font-family: Arial, sans-serif; text-align: center; } h1 { margin-top: 50px; color: #333; } p { font-size: 18px; color: #666; margin-top: 20px; } button { margin-top: 50px; background-color: #4CAF50; color: white; border: none; padding: 10px 20px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; cursor: pointer; } </style> </head> <body> <h1>随机数生成器</h1> <p>点击下面的按钮生成六个不重复的随机数（1~33之间）：</p> <button onclick="generateRandomNumbers()">生成随机数</button> <p id="result"></p> <script> function generateRandomNumbers() { var numbers = []; while (numbers.length < 6) { var random = Math.floor(Math.random() * 33) + 1; if (numbers.indexOf(random) == -1) { numbers.push(random); } } numbers.sort(function(a, b){return a-b}); document.getElementById("result").innerHTML = numbers.join(", "); } </script> </body> </html> ``` 程序通过点击按钮调用`generateRandomNumbers()`函数，该函数使用`Math.random()`函数产生1到33之间的随机数，并将其存入数组中。如果随机数已经存在于数组中，则不会将其加入数组中。最后，对数组进行排序，然后使用`join()`方法输出为字符串，其中每两个数之间用逗号隔开。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值