绿叶清舟 发表于 2022-2-10 20:55

本帖最后由 绿叶清舟 于 2022-2-10 21:00 编辑 <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; }
</style>
       


<div style="position:relative; left:-244px; top:100px; border-radius:6px; box-shadow:3px 3px 3px 2px gray; width:1080px;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:rgba(0,0,0,0.6) 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://www.huachaowang.com/data/attachment/forum/202107/18/201853yloklkfpq75i3m7z.jpg');">
<br>
<br>               
<DIV align=center><IMG border=0 src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.ebuy16.com%2Fpics%2FO1CN01EeBIJf2GeN05saUCC%2F0-item_pic.jpg&refer=http%3A%2F%2Fwww.ebuy16.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1647089409&t=6f55f672c53ce32814dbf1d9e9462da8" width=700 _height="700"><br><br>

<h2>阿姐鼓<br>
歌手：朱哲琴<br>
发行时间：2003-01-01<br>
发行公司： 上海音像出版社
</h2>

<br><iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=450 src="//music.163.com/outchain/player?type=1&id=3080577&auto=1&height=430"></iframe></DIV>

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

绿叶清舟 发表于 2022-2-12 20:05

本帖最后由 绿叶清舟 于 2022-2-27 18:48 编辑 <br /><br /><DIV align=center color=#ff0000 >
<tablestyle="position: relative; LEFT: -280px; width:1200px;TOP: 180px"border="0" cellspacing="0" cellpadding="0">
<TBODY><TR><TD height=800 background=https://pic.imgdb.cn/item/6207a1ff2ab3f51d91a3b5e5.jpg>
</TD></TR><TR><TD>
</TD></TR><TR><TD>
</TD></TR>
</table></div><BR><BR><BR><BR><BR><BR><BR>

<style type="text/css">
#paDiv {
      margin: auto;
      width: 220px;
      display: flex;
      align-items: center;
      border: 1px solid olive;
      border-radius: 8px 0px 8px 0px;
      background: rgba(0,0,0,.8);
      box-shadow: 1px 1px 2px #000;
}
#jindu {
      position: relative;
      width: 200px;
      height: 8px;
      line-height: 8px;
      font-size: 10px;
      color: #eee;
      text-align: center;
      background: linear-gradient(90deg, olive, tan, gold) no-repeat;
      background-size: 20px 0px;
}
#btn-ro {
      width: 20px; height: 20px;
      line-height: 20px; font-size: 12px;
      background: linear-gradient(blue, silver, red);
      outline:none;
      color: white;
      border-radius: 50%;
      text-align: center;
      cursor: pointer;
      animation: rol linear 2s infinite;
}

#btn-ro:hover { opacity: 0.8; }
#btn-ro:active { opacity: 1; }

@keyframes rol { to { transform:rotate(360deg); } }

</style>
<DIVstyle="position: relative; LEFT: -300px; TOP: -80px">
<div id="paDiv">
      <div id="btn-ro">·</div>
      <div id="jindu">
                <div id="jd-go"></div>
      </div>
</div>
</div>
<script language="javascript">

var btn = document.getElementById('btn-ro');
var jindu = document.getElementById('jindu');
var tips = document.getElementById('au-tips');
var aud = document.createElement('audio');

aud.src ="音乐";
aud.addEventListener('ended', function() { btn.style.animationPlayState="paused"; }, true);
aud.addEventListener('timeupdate', tmMsg, true);

aud.play();

function tmMsg(){ //进度条
      var jd = (100*aud.currentTime)/aud.duration;
      jindu.innerHTML = Math.ceil(jd) + "%";
      jindu.style.backgroundSize = jd+ "% 20px";
}

btn.onclick = function(){
      aud.paused ? (aud.play(), btn.style.animationPlayState="running") : (aud.pause(), btn.style.animationPlayState="paused");
}

</script>




绿叶清舟 发表于 2022-2-12 20:09

<DIV align=center color=#ff0000 >
<tablestyle="position: relative; LEFT: -280px; width:1200px;TOP: 180px"border="0" cellspacing="0" cellpadding="0">
<TBODY><TR><TD height=800 background=https://pic.imgdb.cn/item/6207a1ff2ab3f51d91a3b5e5.jpg>
</TD></TR><TR><TD>
</TD></TR><TR><TD>
</TD></TR>
</table></div><BR><BR><BR><BR><BR><BR><BR>

<style type="text/css">
#paDiv {
      margin: auto;
      width: 220px;
      display: flex;
      align-items: center;
      border: 1px solid olive;
      border-radius: 8px 0px 8px 0px;
      background: rgba(0,0,0,.8);
      box-shadow: 1px 1px 2px #000;
}
#jindu {
      position: relative;
      width: 200px;
      height: 8px;
      line-height: 8px;
      font-size: 10px;
      color: #eee;
      text-align: center;
      background: linear-gradient(90deg, olive, tan, gold) no-repeat;
      background-size: 20px 0px;
}
#btn-ro {
      width: 20px; height: 20px;
      line-height: 20px; font-size: 12px;
      background: linear-gradient(blue, silver, red);
      outline:none;
      color: white;
      border-radius: 50%;
      text-align: center;
      cursor: pointer;
      animation: rol linear 2s infinite;
}

#btn-ro:hover { opacity: 0.8; }
#btn-ro:active { opacity: 1; }

@keyframes rol { to { transform:rotate(360deg); } }

</style>
<DIVstyle="position: relative; LEFT: -300px; TOP: -80px">
<div id="paDiv">
      <div id="btn-ro">·</div>
      <div id="jindu">
                <div id="jd-go"></div>
      </div>
</div>
</div>
<script language="javascript">

var btn = document.getElementById('btn-ro');
var jindu = document.getElementById('jindu');
var tips = document.getElementById('au-tips');
var aud = document.createElement('audio');

aud.src ="http://music.163.com/song/media/outer/url?id=1365448816.mp3";
aud.addEventListener('ended', function() { btn.style.animationPlayState="paused"; }, true);
aud.addEventListener('timeupdate', tmMsg, true);

aud.play();

function tmMsg(){ //进度条
      var jd = (100*aud.currentTime)/aud.duration;
      jindu.innerHTML = Math.ceil(jd) + "%";
      jindu.style.backgroundSize = jd+ "% 20px";
}

btn.onclick = function(){
      aud.paused ? (aud.play(), btn.style.animationPlayState="running") : (aud.pause(), btn.style.animationPlayState="paused");
}

</script>

绿叶清舟 发表于 2022-2-17 11:44

本帖最后由 绿叶清舟 于 2022-2-17 12:36 编辑 <br /><br /><DIV align=center color=#ff0000 >
<tablestyle="position: relative; LEFT: 0px; width:690px;TOP: 180px"border="0" cellspacing="0" cellpadding="0">
<TBODY><TR><TD height=414 background=https://pic.imgdb.cn/item/620dc6072ab3f51d9199c302.jpg>
</TD></TR><TR><TD>
</TD></TR><TR><TD>
</TD></TR>
</table></div><BR><BR><BR><BR><BR><BR><BR>

<style type="text/css">
#paDiv {
      margin: auto;
      width: 220px;
      display: flex;
      align-items: center;
      border: 1px solid olive;
      border-radius: 8px 0px 8px 0px;
      background: rgba(255, 255, 255, 0);
      box-shadow: 1px 1px 2px #000;
}
#jindu {
      position: relative;
      width: 200px;
      height: 8px;
      line-height: 8px;
      font-size: 10px;
      color: #000;
      text-align: center;
      background: linear-gradient(90deg, olive, tan, gold) no-repeat;
      background-size: 20px 0px;
}
#btn-ro {
      width: 20px; height: 20px;
      line-height: 20px; font-size: 12px;
      background: linear-gradient(blue, silver, red);
      outline:none;
      color: white;
      border-radius: 50%;
      text-align: center;
      cursor: pointer;
      animation: rol linear 2s infinite;
}

