色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

html怎么設置懸浮播放器

林子帆2年前11瀏覽0評論

HTML是網頁開發的基礎技術之一,它可以用來設置許多網頁制作中的組件,其中懸浮播放器就是其中之一。以下是如何使用HTML來設置懸浮播放器的步驟:

<!DOCTYPE html>
<html>
<head>
<style>
/*設置播放器樣式*/
#player {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 70px;
background-color: #f2f2f2;
z-index: 9999;
display: none;
/*不顯示默認狀態*/
}
#player .control {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body><div id="player">
<div class="control">
<button id="play-btn">播放</button>
<button id="pause-btn">暫停</button>
<audio src="music.mp3"></audio>
</div>
</div>
<script>
//JavaScript代碼,實現播放器的控制
const player = document.querySelector("#player");
const audio = document.querySelector("audio");
const playBtn = document.querySelector("#play-btn");
const pauseBtn = document.querySelector("#pause-btn");
//播放按鈕事件
playBtn.addEventListener("click", function() {
audio.play();
player.style.display = "block";
});
//暫停按鈕事件
pauseBtn.addEventListener("click", function() {
audio.pause();
player.style.display = "none";
});
</script>
</body>
</html>

以上代碼設置了一個懸浮在網頁底部的播放器,并添加了播放和暫停按鈕,當點擊播放按鈕時,播放器將顯示,并開始播放音樂;當點擊暫停按鈕時,播放器將隱藏,并停止播放音樂。