元诗酒 发表于 2022-2-15 13:55

祝福大家元宵节快乐！


<style>
#bigPa { position: relative; left: 10px; top: 100px; width: 700px; height: 446.25px; background:#333 url('https://www.huachaowang.com/data/attachment/forum/202202/15/055502mxeljs64qx00zl6l.gif') no-repeat center/cover; box-shadow: 0 0 0

2px #111;}
#paDiv { position: relative; left: 140px; top: 160px; width: 220px; display: flex; align-items: center; border: 1px solid olive;

border-radius: 8px 0px 8px 0px; background: rgba(238, 119, 221,.3); 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, gold, 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>
<p style="position: absolute; left:280px; top:340px; color: #FFD700;"><marqueescrollamount="3" direction="left" >祝福花潮的朋友们上

元佳节快乐！</marquee></p>
</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://music.163.com/song/media/outer/url?id=5237182.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-15 13:56

谢谢风动东方来的图图，看到回帖里的图图，拿来做个帖子。
谢谢马黑黑的代码，代码很漂亮。

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

好喜庆的祝福帖。{:4_199:}

元杉 发表于 2022-2-15 16:26

十九是个有才的主，好图好帖好祝福

元杉 发表于 2022-2-15 16:37

元宵快乐呀元诗酒

元诗酒 发表于 2022-2-15 19:36

加林森 发表于 2022-2-15 16:23
好喜庆的祝福帖。

谢谢，元宵节快乐。

元诗酒 发表于 2022-2-15 19:37

元杉 发表于 2022-2-15 16:37
元宵快乐呀元诗酒

谢谢元杉帅帅，节日快乐。

元时时 发表于 2022-2-15 19:38

真喜庆！
祝福大家元宵节快乐！喝酒吃汤圆{:4_204:}

元诗酒 发表于 2022-2-15 19:48

元时时 发表于 2022-2-15 19:38
真喜庆！
祝福大家元宵节快乐！喝酒吃汤圆

谢谢，一起吃汤圆。

元时时 发表于 2022-2-15 19:49

元诗酒 发表于 2022-2-15 19:48
谢谢，一起吃汤圆。

出家人可以吃不，{:4_170:}

元时而 发表于 2022-2-15 19:49

元诗酒 发表于 2022-2-15 19:48
谢谢，一起吃汤圆。

一起吃汤圆，不然天天吃肉太腻了

元诗酒 发表于 2022-2-15 19:50

元时而 发表于 2022-2-15 19:49
一起吃汤圆，不然天天吃肉太腻了

也有鲜肉汤圆的啊{:5_117:}

元诗酒 发表于 2022-2-15 20:04

元时时 发表于 2022-2-15 19:49
出家人可以吃不，

又不是酒心巧克力{:5_117:}

加林森 发表于 2022-2-15 20:31

元诗酒 发表于 2022-2-15 19:36
谢谢，元宵节快乐。

不客气的。也祝你元宵节快乐！{:4_187:}
页: [1]
查看完整版本: 祝福大家元宵节快乐！