服务器之家

服务器之家 > 正文

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

时间:2021-10-06 13:55     来源/作者:qq_45666837

js简单实现点名器随机色

布局(排版)

?
1
2
3
4
5
6
7
<body>
    <button onclick="star()">开始</button>
    <button onclick="stop()">结束</button>
    <div id="box">
    
    </div>
</body>

css样式

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<style>
    #box{
        width: 240px;
        height: 400px;
    }
    #a{
        width: 80px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        float: left;
        background: cyan;
    }
</style>

js代码

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<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>

总结

到此这篇关于js实现简单的点名器随机色的文章就介绍到这了,更多相关js点名器随机色内容请搜索服务器之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持服务器之家!

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

标签:

相关文章

热门资讯

yue是什么意思 网络流行语yue了是什么梗
yue是什么意思 网络流行语yue了是什么梗 2020-10-11
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全 2019-12-26
背刺什么意思 网络词语背刺是什么梗
背刺什么意思 网络词语背刺是什么梗 2020-05-22
2021年耽改剧名单 2021要播出的59部耽改剧列表
2021年耽改剧名单 2021要播出的59部耽改剧列表 2021-03-05
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总 2020-11-13
返回顶部