Javascript 事件
[英]Javascript Events
問題描述
這些天我正在學習 Javascript 事件，同時通過 Javascript 事件構建我的媒體播放應用程序。 我不明白這個程序/代碼中使用的條件我只想清除我對這段代碼中的這些 if else 條件的概念，即音樂如何通過使用這個 if else 條件來播放和暫停？
var jukeBox = document.querySelector('ul.player'); jukeBox.addEventListener('click', function(e) { var songName = e.target.getAttribute('data-src'); var songPlaying = document.querySelector('#player'); if(songPlaying){ if(songPlaying.paused){ songPlaying.play(); e.target.id = 'playing'; }else{ songPlaying.pause(); e.target.id = 'pause'; } }else{ var audioPlayer = document.createElement('audio'); audioPlayer.id = 'player'; audioPlayer.src = songName; document.body.appendChild(audioPlayer); audioPlayer.play(); e.target.id = 'playing'; } }, false);
body { font: normal 15px/15px Helvetica; background: #259286; } ul.player { width: 180px; margin: 0 auto; margin-top: 100px; list-style: none; } ul.player li { border-bottom: 1px solid #999; color: #444; padding: 9px 5px 10px 40px; background: url(images/media_btn.png) no-repeat 8px 7px; background-color: #EAE3CB; background-position: 9px 4px; cursor: pointer; } ul.player li:first-child { -webkit-border-top-left-radius: 10px; -webkit-border-top-right-radius: 10px; border-top: none; } ul.player li:last-child { -webkit-border-bottom-left-radius: 10px; -webkit-border-bottom-right-radius: 10px; border-bottom: none; } ul.player li:hover { background-color: #475B62; color: #FCF4DC; } ul.player li#playing { background: url(images/media_play_btn.png) no-repeat 8px 7px; background-color: #FCF4DC; color: #2176C7; font-weight: bold; background-position: 9px 4px; } ul.player li#paused { background: url(images/media_pause_btn.png) no-repeat 8px 7px; background-color: #666; color: #FFF; font-weight: bold; background-position: 9px 4px; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Events</title> <link rel="stylesheet" href="style.css" /> </head> <body> <ul class="player"> <li data-src="audio/Phoebex.mp3">Phoebex</li> <li data-src="audio/AmazingLee.mp3">AmazingLee</li> <li data-src="audio/NightKitty.mp3">Night Kitty</li> <li data-src="audio/EqueKenox.mp3">Eque Kenox</li> <li data-src="audio/Shiloah.mp3">Shiloah</li> </ul> <script src="script.js"></script> </body> </html>
2 個解決方案
解決方案1
1 2021-06-21 16:13:53
一個很好的 JS 事件示例，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Drunk</h1>
<div id="prompt"></div>
</body>
<script src="drunk_events.js" asp-append-version="true"></script>
<script>
// testing
prompt = document.getElementById('prompt');
const drunk = new Drunk('Alice Cooper', 12);
drunk.Drink();
document.addEventListener("drunkMessages", e => {
prompt.textContent = e.detail.message;
});
</script>
</html>
// CUSTOM EVENT - by: Alan1963
var eventArgs = {
message: ''
};
const drunkMessagesEvent = new CustomEvent("drunkMessages", {
detail: eventArgs
});
// CLASS
class Drunk extends Event {
constructor(name, limit) {
super('drunkMessages');
this.name = name;
this.limit = limit;
}
Drink() {
const name = this.name;
const limit = this.limit;
const task = setInterval(timingTask, 1000);
var count = 0;
function timingTask() {
count++;
if (count > limit) {
eventArgs.message = name + ' go to sleep';
// stop timing task
clearInterval(task);
} else {
eventArgs.message = 'Drinking ' + count + ' of ' + limit;
}
document.dispatchEvent(drunkMessagesEvent);
}
}
}
解決方案2
0 2017-02-14 13:43:34
var songPlaying = document.querySelector('#player');
會在您的dom中搜索具有id播放器的元素。
接下來，當元素存在於您的dom中時， if(songPlaying)將為true。
僅當存在songPlaying時（不會為null），因此您將輸入if語句。 相反，如果不存在該元素，則該變量中將存在undefined，並且else語句將被執行。
CreateJS事件到Javascript事件
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.