web前端（半成品）希望大佬多多指教，知识点：浮动，对象数组，随机数，样式绑定！
要求：1.页面放置一个800*600的div盒子，内部嵌入两个浮动的div！2.随机生成一个长度为100的对象数组，数组内对象包含如下属性：
width: 0-100随机数
height: 0-100随机数
top: 0-600随机数
left:0-800随机数
R: 0-255随机数
G: 0-255随机数
B: 0-255随机数
3.将第二步生成的随机数组中对象属性width大于50和小于50的对象，分别拆分到两个新的数组对象中。
4.使用一个定时器，每隔一秒执行一次，在拆分出来的两个数组中随机抽取一个对象，更改第1步中的2个浮动div的大小、位置和颜色。
（可以在jquery、vue、react中任意选一个框架来实现--------------代码编写过程中尽量多用ES6的新特性）
<!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;
}
.on1 {
float: left;
height: 100%;
border: 1px solid red;
width: 48%;
box-sizing: border-box;
}
.on2 {
float: right;
height: 100%;
border: 1px solid blue;
width: 48%;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="on" id="app">
<div class="on1" :style=""></div>
<div class="on2"></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',
R: random_number(0, 255),
G: random_number(0, 255),
B: random_number(0, 255),
}
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: {
},
computed: {
// 每隔一秒从数组中选取一个对象
time1: setInterval(function () {
arr1
}, 1000),
time2: setInterval(function () {
arr2
}, 1000)
}
})
</script>
</body>
</html> 不知道符不符合要求，大概做成这个样子了！
<!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
}, 1000)
},
time2() {
var self = this;
setInterval(function () {
self.style2 = arr2
}, 1000)
}
}
})
</script>
</body>
</html> 希望大佬能做出完整版的！ w460270218 发表于 2022-4-22 22:44
希望大佬能做出完整版的！
你发求助区多好 依旧沉沉 发表于 2022-4-22 23:11
你发求助区多好
参考一下5楼 ATTYCHEN 发表于 2022-4-22 23:07
免费嫖呀这是
参考一下5楼 https://s1.ax1x.com/2022/04/23/LfF8nH.jpg
我写的和你展示的效果差不多。
之前看错要求了，写成这样
https://s1.ax1x.com/2022/04/23/LfFsBj.jpg
页:
[1]