山里人 发表于 2025-2-28 09:37

醉心集-23首

本帖最后由 山里人 于 2025-3-2 08:43 编辑 <br /><br /><style>
        @import 'https://ln2018.oss-cn-hangzhou.aliyuncs.com/2025/12s/mp3splayer.css';
        #tz { margin: 10px 0 2px calc(50% - 721px);width: 1280px;height: 720px; background: url('https://ln2018.oss-cn-hangzhou.aliyuncs.com/2025/12s/b.jpg') no-repeat center/cover; }
#mplayer { --yy: -280px; --color1: snow; --color2: Orange; background: #3203fe; top: 280px;}
        #mplayer img { filter: invert(100%); }
        #fsbtn {bottom: 40px; color: white;}
        #clock { position: absolute; width:250px; height: 250px;z-index: 2; bottom: -350px;right: 300px; }
#vid { position: absolute; width: 100%; height: 100%; object-fit: cover; pointer-events: none; mix-blend-mode: screen; z-index: 2; opacity: .25; transform: rotateY(180deg); }
      
</style>
<div id="tz" class="pa">

<video id="vid" src="https://img.tukuppt.com/video_show/6181262/01/32/48/62de4a81ae26c.mp4" autoplay="" loop="" muted=""></video>       
</div>


<div class="clock_wrapper">
    <canvas id="clock" width="400" height="400"></canvas>
</div>

<script>
const canvas = document.getElementById('clock');
const ctx = canvas.getContext('2d');

// 高清屏适配
const scale = window.devicePixelRatio || 1;
canvas.width = 400 * scale;
canvas.height = 400 * scale;

ctx.scale(scale, scale);

function drawClock() {
    // 清除画布
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // 获取当前时间
    const now = new Date();
    const hours = now.getHours() % 12;
    const minutes = now.getMinutes();
    const seconds = now.getSeconds();
    const milliseconds = now.getMilliseconds();

    // 表盘样式
    const centerX = canvas.width / 2 / scale;
    const centerY = canvas.height / 2 / scale;
    const radius = Math.min(centerX, centerY) - 10;

    // 绘制表盘背景
    const gradient = ctx.createRadialGradient(
      centerX, centerY, 0, centerX, centerY, radius
    );
    gradient.addColorStop(0, '#a5f8f1');
    gradient.addColorStop(1, '#e0e0e0');
    ctx.fillStyle = gradient;
    ctx.beginPath();
    ctx.arc(centerX, centerY, radius, 0, Math.PI * 2);
    ctx.fill();

    // 绘制边框
    ctx.strokeStyle = 'linear-gradient(45deg, #666, #999)';
    ctx.lineWidth = 8;
    ctx.beginPath();
    ctx.arc(centerX, centerY, radius - 4, 0, Math.PI * 2);
    ctx.stroke();

    // 绘制小时刻度
    ctx.lineWidth = 3;
    ctx.strokeStyle = '#333';
    for (let i = 0; i < 12; i++) {
      ctx.save();
      ctx.translate(centerX, centerY);
      ctx.rotate(i * 30 * Math.PI / 180);
      ctx.beginPath();
      ctx.moveTo(0, -radius + 20);
      ctx.lineTo(0, -radius + 40);
      ctx.stroke();
      ctx.restore();
    }

    // 绘制分钟刻度
    ctx.lineWidth = 1;
    ctx.strokeStyle = '#666';
    for (let i = 0; i < 60; i++) {
      if (i % 5 === 0) continue; // 跳过小时刻度
      ctx.save();
      ctx.translate(centerX, centerY);
      ctx.rotate(i * 6 * Math.PI / 180);
      ctx.beginPath();
      ctx.moveTo(0, -radius + 25);
      ctx.lineTo(0, -radius + 35);
      ctx.stroke();
      ctx.restore();
    }

    // 绘制数字
    ctx.font = '16px Arial';
    ctx.fillStyle = '#333';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    for (let i = 1; i <= 12; i++) {
      const angle = i * 30 * Math.PI / 180;
      const x = centerX + Math.sin(angle) * (radius - 60);
      const y = centerY - Math.cos(angle) * (radius - 60);
      ctx.fillText(i.toString(), x, y);
    }

    // 计算指针角度
    const secondAngle = (seconds + milliseconds / 1000) * 6; // 每秒6度
    const minuteAngle = (minutes + seconds / 60) * 6;
    const hourAngle = (hours + minutes / 60) * 30;

    // 绘制时针
    ctx.save();
    ctx.translate(centerX, centerY);
    ctx.rotate(hourAngle * Math.PI / 180);
    ctx.fillStyle = '#333';
    ctx.shadowColor = 'rgba(0,0,0,0.2)';
    ctx.shadowBlur = 8;
    ctx.shadowOffsetY = 3;
    ctx.beginPath();
    ctx.moveTo(-4, 0);
    ctx.lineTo(0, -radius * 0.5);
    ctx.lineTo(4, 0);
    ctx.arc(0, 0, 4, 0, Math.PI * 2);
    ctx.fill();
    ctx.restore();

    // 绘制分针
    ctx.save();
    ctx.translate(centerX, centerY);
    ctx.rotate(minuteAngle * Math.PI / 180);
    ctx.fillStyle = '#666';
    ctx.beginPath();
    ctx.moveTo(-3, 0);
    ctx.lineTo(0, -radius * 0.7);
    ctx.lineTo(3, 0);
    ctx.arc(0, 0, 3, 0, Math.PI * 2);
    ctx.fill();
    ctx.restore();

    // 绘制秒针
    ctx.save();
    ctx.translate(centerX, centerY);
    ctx.rotate(secondAngle * Math.PI / 180);
    ctx.strokeStyle = '#e74c3c';
    ctx.lineWidth = 2;
    ctx.beginPath();
    ctx.moveTo(0, radius * 0.1);
    ctx.lineTo(0, -radius * 0.8);
    ctx.stroke();
    ctx.restore();

    // 绘制中心圆点
    ctx.beginPath();
    ctx.fillStyle = '#e74c3c';
    ctx.arc(centerX, centerY, 4, 0, Math.PI * 2);
    ctx.fill();

    requestAnimationFrame(drawClock);
}

