JS项目（制作随机选号页面）

阿勋啦

已于 2022-06-19 20:54:06 修改

阅读量4.8k

点赞数 5

分类专栏： JavaScript

于 2022-06-02 15:39:57 首次发布

本文链接：https://blog.csdn.net/A_Xunla/article/details/125101680

版权

JavaScript 随机数生成页面样式定时器用户交互

关键词由CSDN通过智能技术生成

JavaScript 专栏收录该内容

4 篇文章 1 订阅

订阅专栏

JS项目

假定班上有 60 名同学，现制作一个提问选择器，如下图所示。单击“开始”按钮在页面随机显示 1 ~ 60 的学号，单击“停止”按钮在页面显示选中学号。
要求：
(1) 页面样式参数设置：
1.1、输出框的高度和宽度分别为：500px 和 600px
1.2 、数字居中显示，字体大小：360px
(2) 随机数字产生的时间间隔为 60ms
(3) 显示框默认值为 0

代码、效果图附下：（直接复制就能用）

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>随机选号器</title>
    <link rel="stylesheet" href="css/change.css" type="text/css" />
    <style type="text/css">
        .text1 {
            height: 500px;
            width: 600px;
            font-size: 360px;
            text-align: center;
        }

        .text2 {
            position: relative;
            top: 40px;
            left: -90px;
            height: 40px;
            width: 100px;
        }

        .text3 {
            position: relative;
            top: 40px;
            left: 90px;
            height: 40px;
            width: 100px;
        }

        div {
            text-align: center;
        }
    </style>
</head>
<script>
    var timer;
    //开始
    function startText() {
        var num = Math.floor(Math.random() * 61); 
        document.getElementById("myText").value = num;
        timer = setTimeout("startText()", 60);	
    }
    //暂停
    function stopText() {
        clearTimeout(timer);
    }

</script>
<body>
    <div>
        <form>
            <input type="text" class="text1" value="0" id="myText" /><br />
            <input type="button" class="text2" value="开始" onclick="startText()" />
            <input type="button" class="text3" value="停止" onclick="stopText()" />
        </form>
    </div>
    <script type="text/javascript" src="js/p1.js"></script>
</body>
</html>