#btn-ro:hover { opacity: 0.8; }
#btn-ro:active { opacity: 1; }

@keyframes rol { to { transform:rotate(360deg); } }

</style>
<DIVstyle="position: relative; opacity: 0.3; LEFT: -100px; TOP: 0px">
<div id="paDiv">
      <div id="btn-ro">·</div>
      <div id="jindu">
                <div id="jd-go"></div>
      </div>
</div>
</div>
<script language="javascript">

var btn = document.getElementById('btn-ro');
var jindu = document.getElementById('jindu');
var tips = document.getElementById('au-tips');
var aud = document.createElement('audio');

aud.src ="音乐";
aud.addEventListener('ended', function() { btn.style.animationPlayState="paused"; }, true);
aud.addEventListener('timeupdate', tmMsg, true);

aud.play();

function tmMsg(){ //进度条
      var jd = (100*aud.currentTime)/aud.duration;
      jindu.innerHTML = Math.ceil(jd) + "%";
      jindu.style.backgroundSize = jd+ "% 20px";
}

btn.onclick = function(){
      aud.paused ? (aud.play(), btn.style.animationPlayState="running") : (aud.pause(), btn.style.animationPlayState="paused");
}

</script>

绿叶清舟 发表于 2022-2-17 21:52

本帖最后由 绿叶清舟 于 2022-2-17 21:59 编辑 <br /><br /><DIV align=center color=#ff0000 >
<tablestyle="position: relative; LEFT: -320px; width:1200px;TOP: 180px"border="0" cellspacing="0" cellpadding="0">
<TBODY><TR><TD height=800 background=https://pic.imgdb.cn/item/620e4d862ab3f51d916cdeb3.jpg>
<DIVstyle="MARGIN: 5px; position: relative; LEFT:650px; width:200px;TOP: -140px">
<IMG border=0 src="https://www.huachaowang.com/data/attachment/forum/202202/17/215737g2n6n6qfnsquoh7u.gif"width=89 _height="100"></DIV>
</TD></TR>
</table></div><BR><BR><BR><BR><BR><BR><BR>

<style type="text/css">
#paDiv {
      margin: auto;
      width: 220px;
      display: flex;
      align-items: center;
      border: 1px solid olive;
      border-radius: 8px 0px 8px 0px;
      background: rgba(255, 255, 255, 0);
      box-shadow: 1px 1px 2px #000;
}
#jindu {
      position: relative;
      width: 200px;
      height: 8px;
      line-height: 8px;
      font-size: 10px;
      color: #000;
      text-align: center;
      background: linear-gradient(90deg, olive, tan, gold) no-repeat;
      background-size: 20px 0px;
}
#btn-ro {
      width: 20px; height: 20px;
      line-height: 20px; font-size: 12px;
      background: linear-gradient(blue, silver, red);
      outline:none;
      color: white;
      border-radius: 50%;
      text-align: center;
      cursor: pointer;
      animation: rol linear 2s infinite;
}

#btn-ro:hover { opacity: 0.8; }
#btn-ro:active { opacity: 1; }

@keyframes rol { to { transform:rotate(360deg); } }

</style>
<DIVstyle="position: relative; LEFT: -100px; TOP: -80px">
<div id="paDiv">
      <div id="btn-ro">·</div>
      <div id="jindu">
                <div id="jd-go"></div>
      </div>
</div>
</div>
<script language="javascript">

var btn = document.getElementById('btn-ro');
var jindu = document.getElementById('jindu');
var tips = document.getElementById('au-tips');
var aud = document.createElement('audio');

aud.src ="音乐";
aud.addEventListener('ended', function() { btn.style.animationPlayState="paused"; }, true);
aud.addEventListener('timeupdate', tmMsg, true);

aud.play();

function tmMsg(){ //进度条
      var jd = (100*aud.currentTime)/aud.duration;
      jindu.innerHTML = Math.ceil(jd) + "%";
      jindu.style.backgroundSize = jd+ "% 20px";
}

btn.onclick = function(){
      aud.paused ? (aud.play(), btn.style.animationPlayState="running") : (aud.pause(), btn.style.animationPlayState="paused");
}

</script>

绿叶清舟 发表于 2022-2-19 21:10

本帖最后由 绿叶清舟 于 2022-2-20 21:53 编辑 <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; }
</style>
       


<div style="position:relative; left:-244px; top:100px; border-radius:6px; box-shadow:3px 3px 3px 2px gray; width:1080px;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:#BE3030 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>               
<DIV align=center><iframe width="720" height="405" frameborder="0" src="https://www.ixigua.com/iframe/7058471261441262084?autoplay=0" referrerpolicy="unsafe-url" allowfullscreen></iframe><br><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://gimg2.baidu.com/image_search/src=http%3A%2F%2Fa2.img.fengone.com%2Fb340a20b79d99611a71735ab0563fe46%40100Q_680w.gif&refer=http%3A%2F%2Fa2.img.fengone.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1647865183&t=5778d019a62c3d29d1da8e35297e6aa7" width=240 _height="240"></DIV>

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

绿叶清舟 发表于 2022-2-24 17:27

本帖最后由 绿叶清舟 于 2022-2-24 17:33 编辑 <br /><br /><style type="text/css">
#waiDiv { margin:10px; padding:8px; width:400px; background:#696969; border-radius:10px; box-shadow:2px 2px 4px #000; display:flex; flex-direction:column; position:relative; }
#audDiv { width:100%; display:flex; flex-direction:row; align-items:center; font-size:10px; position: relative; }
#add1 { margin-left: 12px; background:#eee; text-align:center; width:20px; height:20px; line-height:20px; border-radius:50%; cursor:pointer; }
#add1:hover { color: red; }
#mLiDiv { margin-top: 10px; background:#eee; color:#000; min-height:100px; padding:10px; border:1px solid olive; font-size:14px; column-count: 2;}
#mLiDiv a { text-decoration: none; cursor:pointer; }
#mLiDiv a:hover { color:red; }
#prompt { position:absolute; left:200px; top:50px; width:400px; padding:6px 12px; background:silver; font-size:12px; display:none; box-shadow:1px 1px 1px #666; border-radius:2px; }
#prompt input { outline:none; }
#prompt input { margin:4px;padding:4px; width:392px; }
#prompt input { border-radius:4px; cursor:pointer;border:1px solid gray; border-radius:3px; box-shadow: 1px 1px 2px #444; }
#audDiv input, #audDiv input { cursor:pointer; }
#paDiv { margin: auto; width: 220px; display: flex; align-items: center; border: 1px solid olive; border-radius: 8px 0px 8px 0px; background: rgba(0,0,0,.8); box-shadow: 1px 1px 2px #000; position: relative; }
#jindu { position: relative; width: 200px; height: 8px; line-height: 8px; font-size: 10px; color: #eee; text-align: center; background: linear-gradient(90deg, olive, green) no-repeat; background-size: 8px 0px; cursor: pointer; }
#btn-ro { width: 20px; height: 20px; line-height: 20px; font-size: 12px; background: linear-gradient(blue, silver, red); outline:none; color: white; border-radius: 50%; text-align: center; cursor: pointer; animation: rol linear 2s infinite; }
#btn-ro:hover { opacity: 0.8; }
#btn-ro:active { opacity: 1; }
@keyframes rol { to { transform:rotate(360deg); } }
</style>

