随机点名器Demo

先目睹下页面吧ヾ(๑╹◡╹)ﾉ"

在这里插入图片描述

HTML代码：

<body>
    <h1>点名啦</h1>
    <div id="did">
        <input id="rollcall-id" type="button" value="随机点名器"><br>
        <input id="action-id" type="submit" onclick="doClick()" value="开始">
    </div>
</body>

CSS代码：

<style>
    * {
    
    
        margin: 0px;
        padding: 0px;
    }

    body {
    
    
        background-color: rgb(255, 249, 249);
    }

    h1 {
    
    
        text-align: center;
        padding-top: 100px;
        color: rgba(250, 54, 129, 0.562);
    }

    #did {
    
    
        position: relative;
        width: 200px;
        margin: 60px auto;
    }

    #did input:first-child {
    
    
        width: 200px;
        height: 60px;
        background-color: rgba(250, 54, 129, 0.562);
        /* 不要边框或设边框为透明 */
        border: none;
        border-radius: 20px;
        font-size: 25px;
        color: #fff;
        box-shadow: 0px 0px 3px 3px rgba(250, 54, 129, 0.158);
        /* 点击时边框消失 */
        outline: 0;
    }

    #did input:nth-last-child(1) {
    
    
        width: 100px;
        height: 40px;
        margin: 40px 50px;
        background-color: rgba(250, 54, 129, 0.562);
        border: 1px solid transparent;
        background-color: rgba(255, 68, 177, 0.432);
        border-radius: 15px;
        box-shadow: 0px 0px 2px 2px rgba(250, 54, 129, 0.158);
        font-size: 17px;
        color: #333;
        outline: 0;
        transition: color 0.2s ease-out;
        transition: box-shadow 0.2s ease-out;
    }

    #did input:nth-last-child(1):hover {
    
    
        color: #fff;
        cursor: pointer;
        box-shadow: 0px 0px 4px 4px rgba(250, 54, 129, 0.158);
    }
</style>

JavaScript代码：

<script>
    var rollcall = document.getElementById("rollcall-id");
    var action = document.getElementById("action-id");
    var h1 = document.getElementsByTagName("h1");

    //不能用name,用name只会取得一个字符
    var allName = ["张柳菲", "高颖影", "赵温言", "李颖", "邓辰希", "莫若邻", "秦橙",
        "吴筱宇", "赵希", "马素滢", "吕沁雅", "罗鸿哲", "夏素芸", "谢焱之",
        "曹梦朦", "李允书", "周枫桥", "孙浩", "江雁菁", "杨振凯", "林舒言",
        "钱妙妙", "郭景", "杜贝贝", "童闵然", "钟小凌", "韩云韵", "白然之"];

    //随机产生一个名字
    function stringRandom() {
    
    
        return parseInt(Math.random() * allName.length);
    }

    var time = null;
    var luckName;
    //开始
    function doStart() {
    
    
        if (time == null) {
    
    
            time = setInterval(function () {
    
    
                //获取随机点名的值
                luckName = allName[stringRandom()];
                rollcall.setAttribute("value", luckName);
            }, 100);
        }
    }

    //停止
    function doStop() {
    
    
        if (time != null) {
    
    
            clearInterval(time);
            time = null;
        }
    }

    //点击事件
    function doClick() {
    
    
        if (action.value == "开始") {
    
    
            //改变样式
            action.style.backgroundColor = "#cecece";
            action.style.boxShadow = "0px 0px 2px 2px rgba(100, 100, 100, 0.4)";
            action.value = "停止";
            h1[0].innerHTML = "点名啦";

            //开始随机点名
            doStart();
        } else if (action.value == "停止") {
    
    
            action.style.backgroundColor = "rgba(255, 68, 177, 0.432)";
            action.style.boxShadow = "0px 0px 2px 2px rgba(250, 54, 129, 0.158)";
            action.value = "开始";
            h1[0].innerHTML = "恭喜" + luckName + "同学获得一次发言机会";

            //停止
            doStop();
        }
    }
</script>

猜你喜欢