论坛 › 欢乐水吧 › 《离弦》（古筝欣赏）

加林森 发表于 2022-2-23 22:35

《离弦》（古筝欣赏）

<style>

#bigPa { position: relative; left:- 100px; width: 800px; height: 450px; background:#333 url('https://pic.imgdb.cn/item/621645e32ab3f51d9154db40.jpg') no-repeat center/cover; box-shadow: 0 0 0 2px #111;}
#gcDiv { width: 500px; float: right; column-count:2; color: #eee; font-size: 1em; text-shadow: 1px 1px 1px #111; }
#paDiv { position: relative; left: 10px; 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; }
#btn-ro:hover { opacity: 0.8; }
#btn-ro:active { opacity: 1; }
@keyframes rol { to { transform:rotate(360deg); } }

</style>

<div id="bigPa">
        <div id="paDiv">
                <div id="btn-ro">·</div>
                <div id="jindu">
                        <div id="jd-go"></div>
                </div>
        </div>
      </div>
</div>

<script language="javascript">

var btn = document.getElementById('btn-ro');
var jindu = document.getElementById('jindu');
var aud = document.createElement('audio');
aud.loop = true;
// 音乐地址放在下行引号内
aud.src = "https://www.joy127.com/url/88721.mp3";
aud.addEventListener('ended', function() { btn.style.animationPlayState="paused"; }, true);
aud.addEventListener('timeupdate', tmMsg, true);
aud.play();

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");
}

</script>

加林森 发表于 2022-2-24 23:13

杨柳青 发表于 2022-2-24 23:09
有道理~~

我不懂视频的玩法啊。

小辣椒 发表于 2022-2-23 22:41

队长很喜欢这个播放器{:4_173:}

小辣椒 发表于 2022-2-23 22:43

队长这个图图很雅致，漂亮的{:4_199:}

加林森 发表于 2022-2-23 22:43

小辣椒 发表于 2022-2-23 22:41
队长很喜欢这个播放器

是的，很一特色的嘛。

加林森 发表于 2022-2-23 22:44

小辣椒 发表于 2022-2-23 22:43
队长这个图图很雅致，漂亮的

选的好看图片。

小辣椒 发表于 2022-2-23 22:50

加林森 发表于 2022-2-23 22:44
选的好看图片。

是的，图图漂亮对帖子也是起了养眼的效果，增队长加欣赏度
队长下了，昨天晚上睡太迟了

晚安了

加林森 发表于 2022-2-23 22:55

好的。晚安，拜拜！

红影 发表于 2022-2-23 23:09

好听又好看{:4_187:}

马黑黑 发表于 2022-2-23 23:13

队长越做越上手了

加林森 发表于 2022-2-23 23:16

红影 发表于 2022-2-23 23:09
好听又好看

谢谢红影。{:4_187:}

加林森 发表于 2022-2-23 23:18

马黑黑 发表于 2022-2-23 23:13
队长越做越上手了

在你指导下不会错的。{:4_190:}

马黑黑 发表于 2022-2-23 23:18

加林森 发表于 2022-2-23 23:18
在你指导下不会错的。

关键是自己领悟、尝试

杨柳青 发表于 2022-2-23 23:26

漂亮~~~~

加林森 发表于 2022-2-23 23:31

马黑黑 发表于 2022-2-23 23:18
关键是自己领悟、尝试

是的是的

加林森 发表于 2022-2-23 23:34

杨柳青 发表于 2022-2-23 23:26
漂亮~~~~

温暖温暖，我要睡觉了。今天有点累。谢谢小青青送的礼物、

加林森 发表于 2022-2-23 23:42

马黑黑 发表于 2022-2-23 23:18
关键是自己领悟、尝试

明白的。谢谢你！

加林森 发表于 2022-2-23 23:44

杨柳青 发表于 2022-2-23 23:26
漂亮~~~~

谢谢支持！{:4_187:}

马黑黑 发表于 2022-2-24 12:06

加林森 发表于 2022-2-23 23:42
明白的。谢谢你！

{:5_108:}

马黑黑 发表于 2022-2-24 12:07

加林森 发表于 2022-2-23 23:31
是的是的

{:4_180:}

加林森 发表于 2022-2-24 12:40

马黑黑 发表于 2022-2-24 12:07


谢茶

查看完整版本: 《离弦》（古筝欣赏）