drawClock();
</script>
<script type="module">
        import { hcplay } from 'https://638183.freep.cn/638183/web/mod/mp3splayer.js';
        var musics = [
                ['http://img1.oldkids.cn/upload/2024/04/26/blog_260848287_20240426171954427.mp3 ','一阵风一阵雨'],
['http://img3.oldkids.cn/upload/2024/04/26/blog_260848287_20240426172049219.mp3 ','今夜雨濛濛_ 心上人 _一缕相思情'],
['http://img2.oldkids.cn/upload/2024/04/26/blog_260848287_20240426172123269.mp3 ','你怎么说_ 何日君再来_ 我要对你说'],
['http://img3.oldkids.cn/upload/2024/04/26/blog_260848287_20240426172206224.mp3','再会吧心上人_星星之夜_一去不回头'],
['http://img4.oldkids.cn/upload/2024/04/26/blog_260848287_20240426172239792.mp3 ','初恋 _ 失约 _ 买醉'],
['http://img4.oldkids.cn/upload/2024/04/26/blog_260848287_20240426172312514.mp3 ','原乡人_ 望一望_ 甜蜜蜜'],
['http://img1.oldkids.cn/upload/2024/04/26/blog_260848287_20240426172346246.mp3 ','又是黄昏'],
['http://img4.oldkids.cn/upload/2024/04/26/blog_260848287_20240426172424592.mp3 ','君无愁 _南部人 _烧酒咖啡'],
['http://img2.oldkids.cn/upload/2024/04/26/blog_260848287_20240426172500747.mp3 ','小城故事_ 又见炊烟_ 后悔爱上你'],
['http://img2.oldkids.cn/upload/2024/04/26/blog_260848287_20240426172542921.mp3 ','往事只能回味'],
['http://img1.oldkids.cn/upload/2024/04/26/blog_260848287_20240426172656559.mp3 ','思君愁 _舞女的梦 _爱情的骗子'],
['http://img2.oldkids.cn/upload/2024/04/26/blog_260848287_20240426172758261.mp3 ','情花_ 海棠姑娘_ 原乡情浓_ 爱情'],
['http://img1.oldkids.cn/upload/2024/04/26/blog_260848287_20240426172841721.mp3 ','惜别的海岸'],
['http://img3.oldkids.cn/upload/2024/04/26/blog_260848287_20240426172912726.mp3','成功的条件'],
['http://img1.oldkids.cn/upload/2024/04/26/blog_260848287_20240426172943641.mp3 ','明月千里寄相思'],
['http://img3.oldkids.cn/upload/2024/04/26/blog_260848287_20240426173009676.mp3 ','星夜的离别'],
['http://img4.oldkids.cn/upload/2024/04/26/blog_260848287_20240426173049219.mp3 ','月亮代表我的心_ 在水一方_ 奈何_ 海韵'],
['http://img1.oldkids.cn/upload/2024/04/26/blog_260848287_20240426173132544.mp3 ','浪子的心情 _ 杯中影 _ 相思梦'],
['http://img1.oldkids.cn/upload/2024/04/26/blog_260848287_20240426173202054.mp3 ','爱情的力量'],
['http://img2.oldkids.cn/upload/2024/04/26/blog_260848287_20240426173234105.mp3 ','爱拼才会赢'],
['http://img2.oldkids.cn/upload/2024/04/26/blog_260848287_20240426173302662.mp3','真情比酒浓_加多一点点_淡情愁_情人梦'],
['http://img3.oldkids.cn/upload/2024/04/26/blog_260848287_20240426173334476.mp3 ','舞伴 _ 舞女 _ 歌声恋情'],
['http://img3.oldkids.cn/upload/2024/04/26/blog_260848287_20240426173402617.mp3 ','难忘初恋情人']       
];
        hcplay(tz,null,musics);

