【前端小工程HTML+CSS+JS】随机数生成屋（简易随机数生成器）

最新推荐文章于 2024-07-30 16:49:30 发布

MorleyOlsen

最新推荐文章于 2024-07-30 16:49:30 发布

阅读量1.2k

点赞数

分类专栏：前端文章标签：前端 css javascript html 开发语言

本文链接：https://blog.csdn.net/m0_65787507/article/details/128791387

版权

前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

网页主界面代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>生成随机数网页</title>
    <style type="text/css">
        div{
            text-align:center;
        }
        a:hover{
            color:gold;
        }
        a:active{
            color:Cyan;
        }
        .copyright{
            font-size: small;
            font-weight:lighter;
        }
    </style>
</head>
<body style="background-color: #D0D0D0">
    <hr style="border:1;height:1px" />
    <table border="0" style="margin-left:auto;margin-right:auto;">
        <tr>
            <td><h1>欢迎来到随机数生成屋</h1></td>
            
        </tr>
    </table>
    <hr style="border:1;height:1px" /><br><br>
    <table boder="1" style="margin-left:auto;margin-right:auto;">
        <tr>
            <td><h1><b>屋子内的魔法（使用说明）</b></h1>
            <h2><dl>
                    <dt>1:按钮随机</dt>
                    <dd>- 点击一个button元素后提供一个0-9的随机整数并展示在屏幕上</dd>
                    <dt>2:数值随机</dt>
                    <dd>- 设置一个数值n，可以生成n个随机数并分别展示在屏幕上</dd>
                    <dt>3:时间随机</dt>
                    <dd>- 设置一个时间间隔t，每过t时间则自动生成随机数并展示在屏幕上</dd>
                    <dt>4:开心麻花</dt>
                    <dd>- 魔法屋的盲盒&#128525</dd>
                </dl></h2>
            </td>
        </tr>
    </table>
    <hr style="border:1;height:1px" /><br><br>
    <div>
        <h1>
            <a href="test.html">0:小屋首页</a>
            &nbsp;&nbsp;
            <a href="fun1.html">1:按钮随机</a>
            &nbsp;&nbsp;
            <a href="fun2.html">2:数值随机</a>
            &nbsp;&nbsp;
            <a href="fun3.html">3:时间随机</a>
            &nbsp;&nbsp;
            <a href="fun4.html">4:开心麻花</a>
        </h1>
    </div>
    <br><br><hr style="border:1;height:1px" />
    <div class="copyright">
        <p>Copyright@Morley</p>
    </div>
</body>

</html>

功能1界面代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>fun1</title>
    <style type="text/css">
        div{
            text-align:center;
        }
        a:hover{
            color:gold;
        }
        a:active{
            color:Cyan;
        }
        button{
            width:100px;
            height:100px;
            background-color: cyan;
            border-radius:10px;
        }
        .copyright{
            font-size: small;
            font-weight:lighter;
        }
    </style>
</head>
<body style="background-color: #D0D0D0">
    <hr style="border:1;height:1px" />
    <table border="0" style="margin-left:auto;margin-right:auto;">
        <tr>
            <td><h1>欢迎来到魔法屋的第一个房间</h1></td>
        </tr>
    </table>
    <hr style="border:1;height:1px" /><br><br>
    <script>
        function random1(){
            let ret=Math.floor(Math.random()*(10-0)+0);
            //alert(ret);
            document.getElementById("randomint").innerHTML="恭喜你抽到"+ret;
        }
    </script>
    <div>
        <p><b>点击下面的按钮，即可获得随机数！</b></p>
        <h2 id="randomint"></h2>
        <br>
        <button type="button" onclick="random1()"><h1>GO!</h1></button>
    </div>
    <br><br><hr style="border:1;height:1px" /><br><br>
    <div>
        <h1>
            <a href="test.html">0:小屋首页</a>
            &nbsp;&nbsp;
            <a href="fun1.html">1:按钮随机</a>
            &nbsp;&nbsp;
            <a href="fun2.html">2:数值随机</a>
            &nbsp;&nbsp;
            <a href="fun3.html">3:时间随机</a>
            &nbsp;&nbsp;
            <a href="fun4.html">4:开心麻花</a>
        </h1>
    </div>
    <br><br><hr style="border:1;height:1px" />
    <div class="copyright">
        <p>Copyright@Morley</p>
    </div>
</body>
</html>

功能2界面代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>fun2</title>
    <style type="text/css">
        div{
            text-align:center;
        }
        a:hover{
            color:gold;
        }
        a:active{
            color:Cyan;
        }
        .copyright{
            font-size: small;
            font-weight:lighter;
        }
    </style>
</head>