<DIV align=center color=#ff0000 >
<tablestyle="position: relative;LEFT: -320px; width:1200px;TOP: 180px"border="0" cellspacing="0" cellpadding="0">
<TBODY><TR><TD height=800 background=https://pic.imgdb.cn/item/62174f692ab3f51d91340c5f.jpg>
</TD></TR>
</table></div><BR><BR><BR><BR><BR><BR><BR>

<DIVstyle="position: relative; opacity: 0.5; LEFT: -100px; TOP: -280px">
<div id="waiDiv">
      <div id="audDiv">
                <div id="paDiv">
                        <div id="btn-ro">·</div>
                        <div id="jindu"><div id="jd-go"></div></div>
                </div>
                <input id="muted" type="checkbox" onclick="aud.muted = this.checked ? true : false">静音
                <input id="dqxh" type="radio" name="rad" checked="checked" onclick="howplay()" />单曲
                <input id="lhbf" type="radio" name="rad" onclick="howplay()" />轮播
                <div id="add1">+</div>
      </div>
      <div id="mLiDiv"></div>
      <div id="prompt">
      <div>添歌</div>
                <input type="text" id="mName" placeholder="歌曲名称" /><br />
                <input type="text" id="mUrl" placeholder="歌曲地址" /><br />
                <div style="text-align:center;">
                        <input id="subMe" type="button" value=" 添加 " />
                        <input id="cancelMe" type="button" value=" 算了 " />
                </div>
      </div>
</div>
</div>

<script>
//音乐数据 注意最后一个结尾不要逗号但前面每一个的结尾都要有逗号
var muAr = [
      ["http://music.163.com/song/media/outer/url?id=526472472.mp3","乱红","陈悦"],
      ["http://music.163.com/song/media/outer/url?id=5253675.mp3","升"],
      ["https://www.kumeiwp.com/sub/filestores/2022/02/23/3b348f94dbd4c2c843e7976a776bd154.mp3","呼吸"],
      ["https://joy127.jstools.net/uploads/mp3/202202/23/20226216270d12739135688.mp3","离弦"],
      ["http://music.163.com/song/media/outer/url?id=25730799.mp3","最后一只舞"],
      ["https://www.kumeiwp.com/sub/filestores/2022/02/23/f59f9c9c188a99ab7c82cf9fdbf66e34.mp3","西出长安"],
      ["https://www.kumeiwp.com/sub/filestores/2022/02/23/06952ab784aff1d6cee8b180ee3c6aeb.mp3","谜"],
      ["http://music.163.com/song/media/outer/url?id=1437070924.mp3","这支烟灭了以后"],
      ["http://music.163.com/song/media/outer/url?id=28725740.mp3","Asoka Theme"],
];

var btn = document.getElementById('btn-ro');
var jindu = document.getElementById('jindu');
var aud = document.getElementById('myPlayer');
var mLi = document.getElementById('mLiDiv');
var mAdd = document.getElementById('add1');
var prom = document.getElementById('prompt');
var cancelMe = document.getElementById('cancelMe');
var subMe = document.getElementById('subMe');
var dqxh = document.getElementById('dqxh');
var lhbf = document.getElementById('lhbf');
var aud = document.createElement('audio');
aud.loop = true;
var playIdx = 0; //当前播放索引
if(aud.paused) btn.style.animationPlayState="paused";
//写歌单
var str = "";
for(j=0; j<muAr.length; j++) {
      str += (j+1) + ".<a id='list" + j + "' onclick='iPlay(" + j + ")' >" + muAr + "</a><br />";
}
mLi.innerHTML += str;

function iPlay(idx){ //播放函数
      playIdx = idx;
      aud.src = muAr;
      aud.play();
      aud.addEventListener('timeupdate', tmMsg, true);
      aud.addEventListener('ended', function() { btn.style.animationPlayState="paused"; }, true);
      btn.style.animationPlayState="running";
      nameRed(playIdx);
}

function howplay(){ //单曲&轮播处理
      dqxh.checked ? aud.loop = true : (aud.loop = false,playNext(),aud.addEventListener('ended',playNext,false));
      prom.style.display = "none";
}

function playNext(){ //处理下一首
      if(aud.paused) iPlay(playIdx);
      playIdx += 1;
      if(playIdx >= muAr.length) playIdx = 0;
}

function nameRed(){ //歌单着色
      for(k=0;k<muAr.length;k++){
                let listId = "list" + k;
                document.getElementById(listId).style.removeProperty("color");
      }
      listId = "list" + playIdx;
      document.getElementById(listId).style.color = "red";
}

function tmMsg(){ //进度条
      let auT = Math.floor(aud.duration - aud.currentTime);
      let auM = auT / 60;
      let auMs = parseInt(auM);
      if (auMs <10) auMs = "0" + auMs;
      let auS = auT % 60;
      let auSs = Math.round(auS);
      if (auSs < 10) auSs = "0" + auSs;
      let jd = (100*aud.currentTime)/aud.duration;
      if(jd>0) {
                jindu.innerHTML = "- " + auMs +":" + auSs;
                jindu.style.backgroundSize = jd+ "% 8px";
      }
}

jindu.onclick = function(){ //进度控制
      let w = offset(jindu,"left");
      let x = (event.clientX - w) * aud.duration / jindu.clientWidth;
      aud.currentTime = x;
}

function offset(obj,direction){//获取元素总偏移量
      let offsetDir = "offset" + direction.toUpperCase()+direction.substring(1);
      let realNum = obj;
      let positionParent = obj.offsetParent;
      while(positionParent != null){
                realNum += positionParent;
                positionParent = positionParent.offsetParent;
      }
      return realNum;
}

btn.onclick = function(){ //光盘按钮点击事件
      aud.paused ? (aud.play(), btn.style.animationPlayState="running") : (aud.pause(), btn.style.animationPlayState="paused");
}

mAdd.onclick = function(){ prom.style.display = "block"; } //呼出加歌界面
cancelMe.onclick = function(){ prom.style.display = "none"; } //放弃加歌

subMe.onclick = function(){ //加歌并播放新歌
      let uri = document.getElementById('mUrl');
      let name = document.getElementById('mName');
      let tnum = muAr.length;
      let str1 = uri.value.trim();
      let str2 = name.value.trim();
      if(str1 !="" && str2 != ""){
                muAr = ;
                mLi.innerHTML += (tnum+1) + ".<a id='list" + tnum + "' onclick='iPlay(" + tnum + ")' >" + str2 + "</a><br />";
                iPlay(tnum);
                uri.value = "";
                name.value = "";
      }
      prom.style.display = "none";
}
//自动播放（默认播放第一首）
iPlay(playIdx);
</script>

绿叶清舟 发表于 2022-2-27 17:04

本帖最后由 绿叶清舟 于 2022-2-28 19:38 编辑 <br /><br /><DIV align=center color=#ff0000 >
<tablestyle="position: relative;LEFT: -320px; width:1200px;TOP: 180px"border="0" cellspacing="0" cellpadding="0">
<TBODY><TR><TD height=718 background=https://pic.imgdb.cn/item/621cb2a32ab3f51d91ac54cc.jpg>
</TD></TR>
</table></DIV><BR><BR><BR><BR><BR><BR><BR>


