我的 Javascript 代码无法正常工作
[英]My Javascript code doesn't work properly
问题描述
var audio, playbtn, mutebtn, seek_bar; function initAudioPlayer() { audio = new Audio(); audio.src = "nineDays.mp3"; audio.loop = true; audio.play(); // Set object references playbtn = document.getElementById("playpausebtn"); mutebtn = document.getElementById("mutebtn"); // Add Event Handling playbtn.addEventListener("click", playPause); mutebtn.addEventListener("click", mute); // Functions function playPause() { if (audio.paused) { audio.play(); playbtn.style.background = "url(video_pause.png) no-repeat"; } else { audio.pause(); playbtn.style.background = "url(play.png) no-repeat"; } } function mute() { if (audio.muted) { audio.muted = false; mutebtn.style.background = "url(speaker.png) no-repeat"; } else { audio.muted = true; mutebtn.style.background = "url(mute.png) no-repeat"; } } } window.addEventListener("load", initAudioPlayer);
body { background: #282828; color: white; font-family: sans-serif; } .nav { display: flex; justify-content: flex-end; position: absolute; width: 100%; top: 0; left: 0; list-style-type: none; } li a { color: white; text-decoration: none; padding: 0 10px; } h1 { font-size: 13px; margin-bottom: 80%; margin-right: 50%; font-family: 'Montserrat'; } .container { padding-top: 8%; } button { border: none; cursor: pointer; outline: none; } button#playpausebtn { background: url(video_pause.png) center center no-repeat; background-size: cover; margin-left: 20px; marging-top: 35px; width: 20px; height: 15px; } button#mutebtn { background: url(speaker.png) center center no-repeat; background-size: cover; margin-top: 35px; width: 25px; height: 20px; } .soundNav { position: absolute; width: 20%; height: 30px; z-index: 99999; }
<body> <div class="soundNav"> <button id="playpausebtn"></button> <button id="mutebtn"></button> </div> <ul class="nav nav-tabs"> <li role="presentation"><a href="Final%20project.html">Home</a> </li> <li role="presentation"><a href="page2.html">About me</a> </li> <li role="presentation" class="active"><a href="page3.html">Work</a> </li> <li role="presentation"><a href="contactme.html">Get In Touch</a> </li> </ul> <div class="container"> <div class="row"> <div class="col-sm-12"> <div id="my-slider" class="carousel slide" data-ride="carousel"> <!--Indicators dot nav--> <ol class="carousel-indicators"> <li data-target="#my-slider" data-slide-to="0" class="active"></li> <li data-target="#my-slider" data-slide-to="1"></li> <li data-target="#my-slider" data-slide-to="2"></li> <li data-target="#my-slider" data-slide-to="3"></li> </ol> <!--wrapper for slides--> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="1.jpg" alt="Ed Sheeran Concert, Blossom Center, August2016" /> <div class="carousel-caption"> <h1> © Ed Sheeran Concert at Blossom Center</br> August 2015 </h1> </div> </div> <div class="item"> <img src="5.jpg" alt="Ed Sheeran Concert, Blossom Center, August2016" /> <div class="carousel-caption"> <h1> </br> </h1> </div> </div> <div class="item"> <img src="6.jpg" alt="Ed Sheeran Concert, Blossom Center, August2016" /> <div class="carousel-caption"> <h1> </br> </h1> </div> </div> <div class="item "> <img src="2.jpg" alt="Ed Sheeran Concert, Blossom Center, August2016" /> <div class="carousel-caption"> <h1> </h1> </div> </div> <!--controls or next and prev buttons--> <a class="left carousel-control" href="#my-slider" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#my-slider" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> </div> </div> </div> </div> </div> </body> </html>
我试图了解问题是什么 - 每当有人打开页面时，音乐就会开始。 我希望用户能够随时暂停或静音音乐。 这工作正常，除了我的图标不会显示，因为它们被隐藏了。 一切都在同一个文件夹中。 我想使用字形，但我不知道如何在 javascript 中使用它们。
1 个解决方案
解决方案1
0 已采纳 2016-05-03 15:56:22
javascript 风格的语法有点不同。 用
mutebtn.style.backgroundImage = "url('mute.png') no-repeat";
并确保 ./mute.png 存在且可读
为什么我的 JavaScript 代码无法正常更新 select 选项？
[英]Why doesn't my JavaScript code work properly to update select options?
我的带有classList.toggle的JavaScript代码无法正常工作
[英]my javascript code with classList.toggle doesn't work well
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.