Sun-panel美化自定义JS篇

admin2024-06-11  126

以下内容来自与末大佬的博客: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 提供

document.addEventListener('DOMContentLoaded', (event) => {  
    // 用于添加视频背景的函数  
    const addVideoBackground = (wallpaperDiv) => {  
        // 创建video元素  
        const video = document.createElement('video');  
  
        // 设置视频属性  
        video.autoplay = true; // 使用属性而不是setAttribute,因为autoplay是一个布尔属性  
        video.loop = true;  
        video.muted = true;  
        video.playsInline = true; // 注意这里是驼峰式写法,但在HTML中应使用playsinline  
  
        // 应用CSS样式到video元素  
        video.style.position = 'absolute';  
        video.style.top = '0';  
        video.style.left = '0';  
        video.style.width = '100%';  
        video.style.height = '100%';  
        video.style.objectFit = 'cover';  
  
        // 定义多个视频源  
        const videoSources = [  
            '/uploads/%E5%8A%A8%E6%80%81%E5%A3%81%E7%BA%B8-01.mp4',  
            '/uploads/%E5%8A%A8%E6%80%81%E5%A3%81%E7%BA%B8-02.mp4',
            '/uploads/%E5%8A%A8%E6%80%81%E5%A3%81%E7%BA%B8-03.mp4',
            '/uploads/%E5%8A%A8%E6%80%81%E5%A3%81%E7%BA%B8-04.mp4',
            '/uploads/%E5%8A%A8%E6%80%81%E5%A3%81%E7%BA%B8-05.mp4',
            // '/uploads/%E5%8A%A8%E6%80%81%E5%A3%81%E7%BA%B8-06.mp4',
            // '/uploads/%E5%8A%A8%E6%80%81%E5%A3%81%E7%BA%B8-07.mp4',
            // '/uploads/%E5%8A%A8%E6%80%81%E5%A3%81%E7%BA%B8-08.mp4',
            // '/uploads/%E5%8A%A8%E6%80%81%E5%A3%81%E7%BA%B8-09.mp4'
            // 在这里可以添加更多的视频源  
        ];  
  
        // 从视频源数组中随机选择一个  
        const randomSource = videoSources[Math.floor(Math.random() * videoSources.length)];  
  
        // 创建source元素并设置随机选择的视频源  
        const source = document.createElement('source');  
        source.src = randomSource;  
        source.type = 'video/mp4';  
  
        // 将source元素添加到video元素中  
        video.appendChild(source);  
  
        // 监听视频加载元数据事件,尝试播放视频  
        video.addEventListener('loadedmetadata', () => {  
            video.play().catch((error) => {  
                // 如果播放失败,可以在这里处理错误,例如显示一个备用图片或消息  
                console.error('视频播放失败:', error);  
            });  
        });  
  
        // 将video元素添加到指定的wallpaperDiv中  
        wallpaperDiv.appendChild(video);  
    };  
  
    // 使用MutationObserver监视DOM变化  
    const observer = new MutationObserver((mutationsList, observer) => {  
        // 查找匹配的.cover.wallpaper元素  
        const wallpaperDiv = document.querySelector('.cover.wallpaper');  
  
        if (wallpaperDiv && !wallpaperDiv.querySelector('video')) {  
            // 添加视频背景  
            addVideoBackground(wallpaperDiv);  
            // 注意:我们不再断开观察者,以便它能够继续监视未来的变化  
        }  
    });  
  
    // 启动观察者监视document.body的变化  
    observer.observe(document.body, { childList: true, subtree: true });  
});

 


页面雪花特效

不建议雪花生成毫秒数低于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自定义页脚加上此代码

<span id="sitetime"></span>


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

最新回复(2)
  • cccccc13天前
    引用2
    你后台不能添加栏目的问题解决了吗,是什么原因。
  • admin10天前
    引用3
    cccccc 你后台不能添加栏目的问题解决了吗,是什么原因。
    解决了,不是程序的问题,是服务器的问题。我在云服务器后台提交了工单,服务器供应商那边处理了。推测是服务器供应商做了一些安全策略的调整导致的。