<style type="text/css">
#waiDiv { margin:10px; padding:8px; width:400px; background:#696969; border-radius:10px; box-shadow:2px 2px 4px #000; display:flex; flex-direction:column; position:relative; }
#audDiv { width:100%; display:flex; flex-direction:row; align-items:center; font-size:10px; position: relative; }
#add1 { margin-left: 12px; background:#eee; text-align:center; width:20px; height:20px; line-height:20px; border-radius:50%; cursor:pointer; }
#add1:hover { color: red; }
#mLiDiv { margin-top: 10px; background:#eee; color:#000; min-height:100px; padding:10px; border:1px solid olive; font-size:14px; column-count: 2;}
#mLiDiv a { text-decoration: none; cursor:pointer; }
#mLiDiv a:hover { color:red; }
#prompt { position:absolute; left:200px; top:-550px; width:400px; padding:6px 12px; background:silver; font-size:12px; display:none; box-shadow:1px 1px 1px #666; border-radius:2px; }
#prompt input { outline:none; }
#prompt input { margin:4px;padding:4px; width:392px; }
#prompt input { border-radius:4px; cursor:pointer;border:1px solid gray; border-radius:3px; box-shadow: 1px 1px 2px #444; }
#audDiv input, #audDiv input { cursor:pointer; }
#paDiv { margin: auto; width: 220px; display: flex; align-items: center; border: 1px solid olive; border-radius: 8px 0px 8px 0px; background: rgba(0,0,0,.8); box-shadow: 1px 1px 2px #000; position: relative; }
#jindu { position: relative; width: 200px; height: 8px; line-height: 8px; font-size: 10px; color: #eee; text-align: center; background: linear-gradient(90deg, olive, green) no-repeat; background-size: 8px 0px; cursor: pointer; }
#btn-ro { width: 20px; height: 20px; line-height: 20px; font-size: 12px; background: linear-gradient(blue, silver, red); outline:none; color: white; border-radius: 50%; text-align: center; cursor: pointer; animation: rol linear 2s infinite; }
#btn-ro:hover { opacity: 0.8; }
#btn-ro:active { opacity: 1; }
@keyframes rol { to { transform:rotate(360deg); } }
</style>
<DIVstyle="position: relative;LEFT: 110px; TOP: -550px">
<div id="waiDiv">
      <div id="audDiv">
                <div id="paDiv">
                        <div id="btn-ro">·</div>
                        <div id="jindu"><div id="jd-go"></div></div>
                </div>
                <input id="muted" type="checkbox" onclick="aud.muted = this.checked ? true : false">静音
                <input id="dqxh" type="radio" name="rad" checked="checked" onclick="howplay()" />单曲
                <input id="lhbf" type="radio" name="rad" onclick="howplay()" />轮播
                <div id="add1">+</div>
      </div>
      <div id="mLiDiv"></div>
      <div id="prompt">
      <div>添歌</div>
                <input type="text" id="mName" placeholder="歌曲名称" /><br />
                <input type="text" id="mUrl" placeholder="歌曲地址" /><br />
                <div style="text-align:center;">
                        <input id="subMe" type="button" value=" 添加 " />
                        <input id="cancelMe" type="button" value=" 算了 " />
                </div>
      </div>
</div>
</div>
<script>
//音乐数据 注意最后一个结尾不要逗号但前面每一个的结尾都要有逗号
var muAr = [
      ["http://music.163.com/song/media/outer/url?id=5252288.mp3","夜夜夜夜","陈悦"],
      ["http://music.163.com/song/media/outer/url?id=212430.mp3","飘雪"],
      ["http://music.163.com/song/media/outer/url?id=212652.mp3","夜机"],
      ["http://music.163.com/song/media/outer/url?id=4876355.mp3","至少还有你"],
      ["http://music.163.com/song/media/outer/url?id=103778.mp3","爱我你怕了吗"],
      ["http://music.163.com/song/media/outer/url?id=308490.mp3","走过"],
      ["http://music.163.com/song/media/outer/url?id=1920287954.mp3","叶子"],
      ["https://www.kumeiwp.com/sub/filestores/2022/02/27/e927fdfcf8c44afb713a2b56272ffc62.mp3","如果爱下去"],
      ["http://music.163.com/song/media/outer/url?id=28725740.mp3","Asoka Theme"],
];

var btn = document.getElementById('btn-ro');
var jindu = document.getElementById('jindu');
var aud = document.getElementById('myPlayer');
var mLi = document.getElementById('mLiDiv');
var mAdd = document.getElementById('add1');
var prom = document.getElementById('prompt');
var cancelMe = document.getElementById('cancelMe');
var subMe = document.getElementById('subMe');
var dqxh = document.getElementById('dqxh');
var lhbf = document.getElementById('lhbf');
var aud = document.createElement('audio');
aud.loop = true;
var playIdx = 0; //当前播放索引
if(aud.paused) btn.style.animationPlayState="paused";
//写歌单
var str = "";
for(j=0; j<muAr.length; j++) {
      str += (j+1) + ".<a id='list" + j + "' onclick='iPlay(" + j + ")' >" + muAr + "</a><br />";
}
mLi.innerHTML += str;

function iPlay(idx){ //播放函数
      playIdx = idx;
      aud.src = muAr;
      aud.play();
      aud.addEventListener('timeupdate', tmMsg, true);
      aud.addEventListener('ended', function() { btn.style.animationPlayState="paused"; }, true);
      btn.style.animationPlayState="running";
      nameRed(playIdx);
}

function howplay(){ //单曲&轮播处理
      dqxh.checked ? aud.loop = true : (aud.loop = false,playNext(),aud.addEventListener('ended',playNext,false));
      prom.style.display = "none";
}

function playNext(){ //处理下一首
      if(aud.paused) iPlay(playIdx);
      playIdx += 1;
      if(playIdx >= muAr.length) playIdx = 0;
}

function nameRed(){ //歌单着色
      for(k=0;k<muAr.length;k++){
                let listId = "list" + k;
                document.getElementById(listId).style.removeProperty("color");
      }
      listId = "list" + playIdx;
      document.getElementById(listId).style.color = "red";
}

function tmMsg(){ //进度条
      let auT = Math.floor(aud.duration - aud.currentTime);
      let auM = auT / 60;
      let auMs = parseInt(auM);
      if (auMs <10) auMs = "0" + auMs;
      let auS = auT % 60;
      let auSs = Math.round(auS);
      if (auSs < 10) auSs = "0" + auSs;
      let jd = (100*aud.currentTime)/aud.duration;
      if(jd>0) {
                jindu.innerHTML = "- " + auMs +":" + auSs;
                jindu.style.backgroundSize = jd+ "% 8px";
      }
}

jindu.onclick = function(){ //进度控制
      let w = offset(jindu,"left");
      let x = (event.clientX - w) * aud.duration / jindu.clientWidth;
      aud.currentTime = x;
}

function offset(obj,direction){//获取元素总偏移量
      let offsetDir = "offset" + direction.toUpperCase()+direction.substring(1);
      let realNum = obj;
      let positionParent = obj.offsetParent;
      while(positionParent != null){
                realNum += positionParent;
                positionParent = positionParent.offsetParent;
      }
      return realNum;
}

btn.onclick = function(){ //光盘按钮点击事件
      aud.paused ? (aud.play(), btn.style.animationPlayState="running") : (aud.pause(), btn.style.animationPlayState="paused");
}

mAdd.onclick = function(){ prom.style.display = "block"; } //呼出加歌界面
cancelMe.onclick = function(){ prom.style.display = "none"; } //放弃加歌

