Sun-panel美化自定义JS篇

admin2024-06-11 320

以下内容来自与末大佬的博客：blog.ymz.icu

其他的内容没有试过，只弄了一个飘雪花的效果，电脑上和我的魅族16th手机上都还可以，但是我那台老苹果iphone7Plus性能就太差了，有了这个效果会很卡，不流畅，所以又取消了。其他一些因为没有更好的素材，就暂时没有弄。

飘雪效果中有个定义生成一片雪花的毫秒数，建议不低于100，但是我修改成了500，在老苹果手机上还是卡顿，不流畅。没办法，这种效果是我无法接受的，只能去掉了。

以下是JS美化相关的内容：

多js加载

用于加载多个js文件
加载多js应该还有很多办法
我这不是唯一办法，你们也可以自行发挥
用的js文件很少的话可以略过多js加载

// 定义函数 loadMultipleResources，用于加载多个资源
function loadMultipleResources(resources, callback) {
var loadedCount = 0; // 已加载的资源计数

// 定义内部函数 loadResource，用于加载单个资源
function loadResource(resource, index) {
var element;

if (resource.endsWith('.js')) {
// 如果资源是 JavaScript 文件
element = document.createElement('script'); // 创建 script 元素
element.src = resource; // 设置 script 元素的 src 属性为资源路径
element.onload = function () {
loadedCount++; // 每次资源加载完成时增加计数
if (loadedCount === resources.length) {
// 如果所有文件都已加载完成，则执行回调函数
callback();
}
};
}

document.head.appendChild(element); // 将创建的 script 元素添加到文档头部
}

// 遍历资源数组，逐个加载资源
for (var i = 0; i < resources.length; i++) {
loadResource(resources[i], i);
}
}

// 定义一个包含多个资源路径的数组
var resources = [
// jquery库
'https://myhkw.cn/player/js/jquery.min.js',
// 也可以使用本地jquery库
//'./custom/jquery.min.js',
// mp4动态背景
'./custom/Random video bg.js',
// 页面雪花特效
'./custom/Snowflakes.js',
// 鼠标点击特效
'./custom/Mouse.js',
// 音乐播放器
'./custom/Music player.js',
// 网页计时器
'./custom/Sitetime.js',
];

// 调用 loadMultipleResources 函数，传入资源数组和回调函数
loadMultipleResources(resources, function () {
// 所有资源加载完成后执行的回调函数
console.log('所有资源已加载');
});

MP4动态视频背景

使用js实现的动态视频背景，由一群 jackloves111 提供

页面雪花特效

不建议雪花生成毫秒数低于100
可能会对移动端或老旧设备造成卡顿

function snow() {
// 1、定义一片雪花模板
var flake = document.createElement('div');
// 定义雪花字符 ❉❅❆✻✼❈❊✥✺
flake.innerHTML = '❅';
flake.style.cssText = 'position:absolute;color:#fff;';

//获取页面的高度相当于雪花下落结束时Y轴的位置
var documentHieght = window.innerHeight;
//获取页面的宽度，利用这个数来算出，雪花开始时left的值
var documentWidth = window.innerWidth;

//定义生成一片雪花的毫秒数，不建议低于100
var millisec =200;
//2、设置第一个定时器，周期性定时器，每隔一段时间（millisec）生成一片雪花；
setInterval(function() { //页面加载之后，定时器就开始工作
//随机生成雪花下落开始时left的值，相当于开始时X轴的位置
var startLeft = Math.random() * documentWidth;

//随机生成雪花下落结束时left的值，相当于结束时X轴的位置
var endLeft = Math.random() * documentWidth;

//随机生成雪花大小
var flakeSize = 3 + 20 * Math.random();

//随机生成雪花下落持续时间，时间越大下落越慢
var durationTime = 6000 + 10000 * Math.random();

//随机生成雪花下落开始时的透明度
var startOpacity = 0.7 + 0.3 * Math.random();

//随机生成雪花下落结束时的透明度
var endOpacity = 0.2 + 0.2 * Math.random();

//克隆一个雪花模板
var cloneFlake = flake.cloneNode(true);

//第一次修改样式，定义克隆出来的雪花的样式
cloneFlake.style.cssText += `
left: ${startLeft}px;
opacity: ${startOpacity};
font-size:${flakeSize}px;
top:-25px;
transition:${durationTime}ms;`;

//拼接到页面中
document.body.appendChild(cloneFlake);

//设置第二个定时器，一次性定时器，
//当第一个定时器生成雪花，并在页面上渲染出来后，修改雪花的样式，让雪花动起来；
setTimeout(function() {
//第二次修改样式
cloneFlake.style.cssText += `
left: ${endLeft}px;
top:${documentHieght}px;
opacity:${endOpacity};`;

//4、设置第三个定时器，当雪花落下后，删除雪花。
setTimeout(function() {
cloneFlake.remove();
}, durationTime);
}, 0);

}, millisec);
}
snow();

