绿叶清舟 发表于 2022-3-18 21:22

嘀嗒TO马黑

本帖最后由 绿叶清舟 于 2022-3-19 18:54 编辑 <br /><br /><style type="text/css">

.bbox { background: #aaa; transform: rotateY(180deg); padding:10px; font-size: 1em; }
.bbox h2, p { padding: 6px; text-align:center; }
#clkBtn { width: 100px; height: 100px; border-radius: 50%; background: rgba(0, 0, 0, .8); cursor: pointer; position: relative; }
#clkBtn::before { content: ''; position: absolute; left: 5px; top: 5px; background: rgba(0, 0, 0, .2); width: 88px; height: 88px; border: 1px solid #555; border-radius: 50%; }
#zhizhen { position: absolute; left: 50px; top: 50px; width: 2px; height: 44px; background: red; transform-origin: 0 0; animation: go 3s linear infinite; }
@keyframes go { to { transform: rotate(360deg);}


}
</style>
       


<div style="position:relative; left:-234px; top:100px; border-radius:6px; box-shadow:3px 3px 3px 2px gray; width:1060px;background:rgba(0,0,0,0.6) url('https://www.huachaowang.com/data/attachment/forum/202107/18/201853yloklkfpq75i3m7z.jpg'); ">
       
<div align="center" style="border-radius:6px;width:100%;background:#333333 url('https://www.huachaowang.com/data/attachment/forum/202107/22/181925u9wpzch8zhcupb8e.gif');">

<div align="center" style="border-radius:1px;width:93%;background:rgba(0,0,0,0.6) url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F742560263775fc9024bb7ab0ee9d5484db5e7b821c654-9Vnfnj_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1647868182&t=d3bf28f932dd21ae959293f26cbe72c4');">
<br>
<br>               


<section class="_135editor" data-role="title" data-tools="135编辑器" data-id="107050"><section style="text-align: center;margin: 10px auto;"><section style="display:inline-block;">
<section style="display: flex;justify-content: flex-start;align-items: flex-end;margin: 0 0 -4px 15%;"><section class="assistant" style="box-sizing: border-box; width: 2px; height: 8px; background-color: rgb(47, 208, 254); overflow: hidden;"></section>
<section class="assistant" style="box-sizing: border-box; width: 1px; height: 8px; background-color: rgb(255, 255, 255); overflow: hidden;"></section>
<section class="assistant" style="box-sizing: border-box; width: 2px; height: 7px; background-color: rgb(47, 208, 254); overflow: hidden;"></section>
<section class="assistant" style="box-sizing: border-box; width: 1px; height: 7px; background-color: rgb(255, 255, 255); overflow: hidden;"></section>
<section class="assistant" style="box-sizing: border-box; width: 2px; height: 6px; background-color: rgb(47, 208, 254); overflow: hidden;"></section>
<section class="assistant" style="box-sizing: border-box; width: 1px; height: 6px; background-color: rgb(255, 255, 255); overflow: hidden;"></section>
<section class="assistant" style="box-sizing: border-box; width: 2px; height: 5px; background-color: rgb(47, 208, 254); overflow: hidden;"></section></section>
<section style="border: 1px solid rgb(53, 146, 253); padding: 3px; border-radius: 20px; box-sizing: border-box;">
<section style="background-image: linear-gradient(to right, rgb(53, 146, 253), rgb(167, 208, 255)); padding: 4px 23px; border-radius: 20px; box-sizing: border-box;">
<section style="font-size: 16px;letter-spacing: 1.5px;color: #fff;"><strong class="135brush" data-brushtype="text" hm_fix="321:369">嘀嗒 - 侃侃</strong></section></section></section></section></section></section>

<br>
<IMG border=0 src="https://img1.baidu.com/it/u=1894630809,3156164015&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281" width=500 _height="281">
<br><br>
<div id="clkBtn">
      <div id="zhizhen"></div>
</div>
<audio id="music" autoplay="autoplay" loop="loop" src="http://music.163.com/song/media/outer/url?id=32685948.mp3" ></audio>
<br><br>
<div id="textClock"></div>

</div>
</div>
</div>
<br><br><br><br><br><br>

<script language="javascript">
var aud = document.getElementById('music');
var btn = document.getElementById('clkBtn');
var zz = document.getElementById('zhizhen');
btn.onclick = function(){ aud.paused ? (aud.play(), zz.style.animationPlayState = "running") : (aud.pause(), zz.style.animationPlayState = "paused"); }
aud.addEventListener("ended", function(){ zz.style.animationPlayState = "running"; });
</script>

<script language="javascript">

showTime();
setInterval(showTime, 1000);

function showTime(){
      var now = new Date();
      var year = now.getFullYear();
      var month = now.getMonth() + 1;
      var date = now.getDate();
      var day = now.getDay();
      var hour = now.getHours();
      if(hour < 10) hour = "0" + hour;
      var minute = now.getMinutes();
      if(minute < 10) minute = "0" + minute;
      var second = now.getSeconds();
      if(second < 10) second = "0" + second;
      document.getElementById("textClock").innerHTML = year + "年" + month + "月" + date + "日 星期" + toHz(day) + "" + hour + ":" + minute + ":" + second;
}

function toHz(num) {
      var hz = "日一二三四五六九";
      return(hz.charAt(num));
}

</script>

来看你 发表于 2022-3-18 21:37

沙发 {:5_112:}

来看你 发表于 2022-3-18 21:38

很好听的歌

红影 发表于 2022-3-18 21:46

哇，清舟这么快就把那个时间用上去了啊，正想着问这个时间怎么用帖子里呢。厉害{:4_199:}

红影 发表于 2022-3-18 21:46

其实还是不太清楚这个JS的时间怎么定位{:4_173:}

绿叶清舟 发表于 2022-3-18 21:47

来看你 发表于 2022-3-18 21:38
很好听的歌

看看来了啊，晚上好

绿叶清舟 发表于 2022-3-18 21:48

红影 发表于 2022-3-18 21:46
哇，清舟这么快就把那个时间用上去了啊，正想着问这个时间怎么用帖子里呢。厉害

看到那就想起这首歌了

来看你 发表于 2022-3-18 21:50

绿叶清舟 发表于 2022-3-18 21:47
看看来了啊，晚上好

舟舟晚上好 {:4_177:}

绿叶清舟 发表于 2022-3-18 21:55

红影 发表于 2022-3-18 21:46
其实还是不太清楚这个JS的时间怎么定位

可以直接加在这里面啊<div id="txtclock"></div>

绿叶清舟 发表于 2022-3-18 21:56

来看你 发表于 2022-3-18 21:50
舟舟晚上好

{:4_183:}又有些时候没看到你了

来看你 发表于 2022-3-18 22:09

绿叶清舟 发表于 2022-3-18 21:56
又有些时候没看到你了

等你们忘了我就冒个泡 {:5_106:}

绿叶清舟 发表于 2022-3-18 22:19

来看你 发表于 2022-3-18 22:09
等你们忘了我就冒个泡

怎么会忘了呢

大猫咪 发表于 2022-3-18 23:04

清舟这制作好喜欢， 好创意！   特别清爽， 歌曲也棒，现在听特别舒服，老黑收礼开心！

{:4_204:}{:4_199:}

绿叶清舟 发表于 2022-3-19 09:38

本帖最后由 绿叶清舟 于 2022-3-19 18:55 编辑

大猫咪 发表于 2022-3-18 23:04
清舟这制作好喜欢， 好创意！   特别清爽， 歌曲也棒，现在听特别舒服，老黑收礼开心！

{:4_19 ...
<style type="text/css">

.bbox { background: #aaa; transform: rotateY(180deg); padding:10px; font-size: 1em; }
.bbox h2, p { padding: 6px; text-align:center; }
#clkBtn { width: 100px; height: 100px; border-radius: 50%; background: rgba(0, 0, 0, .5); cursor: pointer; position: relative; }
#clkBtn::before { content: ''; position: absolute; left: 5px; top: 5px; background: rgba(0, 0, 0, .0); width: 88px; height: 88px; border: 1px solid #FFF; border-radius: 50%; }
#zhizhen { position: absolute; left: 50px; top: 50px; width: 2px; height: 44px; background: red; transform-origin: 0 0; animation: go 28s linear infinite; }
@keyframes go { to { transform: rotate(360deg);}


}
</style>
      


<div style="position:relative; left:-234px; top:100px; border-radius:6px; box-shadow:3px 3px 3px 2px gray; width:1060px;background:rgba(0,0,0,0.6) url('https://www.huachaowang.com/data/attachment/forum/202107/18/201853yloklkfpq75i3m7z.jpg'); ">
      
<div align="center" style="border-radius:6px;width:100%;background:#333333 url('https://www.huachaowang.com/data/attachment/forum/202107/22/181925u9wpzch8zhcupb8e.gif');">

<div align="center" style="border-radius:1px;width:93%;background:rgba(0,0,0,0.6) url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F742560263775fc9024bb7ab0ee9d5484db5e7b821c654-9Vnfnj_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1647868182&t=d3bf28f932dd21ae959293f26cbe72c4');">
<br>
<br>               


<section class="_135editor" data-role="title" data-tools="135编辑器" data-id="107050"><section style="text-align: center;margin: 10px auto;"><section style="display:inline-block;">
<section style="display: flex;justify-content: flex-start;align-items: flex-end;margin: 0 0 -4px 15%;"><section class="assistant" style="box-sizing: border-box; width: 2px; height: 8px; background-color: rgb(47, 208, 254); overflow: hidden;"></section>
<section class="assistant" style="box-sizing: border-box; width: 1px; height: 8px; background-color: rgb(255, 255, 255); overflow: hidden;"></section>
<section class="assistant" style="box-sizing: border-box; width: 2px; height: 7px; background-color: rgb(47, 208, 254); overflow: hidden;"></section>
<section class="assistant" style="box-sizing: border-box; width: 1px; height: 7px; background-color: rgb(255, 255, 255); overflow: hidden;"></section>
<section class="assistant" style="box-sizing: border-box; width: 2px; height: 6px; background-color: rgb(47, 208, 254); overflow: hidden;"></section>
<section class="assistant" style="box-sizing: border-box; width: 1px; height: 6px; background-color: rgb(255, 255, 255); overflow: hidden;"></section>
<section class="assistant" style="box-sizing: border-box; width: 2px; height: 5px; background-color: rgb(47, 208, 254); overflow: hidden;"></section></section>
<section style="border: 1px solid rgb(53, 146, 253); padding: 3px; border-radius: 20px; box-sizing: border-box;">
<section style="background-image: linear-gradient(to right, rgb(53, 146, 253), rgb(167, 208, 255)); padding: 4px 23px; border-radius: 20px; box-sizing: border-box;">
<section style="font-size: 16px;letter-spacing: 1.5px;color: #fff;"><strong class="135brush" data-brushtype="text" hm_fix="321:369">嘀嗒 - 侃侃</strong></section></section></section></section></section></section>

<br>
<IMG border=0 src="https://img1.baidu.com/it/u=1894630809,3156164015&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281" width=500 _height="281">
<br><br>
<div id="clkBtn">
      <div id="zhizhen"></div>
</div>
<audio id="music" autoplay="autoplay" loop="loop" src="音乐" ></audio>
<br><br>
<div id="textClock"></div>

</div>
</div>
</div>
<br><br><br><br><br><br>

<script language="javascript">
var aud = document.getElementById('music');
var btn = document.getElementById('clkBtn');
var zz = document.getElementById('zhizhen');
btn.onclick = function(){ aud.paused ? (aud.play(), zz.style.animationPlayState = "running") : (aud.pause(), zz.style.animationPlayState = "paused"); }
aud.addEventListener("ended", function(){ zz.style.animationPlayState = "running"; });
</script>

<script language="javascript">

showTime();
setInterval(showTime, 1000);

function showTime(){
      var now = new Date();
      var year = now.getFullYear();
      var month = now.getMonth() + 1;
      var date = now.getDate();
      var day = now.getDay();
      var hour = now.getHours();
      if(hour < 10) hour = "0" + hour;
      var minute = now.getMinutes();
      if(minute < 10) minute = "0" + minute;
      var second = now.getSeconds();
      if(second < 10) second = "0" + second;
      document.getElementById("textClock").innerHTML = year + "年" + month + "月" + date + "日 星期" + toHz(day) + "" + hour + ":" + minute + ":" + second;
}

function toHz(num) {
      var hz = "日一二三四五六九";
      return(hz.charAt(num));
}

</script>

绿叶清舟 发表于 2022-3-19 09:42

本帖最后由 绿叶清舟 于 2022-3-19 09:44 编辑

大猫咪 发表于 2022-3-18 23:04
清舟这制作好喜欢， 好创意！   特别清爽， 歌曲也棒，现在听特别舒服，老黑收礼开心！

{:4_19 ...

<style type="text/css">

.bbox { background: #aaa; transform: rotateY(180deg); padding:10px; font-size: 1em; }
.bbox h2, p { padding: 6px; text-align:center; }
#clkBtn { width: 100px; height: 100px; border-radius: 50%; background: rgba(0, 0, 0, .5); cursor: pointer; position: relative; }
#clkBtn::before { content: ''; position: absolute; left: 5px; top: 5px; background: rgba(0, 0, 0, .0); width: 88px; height: 88px; border: 1px solid #FFF; border-radius: 50%; }
#zhizhen { position: absolute; left: 50px; top: 50px; width: 2px; height: 44px; background: red; transform-origin: 0 0; animation: go 28s linear infinite; }
@keyframes go { to { transform: rotate(360deg);}


}
</style>
      


<div style="position:relative; left:-234px; top:100px; border-radius:6px; box-shadow:3px 3px 3px 2px gray; width:1060px;background:rgba(0,0,0,0.6) url('https://www.huachaowang.com/data/attachment/forum/202107/18/201853yloklkfpq75i3m7z.jpg'); ">
      
<div align="center" style="border-radius:6px;width:100%;background:#333333 url('https://www.huachaowang.com/data/attachment/forum/202107/22/181925u9wpzch8zhcupb8e.gif');">

<div align="center" style="border-radius:1px;width:93%;background:rgba(0,0,0,0.6) url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F742560263775fc9024bb7ab0ee9d5484db5e7b821c654-9Vnfnj_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1647868182&t=d3bf28f932dd21ae959293f26cbe72c4');">
<br>
<br>               


<section class="_135editor" data-role="title" data-tools="135编辑器" data-id="107050"><section style="text-align: center;margin: 10px auto;"><section style="display:inline-block;">
<section style="display: flex;justify-content: flex-start;align-items: flex-end;margin: 0 0 -4px 15%;"><section class="assistant" style="box-sizing: border-box; width: 2px; height: 8px; background-color: rgb(47, 208, 254); overflow: hidden;"></section>
<section class="assistant" style="box-sizing: border-box; width: 1px; height: 8px; background-color: rgb(255, 255, 255); overflow: hidden;"></section>
<section class="assistant" style="box-sizing: border-box; width: 2px; height: 7px; background-color: rgb(47, 208, 254); overflow: hidden;"></section>
<section class="assistant" style="box-sizing: border-box; width: 1px; height: 7px; background-color: rgb(255, 255, 255); overflow: hidden;"></section>
<section class="assistant" style="box-sizing: border-box; width: 2px; height: 6px; background-color: rgb(47, 208, 254); overflow: hidden;"></section>
<section class="assistant" style="box-sizing: border-box; width: 1px; height: 6px; background-color: rgb(255, 255, 255); overflow: hidden;"></section>
<section class="assistant" style="box-sizing: border-box; width: 2px; height: 5px; background-color: rgb(47, 208, 254); overflow: hidden;"></section></section>
<section style="border: 1px solid rgb(53, 146, 253); padding: 3px; border-radius: 20px; box-sizing: border-box;">
<section style="background-image: linear-gradient(to right, rgb(53, 146, 253), rgb(167, 208, 255)); padding: 4px 23px; border-radius: 20px; box-sizing: border-box;">
<section style="font-size: 16px;letter-spacing: 1.5px;color: #fff;"><strong class="135brush" data-brushtype="text" hm_fix="321:369">嘀嗒 - 侃侃</strong></section></section></section></section></section></section>

<br>
<IMG border=0 src="https://img1.baidu.com/it/u=1894630809,3156164015&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281" width=500 _height="281">
<br><br>
<div id="clkBtn">
      <div id="zhizhen"></div>
</div>
<audio id="music" autoplay="autoplay" loop="loop" src="音乐" ></audio>
<br><br>
<div id="txtclock"></div>

</div>
</div>
</div>
<br><br><br><br><br><br>

<script language="javascript">
var aud = document.getElementById('music');
var btn = document.getElementById('clkBtn');
var zz = document.getElementById('zhizhen');
btn.onclick = function(){ aud.paused ? (aud.play(), zz.style.animationPlayState = "running") : (aud.pause(), zz.style.animationPlayState = "paused"); }
aud.addEventListener("ended", function(){ zz.style.animationPlayState = "running"; });
</script>

<script language="javascript">
showTime();
setInterval(showTime, 1000);

function showTime(){
      var d = new Date();
      var year = d.getFullYear();
      var month = d.getMonth() + 1;
      var date = d.getDate();
      var day = d.getDay() + 1;
      var hour = d.getHours();
      var minute = d.getMinutes();
      var second = d.getSeconds();
      document.getElementById("txtclock").innerHTML = year + "年" + month + "月" + date + "日 星期 " + day + " " + hour + ":" + minute + ":" + second;
}

</script>

修改红色代码可以改变边框的颜色

红影 发表于 2022-3-19 10:08

绿叶清舟 发表于 2022-3-18 21:48
看到那就想起这首歌了

非常恰当的联想，非常漂亮的应用，清舟真棒{:4_187:}

红影 发表于 2022-3-19 10:09

绿叶清舟 发表于 2022-3-18 21:55
可以直接加在这里面啊

原来是这句，清舟聪明{:4_187:}

绿叶清舟 发表于 2022-3-19 10:16

红影 发表于 2022-3-19 10:09
原来是这句，清舟聪明

改这里是最简单直接的了，动上面怕一不小心弄坏了代码

绿叶清舟 发表于 2022-3-19 10:17

红影 发表于 2022-3-19 10:08
非常恰当的联想，非常漂亮的应用，清舟真棒

发现星期不对啊

红影 发表于 2022-3-19 11:01

绿叶清舟 发表于 2022-3-19 10:16
改这里是最简单直接的了，动上面怕一不小心弄坏了代码

是的，其他的毕竟是固定用法，应该动不了的。
页: [1] 2 3
查看完整版本: 嘀嗒TO马黑