</script>

马黑黑 发表于 2025-2-28 12:20

熊猫 logo 可以通过 CSS mask 属性遮罩掉

马黑黑 发表于 2025-2-28 12:21

帖子设计清新雅致，歌曲很赞。{:4_187:}
播放器的配色很漂亮

红影 发表于 2025-2-28 12:23

这个还带时钟的，不过时钟怎么跑到帖子上面去了{:4_173:}

红影 发表于 2025-2-28 12:24

这么多好曲，真不容易。欣赏山里人好帖{:4_199:}

马黑黑 发表于 2025-2-28 12:49

红影 发表于 2025-2-28 12:23
这个还带时钟的，不过时钟怎么跑到帖子上面去了

这个是DS的时钟。由于JS里面考虑到了高清屏适配，翻倒误事：不同的屏幕小时钟的外观虽然清晰，却不一定在布局上能适应所有的显示设备。

可以考虑：在不改动源码的前提下将时钟的父元素（原来是body元素，我该用了div）设置为绝对定位并用left、top属性限制其定位。

如果还不行，则需要取消源码中的高清适配机制。

杨帆 发表于 2025-2-28 13:01

漂亮！谢谢山里人朋友精彩分享{:4_191:}

梦江南 发表于 2025-2-28 14:02

漂亮，欣赏佳作！

山里人 发表于 2025-2-28 15:02

马黑黑 发表于 2025-2-28 12:20
熊猫 logo 可以通过 CSS mask 属性遮罩掉

老师！我不熟悉代码，还不会用

樵歌 发表于 2025-2-28 17:55

谢谢分享妙曲。{:4_199:}

马黑黑 发表于 2025-2-28 17:56

山里人 发表于 2025-2-28 15:02
老师！我不熟悉代码，还不会用

这个可能需要学习一下就行。你已经会将视频翻转了，学遮罩应该不难

红影 发表于 2025-2-28 21:56

马黑黑 发表于 2025-2-28 12:49
这个是DS的时钟。由于JS里面考虑到了高清屏适配，翻倒误事：不同的屏幕小时钟的外观虽然清晰，却不一定在 ...

哦，是这个原因。嗯，定位需要自己设置一下呢。

马黑黑 发表于 2025-2-28 22:12

红影 发表于 2025-2-28 21:56
哦，是这个原因。嗯，定位需要自己设置一下呢。

最好如此

红影 发表于 2025-3-1 08:18

马黑黑 发表于 2025-2-28 22:12
最好如此

否则就跑到最上面去了。

马黑黑 发表于 2025-3-1 14:09

红影 发表于 2025-3-1 08:18
否则就跑到最上面去了。

看看吧，多尝试一下，一切可控

红影 发表于 2025-3-1 17:34

马黑黑 发表于 2025-3-1 14:09
看看吧，多尝试一下，一切可控

把代码组合起来也是不容易的事呢。

马黑黑 发表于 2025-3-1 18:15

红影 发表于 2025-3-1 17:34
把代码组合起来也是不容易的事呢。

严格来讲AI不是抄代码，当然有现成的代码它也不客气

红影 发表于 2025-3-1 21:20

马黑黑 发表于 2025-3-1 18:15
严格来讲AI不是抄代码，当然有现成的代码它也不客气

是的，它有自己的推理和思考呢。

马黑黑 发表于 2025-3-1 21:28

红影 发表于 2025-3-1 21:20
是的，它有自己的推理和思考呢。

嗯嗯

红影 发表于 2025-3-1 21:49

马黑黑 发表于 2025-3-1 18:15
严格来讲AI不是抄代码，当然有现成的代码它也不客气

黑黑自己测试过，更清楚呢。
页: [1] 2
查看完整版本: 醉心集-23首