本帖最后由 加林森 于 2022-3-21 18:31 编辑 <br /><br /><style type="text/css">
/* 背景图 */
#xq { position: relative; left:-206px; top:120px; width: 1024px; height: 640px; background-image: url('https://pic.imgdb.cn/item/6238144327f86abb2a956e2a.jpg'); box-shadow: 4px 4px 5px #888; border-radius:12px;
}
/* 转动时钟 */
#outer {
left:660px; top: 60px;
display: flex;
justify-content: center;
width: 200px;
height: 200px;
border: 10px solid rgba(47, 79, 79, .7);
border-radius: 50%;
background: rgba(240, 248, 255, 0.6);
font: 12px/13px Arial;
position: relative;
}
#outer::before {
color: #2f4f4f;
content: '花 潮 论 坛';
position: absolute;
width: 50%;
height: 20px;
text-align: center;
top: 75%;
}
#outer div { position: absolute; }
#nyrx {
color: #2f4f4f;
top: 25%;
text-align: center;
}
.kedu {
width: 3px;
height: 4px;
background: #2f4f4f;
transform-origin: 50% 100px;
}
#sec-hand, #min-hand, #hr-hand {
background: #2f4f4f;
bottom: 50%;
transform-origin: 50% 100%;
}
#sec-hand {
width: 2px;
height: 48%;
background: #d00;
z-index: 10;
}
#sec-hand::before {
content:'';
position: absolute;
background: #2f4f4f;
width: 12px;
height: 12px;
border-radius: 50%;
bottom: -4px;
left: -5px;
}
#min-hand {
width: 4px;
height: 45%;
z-index: 9;
}
#hr-hand {
width: 6px;
height: 40%;
z-index: 8 ;
}
/* 播放按钮 */
.picBtn {
width: 144px;
height: 52px;
border: none;
outline: none;
border-radius: 8px;
background: transparent url('https://pic.imgdb.cn/item/6238153e27f86abb2a9a9323.gif') no-repeat;
cursor: pointer;
}
</style>
<div id="xq" >
<div id="outer">
<div id="nyrx"></div>
<div id="sec-hand"></div>
<div id="min-hand"></div>
<div id="hr-hand"></div>
</div>
<div style="position: absolute; left:100px; top: 166px; width:342px; opacity: .95;">
<p ><font color="#89482a" size="4" >
<marqueescrollamount="3" direction="left" >缠绵的小号声柔情万千，摇曳多姿，仿佛晚风吹拂下的记忆缥缈悠远，情意绵绵……</marquee></p>
</div>
<!-- 控制按钮应是父盒子的第一代子元素 -->
<div style="position:absolute; width:144px; left: 120px; top:calc(100% - 240px); text-align:center;">
<button id="picBtn" class="picBtn"></button>
</div>
</div>
<!-- 因为播放器不要界面，无需放在帖子父盒子内 -->
<audio id="music" autoplay="autoplay" loop="loop" src="http://music.163.com/song/media/outer/url?id=426027229.mp3" ></audio>
<script language="javascript">
var mu = document.getElementById('music');
var btn = document.getElementById('picBtn');
btn.onclick = function(){
mu.paused ? (mu.play(), btn.style.background="url('https://pic.imgdb.cn/item/6238153e27f86abb2a9a9323.gif')") : (mu.pause(), btn.style.background="url('https://pic.imgdb.cn/item/623814ec27f86abb2a99801f.png')");
}
mu.addEventListener("ended", function(){
btn.style.background="url('https://pic.imgdb.cn/item/623814ec27f86abb2a99801f.png')";
});
document.getElementById("outer").innerHTML += setKedu();
godPush();
function godPush() {
/* 上帝之手 : 时钟的第一推动力→无尽永动
① 确定初始角度并旋转指针 ② 调用创建keyframes函数
③ 现实年月日星期信息
*/
let dayStr = "日一二三四五六";
let now = new Date();
let hr = now.getHours() > 12 ? now.getHours() - 12 : now.getHours(),
min = now.getMinutes(),
sec = now.getSeconds(),
msec = now.getMilliseconds(),
yy = now.getFullYear() + "年",
mm = (now.getMonth() + 1) + "月",
dt = now.getDate() + "日",
dd = "<br>星期" + dayStr.charAt(now.getDay());
let hDeg = hr * 30 + (min * 6 / 12),
mDeg = min * 6 + (sec * 6 / 60),
sDeg = sec * 6 + (msec * 0.36 / 1000);
document.getElementById("nyrx").innerHTML = yy + mm + dt + dd;
document.getElementById("hr-hand").style.transform = "rotate(" + hDeg + "deg)";
document.getElementById("min-hand").style.transform = "rotate(" + mDeg + "deg)";
document.getElementById("sec-hand").style.transform = "rotate(" + sDeg + "deg)";
createkeyFrames("sec-hand", "secRoll", 60,sDeg);
createkeyFrames("min-hand", "minRoll", 3600,mDeg);
createkeyFrames("hr-hand", "hrRoll", 43200,hDeg);
}
function setKedu() {
/* 绘制60个刻度 被5整除为整点刻度 */
let str = "", bigKedu = "";
for(i = 0;i < 60;i ++) {
bigKedu = i % 5 == 0? "background: #2f4f4f; width: 5px; height: 7px;" : "";
str += "<div class='kedu' style='transform: rotate(" + (i * 6) + "deg);" + bigKedu +
"'></div>";
}
return str;
}
function createkeyFrames(el,name,dur,angle) {
/* 创建keyframes动画
el : 元素id名称
name : keyframes名称
dur : duration 动画运行周期
angle : 初始角度
*/
let kStr = '@keyframes ' + name + '{to { transform: rotate(' + (360 + angle) + 'deg) } }';
let style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = kStr;
document.getElementById(el).appendChild(style);
document.getElementById(el).style.animation = name + " " + dur + "s linear infinite";
}
</script>
<br><br><br><br><br><br><br><br>
加林森 发表于 2021-10-6 21:37
不客气啊
队长做了这么多帖子，辛苦了{:4_187:}
红影 发表于 2021-10-6 21:45
队长做了这么多帖子，辛苦了
没有什么的。就是想让大家都开开心心的过节日嘛。
加林森 发表于 2021-10-6 21:58
没有什么的。就是想让大家都开开心心的过节日嘛。
节日还剩一天了，又得去过重复的日子了。
红影 发表于 2021-10-6 22:06
节日还剩一天了，又得去过重复的日子了。
是啊。平平凡凡才是真！
谢谢队长美帖，老温暖了， 这2天单位人少，事情特别多，收礼来迟， 抱歉！
和队长一起猫很开心 {:4_179:}珍藏拥有的的精彩，为你送上美好的祝福，愿你天天开心，永远快乐！
{:4_204:}{:4_199:}
小辣椒 发表于 2021-10-6 17:02
太好听了，陈瑞的这首《老地方的雨》猫猫收礼开心@大猫咪
谢谢辣椒，猫来了{:4_187:}下午好 ！ {:4_179:}
红影 发表于 2021-10-6 20:04
猫猫好像还没来，顶起来，猫猫快来收礼
谢谢红影，猫来了 {:4_187:} 下午好{:4_190:}
大猫咪 发表于 2021-10-7 13:43
谢谢队长美帖，老温暖了， 这2天单位人少，事情特别多，收礼来迟， 抱歉！
和队长一起猫很开心 {:4_17 ...
猫猫收礼开心哈。{:4_204:}
知道你忙得要命，你要注意身体啊。{:4_171:}
节日快乐！{:4_204:}
加林森 发表于 2021-10-7 13:58
猫猫收礼开心哈。
知道你忙得要命，你要注意身体啊。
节日快乐！
好的，谢谢队长{:4_204:} 节日快乐！ 注意休息， 开心每一天{:4_190:}
大猫咪 发表于 2021-10-7 13:45
谢谢辣椒，猫来了下午好 ！
猫猫好~~{:4_187:}
小辣椒 发表于 2021-10-7 15:02
猫猫好~~
辣椒好，节过得真快，明天就结束了，辛苦了{:4_190:}
大猫咪 发表于 2021-10-7 15:04
辣椒好，节过得真快，明天就结束了，辛苦了
是的，明天就上班了，时间过真快，一晃长假过去了
小辣椒 发表于 2021-10-7 15:10
是的，明天就上班了，时间过真快，一晃长假过去了
猫一天都没休息{:5_149:}
大猫咪 发表于 2021-10-7 15:12
猫一天都没休息
猫猫以后可以调休吗？
小辣椒 发表于 2021-10-7 15:15
猫猫以后可以调休吗？
可以的，方便的时候调休 ！ {:5_106:}
大猫咪 发表于 2021-10-7 15:20
可以的，方便的时候调休 ！
那也是可以的，一天换3天？
小辣椒 发表于 2021-10-7 15:46
那也是可以的，一天换3天？
想得美{:4_170:}那有这好事啊哈哈
喜欢陈瑞的声音，队长厉害
话说队长等猫一起去抓鱼吗{:4_189:}
很早就喜欢的一首歌。谢谢分享！{:4_187:}