subMe.onclick = function(){ //加歌并播放新歌
      let uri = document.getElementById('mUrl');
      let name = document.getElementById('mName');
      let tnum = muAr.length;
      let str1 = uri.value.trim();
      let str2 = name.value.trim();
      if(str1 !="" && str2 != ""){
                muAr = ;
                mLi.innerHTML += (tnum+1) + ".<a id='list" + tnum + "' onclick='iPlay(" + tnum + ")' >" + str2 + "</a><br />";
                iPlay(tnum);
                uri.value = "";
                name.value = "";
      }
      prom.style.display = "none";
}
//自动播放（默认播放第一首）
iPlay(playIdx);
</script>

绿叶清舟 发表于 2022-2-27 18:53

本帖最后由 绿叶清舟 于 2022-3-28 19:21 编辑 <br /><br /><style>

#bgBox { position:relative; left: -5px; width: 800px; height: 430px; background-image: url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F6ddd286e37962a077b77d2de41bfa83fe25a097055aa6-F6p0GH_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651058433&t=68fd1a0c87defc3dab502150b9776bf0'); background-size: 770px 433px; background-position: 770px 0; opacity: .75; animation: mv 5s linear infinite; }
#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);} }
@keyframes mv { from { background-position: 400px 0; } to { background-position: 0 0; } }

</style>

<div id="bgBox">
      <div id="clkBtn" style="left: 20px; top: calc(100% - 120px);">
                <div id="zhizhen"></div>
      </div>
      <audio id="music" autoplay="autoplay" loop="loop" src="音乐" ></audio>
</div>

<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>

绿叶清舟 发表于 2022-3-5 16:41

<DIV align=center color=#ff0000 >
<tablestyle="position: relative; LEFT: -320px; width:1200px;TOP: 180px"border="0" cellspacing="0" cellpadding="0">
<TBODY><TR><TD height=1000 background=https://pic.imgdb.cn/item/622321f35baa1a80ab58d5c0.jpg>
</TD></TR><TR><TD height=1000 background=https://pic.imgdb.cn/item/6223220e5baa1a80ab58f7ef.gif>
</TD></TR><TR><TD height=1000 background=https://pic.imgdb.cn/item/622322215baa1a80ab590c06.jpg>
</TD></TR>
</table></div><BR><BR><BR><BR><BR><BR><BR><BR><BR>

绿叶清舟 发表于 2022-3-10 14:25

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

.mnBox {
        margin: auto;
        margin-top: 20px;
        position: relative;
        background: #333 url('https://pic.imgdb.cn/item/622999b05baa1a80abf81c7a.jpg') no-repeat center/cover;
        height: 800px;
        width: 1200px;
        top: -5px;
        left: -300px;
        border: 1px solid;
        box-shadow: 0px 0px 0px 8px tan;
}
.mnBox iframe {
        position: absolute;
        left: -248px;;
        top: calc(100% - 50px);
        clip-path: circle(16px at 271px);
        opacity: 0.8;
}
.rain {
        width: 1px;
        height: 8px;
        top: -50px;
        left: 100px;
        background: #eee;
        position: relative;
        display: block;
        animation: rain 0.5s linear infinite;
}

.rain::before, .rain::after{
        content: "";
        position: absolute;
        left: 10px;
        top: -120px;
        width: 1px;
        height: 10px;
        background: #eee;
}

.rain::after { height: 8px; left: -70px; top: 50px; }

.circle {
        position:absolute;
        width: 3px;
        height: 1px;
        left: 85px;
        top: 90%;
        background:none;
        border: 1px solid #FFF;
        border-radius: 50%;
        animation:circle 2s ease-out infinite;
}

@keyframes circle {
        0% { width:0; height:0; }
        50% { opacity:0.1; width:2%; height:2%; }
        60% { opacity:0.2; width:2%; height:2%; }
        100% { opacity:0; width:2%; height:2%; }
}

@keyframes rain {
        0% { opacity:0.5; }
        100% { opacity:0.5; top:40%;}
}

@keyframes rao {
      from {right:-70px; } to {right:-780px; }
}
.dong {
      margin:0px auto;
      width:700px;
      height:400px;
      padding:10px;
        left: -1000px;
      background:url('') no-repeat right center;
}
.s_img {
      animation:rao 26s infinite alternate;
      width:77px;
      height:70px;
      position:relative;
      top:523px;
}
</style>

<div id="mnBox" class="mnBox">
        <span class="rain"></span>
        <span class="circle"></span>
        <div class="dong">
<img class="s_img" alt="" src="https://pic.imgdb.cn/item/62299c015baa1a80abf9de64.png" />
</div>
</div>


<script language="javascript">
function rain() {
        var str = "";
        for(i=0; i<20; i++) {
                var l = Math.ceil(Math.random()*800);
                str += "<span class='rain' style='left:" + l +"px;'></span>";
        }
        for(j=0;j<10; j++){
                var k1 = Math.ceil(Math.random()*100);
                var k2 = Math.round(Math.random()*20+80);
                str += "<span class='circle' style='left:" + k1 +"%;top:" + k2 +"%;'></span>";
        }
        document.getElementById('mnBox').innerHTML += str;
}
rain();
</script>

绿叶清舟 发表于 2022-3-10 14:32

<style type="text/css">

.mnBox {
        margin: auto;
        margin-top: 20px;
        position: relative;
        background: #333 url('https://pic.imgdb.cn/item/622999b05baa1a80abf81c7a.jpg') no-repeat center/cover;
        height: 800px;
        width: 1200px;
        top: -5px;
        left: -300px;
        border: 1px solid;
        box-shadow: 0px 0px 0px 8px tan;
}
.mnBox iframe {
        position: absolute;
        left: -248px;;
        top: calc(100% - 50px);
        clip-path: circle(16px at 271px);
        opacity: 0.8;
}
.rain {
        width: 1px;
        height: 8px;
        top: -5px;
        left: 100px;
        background: #eee;
        position: relative;
        display: block;
        animation: rain 0.5s linear infinite;
}

.rain::before, .rain::after{
        content: "";
        position: absolute;
        left: 10px;
        top: -120px;
        width: 1px;
        height: 10px;
        background: #eee;
}

.rain::after { height: 8px; left: -70px; top: 50px; }

.circle {
        position:absolute;
        width: 3px;
        height: 1px;
        left: 85px;
        top: 90%;
        background:none;
        border: 1px solid #FFF;
        border-radius: 50%;
        animation:circle 2s ease-out infinite;
}

@keyframes circle {
        0% { width:0; height:0; }
        50% { opacity:0.1; width:2%; height:2%; }
        60% { opacity:0.2; width:2%; height:2%; }
        100% { opacity:0; width:2%; height:2%; }
}

@keyframes rain {
        0% { opacity:0.5; }
        100% { opacity:0.5; top:40%;}
}

</style>

<div id="mnBox" class="mnBox">
        <span class="rain"></span>
        <span class="circle"></span>
       
</div>


<script language="javascript">
function rain() {
        var str = "";
        for(i=0; i<20; i++) {
                var l = Math.ceil(Math.random()*800);
                str += "<span class='rain' style='left:" + l +"px;'></span>";
        }
        for(j=0;j<10; j++){
                var k1 = Math.ceil(Math.random()*100);
                var k2 = Math.round(Math.random()*20+80);
                str += "<span class='circle' style='left:" + k1 +"%;top:" + k2 +"%;'></span>";
        }
        document.getElementById('mnBox').innerHTML += str;
}
rain();
</script>

