本帖最后由 加林森 于 2022-2-19 23:17 编辑 <br /><br />大猫咪 发表于 2021-11-18 20:42
我一进去就飞出来不知道为什么
没有飞出来啊，我还给评分了的啊。
<style type="text/css">
#auVol {
width:100px;
height:10px;
border:1px solid;
background:linear-gradient(90deg, green, green) no-repeat;
cursor:pointer;
}
</style>
<p><audio id="aud" src="http://www.kumeiwp.com/sub/filestores/2022/02/16/31f3a3b330cbff91f59d05248cf41694.mp3" autoplay="autoplay" loop="loop" controls="controls"></audio><br></p>
<div id="auVol"></div>
<script language="javascript">
var auVol = document.getElementById('auVol'); //音量模拟条标识
var aud = document.getElementById('aud'); //audio元素标识
var canDo = false; //拖动布尔标识
auVol.style.backgroundSize = aud.volume *100 + "%"; //音量条初始状态
auVol.onmousemove = function(){ //音量控制
if(canDo) { // 如果鼠标已经按下
let w = offset(auVol,"left");
let x = (event.clientX - w) * 100 / this.clientWidth;
this.style.backgroundSize = x + "%";
//console.log(x);
aud.volume = x / 100;
}
}
//几个鼠标动作事件：控制 canDu 布尔值
auVol.onmousedown = function(){ canDo = true; }
auVol.onmouseout = function(){ canDo = false; }
auVol.onmouseup = function(){ canDo = false; }
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;
}
</script>
本帖最后由 加林森 于 2022-2-19 22:46 编辑 <br /><br />马黑黑 发表于 2021-11-15 21:28
看见没
可以看见的
<style>
#bigPa { position: relative; width: 1000px; left:-203px; height: 569px; background:#333 url('https://pic.imgdb.cn/item/6210e90f2ab3f51d91aca320.jpg') no-repeat center/cover; box-shadow: 0 0 0 2px #111;}
#gcDiv { width: 300px; float: right; }
#paDiv { position: relative; top: 10px; 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, 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; }
#lrcDiv { position: relative; top: 20px; color: #A4D1D7; font-size: 1em; text-shadow: 1px 1px 2px #000; }
#btn-ro:hover { opacity: 0.8; }
#btn-ro:active { opacity: 1; }
@keyframes rol { to { transform:rotate(360deg); } }
</style>
<div id="bigPa">
<div id="gcDiv">
<!-- 播放器开始 -->
<div id="paDiv">
<div id="btn-ro">·</div><!-- 播放按钮 -->
<div id="jindu"><div id="jd-go"></div></div>
</div>
<!-- 播放器结束 -->
<div id="lrcDiv">歌词同步显示</div>
</div>
</div>
<script language="javascript">
var lrcAr=[
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
var lrcDiv = document.getElementById('lrcDiv');
var btn = document.getElementById('btn-ro');
var jindu = document.getElementById('jindu');
var aud = document.createElement('audio');
// 音乐地址放在下行引号内
aud.src = "https://www.joy127.com/url/88685.mp3";
aud.loop = true;
aud.autoplay = true;
aud.addEventListener('ended', function() { btn.style.animationPlayState="paused"; }, true);
aud.addEventListener('timeupdate', tmMsg, true);
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;
jindu.innerHTML = "- " + auMs +":" + auSs;
let jd = (100*aud.currentTime)/aud.duration;
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");
}
//处理lrc歌词数组：时间转换成秒
for(j=0; j<lrcAr.length; j++){
lrcAr = toSec(lrcAr);
}
//lrc时间信息转为秒
function toSec(lrcTime) {
let tmpAr = lrcTime.split(':');
lrcTime = tmpAr * 60 + parseInt(tmpAr);
return lrcTime;
}
//同步显示歌词
aud.ontimeupdate = function() {
let tt = this.currentTime;
for(j=0; j<lrcAr.length; j++){
if(tt > lrcAr) lrcDiv.innerHTML = lrcAr;
}
}
</script>
加林森 发表于 2021-11-18 21:04
没有飞出来啊，我还给评分了的啊。
哈哈 我，老黑，小千羽都飞出来了，现在都进不去
队长我进不去，你用清舟链接换上去看看{:4_190:}
大猫咪 发表于 2021-11-18 21:09
队长我进不去，你用清舟链接换上去看看
你怎么进不去了啊？我都可以进去的啊。
大猫咪 发表于 2021-11-18 21:05
哈哈 我，老黑，小千羽都飞出来了，现在都进不去
我再去看看。
加林森 发表于 2021-11-18 21:31
我再去看看。
哈哈队长换下面少校的链接看看
大猫咪 发表于 2021-11-18 21:38
哈哈队长换下面少校的链接看看
好的，我试一试。
<iframe src="//player.bilibili.com/player.html?aid=96221662&bvid=BV1ME41137ia&cid=164264398&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
本帖最后由 加林森 于 2022-2-20 10:27 编辑 <br /><br />@大猫咪你来看看。
<style type="text/css">
.paBox { /* 父框 */
margin: 10px auto;
width: 1024px;
height: 640px;
position: relative;
background: #000 url('https://pic.imgdb.cn/item/620241d22ab3f51d91132fea.jpg') no-repeat;
left: -210px;
}
/* 父框和 .soBox 的伪元素共同样式 */
.paBox::before, .paBox::after, .soBox::before, .soBox::after {
content: "";
position: absolute;
width: 500px; height: 2px;
background: silver;
left: 300px; top: 230px;
opacity: 0.1;
transform-origin: center center;
/* 父框和 .soBox 的伪元素共同样式 */
.paBox::before, .paBox::after, .soBox::before, .soBox::after {
content: "";
position: absolute;
width: 500px; height: 2px;
background: silver;
left: 300px; top: 230px;
opacity: 0.1;
transform-origin: center center;
}
/* 父框和 .soBox 的伪元素各自的动画样式 */
.paBox::before { animation: fly 2s linear infinite alternate;}
.paBox::after { height: 4px; animation: fly 5s linear infinite;}
.soBox::before { animation: fly 3s linear infinite;}
.soBox::after { height: 5px; animation: fly 1s linear infinite alternate;}
<script language="javascript">
var mu = document.getElementById('ymusic');
var roBtn = document.getElementById('roBox');
mu.autoplay ? roBtn.style.animationPlayState="running" : roBtn.style.animationPlayState="paused";
mu.addEventListener("ended", function(){ roBtn.style.animationPlayState="paused"; })
roBtn.onclick = function(){ mu.paused ? (mu.play(), roBtn.style.animationPlayState="running") : (mu.pause(), roBtn.style.animationPlayState="paused"); }
</script>
加林森 发表于 2021-11-18 21:53
@大猫咪你来看看。
可以了队长不飞了 {:4_170:} 辛苦 {:4_179:}
大猫咪 发表于 2021-11-18 21:55
可以了队长不飞了 辛苦
现在就是把他调大就行了。{:4_173:}
加林森 发表于 2021-11-18 21:05
可以看见的
那不错
加林森 发表于 2021-11-18 21:03
应该的啊
嗯嗯，点个赞
马黑黑 发表于 2021-11-18 22:52
那不错
是的是的
马黑黑 发表于 2021-11-18 22:52
嗯嗯，点个赞
谢谢老兄啊