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文库

相关推荐
Cacciatore->38 分钟前
Electron 快速上手
javascript·arcgis·electron
vvilkim1 小时前
Electron 进程间通信(IPC)深度优化指南
前端·javascript·electron
某公司摸鱼前端2 小时前
ES13(ES2022)新特性整理
javascript·ecmascript·es13
漂流瓶jz3 小时前
清除浮动/避开margin折叠:前端CSS中BFC的特点与限制
前端·css·面试
清幽竹客3 小时前
vue-30(理解 Nuxt.js 目录结构)
前端·javascript·vue.js
weiweiweb8883 小时前
cesium加载Draco几何压缩数据
前端·javascript·vue.js
我不吃饼干9 天前
鸽了六年的某大厂面试题:你会手写一个模板引擎吗?
前端·javascript·面试
涵信9 天前
第一节 布局与盒模型-Flex与Grid布局对比
前端·css
我不吃饼干9 天前
鸽了六年的某大厂面试题:手写 Vue 模板编译(解析篇)
前端·javascript·面试
前端fighter9 天前
为什么需要dependencies 与 devDependencies
前端·javascript·面试