公园风景（根据马黑黑的教程制作） - 第2页 - 欢乐水吧 - 花潮论坛

加林森 发表于 2022-1-29 20:28

本帖最后由加林森于 2022-3-21 19:09 编辑 <br /><br />红影发表于 2022-1-29 20:22
我们这都下好几天雨了。
你们是江南，是不是雨特别多？

<style type="text/css">
/* 背景图 */
#xq { position: relative; left:-206px; top:120px; width: 1024px; height: 640px; background-image: url('https://pic.imgdb.cn/item/62384b1227f86abb2a904064.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: 100px;
   height: 100px;
   border: none;
   outline: none;
   border-radius: 8px;
   background: transparent url('http://image.hnol.net/c/2022-02/23/01/2022022301050291-5087368.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://www.kumeiwp.com/sub/filestores/2022/03/21/f53f1b3ea9b8f3b4bb7e7c5226fa7d77.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('http://image.hnol.net/c/2022-02/23/01/2022022301050291-5087368.gif')") : (mu.pause(), btn.style.background="url('http://image.hnol.net/c/2022-02/23/01/2022022301050291-5087368.gif')");
}
mu.addEventListener("ended", function(){
   btn.style.background="url('http://image.hnol.net/c/2022-02/23/01/2022022301050291-5087368.gif')";
});

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>

红影发表于 2022-1-29 20:55

加林森发表于 2022-1-29 20:28
你们是江南，是不是雨特别多？

也许吧，不过冬天有太阳的日子才暖和，否则很冷。

加林森 发表于 2022-1-29 21:22

红影发表于 2022-1-29 20:55
也许吧，不过冬天有太阳的日子才暖和，否则很冷。

嗯嗯，我明白的。我去过你们那里的，冬不温暖，夏不凉快。整个身子都是没有对的。

红影发表于 2022-1-29 21:53

加林森发表于 2022-1-29 21:22
嗯嗯，我明白的。我去过你们那里的，冬不温暖，夏不凉快。整个身子都是没有对的。

是啊，外面这冬天阴冷阴冷的，夏天又热得冒油，环境温度对人类很不友好{:4_173:}

加林森 发表于 2022-1-29 22:10

红影发表于 2022-1-29 21:53
是啊，外面这冬天阴冷阴冷的，夏天又热得冒油，环境温度对人类很不友好

与原来的成都差不多，现在的成都变了，不再是这样了。

红影发表于 2022-1-29 22:17

加林森发表于 2022-1-29 22:10
与原来的成都差不多，现在的成都变了，不再是这样了。

哦哦，我没去过成都，不太清楚呢。

加林森 发表于 2022-1-29 22:19

红影发表于 2022-1-29 22:17
哦哦，我没去过成都，不太清楚呢。

还有你来玩。{:4_187:}

樵歌发表于 2022-1-30 10:34

加林森发表于 2022-1-29 16:21
就是，效果很好的。

可惜我弄不来。{:4_198:}

加林森 发表于 2022-1-30 10:39

樵歌发表于 2022-1-30 10:34
可惜我弄不来。

弄不来就不弄嘛，你的文笔很好的，你就多写写出来玩啊。

樵歌发表于 2022-1-30 15:35

加林森发表于 2022-1-30 10:39
弄不来就不弄嘛，你的文笔很好的，你就多写写出来玩啊。

我乱凑字的，反正网络上没人说啥，也不怕臊得荒。{:4_189:}

加林森 发表于 2022-1-30 16:29

樵歌发表于 2022-1-30 15:35
我乱凑字的，反正网络上没人说啥，也不怕臊得荒。

没得事就写啊写的，多好玩啊。{:4_189:}

页: 1 [2]

花潮论坛's Archiver