【前端初学者】【JavaScript案例】之随机点名器

最新推荐文章于 2024-04-28 13:46:58 发布

Oct.S

最新推荐文章于 2024-04-28 13:46:58 发布

阅读量668

点赞数 1

分类专栏：案例文章标签：前端 javascript Powered by 金山文档

本文链接：https://blog.csdn.net/HY_Sophie/article/details/128595346

版权

案例专栏收录该内容

11 篇文章 0 订阅

订阅专栏

HTML部分

<div class="content">
    <div id="box">随机点名器</div>
    <button id="btn">开始</button>
</div>

CSS部分

.content {
    width: 400px;
    margin: 100px auto;
    text-align: center;
}

#box {
    line-height: 150px;
    font-size: 80px;
}

#btn {
    width: 200px;
    height: 80px;
    font-size: 40px;
    border: none;
}

JavaScript部分

(function () {

    //定义数组
    var nameList = ['李信', '百里守约', '上官婉儿', '庄周', '关羽', '桑启', '莱西奥', '云中君', '武则天', '张良', '妲己', '海月', '蔡文姬', '大乔', '鲁班大师', '马可波罗', '孙尚香', '鲁班', '王昭君', '东皇太一', '夏侯惇', '貂蝉', '米莱迪', '瑶', '孙膑', '李白', '芈月'];
    //获取元素
    var box = document.querySelector('#box');
    var btn = document.querySelector('#btn');
    //定义变量，保存定时器标记
    var intervalId = null;

    //点击按钮，监听单击事件
    btn.onclick = function () {

        //判断当前按钮上的文字
        if (btn.innerHTML === '停止') {
            btn.innerHTML = '继续';
            //停止定时器
            clearInterval(intervalId);
        } else {
            //开始与停止时修改为继续
            btn.innerHTML = '停止';
            //开启定时器
            intervalId = setInterval(function () {
                //从数组中随机取索引
                var index = Math.floor(Math.random() * nameList.length);
                //根据索引取出元素 显示在box上
                box.innerHTML = nameList[index];
            }, 100);
        }
    };

})();