绿叶清舟 发表于 2022-3-10 21:12

本帖最后由 绿叶清舟 于 2022-3-10 21:14 编辑 <br /><br /><DIV align=center>
<table style="position: relative; LEFT: -300px; width:1200px;TOP: 150px" background=https://pic.imgdb.cn/item/6229f93e5baa1a80ab3b1893.jpg border="0" cellspacing="0" cellpadding="0">
<TBODY><TR><TD height=800><section style="background-color: rgba(0, 0, 0, 0); background-image: url('http://img.wyc520.com.cn/data/attachment/forum/202105/22/182817se8zaaa8kenljeuj.gif'); background-repeat: repeat; background-size: 100%; padding: 0px; box-sizing: border-box;position: relative; LEFT: 0px; width:1200px;TOP: 0px;"><p style="text-indent: 2em;height=640"><br><br><br></p><p><br/></p><p><br/></p></p><p></p><p><p style="text-indent: 2em;height=640"><br><br><br></p><p><br/></p><p><br/></p></p><p></p><p><p style="text-indent: 2em;height=640"><br><br><br></p><p><br/></p><p><br/></p></p><p></p><p><p style="text-indent: 2em;height=640"><br><br><br></p><p><br/></p><p><br/></p></p><p></p><p><p style="text-indent: 2em;height=640">
<section class="_135editor"><section><p><br/></p><p><br/></p></section>
</TD></TR>
</table></div><br><br><br><br><br><br><br><br><br><br><br><br>

绿叶清舟 发表于 2022-3-11 20:53

本帖最后由 绿叶清舟 于 2022-3-11 20:57 编辑 <br /><br /><DIV align=center color=#ff0000 >
<tablestyle="position: relative; LEFT: -320px; width:1200px;TOP: 180px"border="0" cellspacing="0" cellpadding="0">
<TBODY><TR><TD height=800 background=https://pic.imgdb.cn/item/622b45f75baa1a80ab09c639.jpg>
<DIVstyle="MARGIN: 5px; position: relative; LEFT:580px; width:200px;TOP: -140px">
<IMG border=0 src="https://pic.imgdb.cn/item/622b46ee5baa1a80ab0a99ba.gif"width=300_height="100"></DIV>
</TD></TR>
</table></div><BR><BR><BR><BR><BR><BR><BR>

<style type="text/css">
#paDiv {
      margin: auto;
      width: 220px;
      display: flex;
      align-items: center;
      border: 1px solid olive;
      border-radius: 8px 0px 8px 0px;
      background: rgba(255, 255, 255, 0);
      box-shadow: 1px 1px 2px #000;
}
#jindu {
      position: relative;
      width: 200px;
      height: 8px;
      line-height: 8px;
      font-size: 10px;
      color: #000;
      text-align: center;
      background: linear-gradient(90deg, olive, tan, gold) no-repeat;
      background-size: 20px 0px;
}
#btn-ro {
      width: 20px; height: 20px;
      line-height: 20px; font-size: 12px;
      background: linear-gradient(blue, silver, red);
      outline:none;
      color: white;
      border-radius: 50%;
      text-align: center;
      cursor: pointer;
      animation: rol linear 2s infinite;
}

#btn-ro:hover { opacity: 0.8; }
#btn-ro:active { opacity: 1; }

@keyframes rol { to { transform:rotate(360deg); } }

</style>
<DIVstyle="position: relative; LEFT: -100px; TOP: -80px">
<div id="paDiv">
      <div id="btn-ro">·</div>
      <div id="jindu">
                <div id="jd-go"></div>
      </div>
</div>
</div>
<script language="javascript">

var btn = document.getElementById('btn-ro');
var jindu = document.getElementById('jindu');
var tips = document.getElementById('au-tips');
var aud = document.createElement('audio');

aud.src ="音乐";
aud.addEventListener('ended', function() { btn.style.animationPlayState="paused"; }, true);
aud.addEventListener('timeupdate', tmMsg, true);

aud.play();

function tmMsg(){ //进度条
      var jd = (100*aud.currentTime)/aud.duration;
      jindu.innerHTML = Math.ceil(jd) + "%";
      jindu.style.backgroundSize = jd+ "% 20px";
}

btn.onclick = function(){
      aud.paused ? (aud.play(), btn.style.animationPlayState="running") : (aud.pause(), btn.style.animationPlayState="paused");
}

</script>

绿叶清舟 发表于 2022-3-13 11:19

本帖最后由 绿叶清舟 于 2022-3-13 11:29 编辑 <br /><br /><DIV align=center color=#ff0000 >
<tablestyle="position: relative; LEFT: -320px; width:1200px;TOP: 180px"border="0" cellspacing="0" cellpadding="0">
<TBODY><TR><TD height=800 background=https://pic.imgdb.cn/item/622d62445baa1a80ab130218.jpg>
<DIVstyle="MARGIN: 5px; position: relative; LEFT:950px; width:100px;TOP: 360px">
<IMG border=0 src="https://pic.imgdb.cn/item/622d62825baa1a80ab131d25.gif"width=100_height="100"></DIV>
<DIVstyle="MARGIN: 5px; position: relative; LEFT:550px; width:400px;TOP: 180px">
<IMG border=0 src="https://pic.imgdb.cn/item/622d63ca5baa1a80ab13b313.gif"width=400_height="400"></DIV>
</TD></TR>
</table></div><BR><BR><BR><BR><BR><BR><BR>

<style type="text/css">
#paDiv {
      margin: auto;
      width: 220px;
      display: flex;
      align-items: center;
      border: 1px solid olive;
      border-radius: 8px 0px 8px 0px;
      background: rgba(255, 255, 255, 0);
      box-shadow: 1px 1px 2px #000;
}
#jindu {
      position: relative;
      width: 200px;
      height: 8px;
      line-height: 8px;
      font-size: 10px;
      color: #000;
      text-align: center;
      background: linear-gradient(90deg, olive, tan, gold) no-repeat;
      background-size: 20px 0px;
}
#btn-ro {
      width: 20px; height: 20px;
      line-height: 20px; font-size: 12px;
      background: linear-gradient(blue, silver, red);
      outline:none;
      color: white;
      border-radius: 50%;
      text-align: center;
      cursor: pointer;
      animation: rol linear 2s infinite;
}

#btn-ro:hover { opacity: 0.8; }
#btn-ro:active { opacity: 1; }

@keyframes rol { to { transform:rotate(360deg); } }

</style>
<DIVstyle="position: relative; LEFT: -100px; TOP: -80px">
<div id="paDiv">
      <div id="btn-ro">·</div>
      <div id="jindu">
                <div id="jd-go"></div>
      </div>
</div>
</div>
<script language="javascript">

var btn = document.getElementById('btn-ro');
var jindu = document.getElementById('jindu');
var tips = document.getElementById('au-tips');
var aud = document.createElement('audio');

aud.src ="音乐";
aud.addEventListener('ended', function() { btn.style.animationPlayState="paused"; }, true);
aud.addEventListener('timeupdate', tmMsg, true);

aud.play();

function tmMsg(){ //进度条
      var jd = (100*aud.currentTime)/aud.duration;
      jindu.innerHTML = Math.ceil(jd) + "%";
      jindu.style.backgroundSize = jd+ "% 20px";
}

btn.onclick = function(){
      aud.paused ? (aud.play(), btn.style.animationPlayState="running") : (aud.pause(), btn.style.animationPlayState="paused");
}

</script>

