【你的姑娘 - 隔壁老樊】一首老歌，@栀夏°，来听听
本帖最后由 II.〆石Zi° 于 2022-4-6 00:46 编辑 <br /><br /><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style>
.a_t{display:none!important}
.a_mu{display:none!important}
.scbar_txt_td{display:none!important}
.scbar_type_td{display:none!important}
.scbar_btn_td{display:none!important}
.scbar_hot_td{display:none!important}
//.pgs{display:none!important}
#wechat_float_qrcode{display:none!important}
.scrolltopa{display:none!important}
#scrolltop{display:none!important}
.returnlist{display:none!important}
.pstatus{display:none!important}
.tshare{display:none!important}
.a_pt, .a_pb{display:none!important}
</style>
<style>
.div_A{
width: 1000px;
height: 560px;
background: url('http://www.ii23.cn/data/attachment/forum/202002/15/155311uf50u2ul90lbo6lo.gif') no-repeat;
background-size:100% 100%;
}
.div_B{
width: 250px;
height: 530px;
background: url('http://www.ii23.cn/data/attachment/forum/202002/14/200807sf3jo7o3gxx7ih3k.png') no-repeat;
background-size:100% 100%;
transform:rotate(10deg);
}
</style>
<div class="div_A" style="width:1000px; height: 660px; left: -200px; top: -50px; position: relative;">
<div style="height:40px;left: 180px; top: 5px; position:absolute;">
<img width="40" height="40"src="http://www.ii23.cn/data/attachment/forum/201911/18/032129ntica8e7883rt3q3.png" border="0"></div>
<div style="height:35px;left: 225px; top: 12px; position:absolute;"> II.〆石Zi°音乐
</div>
<div class="div_B" style=" height: 530px; left: 375px; top: 80px; position: absolute;">
<title>II23休闲社区II.〆石Zi°特制，同步时间显示</title>
<scripttype="text/javascript">
function dated(){
var time=new Date();
var week;
switch (time.getDay()){
case 1: week="星期一"; break;
case 2: week="星期二"; break;
case 3: week="星期三"; break;
case 4: week="星期四"; break;
case 5: week="星期五"; break;
case 6: week="星期六"; break;
default: week="星期天";
}
var year=time.getFullYear();
var month=time.getMonth();
var date=time.getDate();
var hour=checked(time.getHours());
var minutes=checked(time.getMinutes());
document.getElementById("dated").innerHTML =year+"年"+(month+1)+"月"+date+"日 "+week;
document.getElementById("time1").innerHTML = hour+":"+minutes;
}
setInterval(dated,1000);
function checked(j){
if(j<10)
j='0'+j;
return j;
}
</script>
<font color="#ffffff"><span id="time1" style="font-size: 40px; font-family: 微软雅黑;left: 73px; top: 80px; width: 200px; position: absolute;" ><span></font>
<font color="#ffffff"><span id="dated" style="font-size: 10px; font-family: 微软雅黑;left: 65px; top: 130px; width: 200px; position: absolute;" ><span></font>
<div style="left: 20px; top: 320px; position:absolute;">
<title>II23休闲社区II.〆石Zi°特制音乐播放器，歌词同步，颜色风格可调</title>
<style>
@font-face{format("svg");
font-weight:400;font-style:normal}
.aplayer-narrow .aplayer-info{display:none}
.aplayer-withlrc.aplayer .aplayer-info{margin-left:0px;height:0px}
.aplayer-withlrc.aplayer .aplayer-lrc{display:block;}
.aplayer{
font-family: Arial,Helvetica,sans-serif;
margin: 0px;
box-shadow: 0 2px 2px 0 rgba(0,0,121,.14),0 3px 1px -2px rgba(0,0,121,.1),0 1px 5px 0 rgba(0,0,121,.12);/* 边框颜色等 */
border-radius: 5px;}/* 边框圆角 */
.aplayer span{cursor:default!important}
.aplayer{transform:rotate(1deg); height:130px;width:210px; background-color: rgba(0,0,0,0.01);}/* 播放器区域的大小、颜色 、颜色中的参数a可调整透明度*/
.aplayer :before,
.aplayer :before{font-family:aplayer-fontello;font-style:normal;font-weight:400;display:inline-block;text-decoration:inherit;text-align:center;font-variant:normal;text-transform:none; line-height:18px; font-size: 16px; color:#ffffFF; width:20px;height:20px; border:2px solid #ffffFF; border-radius: 16px; position:absolute;bottom:4px; left:4px;} /* 按钮圈大小、颜色、位置，按钮字体大小、颜色 */
.aplayer-lrc-content,.aplayer .aplayer-hide{display:none}
.aplayer-icon-play:before{content:'\25b6'}
.aplayer-icon-pause:before{content:'\2016'} /* 设置按钮键 */
.aplayer-bar-wrap{height:2px; width:100px;background: RoyalBlue;position:absolute;left:32px;bottom:15px; }/* 进度条长度、位置及未播放段颜色 */
.aplayer-bar{-webkit-transition:all .5s ease;transition:all .5s ease}
.aplayer-played{position:absolute;left:0px;bottom:-1px; background: #EA0000;height:5px}/* 进度条已播放段颜色 */
.aplayer-thumb:hover{background: #FFFF00;}
.aplayer-thumb{position:absolute;top:2px;right:5px;margin-top:-3px;margin-right:-10px;height:6px;width:6px;border:1px solid #EA0000; border-radius:50%;background: #EA0000;cursor:pointer!important;}/* 进度球大小及颜色 */
.aplayer-time{position:absolute;right:3px;bottom:8px;height:17px;color: #ffffff;font-size:10px}/* 时间 */
.aplayer-lrc{display:none;position:absolute; left:2px; top:17px; height:100px; width: 200px; text-align:center;overflow:hidden;margin:-10px 0 10px; filter:Alpha(opacity=0);BACKGROUND:transparent}/* 歌词区域大小，位置调整 */
.aplayer .aplayer-lrc p{font-size:14px;color: #ffffff;line-height:20px;padding:0;margin:0;-webkit-transition:all .5s ease-out;transition:all .5s ease-out;opacity:0.4} /* 歌词字体、颜色及大小，未播放歌词透明度 */
.aplayer-lrc p.aplayer-lrc-current{opacity:1}/* 正播放歌词透明度 */
.aplayer-lrc .aplayer-lrc-contents{width:100%;-webkit-transition:all .5s ease-out;transition:all .5s ease-out}
.demo {
margin: 0px auto;
align:center;
}
.demo p {
padding: 10px 0;
opacity: 1;
}
</style>
<div class="demo">
<p><strong></strong></p>
<div id="player3" class="aplayer">
<pre class="aplayer-lrc-content">
你的姑娘 - 隔壁老樊开始开开开开始
你的姑娘 - 隔壁老樊
说起你爱的姑娘
你把手指到了远方
你说你的姑娘很美
笑起来像个太阳
你爱的姑娘
如今她不在你的身旁
为了她持起了钢枪
说像个男人的模样
姑娘你的模样
就这样雕刻在我的心房
为了她跋山涉水
载满荣誉回到家乡
你爱的姑娘
在桥下洗着你最喜欢的衣裳
在家吃着粗茶淡饭
她在等你坐身旁
待你回到了家乡
她就不再是你爱的那个姑娘
她带着最爱的他
去追寻了阳光
你给她带来最美的情话
带来了最美的花
你说你想给她披上婚纱
然后把她带回家
姑娘你的模样
就这样雕刻在我的心房
为了她跋山涉水
载满荣誉回到家乡
你爱的姑娘
在桥下洗着你最喜欢的衣裳
在家吃着粗茶淡饭
她在等你坐身旁
姑娘你的模样
就这样雕刻在我的心房
为了她跋山涉水
载满荣誉回到家乡
你爱的姑娘
在桥下洗着你最喜欢的衣裳
在家吃着粗茶淡饭
她在等你坐身旁
在家吃着粗茶淡饭
她在等你坐身旁
</pre>
</div>
</div>
<script>
function APlayer(e)
{if(!("music"in e&&"title"in e.music&&"author"in e.music&&"url"in e.music&&"pic"in e.music))throw"APlayer Error: Music, music.title, music.author, music.url, music.pic are required in options";if(null===e.element)throw"APlayer Error: element option null";this.isMobile=navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)|(android)|(webOS)/i),this.isMobile&&(e.autoplay=!1);var a={element:document.getElementsByClassName("aplayer"),narrow:!1,autoplay:!1,showlrc:!1};for(var t in a)a.hasOwnProperty(t)&&!e.hasOwnProperty(t)&&(e=a);this.option=e}
APlayer.prototype.init=function(){function e(e)
{var a=e||window.event,i=(a.clientX-t(m.bar))/p;i=i>0?i:0,i=1>i?i:1,m.updateBar.call(m,"played",i,"width"),m.option.showlrc&&m.updateLrc.call(m,parseFloat(m.playedBar.style.width)/100*m.audio.duration),m.element.getElementsByClassName("aplayer-ptime").innerHTML=m.secondToTime(i*m.audio.duration)}function a(){document.removeEventListener("mouseup",a),document.removeEventListener("mousemove",e),m.audio.currentTime=parseFloat(m.playedBar.style.width)/100*m.audio.duration,m.play()}function t(e){for(var a,t=e.offsetLeft,i=e.offsetParent;null!==i;)t+=i.offsetLeft,i=i.offsetParent;return a=document.body.scrollLeft+document.documentElement.scrollLeft,t-a}function i(e){for(var a,t=e.offsetTop,i=e.offsetParent;null!==i;)t+=i.offsetTop,i=i.offsetParent;return a=document.body.scrollTop+document.documentElement.scrollTop,t-a}
if(this.element=this.option.element,this.music=this.option.music,this.option.showlrc)
{this.lrcTime=[],this.lrcLine=[];for(var l=this.element.getElementsByClassName("aplayer-lrc-content").innerHTML,s=l.split(/\n/),n=/\[(\d{2}):(\d{2})\.(\d{2})]/,r=/](.*)$/,o=0;o<s.length;o++)
{var d=n.exec(s),c=r.exec(s);d&&c&&(this.lrcTime.push(60*parseInt(d)+parseInt(d)+parseInt(d)/100),this.lrcLine.push(c))}}
if(this.element.innerHTML='<div class="aplayer-pic"><img src="'+this.music.pic+'"><div class="aplayer-button aplayer-pause aplayer-hide"><i class="demo-icon aplayer-icon-pause"></i></div><div class="aplayer-button aplayer-play"><i class="demo-icon aplayer-icon-play"></i></div></div><div class="aplayer-info"><div class="aplayer-music"><span class="aplayer-title">'+this.music.title+'</span><span class="aplayer-author">努力加载中,好累啊</span></div><div class="aplayer-lrc"><div class="aplayer-lrc-contents" style="transform: translateY(0);"></div></div><div class="aplayer-controller"><div class="aplayer-bar-wrap"><div class="aplayer-bar"><div class="aplayer-loaded" style="width: 0"></div><div class="aplayer-played" style="width: 0"><span class="aplayer-thumb"></span></div></div></div><div class="aplayer-time"><span class="aplayer-ptime">00:00</span> / <span class="aplayer-dtime">(oﾟ▽ﾟ)</span><div class="aplayer-volume-wrap"><i class="demo-icon aplayer-icon-volume-down"></i><div class="aplayer-volume-bar-wrap"><div class="aplayer-volume-bar"><div class="aplayer-volume" style="height: 80%"></div></div></div></div></div></div></div>',this.option.showlrc){this.element.classList.add("aplayer-withlrc");var u="";for(this.lrcContents=this.element.getElementsByClassName("aplayer-lrc-contents"),o=0;o<this.lrcLine.length;o++)u+="<p>"+this.lrcLine+"</p>";this.lrcContents.innerHTML=u,this.lrcIndex=0,this.lrcContents.getElementsByTagName("p").classList.add("aplayer-lrc-current")}this.option.narrow&&this.element.classList.add("aplayer-narrow"),this.audio=document.createElement("audio"),this.audio.src=this.music.url,this.audio.loop=!0,this.audio.preload="metadata";var m=this;this.audio.addEventListener("durationchange",function(){1!==m.audio.duration&&(m.element.getElementsByClassName("aplayer-dtime").innerHTML=m.secondToTime(m.audio.duration))}),this.audio.addEventListener("loadedmetadata",function(){m.element.getElementsByClassName("aplayer-author").innerHTML=m.music.author,m.loadedTime=setInterval(function(){var e=m.audio.buffered.end(m.audio.buffered.length-1)/m.audio.duration;m.updateBar.call(m,"loaded",e,"width"),1===e&&clearInterval(m.loadedTime)},500)}),this.audio.addEventListener("error",function(){m.element.getElementsByClassName("aplayer-author").innerHTML="歌曲链接失效"}),this.playButton=this.element.getElementsByClassName("aplayer-play"),this.pauseButton=this.element.getElementsByClassName("aplayer-pause"),this.playButton.addEventListener("click",function(){m.play.call(m)}),this.pauseButton.addEventListener("click",function(){m.pause.call(m)}),this.playedBar=this.element.getElementsByClassName("aplayer-played"),this.loadedBar=this.element.getElementsByClassName("aplayer-loaded"),this.thumb=this.element.getElementsByClassName("aplayer-thumb"),this.bar=this.element.getElementsByClassName("aplayer-bar");var p;this.bar.addEventListener("click",function(e){var a=e||window.event;p=m.bar.clientWidth;var i=(a.clientX-t(m.bar))/p;m.updateBar.call(m,"played",i,"width"),m.element.getElementsByClassName("aplayer-ptime").innerHTML=m.secondToTime(i*m.audio.duration),m.audio.currentTime=parseFloat(m.playedBar.style.width)/100*m.audio.duration}),this.thumb.addEventListener("mousedown",function(){p=m.bar.clientWidth,clearInterval(m.playedTime),document.addEventListener("mousemove",e),document.addEventListener("mouseup",a)}),this.audio.volume=.8,this.volumeBar=this.element.getElementsByClassName("aplayer-volume");var y=this.element.getElementsByClassName("aplayer-volume-bar"),h=m.element.getElementsByClassName("aplayer-time").getElementsByTagName("i"),v=35;this.element.getElementsByClassName("aplayer-volume-bar-wrap").addEventListener("click",function(e){var a=e||window.event,t=(v-a.clientY+i(y))/v;t=t>0?t:0,t=1>t?t:1,m.updateBar.call(m,"volume",t,"height"),m.audio.volume=t,m.audio.muted&&(m.audio.muted=!1),1===t?h.className="demo-icon aplayer-icon-volume-up":h.className="demo-icon aplayer-icon-volume-down"}),h.addEventListener("click",function(){m.audio.muted?(m.audio.muted=!1,h.className=1===m.audio.volume?"demo-icon aplayer-icon-volume-up":"demo-icon aplayer-icon-volume-down",m.updateBar.call(m,"volume",m.audio.volume,"height")):(m.audio.muted=!0,h.className="demo-icon aplayer-icon-volume-off",m.updateBar.call(m,"volume",0,"height"))}),this.option.autoplay&&this.play()},APlayer.prototype.play=function(){this.playButton.classList.add("aplayer-hide"),this.pauseButton.classList.remove("aplayer-hide"),this.audio.play();var e=this;this.playedTime=setInterval(function(){e.updateBar.call(e,"played",e.audio.currentTime/e.audio.duration,"width"),e.option.showlrc&&e.updateLrc.call(e),e.element.getElementsByClassName("aplayer-ptime").innerHTML=e.secondToTime(e.audio.currentTime)},100)},APlayer.prototype.pause=function(){this.pauseButton.classList.add("aplayer-hide"),this.playButton.classList.remove("aplayer-hide"),this.audio.pause(),clearInterval(this.playedTime)},APlayer.prototype.updateBar=function(e,a,t){a=a>0?a:0,a=1>a?a:1,this.style=100*a+"%"},APlayer.prototype.updateLrc=function(e){if(e||(e=this.audio.currentTime),e<this.lrcTime||e>=this.lrcTime)for(var a=0;a<this.lrcTime.length;a++)e>=this.lrcTime&&(!this.lrcTime||e<this.lrcTime)&&(this.lrcIndex=a,this.lrcContents.style.transform="translateY("+20*-this.lrcIndex+"px)",this.lrcContents.getElementsByClassName("aplayer-lrc-current").classList.remove("aplayer-lrc-current"),this.lrcContents.getElementsByTagName("p").classList.add("aplayer-lrc-current"))},APlayer.prototype.secondToTime=function(e){var a=function(e){return 10>e?"0"+e:""+e},t=parseInt(e/60),i=parseInt(e-60*t);return a(t)+":"+a(i)};
</script>
<script>
var ap3 = new APlayer({
element: document.getElementById('player3'),
narrow: false,
autoplay: true,
showlrc: true,
music: {
title: '',
author: '',
url: 'https://music.163.com/song/media/outer/url?id=1356499052.mp3', /* 歌曲地址 */
pic: ''
}
});
ap3.init();
</script>
</div>
</div>
</div> 本帖显示当前时间的代码研究半天 手机版的歌
后面的背景我喜欢 哇，这贴相当豪华了
背景好看，手机处理得很真实，很有立体感，
特别是手机上的时间实时显示，应该是很需要技术的，赞赞赞
老樊的歌，也都挺喜欢的。一首民谣，一个故事。听听～ 本帖最后由 煙ル 于 2020-2-14 23:45 编辑
帖子做的真好看，后面的背景我记得老大有一个贴子里写过，手机做的真好很形象，当前的时间，同步滚动的歌词，综合到一起，反正我是不会做这个帖子，好复杂，可惜没分了送不了，老大，一天就能送10分，能不能让多送点啊，。。。{:eb343:} 好听的民谣
音乐里满是
沧桑都是故事
帖子不错，歌曲好听 煙ル 发表于 2020-2-14 23:41
帖子做的真好看，后面的背景我记得老大有一个贴子里写过，手机做的真好很形象，当前的时间，同步滚动的歌词 ...
哈哈，10分有点太少了，至少也得加到30分{:2_266:} 沧桑伤感的音乐，有些爱，耻于唇齿，掩于岁月！ 画面的感觉特别棒 栀夏° 发表于 2020-2-15 09:11
哈哈，10分有点太少了，至少也得加到30分
对呗，本来社区好看的贴子就多，喜欢的人也多，不够分{:eb343:}，关键是还得回礼呢！来而不往非礼也。。。。 煙ル 发表于 2020-2-15 10:34
对呗，本来社区好看的贴子就多，喜欢的人也多，不够分，关键是还得回礼呢！来而不往非礼也。。 ...
哈哈，可能管理们也有他们的考虑，分值给多了评分就泛滥了
喜欢的人，你可以做贴送她们。。看好你，加油{:2_256:} 栀夏° 发表于 2020-2-15 10:37
哈哈，可能管理们也有他们的考虑，分值给多了评分就泛滥了
喜欢的人，你可以做贴送她们。。看好你，加油 ...
嗯嗯，好的，这主意好 栀夏° 发表于 2020-2-15 09:11
哈哈，10分有点太少了，至少也得加到30分
30分还是少，俺50分一天都不够加的，害俺现在很控制加分，原创多了都想支持
这是三星手机吧，O(∩_∩)O哈哈~ 煙ル 发表于 2020-2-14 23:41
帖子做的真好看，后面的背景我记得老大有一个贴子里写过，手机做的真好很形象，当前的时间，同步滚动的歌词 ...
需要代码权限才可以做出来的。 片片枫叶情 发表于 2020-2-15 10:44
这是三星手机吧，O(∩_∩)O哈哈~
不是，是华为MATE30 輪茴、誰等誰 发表于 2020-2-15 10:44
30分还是少，俺50分一天都不够加的，害俺现在很控制加分，原创多了都想支持
哈哈，我只要没发帖，还是够用的，一般只给原创贴和音乐贴加分{:2_260:} 手机看这画面非常美，只有想不到没有做不到，有人喜欢帖量多 有人喜欢追求帖子技术含量，真不错给120分，我手机听不到，先来欣赏欣赏支持一下，夏收贴开心哈
栀夏° 发表于 2020-2-15 10:46
不是，是华为MATE30
没有用过也没有看过，不知道呢，谢谢。
页:
[1]
2