点击特效

点击特效是出自我的与末的个人引导页

class Circle {
constructor({ origin, speed, color, angle, context }) {
this.origin = origin; // 初始位置
this.position = { ...this.origin }; // 当前位置
this.color = color; // 颜色
this.speed = speed; // 速度
this.angle = angle; // 角度
this.context = context; // 绘制上下文
this.renderCount = 0; // 渲染计数
}

draw() {
// 绘制圆形
this.context.fillStyle = this.color;
this.context.beginPath();
this.context.arc(this.position.x, this.position.y, 2, 0, Math.PI * 2);
this.context.fill();
}

move() {
// 移动圆形
this.position.x = (Math.sin(this.angle) * this.speed) + this.position.x;
this.position.y = (Math.cos(this.angle) * this.speed) + this.position.y + (this.renderCount * 0.3);
this.renderCount++;
}
}

class Boom {
constructor({ origin, context, circleCount = 10, area }) {
this.origin = origin; // 初始位置
this.context = context; // 绘制上下文
this.circleCount = circleCount; // 圆形数量
this.area = area; // 区域
this.stop = false; // 停止标志
this.circles = []; // 圆形数组
}

randomArray(range) {
// 从数组中随机取值
const length = range.length;
const randomIndex = Math.floor(length * Math.random());
return range[randomIndex];
}

randomColor() {
// 随机生成颜色
const range = ['8', '9', 'A', 'B', 'C', 'D', 'E', 'F'];
return '#' + this.randomArray(range) + this.randomArray(range) + this.randomArray(range) + this.randomArray(range) + this.randomArray(range) + this.randomArray(range);
}

randomRange(start, end) {
// 在范围内生成随机数
return (end - start) * Math.random() + start;
}

init() {
// 初始化Boom对象
for (let i = 0; i < this.circleCount; i++) {
const circle = new Circle({
context: this.context,
origin: this.origin,
color: this.randomColor(),
angle: this.randomRange(Math.PI - 1, Math.PI + 1),
speed: this.randomRange(1, 6)
});
this.circles.push(circle);
}
}

move() {
// 移动所有圆形，并检测是否超出区域
this.circles.forEach((circle, index) => {
if (circle.position.x > this.area.width || circle.position.y > this.area.height) {
return this.circles.splice(index, 1);
}
circle.move();
});
if (this.circles.length === 0) {
this.stop = true;
}
}

draw() {
// 绘制所有圆形
this.circles.forEach(circle => circle.draw());
}
}