绿叶清舟 发表于 2022-3-13 11:33

<DIV align=center color=#ff0000 >
<tablestyle="position: relative; LEFT: -320px; width:1200px;TOP: 180px"border="0" cellspacing="0" cellpadding="0">
<TBODY><TR><TD height=800 background=https://pic.imgdb.cn/item/622d62445baa1a80ab130218.jpg>
<DIVstyle="MARGIN: 5px; position: relative; LEFT:950px; width:100px;TOP: 360px">
<IMG border=0 src="https://pic.imgdb.cn/item/622d62825baa1a80ab131d25.gif"width=100_height="100"></DIV>
<DIVstyle="MARGIN: 5px; position: relative; LEFT:550px; width:400px;TOP: 180px">
<IMG border=0 src="https://pic.imgdb.cn/item/622d63ca5baa1a80ab13b313.gif"width=400_height="400"></DIV>
</TD></TR>
</table></div><BR><BR><BR><BR><BR><BR><BR>

<style type="text/css">
#paDiv {
      margin: auto;
      width: 220px;
      display: flex;
      align-items: center;
      border: 1px solid olive;
      border-radius: 8px 0px 8px 0px;
      background: rgba(255, 255, 255, 0);
      box-shadow: 1px 1px 2px #000;
}
#jindu {
      position: relative;
      width: 200px;
      height: 8px;
      line-height: 8px;
      font-size: 10px;
      color: #000;
      text-align: center;
      background: linear-gradient(90deg, olive, tan, gold) no-repeat;
      background-size: 20px 0px;
}
#btn-ro {
      width: 20px; height: 20px;
      line-height: 20px; font-size: 12px;
      background: linear-gradient(blue, silver, red);
      outline:none;
      color: white;
      border-radius: 50%;
      text-align: center;
      cursor: pointer;
      animation: rol linear 2s infinite;
}

#btn-ro:hover { opacity: 0.8; }
#btn-ro:active { opacity: 1; }

@keyframes rol { to { transform:rotate(360deg); } }

</style>
<DIVstyle="position: relative; LEFT: -100px; TOP: -80px">
<div id="paDiv">
      <div id="btn-ro">·</div>
      <div id="jindu">
                <div id="jd-go"></div>
      </div>
</div>
</div>
<script language="javascript">

var btn = document.getElementById('btn-ro');
var jindu = document.getElementById('jindu');
var tips = document.getElementById('au-tips');
var aud = document.createElement('audio');

aud.src ="https://www.kumeiwp.com/sub/filestores/2022/03/13/86544817ce41945e609ed7843e60fe53.mp3";
aud.addEventListener('ended', function() { btn.style.animationPlayState="paused"; }, true);
aud.addEventListener('timeupdate', tmMsg, true);

aud.play();

function tmMsg(){ //进度条
      var jd = (100*aud.currentTime)/aud.duration;
      jindu.innerHTML = Math.ceil(jd) + "%";
      jindu.style.backgroundSize = jd+ "% 20px";
}

btn.onclick = function(){
      aud.paused ? (aud.play(), btn.style.animationPlayState="running") : (aud.pause(), btn.style.animationPlayState="paused");
}

</script>

绿叶清舟 发表于 2022-3-15 16:41

本帖最后由 绿叶清舟 于 2022-3-15 16:46 编辑 <br /><br /><style type="text/css">
.sky {
height: 480px;
position: relative;
overflow: hidden;
-webkit-animation: sky_background 50s ease-out infinite;
-moz-animation: sky_background 50s ease-out infinite;
-o-animation: sky_background 50s ease-out infinite;
animation: sky_background 50s ease-out infinite;
-webkit-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}

.sky .clouds_one {
background: url("https://pic.imgdb.cn/item/61c6a31d2ab3f51d91833c42.png");
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 300%;
-webkit-animation: cloud_one 50s linear infinite;
-moz-animation: cloud_one 50s linear infinite;
-o-animation: cloud_one 50s linear infinite;
animation: cloud_one 50s linear infinite;
-webkit-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}

.sky .clouds_two {
background: url("https://pic.imgdb.cn/item/61c6a3382ab3f51d918348ce.png");
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 300%;
-webkit-animation: cloud_two 75s linear infinite;
-moz-animation: cloud_two 75s linear infinite;
-o-animation: cloud_two 75s linear infinite;
animation: cloud_two 75s linear infinite;
-webkit-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}

.sky .clouds_three {
background: url("https://pic.imgdb.cn/item/61c6a34b2ab3f51d91835097.png");
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 300%;
-webkit-animation: cloud_three 100s linear infinite;
-moz-animation: cloud_three 100s linear infinite;
-o-animation: cloud_three 100s linear infinite;
animation: cloud_three 100s linear infinite;
-webkit-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}



@-webkit-keyframes cloud_one {
0% {
      left: 0
}
100% {
      left: -200%
}
}
@-moz-keyframes cloud_one {
0% {
      left: 0
}
100% {
      left: -200%
}
}
@keyframes cloud_one {
0% {
      left: 0
}
100% {
      left: -200%
}
}

@-webkit-keyframes cloud_two {
0% {
      left: 0
}
100% {
      left: -200%
}
}
@-moz-keyframes cloud_two {
0% {
      left: 0
}
100% {
      left: -200%
}
}
@keyframes cloud_two {
0% {
      left: 0
}
100% {
      left: -200%
}
}

@-webkit-keyframes cloud_three {
0% {
      left: 0
}
100% {
      left: -200%
}
}
@-moz-keyframes cloud_three {
0% {
      left: 0
}
100% {
      left: -200%
}
}
@keyframes cloud_three {
0% {
      left: 0
}
100% {
      left: -200%
}
}

</style>

<DIV align=center color=#ff0000 >
<tablestyle="position: relative; LEFT: -230px; width:1000px;TOP: 180px"border="0" cellspacing="0" cellpadding="0">
<TBODY><TR><TD height=1800 background=https://pic.imgdb.cn/item/623050fb5baa1a80ab5909e1.jpg>

<div class="sky"style="position: relative; LEFT: 0px; width:1000px;TOP: -530px" >
      <div class="clouds_one"></div>
      <div class="clouds_two"></div>
      <div class="clouds_three"></div>
</div>
</TD></TR>
</table></div><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>

绿叶清舟 发表于 2022-3-16 20:48

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

<style type="text/css">
.mBox {
      margin: 10px auto;
      width: 500px;
      height: 300px;
      position: relative;
      left: 8px;
      top: -100px;
      overflow: hidden;
      border: 0px solid navy;
      box-shadow: 0px 0px 0px 1px #444;
}
.pBox {
      position: absolute;
      animation: Roll 25s linear infinite;
      display: flex;
}
.pBox:hover {
      cursor: pointer;
      animation-play-state: paused;
}
.pBox img {
      width: 1200px;
      height:600px;
      float: left;
}
@keyframes Roll {
      from { transform: translateX(0); }
      to { transform: translateX(-50%); }
}
</style>





<DIV align=center color=#ff0000 >
<tablestyle="position: relative; LEFT: -280px; width:1036px;TOP: 180px"border="0" cellspacing="0" cellpadding="0">
<TBODY><TR><TD height=583 background=https://pic.imgdb.cn/item/6231dba55baa1a80ab38ce30.jpg>
<div class="mBox">
      <div id="pBox" class="pBox">
                <img alt="" src="https://pic.imgdb.cn/item/6231dbdc5baa1a80ab39425a.jpg" />
                <img alt="" src="https://pic.imgdb.cn/item/6231dbee5baa1a80ab39639f.jpg" />
                <img alt="" src="https://pic.imgdb.cn/item/6231dc005baa1a80ab398b80.jpg" />
                <img alt="" src="https://pic.imgdb.cn/item/6231dc165baa1a80ab39b343.jpg" />
                <img alt="" src="https://pic.imgdb.cn/item/6231dc295baa1a80ab39da10.jpg" />
               
      </div>
