背景色随机生成
背景色随机生成,写着玩的,打开定时,更好玩
<template>
<div class="box">
<!-- <el-input v-model="input" placeholder="请输入内容"></el-input> -->
<div class="top">
<div
class="boxlist"
v-for="(item, index) in lists"
:key="index"
v-bind:style="{
background: item,
}"
@click="addcolor(item)"
></div>
</div>
<el-button type="primary" @click="add">主要按钮</el-button>
</div>
</template>
<script>
export default {
data() {
return {
Number: "",
lists: [],
input: "",
};
},
mounted() {
// 进入时调用
this.randoms();
// this.sss();
},
methods: {
sss() {
var that = this;
setInterval(() => {
that.randoms();
}, 1000);
},
randoms() {
this.lists = [];
// 循环
for (var i = 0; i < 27; i++) {
// 把获取到的值赋值给 Number
let R = Math.floor(Math.random() * 130 + 110);
let G = Math.floor(Math.random() * 130 + 110);
let B = Math.floor(Math.random() * 130 + 110);
let R1 = Math.floor(Math.random() * 130 + 110);
let G1 = Math.floor(Math.random() * 130 + 110);
let B1 = Math.floor(Math.random() * 130 + 110);
this.Number1 = "rgb(" + R + "," + G + "," + B + ")";
this.Number2 = "rgb(" + R1 + "," + G1 + "," + B1 + ")";
this.Number =
"linear-gradient(120deg, " +
this.Number1 +
" 0%, " +
this.Number2 +
" 100%)";
// 下舍入(0-1随机数 乘以 255)转换为16进制
// Math.floor(Math.random() * 255).toString(16) +
// Math.floor(Math.random() * 255).toString(16) +
// Math.floor(Math.random() * 255).toString(16);
// 追加到 lists 中
this.lists.push(this.Number);
}
},
add() {
// 点击清空 lists
this.lists = [];
// 调用封装函数
this.randoms();
},
addcolor(item) {
// 颜色在 input 框中显示
this.input = item;
// 背景色改变
this.$refs.top.style.backgroundColor = item;
},
},
};
</script>
<style lang="scss" scoped>
.box {
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.568);
// background-color: rgb(196, 191, 191);
.top {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
.boxlist {
width: 150px;
height: 150px;
margin: 25px;
p {
width: 100%;
height: 30px;
background-color: #fff;
line-height: 30px;
}
}
}
}
</style>