课堂点名H5

代码

<!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>
    <link rel="shortcut icon" href="#"/>
</head>
<body>
<div>
    <span id="name" onselectstart="return false" style="cursor:default">开始点名</span>
</div>
<audio id="music" preload hidden loop>
    <source src="music.mp3"/>
</audio>

<script>
    // 获取标签
    let nametxt = document.getElementById('name');
    let music = document.getElementById('music');

    var nameString = String("李大大,崔大大,王大大,赵大大");
    let uname = nameString.split(",");

    // 创建一个函数生成0~max的随机数字
    function getrandom(max) {
      
      
        return parseInt(Math.random() * (max + 1), 10);
    }

    function clock() {
      
      
        // 通过获取一个随机的数组下标实现随机获取一个名字，并将这个名字赋值给变量random
        let random = uname[getrandom(uname.length - 1)];
        //将random塞到span里
        nametxt.innerHTML = random;
    };
    // 设置不停止时名字的刷新速度为30毫秒
    let time;
    // 将开始与停止按钮绑定到按钮上，并通过按钮控制
    let flag = true;
    nametxt.onclick = function () {
      
      
        // 当flag标志为false时，点击按钮让刷新停止；
        if (flag == false) {
      
      
            time = window.clearInterval(time);
            // 按钮文字从stop变为start；
            // button.innerHTML = '开始';
            music.pause();
            // 标志变更
            flag = true;
        } else {
      
      
            // 当flag标志为true时，开始刷新，文字变更
            time = self.setInterval("clock()", 30);
            // button.innerHTML = '停止';
            if (music.paused) {
      
      
                music.play()
            }
            flag = false;
        }
    }
    //   监听回车事件
    //监听回车（13是回车的代号）
    // document.onkeyup = function (e) {
      
      
    //     var event = e || window.event;
    //     var key = event.which || event.keyCode || event.charCode;
    //     if (key === 13) {
      
      
    //         // button.click();
    //         if (flag == false) {
      
      
    //             time = window.clearInterval(time);
    //             music.pause();
    //             // 标志变更
    //             flag = true;
    //         } else {
      
      
    //             // 当flag标志为true时，开始刷新，文字变更
    //             time = self.setInterval("clock()", 30);
    //             if (music.paused){
      
      
    //                 music.play()
    //             }
    //             flag = false;
    //         }
    //     }
    // }
</script>
</body>
<style>
    body {
      
      
        padding: 0;
        margin: 0;
        background-image: url("bg.png");
        background-size: 100%;
    }
    div {
      
      
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
    }
    span {
      
      
        text-shadow: 0 0 10px #dfd8d8;
        background: linear-gradient(135deg, #14ffe9, #ffeb3b, #ff00e0);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        animation: ff 0.9s linear infinite;
    }
    @keyframes ff {
      
      
        to {
      
      filter: hue-rotate(360deg);}
    }
    span {
      
      
        font-size: 187px;
    }
</style>
</html>
代码

背景和音频自己添加吧

猜你喜欢
