JS封装随机颜色获取方法

. 分享 . 0 吐槽 . 931人围观
6个div,每次刷新显示不同颜色,颜色组要大于控件组,否则,多出来的会显示空白哟,还不错。

div

<div class="giveYouColorSeeSee">1</div>
<div class="giveYouColorSeeSee">2</div>
<div class="giveYouColorSeeSee">3</div>
<div class="giveYouColorSeeSee">4</div>
<div class="giveYouColorSeeSee">5</div>
<div class="giveYouColorSeeSee">6</div>

style

.giveYouColorSeeSee {
    width: 100px;
    height: 100px;
    border: 1px solid blue;
    display: inline-block;
    margin-top: 10px;
    margin-right: 10px;
}    

JS

<script>
var giveColor = document.getElementsByClassName('giveYouColorSeeSee');
var color = ['#578fff', '#8c9ffd', '#ff7ea2', '#ffbf43', '#74dde3', 'red'];
function randomColorOn(giveColor,color){//参数1为获取的元素组,参数二为获取的颜色组
    var arr2 = [];
    for(var i = color.length; i > 0; i--) {
        const num = Math.floor(Math.random() * color.length); //获取随机数
        arr2.push(color[num]); //把随机数添加到数组中
        color.splice(num, 1); //删除原有数组的颜色
    }
                 
    for(var j = 0; j < giveColor.length; j++) {
        giveColor[j].style.backgroundColor = arr2[j];
        }
    }
    randomColorOn(giveColor,color);    
</script>

        

「一键投喂 软糖/蛋糕/布丁/牛奶/冰阔乐!」

孤独患者

嘤嘤嘤 ~ 您的爱心大炮射中了我 开心开心

使用微信扫描二维码完成支付

# 你可能在找...

评论