可以加个修改站内用户名的功能吗;w;
Uzizzz 发表于 2023-12-6 00:28
可以加个修改站内用户名的功能吗;w;
呜呜呜原来可以修改用户名，才看到对不起打扰了！{:4_112:}
ksm 发表于 2023-12-6 00:30
呜呜呜原来可以修改用户名，才看到对不起打扰了！
{:4_111:}很多功能都比较隐藏
网站只有鼠标拖尾太单调了，可以考虑再加入点击特效
写的一个示例，可以直接贴到控制台看效果
```javascript
function clickAnimation(e) {
const img_width = 30;
const img_height = 30
const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
const scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
const base_x = e.clientX + scrollLeft - img_width / 2;
const base_y = e.clientY + scrollTop - img_height / 2;
const fadeTime = 600;
const frameTime = 10;
const frameCount = fadeTime / frameTime;
let rotate = 0;
let rotate_max = 600;
let rotate_step = Math.floor(Math.random() * rotate_max / frameCount + 1);
let x = 0;
let x_offset = Math.floor(Math.random() * 200 - 100);
let x_step = x_offset / frameCount;
let y = 0;
let y_offset = Math.floor(Math.random() * 200 - 100);
let y_step = y_offset / frameCount;
let opacity = 1;
let opacity_step = 1 / frameCount;
let scale = 1;
let scale_step = 1 / frameCount;
let blooming = document.createElement("div");
blooming.style.position = "absolute";
blooming.style.width = img_width + "px";
blooming.style.height = img_height + "px";
blooming.style.left = base_x + "px";
blooming.style.top = base_y + "px";
blooming.style.backgroundImage = String.raw`url(https://tb2.bdstatic.com/tb/editor/images/face/i_f25.png)`;
document.body.appendChild(blooming);
let frameIndex = 0;
let timer = setInterval(function () {
frameIndex++;
rotate = Math.floor(frameIndex * rotate_step);
x = frameIndex * x_step;
y = frameIndex * y_step;
opacity = 1 - frameIndex * opacity_step;
if (opacity < 0) opacity = 0;
scale = 1 - frameIndex * scale_step;
if (scale < 0) scale = 0;
blooming.style.opacity = opacity;
blooming.style.left = base_x + x + "px";
blooming.style.top = base_y + y + "px";
blooming.style.transform = `rotate(${rotate}deg) scale(${scale})`;
/* Opera、Chrome 和 Safari */
blooming.style.WebkitTransform = `rotate(${rotate}deg) scale(${scale})`;
/* IE 9 */
blooming.style.msTransform = `rotate(${rotate}deg) scale(${scale})`;
}, frameTime);
setTimeout(function () {
clearInterval(timer);
blooming.remove();
}, fadeTime);
}
document.addEventListener("click", function (e) {
for (let i = 0; i <= Math.floor(Math.random() * 3 + 3); i++)
clickAnimation(e);
});
```
好，我先加了个纯文字的。
然后这段的话感觉可以稍微优化一下，减少对DOM的访问来提高性能：
```
function createAnimationElement() {
const img_width = 30;
const img_height = 30;
const blooming = document.createElement("div");
blooming.classList.add("blooming");
blooming.style.position = "absolute";
blooming.style.width = img_width + "px";
blooming.style.height = img_height + "px";
blooming.style.backgroundImage = `url(https://tb2.bdstatic.com/tb/editor/images/face/i_f25.png)`;
return blooming;
}
function clickAnimation(e) {
const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
const scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
const base_x = e.clientX + scrollLeft - 15;
const base_y = e.clientY + scrollTop - 15;
const fadeTime = 600;
const frameTime = 10;
const frameCount = fadeTime / frameTime;
const elements = [];
const animations = [];
const clickCount = Math.floor(Math.random() * 3 + 3);
for (let i = 0; i < clickCount; i++) {
const blooming = createAnimationElement();
elements.push(blooming);
let frameIndex = 0;
let opacity = 1;
let scale = 1;
const rotate_max = 600;
const rotate_step = Math.floor(Math.random() * rotate_max / frameCount + 1);
const x_offset = Math.floor(Math.random() * 200 - 100);
const x_step = x_offset / frameCount;
const y_offset = Math.floor(Math.random() * 200 - 100);
const y_step = y_offset / frameCount;
animations.push({
blooming,
frameIndex,
opacity,
scale,
rotate_step,
x_step,
y_step
});
}
let animationId;
function animate() {
animationId = requestAnimationFrame(animate);
for (let i = 0; i < animations.length; i++) {
const {
blooming,
frameIndex,
opacity,
scale,
rotate_step,
x_step,
y_step
} = animations;
const rotate = Math.floor(frameIndex * rotate_step);
const x = frameIndex * x_step;
const y = frameIndex * y_step;
const newOpacity = 1 - frameIndex * (1 / frameCount);
const newScale = 1 - frameIndex * (1 / frameCount);
blooming.style.opacity = newOpacity > 0 ? newOpacity : 0;
blooming.style.transform = `rotate(${rotate}deg) scale(${newScale})`;
blooming.style.WebkitTransform = `rotate(${rotate}deg) scale(${newScale})`;
blooming.style.left = base_x + x + "px";
blooming.style.top = base_y + y + "px";
if (frameIndex < frameCount) {
animations.frameIndex = frameIndex + 1;
} else {
blooming.remove();
elements.splice(i, 1);
animations.splice(i, 1);
i--;
}
}
if (animations.length === 0) {
cancelAnimationFrame(animationId);
}
}
animate();
for (const blooming of elements) {
document.body.appendChild(blooming);
}
}
document.addEventListener("click", function (e) {
clickAnimation(e);
});
```