<!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>
没有合适的资源?快使用搜索试试~ 我知道了~
微信小程序源码-合集2.7z
共2个文件
7z:1个
html:1个
需积分: 50 16 下载量 94 浏览量
2022-04-23
01:21:36
上传
评论 1
收藏 134.71MB ZIP 举报
温馨提示
微信小程序源码,包含:滴滴作业、地图定位、法律咨询、仿Ofo、仿饿了么、仿美团、云文档、婚纱摄影、健身预约、以及视频音乐播放等源码。
资源详情
资源评论
资源推荐
收起资源包目录
Desktop.zip (2个子文件)
微信小程序源码-合集2.7z 134.71MB
new 1.html 3KB
共 2 条
- 1
phubing
- 粉丝: 607
- 资源: 850
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
评论0