class CursorSpecialEffects {
constructor() {
// 鼠标特效主类
this.computerCanvas = document.createElement('canvas'); // 计算用Canvas
this.renderCanvas = document.createElement('canvas'); // 渲染用Canvas

this.computerContext = this.computerCanvas.getContext('2d'); // 计算用上下文
this.renderContext = this.renderCanvas.getContext('2d'); // 渲染用上下文

this.globalWidth = window.innerWidth; // 全局宽度
this.globalHeight = window.innerHeight; // 全局高度

this.booms = []; // Boom对象数组
this.running = false; // 运行标志
}

handleMouseDown(e) {
// 处理鼠标点击事件
const boom = new Boom({
origin: { x: e.clientX, y: e.clientY },
context: this.computerContext,
area: {
width: this.globalWidth,
height: this.globalHeight
}
});
boom.init();
this.booms.push(boom);
this.running || this.run();
}

handlePageHide() {
// 处理页面隐藏事件
this.booms = [];
this.running = false;
}

init() {
// 初始化方法
const style = this.renderCanvas.style;
style.position = 'fixed';
style.top = style.left = 0;
style.zIndex = '999999999999999999999999999999999999999999';
style.pointerEvents = 'none';

style.width = this.renderCanvas.width = this.computerCanvas.width = this.globalWidth;
style.height = this.renderCanvas.height = this.computerCanvas.height = this.globalHeight;

document.body.append(this.renderCanvas);

window.addEventListener('mousedown', this.handleMouseDown.bind(this));
window.addEventListener('pagehide', this.handlePageHide.bind(this));
}

run() {
// 运行方法
this.running = true;
if (this.booms.length === 0) {
return this.running = false;
}

requestAnimationFrame(this.run.bind(this));

this.computerContext.clearRect(0, 0, this.globalWidth, this.globalHeight);
this.renderContext.clearRect(0, 0, this.globalWidth, this.globalHeight);

this.booms.forEach((boom, index) => {
if (boom.stop) {
return this.booms.splice(index, 1);
}
boom.move();
boom.draw();
});
this.renderContext.drawImage(this.computerCanvas, 0, 0, this.globalWidth, this.globalHeight);
}
}

const cursorSpecialEffects = new CursorSpecialEffects();
cursorSpecialEffects.init();

音乐播放器

播放器详见明月浩空网
这是一个专注于html音乐播放器10年的网站，基础功能都是免费！

网页计时器

依然出自我的与末的个人引导页
展示此内容需要在Sun-Panel自定义页脚加上此代码

function siteTime() {
window.setTimeout(siteTime, 1000);

var seconds = 1000;
var minutes = seconds * 60;
var hours = minutes * 60;
var days = hours * 24;
var years = days * 365;

var targetDate = new Date(2023, 11, 18); // 注意月份是从0开始的，所以11表示12月
var today = new Date();
var diff = today - targetDate;

// 计算已运行的年数
var totalYears = Math.floor(diff / years);

// 计算剩余时间
var remainingTime = diff % years;

var diffDays = Math.floor(remainingTime / days);
remainingTime %= days;

var diffHours = Math.floor(remainingTime / hours);
remainingTime %= hours;

var diffMinutes = Math.floor(remainingTime / minutes);
remainingTime %= minutes;

var diffSeconds = Math.floor(remainingTime / seconds);

document.getElementById("sitetime").innerHTML = "网页已运营 " + totalYears + " 年 " + diffDays + " 天 " + diffHours + " 小时 " + diffMinutes + " 分钟 " + diffSeconds + " 秒";
}

siteTime();

附特殊字符，用来替换雪花的特殊字符，想让页面飘什么样的就替换什么样的：

音符符号

♩ ♪ ♫ ♬ ♭ ♮ ♯

太阳，月亮，雨，云，流星，伞，温泉，堆雪人，冰晶符号

ϟ ☀ ☁ ☂ ☃ ☄ ☉ ☼ ☽ ☾ ♁ ♨ ❄ ❅ ❆

星号符号

★ ☆ ✡ ✦ ✧ ✩ ✪ ✫ ✬ ✭ ✮ ✯ ✰

冰晶，星星，太阳，花朵符号

⁂ ⁎ ⁑ ☸ ✢ ✣ ✤ ✥ ✱ ✲ ✳ ✴ ✵ ✶ ✷ ✸ ✹ ✺ ✻ ✼ ✽ ✾ ✿ ❀ ❁ ❂ ❃ ❇ ❈ ❉ ❊ ❋ ❅ ❆ ✥

转载请注明原文地址:http://198484.com/?read-176.html

000

sunpanel

最新回复(2)

cccccc3月前
引用2楼
你后台不能添加栏目的问题解决了吗，是什么原因。
admin3月前
引用3楼
cccccc 你后台不能添加栏目的问题解决了吗，是什么原因。
解决了，不是程序的问题，是服务器的问题。我在云服务器后台提交了工单，服务器供应商那边处理了。推测是服务器供应商做了一些安全策略的调整导致的。