</div>
</TD></TR>
</table></div><BR><BR><BR><BR><BR><BR><BR>

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

<script language="javascript">
var ktv = document.getElementById('ktv');
document.getElementById('pBox').onclick=function(){ ktv.paused ? ktv.play() : ktv.pause(); }
</script>

绿叶清舟 发表于 2022-3-17 16:49

本帖最后由 绿叶清舟 于 2022-3-17 19:13 编辑 <br /><br /><DIV align=center color=#ff0000 >
<tablestyle="position: relative; LEFT: -320px; width:1200px;TOP: 180px"border="0" cellspacing="0" cellpadding="0">
<TBODY><TR><TD height=800 background=https://pic.imgdb.cn/item/6233157a5baa1a80ab2dde87.jpg>
<DIVstyle="MARGIN: 5px; position: relative; LEFT:898px; width:50px;height:30px;TOP: -255px">
<IMG border=0 src="https://pic.imgdb.cn/item/623317545baa1a80ab31b1c4.gif"width=50_height="30"></DIV>
</TD></TR>
</table></div><BR><BR><BR><BR><BR><BR><BR>

<style type="text/css">
#paDiv {
      margin: auto;
      width: 220px;
      display: flex;
      align-items: center;
      border: 1px solid olive;
      border-radius: 8px 0px 8px 0px;
      background: rgba(255, 255, 255, 0);
      box-shadow: 1px 1px 2px #000;
}
#jindu {
      position: relative;
      width: 200px;
      height: 8px;
      line-height: 8px;
      font-size: 10px;
      color: #000;
      text-align: center;
      background: linear-gradient(90deg, olive, tan, gold) no-repeat;
      background-size: 20px 0px;
}
#btn-ro {
      width: 20px; height: 20px;
      line-height: 20px; font-size: 12px;
      background: linear-gradient(blue, silver, red);
      outline:none;
      color: white;
      border-radius: 50%;
      text-align: center;
      cursor: pointer;
      animation: rol linear 2s infinite;
}

#btn-ro:hover { opacity: 0.8; }
#btn-ro:active { opacity: 1; }

@keyframes rol { to { transform:rotate(360deg); } }

</style>
<DIVstyle="position: relative; LEFT: -100px; TOP: -30px">
<div id="paDiv">
      <div id="btn-ro">·</div>
      <div id="jindu">
                <div id="jd-go"></div>
      </div>
</div>
</div>
<script language="javascript">

var btn = document.getElementById('btn-ro');
var jindu = document.getElementById('jindu');
var tips = document.getElementById('au-tips');
var aud = document.createElement('audio');

aud.src ="音乐";
aud.addEventListener('ended', function() { btn.style.animationPlayState="paused"; }, true);
aud.addEventListener('timeupdate', tmMsg, true);

aud.play();

function tmMsg(){ //进度条
      var jd = (100*aud.currentTime)/aud.duration;
      jindu.innerHTML = Math.ceil(jd) + "%";
      jindu.style.backgroundSize = jd+ "% 20px";
}

btn.onclick = function(){
      aud.paused ? (aud.play(), btn.style.animationPlayState="running") : (aud.pause(), btn.style.animationPlayState="paused");
}

</script>

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

本帖最后由 绿叶清舟 于 2022-3-18 20:04 编辑 <br /><br /><style type="text/css">
.fireBox {
      margin: auto;
      width: 500px;
      height: 300px;
      line-height: 300px;
      text-align: center;
      font-size: 4rem;
      font-weight: bold;
      color: #ff0000;
      background: ;
      text-shadow: 0 0 20px #fefcc9, 10px -10px 30px #feec85, -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, -20px -60px 60px #cd4606, 0 -80px 70px #973716, 10px -90px 80px #451b0e;
      animation: glow 1s linear infinite;
}

@keyframes glow {
      from {
                text-shadow:
                        0 0 20px #fefcc9,
10px -10px 30px #feec85,
-20px -20px 40px #ffae34,
20px -40px 50px #ec760c,
-20px -60px 60px #cd4606,
0 -80px 70px #973716,
10px -90px 80px #451b0e;
      }
      to {
                text-shadow:
   0 0 10px #fefcc9,
10px -10px 15px #feec85,
-20px -20px 20px #ffae34,
20px -40px 25px #ec760c,
-20px -60px 30px #cd4606,
0 -80px 35px #973716,
10px -90px 40px #451b0e;
      }
#paDiv {
      margin: auto;
      width: 220px;
      display: flex;
      align-items: center;
      border: 1px solid olive;
      border-radius: 8px 0px 8px 0px;
      background: rgba(255, 255, 255, 0);
      box-shadow: 1px 1px 2px #000;
}
#jindu {
      position: relative;
      width: 200px;
      height: 8px;
      line-height: 8px;
      font-size: 10px;
      color: #000;
      text-align: center;
      background: linear-gradient(90deg, olive, tan, gold) no-repeat;
      background-size: 20px 0px;
}
#btn-ro {
      width: 20px; height: 20px;
      line-height: 20px; font-size: 12px;
      background: linear-gradient(blue, silver, red);
      outline:none;
      color: white;
      border-radius: 50%;
      text-align: center;
      cursor: pointer;
      animation: rol linear 2s infinite;
}

#btn-ro:hover { opacity: 0.8; }
#btn-ro:active { opacity: 1; }

@keyframes rol { to { transform:rotate(360deg); }
}

</style>
<DIV align=center color=#ff0000 >
<tablestyle="position: relative; LEFT: -320px; width:1200px;TOP: 180px"border="0" cellspacing="0" cellpadding="0">
<TBODY><TR><TD height=800 background=https://pic.imgdb.cn/item/6234717d5baa1a80ab356ff8.jpg>
<DIVstyle="MARGIN: 5px; position: relative; LEFT:88px; width:50px;height:30px;TOP: 15px">
<div class="fireBox">烟火</div></DIV>
</TD></TR>
</table></div><BR><BR><BR><BR><BR><BR><BR>


<DIVstyle="position: relative; LEFT: -100px; TOP: -80px">
<div id="paDiv">
      <div id="btn-ro">·</div>
      <div id="jindu">
                <div id="jd-go"></div>
      </div>
</div>
</div>
<script language="javascript">

var btn = document.getElementById('btn-ro');
var jindu = document.getElementById('jindu');
var tips = document.getElementById('au-tips');
var aud = document.createElement('audio');

aud.src ="音乐";
aud.addEventListener('ended', function() { btn.style.animationPlayState="paused"; }, true);
aud.addEventListener('timeupdate', tmMsg, true);

aud.play();

function tmMsg(){ //进度条
      var jd = (100*aud.currentTime)/aud.duration;
      jindu.innerHTML = Math.ceil(jd) + "%";
      jindu.style.backgroundSize = jd+ "% 20px";
}

btn.onclick = function(){
      aud.paused ? (aud.play(), btn.style.animationPlayState="running") : (aud.pause(), btn.style.animationPlayState="paused");
}

</script>
页: 7 8 9 10 11 12 13 14 15 16 [17] 18 19 20
查看完整版本: 集中一下