html+css+JavaScript点名器

运行效果:

代码如下:

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>
</head>
<style>

    body{
        background-image: url(img/bg.png);
        }

    .big{
       background-color: aliceblue;
       width:400px;
       height: 500px;
       border-radius: 30px;
       margin: 50px auto;
       padding-top: 20px;
        }

    .title{
        font-size: 50px;
        text-align: center; 
        font-weight: 520;
            }

    #show {
        width: 300px;
        height: 200px;
        background-color: aliceblue;
        line-height: 200px;
        font-size: 30px;
        text-align: center;
        border: 1.5px solid black;
        border-radius: 10px;
        margin: 20px auto;
    }

    .button{
        margin: 10px 85px;
    }
    .start{
       height: 40px;
       margin: auto;
       width: 100px;
    }
    .end{
        margin-left:20px; 
        height: 40px;
        width: 100px;
    }

    #div1 {
        width: 350px;
        height: 50px;
        background-color: aliceblue;
        line-height: 50px;
        text-align: center;
        font-size: 30px;
        border: 1px solid black;
        margin: 20px auto;
    }
    .footer{
        text-align: right;
    }

</style>
<body>
    <div class="big" >
        <div class="title">随机点名</div>
        <div id="show"></div>
        <div class="button">
            <button class="start" onclick="startName()" >开始点名</button>
            <button class="end" onclick="endName()" >结束点名</button>
        </div>  
        <div id="div1"></div>
    </div>
</body> 
<script>    
    var names = ['张三', '李四', '王五', 
                 '张杰', '谢娜', '何炅', 
                 '李维嘉', '吴昕', '杜海涛', 
                 '沈梦辰', '王一博', '肖杰'];
    var interval;
    var div1 = document.querySelector('#div1');
    var show = document.querySelector('#show');
    var number;
    show.innerHTML="亲,准备后点名了吗?";

    function startName() {
        clearInterval(interval);
        interval = setInterval(function () {
            number = Math.random() * (names.length - 1);
            number = Math.round(number);
            show.innerHTML = names[number];
        }, 50);
    };

    function endName() {
        clearInterval(interval);
        div1.innerHTML = "请"+names[number]+"同学回答问题";
    };
</script>

<footer class="footer">
    king
</footer>
 
</html>

资源下载地址:

【免费】html+css+JavaScript点名器资源-CSDN文库

相关推荐
mCell1 天前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip1 天前
Node.js 子进程:child_process
前端·javascript
codingandsleeping1 天前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙1 天前
[译] Composition in CSS
前端·css
白水清风1 天前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
用户22152044278001 天前
new、原型和原型链浅析
前端·javascript
阿星做前端1 天前
coze源码解读: space develop 页面
前端·javascript
叫我小窝吧1 天前
Promise 的使用
前端·javascript
天天扭码1 天前
来全面地review一下Flex布局(面试可用)
前端·css·面试
用户458203153171 天前
CSS特异性:如何精准控制样式而不失控?
前端·css