js实现简单的点名器随机色

最新推荐文章于 2022-09-28 21:58:22 发布

大雾四时起

最新推荐文章于 2022-09-28 21:58:22 发布

阅读量2.1k

点赞数 11

分类专栏： JS 文章标签： js javascript

本文链接：https://blog.csdn.net/qq_45666837/article/details/108636238

版权

JS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

js简单实现点名器随机色

布局(排版)

<body>
	<button onclick="star()">开始</button>
	<button onclick="stop()">结束</button>
	<div id="box">
	
	</div>
</body>

css样式

<style>
	#box{
		width: 240px;
		height: 400px;
	}
	#a{
		width: 80px;
		height: 40px;
		line-height: 40px;
		text-align: center;
		float: left;
		background: cyan;
	}
</style>

js代码

<script>
    //声明一个数组存取用户名
    const arr=['貂蝉','西施','杨玉环','王昭君','李白','赵匡胤','朱元璋','小乔','刘彻'];
    const box=document.getElementById('box');
    //声明一个全局变量
    let set;
    // console.log(box)
    // 动态创建div,把数组的数据放到div中
    for (var i = 0; i< arr.length; i++) {
        var div=document.createElement('div');
        div.id='a';
        div.innerHTML=arr[i];
        // console.log(div.innerHTML);
        box.appendChild(div);
    // 点击开始按钮随机选一个名字
    }
    function star(){
    // 开始之前先清除一遍定时器,防止出bug停止不了
        clearInterval(set);
        //设置一个定时器
        set=setInterval(() => {
            for(var k=0;k<arr.length;k++){
                box.children[k].style.background='';
            }
            var random = parseInt(Math.random() * arr.length);
            box.children[random].style.background = color();
        }, 100)
    }
    // 点击停止选取名字(清除定时器)
    function stop(){
        clearInterval(set);
    }
    //封装一个随机色
    function color(){
		const r = Math.floor(Math.random() * 255);
		const g = Math.floor(Math.random() * 255);
		const b = Math.floor(Math.random() * 255);
		const rgb='rgb('+r+','+g+','+b+')';
		return rgb;
	}
</script>

大雾四时起

关注

11
点赞
踩
4

收藏

觉得还不错? 一键收藏
3
评论
js实现简单的点名器随机色

js简单实现点名器随机色布局(排版)<body> <button onclick="star()">开始</button> <button onclick="stop()">结束</button> <div id="box"> </div></body>css样式<style> #box{ width: 240px; height: 400px; } #a{
复制链接

扫一扫

专栏目录