<body style="background-color: #D0D0D0">
    <hr style="border:1;height:1px" />
    <table border="0" style="margin-left:auto;margin-right:auto;">
        <tr>
            <td><h1>欢迎来到魔法屋的第二个房间</h1></td>
        </tr>
    </table>
    <hr style="border:1;height:1px" /><br><br>
    
    <div>
        <p><b>请在下面输入框中输入需要输出的随机数个数n！</b></p>
        <p>PS：随机数范围为0~100内的整数</p><br>
        <input type="text" id="n" onblur="checkNum()" style="text-align:center;height:100px;width:100px;font-size:x-large;background-color: cyan;border-radius: 10%;">
        <h2 id="randomint"></h2>
    </div>
    
    <script>
        function checkNum(){
            var Num=parseInt(document.getElementById("n").value);
            if(!(Num>=0 && Num<=100)){
                document.getElementById("randomint").innerHTML="非法输入，请重试！";
            }
            else{
                var arr=[],cnt=0,sum="";
                if(Num==0){
                    sum="（一个你看不见的空集）";
                }
                while(cnt<Num){
                    var temp=Math.floor(Math.random()*(100-0)+0);
                    if(cnt==0){
                        arr[cnt++]=temp;
                        sum+=temp;
                        sum+=" ";
                    }
                    else{
                        var flag=1;
                        for(var i=0;i<cnt;i++){
                            if(arr[i]==temp){
                                flag=0;
                                break;
                            }
                        }
                        if(flag==1){
                            arr[cnt++]=temp;
                            sum+=temp;
                            sum+=" ";
                        }
                    }
                }
                document.getElementById("randomint").innerHTML=sum;
            }
        }
    </script>

    <br><br><hr style="border:1;height:1px" /><br><br>
    <div>
        <h1>
            <a href="test.html">0:小屋首页</a>
            &nbsp;&nbsp;
            <a href="fun1.html">1:按钮随机</a>
            &nbsp;&nbsp;
            <a href="fun2.html">2:数值随机</a>
            &nbsp;&nbsp;
            <a href="fun3.html">3:时间随机</a>
            &nbsp;&nbsp;
            <a href="fun4.html">4:开心麻花</a>
        </h1>
    </div>
    <br><br><hr style="border:1;height:1px" />
    <div class="copyright">
        <p>Copyright@Morley</p>
    </div>
</body>

</html>

功能3界面代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>fun3</title>
    <style type="text/css">
        div{
            text-align:center;
        }
        a:hover{
            color:gold;
        }
        a:active{
            color:Cyan;
        }
        .copyright{
            font-size: small;
            font-weight:lighter;
        }
    </style>
</head>

<body style="background-color: #D0D0D0">
    <hr style="border:1;height:1px" />
    <table border="0" style="margin-left:auto;margin-right:auto;">
        <tr>
            <td><h1>欢迎来到魔法屋的第三个房间</h1></td>
        </tr>
    </table>
    <hr style="border:1;height:1px" /><br><br>

    <div>
        <p><b>请在下面输入框中输入生成随机数的间隔时间t！</b></p>
        <p>PS：默认的时间单位为毫秒，随机生成0~100内的整数</p>
        <p>如果您需要转换：1s=1000ms</p><br>
        <input type="text" id="n" onblur="checkTime()" style="text-align:center;height:100px;width:100px;font-size:x-large;background-color: cyan;border-radius: 10%;">
        <br><br>
        <button id="btn">Start</button>
        <h2 id="randomint"></h2>
    </div>

    <script>
        var testNum=true;
        var flag=false;
        btn.onclick=function(){
            if(testNum & flag){
                start();
                btn.innerHTML='Stop';
                testNum=false;
            }
            else{
                stop();
                btn.innerHTML='Start';
                testNum=true;
            }
        }

        var timer;
        function start(){
            if(flag){
                document.getElementById("randomint").innerHTML=Math.round(Math.random()*100);
                var t=parseInt(document.getElementById("n").value);
                timer=setInterval(function(t){
                    var temp=Math.round(Math.random()*100);
                    document.getElementById("randomint").innerHTML=temp;
                },t);
            }
        }
        function stop(){
            clearInterval(timer);
        }

        function checkTime(){
            var t=parseInt(document.getElementById("n").value);
            if(!(t>0)){
                document.getElementById("randomint").innerHTML="非法输入，请重试！";
                flag=false;
            }
            else{
                document.getElementById("randomint").innerHTML="请点击Start按钮";
                flag=true;
            }
        }

/*
        function print(t){
            //document.getElementById("randomint").innerHTML=t;
            var epoch=1000;//最大刷新次数

            //version 1.1
            for(var i=0;i<epoch;i++){
                (function(i){
                    setTimeout(function(){
                        var temp=Math.floor(Math.random()*(100-0)+0);
                        document.getElementById("randomint").innerHTML=temp;
                    },t*i);
                })(i);
            }//输出不稳定，且没解决在输出完epoch之前重新输入t后要改变输出状态的问题
            
            //version 1.0
            for(var i=0;i<epoch;i++) {
                (function(t){
                    setTimeout(_ => {
                        var temp=Math.floor(Math.random()*(100-0)+0);
                        document.getElementById("randomint").innerHTML=temp;
                    },1000);
                })(i);
            }
        }
*/
    </script>
    
    <br><br><hr style="border:1;height:1px" /><br><br>
    <div>
        <h1>
            <a href="test.html">0:小屋首页</a>
            &nbsp;&nbsp;
            <a href="fun1.html">1:按钮随机</a>
            &nbsp;&nbsp;
            <a href="fun2.html">2:数值随机</a>
            &nbsp;&nbsp;
            <a href="fun3.html">3:时间随机</a>
            &nbsp;&nbsp;
            <a href="fun4.html">4:开心麻花</a>
        </h1>
    </div>
    <br><br><hr style="border:1;height:1px" />
    <div class="copyright">
        <p>Copyright@Morley</p>
    </div>
</body>

</html>