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

相关推荐
墨渊君2 小时前
“蒙”出花样!用 CSS Mask 实现丝滑视觉魔法
前端·css
芦苇Z3 小时前
HTML <a> 标签的 rel 属性全解析:安全、隐私与 SEO 最佳实践
前端·html
源猿人3 小时前
企业级文件浏览系统的Vue实现:架构设计与最佳实践
前端·javascript·数据可视化
RoyLin3 小时前
TypeScript设计模式:迭代器模式
javascript·后端·node.js
小桥风满袖5 小时前
极简三分钟ES6 - ES9中for await of
前端·javascript
编程贝多芬5 小时前
Promise 的场景和最佳实践
前端·javascript
Asort5 小时前
JavaScript 从零开始(四):基础语法详解——从变量声明到数据类型的完全指南
前端·javascript
木木jio6 小时前
前端大文件分片上传 —— 基于 React 的工程化实现
前端·javascript
Lotzinfly6 小时前
12个TypeScript奇淫技巧你需要掌握😏😏😏
前端·javascript·面试
一个大苹果6 小时前
setTimeout延迟超过2^31立即执行?揭秘JavaScript定时器的隐藏边界
javascript