添加的绝对定位-谨慎使用参考 生成小球函数 文章
<template>
<div id="wrap">
<!-- <div class="bg"></div> -->
</div>
</template>
<script>
export default{
data(){
return{
//获得wrapDiv
wrapDiv: null,
//定义数组存储所有的小球
balls: [],
title:['电源',
'停电',
'多户',
'服务',
'供电',
'电费',
'业务',
'解答',
'报修',
'咨询' ]
// title:['供电', '服务','咨询','电源']
}
},
created(){
this.$nextTick(function () {
this.wrapDiv = document.getElementById("wrap");
this.init()
})
},
methods:{
init(){
this.createBalls();
// for (var i = 0; i < this.balls.length; i++) {
// //将所有的小球传到函数中,来实现对小球的移动
// this.moveBalls(this.balls[i]);
// }
},
// randomNum(m, n) {
// return Math.floor(Math.random() * (n - m + 1) + m);
// },
/**
* 生成一个随机颜色，并返回rgb字符串值
*/
// randomColor() {
// var r = this.randomNum(100, 255);
// var g = this.randomNum(100, 255);
// var b = this.randomNum(100, 255);
// return "rgb(" + r + "," + g + "," + b + ")";
// },
// randomWidth() {
// var r = this.randomNum(74, 128);
// return r;
// },
//生成小球函数
createBalls() {
for (var i = 0; i < this.title.length; i++) {
var ball = document.createElement("p");
//随机小球起始的X坐标和小球的Y坐标
// ball.x = this.randomNum(100, 600);
// ball.y = this.randomNum(100, 300);
//随机小球的移动速度
// ball.speed = this.randomNum(2, 5);
// ball.speed = 0.4;
// // //随机小球移动的方向
// if (Math.random() - 0.5 > 0) {
// ball.xflag = true;
// } else {
// ball.xflag = false;
// }
// if (Math.random() - 0.5 > 0) {
// ball.yflag = true;
// } else {
// ball.yflag = false;
// }
//随机小球的背景颜色
// let rgbys = this.randomColor();
// ball.style.backgroundColor = this.randomColor();
// console.log("fuwuwwwww")
// console.log(this.title[i])
if(this.title[i]=='服务') {
let widthx =128;
let fontSize =39;
let fontColor = '#01F4FF';
console.log("fuwuwwwww");
ball.style.boxShadow = 'inset 0px 0px 16px 2px ' +'rgba(1,244,255,1)';
ball.style.width= ""+widthx+""+"px";
ball.style.height= ""+widthx+""+"px";
ball.style.fontSize = ""+fontSize+"px";
ball.style.fontFamily = "PingFang SC-Regular, PingFang SC";
ball.style.fontWeight = "400";
ball.style.color = fontColor;
ball.style.top = "150" + "px";
ball.style.left = "370" + "px";
ball.innerHTML = this.title[i];
}
if(this.title[i]=='供电') {
let widthx =86;
let fontSize =27;
let fontColor = '#CB85FF';
console.log("fuwuwwwww");
ball.style.boxShadow = 'inset 0px 0px 16px 2px ' +'rgba(161,99,255,1)';
ball.style.width= ""+widthx+""+"px";
ball.style.height= ""+widthx+""+"px";
ball.style.fontSize = ""+fontSize+"px";
ball.style.fontFamily = "PingFang SC-Regular, PingFang SC";
ball.style.fontWeight = "400";
ball.style.color = fontColor;
ball.style.top = "180" + "px";
ball.style.left = "230" + "px";
ball.innerHTML = this.title[i];
}
if(this.title[i]=='业务') {
let widthx =86;
let fontSize =27;
let fontColor = '#CB85FF';
console.log("fuwuwwwww");
ball.style.boxShadow = 'inset 0px 0px 16px 2px ' +'rgba(161,99,255,1)';
ball.style.width= ""+widthx+""+"px";
ball.style.height= ""+widthx+""+"px";
ball.style.fontSize = ""+fontSize+"px";
ball.style.fontFamily = "PingFang SC-Regular, PingFang SC";
ball.style.fontWeight = "400";
ball.style.color = fontColor;
ball.style.top = "180" + "px";
ball.style.left = "610" + "px";
ball.innerHTML = this.title[i];
}
if(this.title[i]=='咨询') {
let widthx =74;
let fontSize =23;
let fontColor = '#4696FF';
console.log("fuwuwwwww");
ball.style.boxShadow = 'inset 0px 0px 16px 2px ' +'rgba(28,88,255,1)';
ball.style.width= ""+widthx+""+"px";
ball.style.height= ""+widthx+""+"px";
ball.style.fontSize = ""+fontSize+"px";
ball.style.fontFamily = "PingFang SC-Regular, PingFang SC";
ball.style.fontWeight = "400";
ball.style.color = fontColor;
ball.style.top = "200" + "px";
ball.style.left = "520" + "px";
ball.innerHTML = this.title[i];
}
if(this.title[i]=='电源') {
let widthx =74;
let fontSize =23;
let fontColor = '#4696FF';
console.log("fuwuwwwww");
ball.style.boxShadow = 'inset 0px 0px 16px 2px ' +'rgba(28,88,255,1)';
ball.style.width= ""+widthx+""+"px";
ball.style.height= ""+widthx+""+"px";
ball.style.fontSize = ""+fontSize+"px";
ball.style.fontFamily = "PingFang SC-Regular, PingFang SC";
ball.style.fontWeight = "400";
ball.style.color = fontColor;
ball.style.top = "70" + "px";
ball.style.left = "390" + "px";
ball.innerHTML = this.title[i];
}
if(this.title[i]=='停电') {
let widthx =101;
let fontSize =31;
let fontColor = '#E0E62D';
console.log("fuwuwwwww");
ball.style.boxShadow = 'inset 0px 0px 16px 2px ' +'rgba(226,255,23,1)';
ball.style.width= ""+widthx+""+"px";
ball.style.height= ""+widthx+""+"px";
ball.style.fontSize = ""+fontSize+"px";
ball.style.fontFamily = "PingFang SC-Regular, PingFang SC";
ball.style.fontWeight = "400";
ball.style.color = fontColor;
ball.style.top = "60" + "px";
ball.style.left = "250" + "px";
ball.innerHTML = this.title[i];
}
if(this.title[i]=='多户') {
let widthx =101;
let fontSize =31;
let fontColor = '#01F4FF';
console.log("fuwuwwwww");
ball.style.boxShadow = 'inset 0px 0px 16px 2px ' +' rgba(1,244,255,1)';
ball.style.width= ""+widthx+""+"px";
ball.style.height= ""+widthx+""+"px";
ball.style.fontSize = ""+fontSize+"px";
ball.style.fontFamily = "PingFang SC-Regular, PingFang SC";
ball.style.fontWeight = "400";
ball.style.color = fontColor;
ball.style.top = "60" + "px";
ball.style.left = "500" + "px";
ball.innerHTML = this.title[i];
}
if(this.title[i]=='供电') {
let widthx =86;
let fontSize =31;
let fontColor = '#CB85FF';
console.log("fuwuwwwww");
ball.style.boxShadow = 'inset 0px 0px 16px 2px ' +'rgba(161,99,255,1)';
ball.style.width= ""+widthx+""+"px";
ball.style.height= ""+widthx+""+"px";
ball.style.fontSize = ""+fontSize+"px";
ball.style.fontFamily = "PingFang SC-Regular, PingFang SC";
ball.style.fontWeight = "400";
ball.style.color = fontColor;
ball.style.top = "180" + "px";
ball.style.left = "280" + "px";
ball.innerHTML = this.title[i];
}
if(this.title[i]=='电费') {
let widthx =74;
let fontSize =23;
let fontColor = '#01F4FF';
console.log("fuwuwwwww");
ball.style.boxShadow = 'inset 0px 0px 16px 2px ' +'rgba(1,244,255,1)';
ball.style.width= ""+widthx+""+"px";
ball.style.height= ""+widthx+""+"px";
ball.style.fontSize = ""+fontSize+"px";
ball.style.fontFamily = "PingFang SC-Regular, PingFang SC";
ball.style.fontWeight = "400";
ball.style.color = fontColor;
ball.style.top = "150" + "px";
ball.style.left = "170" + "px";
ball.innerHTML = this.title[i];
}
if(this.title[i]=='解答') {
let widthx =74;
let fontSize =23;
let fontColor = '#4696FF';
console.log("fuwuwwwww");
ball.style.boxShadow = 'inset 0px 0px 16px 2px ' +'rgba(45,101,255,1)';
ball.style.width= ""+widthx+""+"px";
ball.style.height= ""+widthx+""+"px";
ball.style.fontSize = ""+fontSize+"px";
ball.style.fontFamily = "PingFang SC-Regular, PingFang SC";
ball.style.fontWeight = "400";
ball.style.color = fontColor;
ball.style.top = "260" + "px";
ball.style.left = "240" + "px";
ball.innerHTML = this.title[i];
}
if(this.title[i]=='报修') {
let widthx =86;
let fontSize =27;
let fontColor = '#E0E62D';
console.log("fuwuwwwww");
ball.style.boxShadow = 'inset 0px 0px 16px 2px ' +'rgba(226,255,23,1)';
ball.style.width= ""+widthx+""+"px";
ball.style.height= ""+widthx+""+"px";
ball.style.fontSize = ""+fontSize+"px";
ball.style.fontFamily = "PingFang SC-Regular, PingFang SC";
ball.style.fontWeight = "400";
ball.style.color = fontColor;
ball.style.top = "300" + "px";
ball.style.left = "400" + "px";
ball.innerHTML = this.title[i];
}
// if(this.title[i]=='服务') {
// let widthx =74;
// let fontSize =23;
// let fontColor = '#01F4FF';
// console.log("fuwuwwwww");
// ball.style.boxShadow = 'inset 0px 0px 16px 2px ' +' rgba(1,244,255,1)';
// ball.style.width= ""+widthx+""+"px";
// ball.style.height= ""+widthx+""+"px";
// ball.style.fontSize = ""+fontSize+"px";
// ball.style.fontFamily = "PingFang SC-Regular, PingFang SC";
// ball.style.fontWeight = "400";
// ball.style.color = fontColor;
// ball.style.top = "350" + "px";
// ball.style.left = "390" + "px";
// ball.innerHTML = this.title[i];
// }
// ball.innerHTML = i + 1;
//将小球插入当wrapDiv中
this.wrapDiv.appendChild(ball);
//将所有的小球存储到数组中
this.balls.push(ball);
}
},
moveBalls(ballObj) {
// var _this = this
// setInterval(function() {
ballObj.style.top = ballObj.y + "px";
ballObj.style.left = ballObj.x + "px";
//判断小球的标志量，对小球作出相应操作
if (ballObj.yflag) {
//小球向下移动 下边界
ballObj.y += ballObj.speed;
if (ballObj.y >= 483 - ballObj.offsetWidth) {
ballObj.y = 483 - ballObj.offsetWidth;
ballObj.yflag = false;
}
} else {
//小球向上移动
ballObj.y -= ballObj.speed;
if (ballObj.y <= 0) {
ballObj.y = 0;
ballObj.yflag = true;
}
}
if (ballObj.xflag) {
//小球向右移动 右边界
ballObj.x += ballObj.speed;
if (ballObj.x >= 850 - ballObj.offsetHeight) {
ballObj.x = 850 - ballObj.offsetHeight;
ballObj.xflag = false;
}
} else {
//小球向左移动
ballObj.x -= ballObj.speed;
if (ballObj.x <= 0) {
ballObj.x = 0;
ballObj.xflag = true;
}
}
// }, 20);
},
}
}
</script>
<!-- <style type="text/css"> -->
<style lang="scss" scoped>
#wrap {
width: 869px;
height: calc(583px - var(--sub-title-width));
/* background: red; */
/* display: flex; */
/* width: 400px;
height: 400px; */
// border: 1px solid red;
/* border: 1px solid red; */
/*小球设置相对定位*/
position: relative;
/* margin: 0 auto; */
/* display: flex;
align-items: center;
justify-content: center; */
display: flex;
// flex-direction: row;
align-items: center;
justify-content: center;
// .bg {
// width: 100%;
// height: 90%;
// background: url('~@/assets/image/leftPage/ServiceQuality/dashuju.png')
// center bottom no-repeat;
// // background: red;
// }
}
p {
/* width: 100px;
height: 100px; */
/* color: white; */
display: flex;
align-items: center;
justify-content: center;
/* border-radius: 50%; */
/* font-size: 45px; */
text-align: center;
top: 0;
left: 0;
position: absolute;
/* padding: 35px 0; */
}
</style>版权声明：本文为qq_41638872原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。