提问名单

最新推荐文章于 2024-07-12 09:36:48 发布

V________

最新推荐文章于 2024-07-12 09:36:48 发布

阅读量105

点赞数

分类专栏：练习文章标签： javascript css html5

本文链接：https://blog.csdn.net/V________/article/details/112484189

版权

练习专栏收录该内容

12 篇文章 0 订阅

订阅专栏

let divEle = document.getElementsByTagName('div')[1];//获取显示人名的div
//存储数据
let arr = [
    {
        name: '全部',
        info: 'a,b,c,d,e,A,B,C,D,E,1,2,3,4'
    },
    {
        name: '一组',
        info: 'a,b,c,d,e'
    },
    {
        name: '二组',
        info: 'A,B,C,D,E'
    },
    {
        name: '三组',
        info: '1,2,3,4'
    }
];

let select;//存储当前信息的数组

//产生随机数
function suiji(arr) {
    let i = parseInt(Math.random() * arr.length);
    return i;
}
// console.log(suiji());
window.addEventListener('load', function () {
    let ulEle = document.createElement('ul');
    select = arr[0].info.split(',');
    arr.map((zhi, index) => {
        let liEle = document.createElement('li');
        liEle.innerText = zhi.name;
        ulEle.appendChild(liEle);
        liEle.addEventListener('click', e => {
            select = arr[index].info.split(',');
            console.log(select);
        })
    });
    let asideEle = document.getElementsByTagName('aside')[0];
    asideEle.appendChild(ulEle);
})

let input0 = document.getElementsByTagName('input')[0];
let input1 = document.getElementsByTagName('input')[1];
let timer;
input0.addEventListener('click', () => {
    timer = setInterval(function () {
        divEle.innerText = select[suiji(select)];
    }, 100);
});
input1.addEventListener('click', () => {
    clearInterval(timer);
});

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./ask.css">
</head>

<body>
    <div>
        <span>恭喜</span>
        <div></div>
        <aside></aside>
        <input type="button" value="开始">
        <input type="button" value="结束">
    </div>
    <script src="./ask.js"></script>
</body>

</html>

input {
    width: 50px;
    height: 30px;
    margin: 0 20px;
}
div>div {
    width: 200px;
    height: 100px;
    border: 1px solid burlywood;
    margin-bottom: 40px;
    margin-top: 20px;
    font-size: 20px;
}
body>div { 
    width: 400px;
    margin: 0 auto;
    position: relative;
}
aside {
    position: absolute;
    right: 0;
    top: 0;
}
ul {
    list-style: none;
}

V________

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
提问名单

let divEle = document.getElementsByTagName('div')[1];//获取显示人名的div//存储数据let arr = [ { name: '全部', info: 'a,b,c,d,e,A,B,C,D,E,1,2,3,4' }, { name: '一组', info: 'a,b,c,d,e' }, { name: '二组', i
复制链接

扫一扫