Document
* {
margin: 0; /*外边距*/
padding: 0; /*内边距*/
box-sizing: border-box; /*自动內减 | 当你设置 width 和 height 时，它们应用于元素的边框区域，即元素的总尺寸——>使content尺寸自动调节*/
/*box-sizing: content-box; (这是默认值) 当你设置 width 和 height 时，它们仅应用于元素的内容区域。*/
}
body {
position: relative;
width: 100vw;
height: 100vh;
background-color: rgba(77, 77, 84, 99%);
/* overflow: hidden; */
/* 于控制当元素的内容超出其指定的高度和宽度时，浏览器应该如何处理这些溢出的内容。 */
}
div {
position: absolute;
top: 10px;
left: 10px;
width: 0px;
height: 0px;
background-color: #fff;
/* border-radius: 50%; */
}
div::after {
/* 伪类默认 inline 显示，不能设weight height */
content: "";
position: absolute; /* 绝对定位，脱离了文档流 变成盒子 能计算 weight height */
top: 0;
left: 0;
width: 14px;
height: 14px;
transform: translate(
-50%,
-50%
); /*在水平方向（X轴）向左移动自身宽度的 50% | 在垂直方向（Y轴）向上移动自身高度的 50%*/
background-color: #fff;
border-radius: 50%;
box-shadow: 0px 0px 10px 5px #159aff;
/* 0px 0px：阴影的水平和垂直偏移量都是 0，表示阴影在元素正中心。
10px：阴影的模糊半径，值越大越模糊。
5px：阴影的扩散半径，正值使阴影变大，负值使阴影变小。
#159AFF：阴影的颜色，这里是蓝色。
综合起来，这个阴影会创建一个围绕圆形伪元素的柔和蓝色发光效果。*/
}
<script>
function m1() {
const body = document.body;
// // 创建一个新的 <p> 元素
// const newParagraph = document.createElement("p");
// newParagraph.textContent = "这是一个新的段落。";
// 注：p标签没方法 而是newParagraph 这个p标签的实例对象有方法
class Point {
constructor(box) {
/* 构造器接收一个名为 box 的参数 */
this.mainBox = box;
this.x = getRandom(7, box.offsetWidth - 7);
this.y = getRandom(7, box.offsetHeight - 7);
// box.offsetWidth 是一个 DOM 元素的 宽度属性，它返回的是该元素的可见宽度（单位为像素），包括：
// 元素的内边距（padding）边框（border）滚动条（如果有的话）
// 不包括外边距（margin）
// box.offsetHeight 是一个 DOM 元素的 高度属性，它返回的是该元素的可见高度（单位为像素），包括：
// 元素的内边距（padding）边框（border）滚动条（如果有的话）
// 不包括外边距（margin）
this.xSpeed = taimin(-500, 500);
this.ySpeed = taimin(-500, 500);
this.Time = null;
this.qiu = document.createElement("div");
this.CreatrElement = true;
}
draw(muX, muY, move) {
// console.log(muX,muY,move,'123');
if (this.Time) {
const t = (Date.now() - this.Time) / 3000;
if (!move) {
var x = this.x + this.xSpeed * t;
var y = this.y + this.ySpeed * t;
} else {
var x = this.x;
var y = this.y;
}
const boxWidth = this.mainBox.offsetWidth;
const boxHeight = this.mainBox.offsetHeight;
//跟随鼠标
if (move) {
const tt = 4000 * t;
if (y > muY) {
y = y - tt;
if (y <= muY) {
y = muY;
}
} else {
y = y + tt;
if (y >= muY) {
y = muY;
}
}
if (x > muX) {
x = x - tt;
if (x <= muX) {
x = muX;
}
} else {
x = x + tt;
if (x >= muX) {
x = muX;
}
}
}
if (x <= 7) {
this.xSpeed *= -1;
x = 8;
}
if (x >= boxWidth - 7) {
this.xSpeed *= -1;
x = boxWidth - 8;
}
if (y <= 7) {
this.ySpeed *= -1;
y = 8;
}
if (y >= boxHeight - 7) {
this.ySpeed *= -1;
y = boxHeight - 8;
}
this.x = x;
this.y = y;
}
this.qiu.style.top = this.y + "px";
this.qiu.style.left = this.x + "px";
// for (let index = 0; index < document.body.children.length; index++) {
// if(document.body.children[index] == this.qiu){
// }else{
// console.log('JINLAI');
if (this.CreatrElement) {
console.log("添加球");
body.appendChild(this.qiu);
this.CreatrElement = false;
}
// }
// }
this.Time = Date.now();
}
}
class Graph {
constructor({ count, box }) {
this.points = new Array(count).fill(0).map(() => new Point(box));
this.muX = 0;
this.muY = 0;
this.mov = false;
}
draw() {
requestAnimationFrame(() => this.draw());
for (let index = 0; index < this.points.length; index++) {
this.points[index].draw(this.muX, this.muY, this.mov);
}
}
move({ x, y, move }) {
this.mov = move;
this.muX = x;
this.muY = y;
}
}
const app = new Graph({ count: 18, box: body });
app.draw();
body.addEventListener("mousemove", (e) => {
// console.log(e.clientX,e.clientY);
app.move({ x: e.clientX, y: e.clientY, move: true });
});
body.addEventListener("mouseleave", () => {
app.move({ move: false });
});
// setInterval(()=>{app.draw()},100)
}
m1();
// while(true){
// console.log('死循环');
// }
// class qius {
// constructor(){
// this.top = getRandom(-1000,1000),
// this.left = getRandom(-1000,1000)
// this.el = document.body
// this.qiu = document.createElement('div')
// this.time = null
// }
// crqiu(){
// this.el.appendChild(this.qiu)
// }
// ani(){
// // setInterval(()=>{
// // this.ani()
// // })
// requestAnimationFrame(()=>{
// this.ani()
// })
// console.log(getRandom(-1000,1000));
// if(this.time != null){
// const now =Date.now()
// const t =((now - this.time) / 1000).toFixed(3)-0
// let Top = (this.top*t+ ((this.qiu.offsetTop).toFixed(1)-0)).toFixed(3)-0
// let left = (this.left*t + ((this.qiu.offsetLeft).toFixed(1)-0)).toFixed(3)-0
// if (this.qiu.offsetLeft<=0) {
// this.left *= -1
// left = 20
// }
// if(this.qiu.offsetLeft >= this.el.offsetWidth){
// left = this.el.offsetWidth - 20
// }
// if (this.qiu.offsetTop <= 0) {
// this.top *= -1
// Top = 20
// }
// if( this.qiu.offsetTop >= this.el.offsetHeight){
// Top = this.el.offsetHeight - 20
// }
// if(left <= 10 || left >= this.el.offsetWidth - 20){
// this.left *= -1
// }
// if( Top <= 10 ||Top >= this.el.offsetHeight - 20){
// this.top *= -1
// }
// this.qiu.style.top = `${Top}px`;
// this.qiu.style.left = `${left}px`
// }
// this.time = Date.now()
// }
// }
function getRandom(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min + 1)) + min;
}
function taimin(min, max) {
let a = getRandom(min, max);
if (a > 0) {
if (a < 100) {
a = taimin(min, max);
}
} else if (a < 0) {
if (a > -100) {
a = taimin(min, max);
}
}
return a;
}
// for (let index = 0; index < 1000; index++) {
// const a = new qius()
// a.crqiu()
// a.ani()
// }
// requestAnimationFrame(a.ani)
// new qius().crqiu()
</script>
