web前端（半成品）希望大佬多多指教，知识点：浮动，对象数组，随机数，样式绑定！

w460270218 · 发表于 2022-4-22 22:40

要求：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的新特性）

[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;
        }

        .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[random_number(0, arr1.length - 1)]
                }, 1000),
                time2: setInterval(function () {
                    arr2[random_number(0, arr1.length - 1)]
                }, 1000)
            }
        })
    </script>
</body>

</html>

w460270218 · 发表于 2022-4-23 00:14

不知道符不符合要求，大概做成这个样子了！

[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[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>

w460270218 · 发表于 2022-4-22 22:44

希望大佬能做出完整版的！

ATTYCHEN · 发表于 2022-4-22 23:07

提示: 作者被禁止或删除内容自动屏蔽

依旧沉沉 · 发表于 2022-4-22 23:11

w460270218 发表于 2022-4-22 22:44
希望大佬能做出完整版的！

你发求助区多好

w460270218 · 发表于 2022-4-23 00:16

依旧沉沉发表于 2022-4-22 23:11
你发求助区多好

参考一下5楼

w460270218 · 发表于 2022-4-23 00:18

ATTYCHEN 发表于 2022-4-22 23:07
免费嫖呀这是

参考一下5楼

xiadongming · 发表于 2022-4-23 10:55

提示: 作者被禁止或删除内容自动屏蔽

bilibini · 发表于 2022-4-23 16:14

我写的和你展示的效果差不多。
之前看错要求了，写成这样

帐号		自动登录	找回密码
密码			注册[Register]

ATTYCHEN ATTYCHEN 当前离线好友阅读权限 0 听众最后登录 1970-1-1 头像被屏蔽	ATTYCHEN 发表于 2022-4-22 23:07 《站点帮助文档》有什么问题来这里看看吧，这里有你想知道的内容！提示: 作者被禁止或删除内容自动屏蔽
	呼吁大家发布原创作品添加吾爱破解论坛标识！
	回复支持 1 举报

xiadongming xiadongming 当前离线好友阅读权限 0 听众最后登录 1970-1-1 头像被屏蔽	xiadongming 发表于 2022-4-23 10:55 提示: 作者被禁止或删除内容自动屏蔽

	回复支持举报

[求助] web前端（半成品）希望大佬多多指教，知识点：浮动，对象数组，随机数，样式绑定！