时钟
<style>
#mama1 { position: relative; left: -252px; width: 1100px; height: 700px; background: #ccc url('https://pic.imgdb.cn/item/6602b5529f345e8d03ccd793.jpg') no-repeat; box-shadow: 2px 2px 2px #444; overflow: hidden; }
#vid { position: absolute; width: 1100px; height: 700px; object-fit: cover; opacity: 1; clip-path: circle(100% at bottom) ;mix-blend-mode: screen;}
#btnplay { position: absolute; width: 1300px; height: 700px; left: 0; top: 10px; opacity: .7; transition: 6s; cursor: pointer; animation: rot 8s linear infinite var(--state); }
.wrap { margin: 20px auto 0; text-align: center;}
#canv { border: 0px solid gray; }
</style>
<div id="mama1">
<div id="vid">
<div class="wrap">
<canvas id="canv" width="300" height="300"></canvas>
<videoid="btnplay" src="https://img.tukuppt.com/video_show/7165162/00/20/20/5f2102739a334.mp4" autoplay="autoplay" loop="loop" muted="muted"></video>
</div></div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=461463653.mp3" autoplay loop></audio>
</div>
<script>
/* 获取画笔 */
let ctx = canv.getContext('2d');
/* 函数 ：绘制矩形（指针） */
let draw_rect = (x, y, w, h, rad, color) => {
ctx.save();
ctx.fillStyle = color;
ctx.translate(150,150);
ctx.rotate(rad);
ctx.fillRect(x,y,w,h);
ctx.restore();
};
/* 函数 ：绘制圆（环） */
let draw_circle = (x,y,r,lw,color1,color2) => {
ctx.save();
ctx.fillStyle = color1;
ctx.strokeStyle = color2;
ctx.lineWidth = lw;
ctx.beginPath();
ctx.arc(x,y,r,0,Math.PI * 2);
ctx.fill();
ctx.stroke();
ctx.restore();
};
/* 函数 ：绘制文本 */
let draw_text = (txt,x,y,color,fontsize=18,b="bold") => {
ctx.save();
ctx.translate(150,150);
ctx.font = `${b} ${fontsize}px sans-serif`;
ctx.textAlign = 'center';
ctx.textBaseline="middle";
ctx.fillStyle = color;
ctx.fillText(txt,x,y);
ctx.restore();
};
let render = () => {
/* 获取时间 */
let now = new Date();
let hr = now.getHours() > 12 ? now.getHours() - 12 : now.getHours(),
min = now.getMinutes(),
sec = now.getSeconds(),
msec = now.getMilliseconds();
let hDeg = hr * 30 + (min * 6 / 12),
mDeg = min * 6 + (sec * 6 / 60),
sDeg = sec * 6 + (msec * 0.36 / 1000);
ctx.clearRect(0,0,300,300); /* 每一次绘制前都衔擦除画布 */
draw_circle(150,150,140,10,'0','0'); /* 钟壳和钟面 */
/* 钟点 */
for(let i = 0; i < 12; i ++) {
let radian = Math.PI/180*(i*30-60);
let x = 115 * Math.cos(radian), y = 115 * Math.sin(radian);
draw_text(i+1, x, y, '#352f25');
}
/* 刻度 */
for(let i = 0; i < 60; i ++) {
let radian = Math.PI/180*(i*6);
let x = 150 + 130 * Math.cos(radian), y = 150 + 130 * Math.sin(radian);
draw_circle(x,y,1,2,'gray','gray');
}
/* 按一定次序绘制时钟各个元素 ：确保指针、指针扣不会被遮挡 */
draw_text(`${now.getFullYear()}年${now.getMonth() + 1}月${now.getDate()}日`,0,-50,'white', 15, 'normal'); /* 日期 */
draw_text(`星期${'日一二三四五六'.substr(now.getDay(),1)}`,0,-25,'white', 15, 'normal'); /* 星期 */
draw_text('HUACHAO',0,60,'gray'); /* Logo */
draw_rect(0, -3, 90, 6, (hDeg - 90) * Math.PI/180, '#ffff9b'); /* 时针 */
draw_rect(0, -2, 100, 4, (mDeg - 90) * Math.PI/180, '#ffff9b'); /* 分针 */
draw_rect(0, -1, 120, 2, (sDeg - 90) * Math.PI/180, '#ffff9b'); /* 秒针 */
draw_circle(150,150,6,6,'white','#ffff9b'); /* 指针扣 */
requestAnimationFrame(render);
};
render();
(function() {
let sF = document.createElement('script');
sF.src = 'https://638183.freep.cn/638183/web/api/fullscreen.js';
sF.charset = 'utf-8';
document.querySelector('body').appendChild(sF);
sF.onload = () => FS({papa: '#papa', css: '--bg: transparent; --color: #eee; bottom: 10px; left: 48%;'});
let mState = () => aud.paused ? (papa.style.setProperty('--state','paused'),btnplay.title = '点击播放',vid.pause()) : (papa.style.setProperty('--state','running'),btnplay.title = '点击暂停',vid.play());
let getOffsetPos = (ele) => { let x = ele.offsetLeft, y = ele.offsetTop, pa = ele.offsetParent; while(pa != null) { x += pa.offsetLeft; y += pa.offsetTop; pa = pa.offsetParent; } return {x, y}; };
aud.onplaying = aud.onpause = () => mState();
btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
let movTimer = null, paWidth = papa.clientWidth, sonSize = btnplay.clientWidth, bodyWidth = document.body.clientWidth, paOffset = getOffsetPos(papa).x;
document.onmousemove = function(e) {
clearTimeout(movTimer);
movTimer = setTimeout(function() { if (e.target.id === "btnplay") return; if (document.fullscreenElement === null) { let x = e.pageX; if (x < paOffset) x = paOffset; x = x - paOffset; if (x + sonSize >= paWidth) x = paWidth - sonSize; btnplay.style.cssText += `left: ${x}px;`; vid.style.cssText += `left: ${x - 150}px;`; } else { let xx = e.offsetX || e.layerX; if (xx + sonSize > bodyWidth) xx -= sonSize; btnplay.style.cssText += `left: ${xx}px;`; vid.style.cssText += `left: ${xx - 150}px;`; } }, 400);
};
})();
</script> 这个漂亮。。直接把时钟整透明了。。完全跟背景融在一起。。。{:4_199:} 歌也好听。。娓娓道来的样子。。{:4_187:} https://img0.baidu.com/it/u=2292154268,3811096393&fm=253&fmt=auto&app=138&f=GIF?w=300&h=280 哇塞~~~漂亮，这个时钟背景透明的太漂亮了 @马黑黑
黑黑快来批作业，太完美的作业，无论图图意境，时钟效果，小辣椒太喜欢了 旧上海加新上海的小情人，都是完美诠释了图意 好听 好看~~{:4_204:} 南无月 发表于 2024-3-26 21:07
这个漂亮。。直接把时钟整透明了。。完全跟背景融在一起。。。
视频一加把数字弄太淡了 朵拉 发表于 2024-3-26 21:17
好听 好看~~
谢谢朵拉，晚上好 小辣椒 发表于 2024-3-26 21:16
旧上海加新上海的小情人，都是完美诠释了图意
新旧上海怎么情到一块啊{:4_189:} 起个网名好难 发表于 2024-3-26 21:08
谢谢网名，晚上好 南无月 发表于 2024-3-26 21:08
歌也好听。。娓娓道来的样子。。
用时钟搜真好有这只歌了 小辣椒 发表于 2024-3-26 21:13
哇塞~~~漂亮，这个时钟背景透明的太漂亮了
最野蛮操作把颜色去掉了{:4_189:} 绿叶清舟 发表于 2024-3-26 21:31
最野蛮操作把颜色去掉了
那刚好，这个效果本来还没有的，弄巧成拙{:4_170:} 小辣椒 发表于 2024-3-26 21:32
那刚好，这个效果本来还没有的，弄巧成拙
就是播放器没直接关联上，还得再去翻旧贴了 清舟的这个也好漂亮，这样的画面太有意境了。
时钟还能这样处理，跟背景完美契合{:4_199:} 这韵味看着好喜欢，清舟真雅致{:4_187:} 红影 发表于 2024-3-26 21:38
清舟的这个也好漂亮，这样的画面太有意境了。
时钟还能这样处理，跟背景完美契合
600号来的从来不按套路出牌{:4_189:} 小辣椒 发表于 2024-3-26 21:15
@马黑黑
黑黑快来批作业，太完美的作业，无论图图意境，时钟效果，小辣椒太喜欢了
你犀利，你说好就好{:4_170:}