<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.on {
width: 800px;
height: 600px;
padding: 20px;
border: 1px solid #888;
box-sizing: border-box;
overflow: hidden;
}
.on1 {
float: left;
height: 100%;
border: 1px solid red;
width: 48%;
box-sizing: border-box;
position: relative;
}
.on2 {
float: left;
height: 100%;
border: 1px solid blue;
width: 48%;
box-sizing: border-box;
position: relative;
}
</style>
</head>
<body>
<div class="on" id="app">
<div class="on1" :style="style1"></div>
<div class="on2" :style="style2"></div>
</div>
<script>
var arr = [];
// //生成范围内的随机整数
function random_number(min, max) {
min = parseInt(min);
max = parseInt(max);
return Math.floor(Math.random() * (max - min + 1)) + min;
}
//循环生成对象并添加到数组
for (var i = 0; i < 100; i++) {
var obj = {
width: random_number(0, 100) + 'px',
height: random_number(0, 100) + 'px',
top: random_number(0, 600) + 'px',
left: random_number(0, 800) + 'px',
background: 'rgba(' + random_number(0, 255) + ',' + random_number(0, 255) + ',' + random_number(0, 255) + ',1)'
}
arr.push(obj)
}
var arr1 = []
var arr2 = []
//width大于50和小于50的对象拆分到两个数组中
arr.filter(item => {
if (parseInt(item.width) > 50) { arr1.push(item) } else { arr2.push(item) }
})
</script>
<script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
style1: {},
style2: {}
},
created() { this.time1(), this.time2() },
methods: {
time1() {
var self = this;
setInterval(function () {
self.style1 = arr1[random_number(0, arr1.length - 1)]
}, 1000)
},
time2() {
var self = this;
setInterval(function () {
self.style2 = arr2[random_number(0, arr2.length - 1)]
}, 1000)
}
}
})
</script>
</body>
</html>
评论0