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

css設置音樂播放

錢良釵2年前9瀏覽0評論

在網頁設計中,音樂播放是一個非常常見也非常有趣的功能。使用web技術,我們可以通過CSS來為網頁添加音樂播放器,并且可以自定義音樂播放器的樣式。

/* css樣式 */
audio {
width: 300px;
height: 30px;
margin-top: 20px;
}
/* 音樂播放器圖片 */
.play {
width: 20px;
height: 20px;
margin-left: 5px;
background-image: url('./play.png');
background-size: cover;
cursor: pointer;
}
.pause {
width: 20px;
height: 20px;
margin-left: 5px;
background-image: url('./pause.png');
background-size: cover;
cursor: pointer;
}

以上是一個基本的音樂播放器樣式,使用了audio標簽來添加音樂播放器,使用了css樣式來控制音樂播放器的大小和位置。

另外,我們還可以添加播放、暫停圖標,并通過JavaScript來控制音樂的播放和暫停。

/* JavaScript */
var audio = document.querySelector('audio');
var playBtn = document.querySelector('.play');
var pauseBtn = document.querySelector('.pause');
/* 添加播放和暫停事件 */
playBtn.addEventListener('click', function() {
audio.play();
playBtn.style.display = 'none';
pauseBtn.style.display = 'block';
});
pauseBtn.addEventListener('click', function() {
audio.pause();
playBtn.style.display = 'block';
pauseBtn.style.display = 'none';
});

以上是一個簡單的使用CSS和JavaScript來實現網頁音樂播放的代碼,使用時只需要將音樂文件和播放圖標添加到相應的位置即可。