试贴时钟（马黑黑原创）

朵拉发表于 2022-3-26 22:56

本帖最后由朵拉于 2022-3-26 23:11 编辑 <br /><br /><style type="text/css">

#outer {
   margin: auto;
   display: flex;
   justify-content: center;
   width: 200px;
   height: 200px;
   border: 10px solid rgba(210, 105, 30, .7);
   border-radius: 50%;
   background: rgba(128, 128, 0, 0.6);
   font: 12px/13px Arial;
   position: relative;
}

#outer::before {
   content: 'DUOLA';
   position: absolute;
   width: 50%;
   height: 20px;
   text-align: center;
   top: 75%;
}

#outer div { position: absolute; }

#nyrx {
   color: #ddd;
   top: 25%;
   text-align: center;
}

.kedu {
   width: 3px;
   height: 4px;
   background: #000;
   transform-origin: 50% 100px;
}

#sec-hand, #min-hand, #hr-hand {
   background: white;
   bottom: 50%;
   transform-origin: 50% 100%;
}

#sec-hand {
   width: 2px;
   height: 48%;
   background: red;
   z-index: 10;
}

#sec-hand::before {
   content:'';
   position: absolute;
   background: #000;
   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 ;
}

</style>

<div id="outer">
   <div id="nyrx"></div>
   <div id="sec-hand"></div>
   <div id="min-hand"></div>
   <div id="hr-hand"></div>
</div>

<script>

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: #eee; width: 6px; height: 8px;" : "";
            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>

<audio id="music" autoplay="autoplay" loop="loop" src="http://music.163.com/song/media/outer/url?id=444803620.mp3" ></audio>

朵拉发表于 2022-3-26 23:03

@马黑黑马老师看过来，请指点{:4_190:}

马黑黑 发表于 2022-3-27 08:28

朵拉发表于 2022-3-26 23:03
@马黑黑马老师看过来，请指点

朵拉牌高端产品，赞！

红影发表于 2022-3-27 09:27

朵宝牌时钟，很漂亮。朵宝真棒{:4_187:}

马黑黑 发表于 2022-3-27 10:40

{:4_187:}

马黑黑 发表于 2022-3-27 10:40

歌好好听

大猫咪 发表于 2022-3-27 10:54

制作真棒啊歌也好听，{:5_106:}恭喜朵拉制作成功 {:4_204:}{:4_190:} 中午好！{:4_190:}

加林森 发表于 2022-3-27 12:28

朵拉制作得真漂亮。{:4_199:}

马黑黑 发表于 2022-3-27 13:46

大猫咪发表于 2022-3-27 10:54
制作真棒啊歌也好听，恭喜朵拉制作成功中午好！

这歌特有意思

大猫咪 发表于 2022-3-27 13:53

马黑黑发表于 2022-3-27 13:46
这歌特有意思

嗯嗯越听越好听{:4_187:}

马黑黑 发表于 2022-3-27 14:42

大猫咪发表于 2022-3-27 13:53
嗯嗯越听越好听

我也是这感觉，都听两个钟了

大猫咪 发表于 2022-3-27 14:43

马黑黑发表于 2022-3-27 14:42
我也是这感觉，都听两个钟了

朵拉歌唱的也非常好的{:4_187:}{:4_190:}

马黑黑 发表于 2022-3-27 14:44

大猫咪发表于 2022-3-27 14:43
朵拉歌唱的也非常好的

我知道我知道，欣赏过的

大猫咪 发表于 2022-3-27 14:46

马黑黑发表于 2022-3-27 14:44
我知道我知道，欣赏过的

{:4_190:}嗯我得出去下晚上见老黑{:4_179:}

马黑黑 发表于 2022-3-27 14:48

大猫咪发表于 2022-3-27 14:46
嗯我得出去下晚上见老黑

哎呀，巧了，我也要出去

加林森 发表于 2022-3-27 16:51

再来聆听小丫头唱的歌曲，还真好听的。{:4_199:}

页: [1]

花潮论坛's Archiver

试贴时钟（马黑黑原创）