我有一个 html 演示幻灯片播放器的代码，但变量"b"以某种方式将数字添加到其中，我似乎无法弄清楚为什么。
function loadSong(songname){
b = 1;
console.log(b);
var html = slidehtml(songname,b);
if(vr_on){
vr.innerHTML = html;
}
display.innerHTML = html;
window.addEventListener("keydown", function(){
if(event.which == 37){
b = b - 1;
if(b <= 0){b = 1;}
if(vr_on){
vr.innerHTML = slidehtml(songname,b);
}
display.innerHTML = slidehtml(songname,b);
console.log(b);
}
if(event.which == 39){
b = b + 1;
if(b > song_count(songname)){b = song_count(songname);}
if(vr_on){
vr.innerHTML = slidehtml(songname,b);
}
console.log(b);
display.innerHTML = slidehtml(songname,b);
}
});
}
另外，以下是上述脚本中使用的其他函数
function song_count(a){
if(a == 'pitb'){return 8;}
if(a == 'hgta'){return 16;}
if(a == 'hpdo'){return 4;}
if(a == 'ismp'){return 8;}
if(a == 'saip'){return 8;}
if(a == 'ogsj'){return 8;}
if(a == 'torc'){return 12;}
if(a == 'sufj'){return 6;}
if(a == 'tmlb'){return 4;}
if(a == 'gwsn'){return 2;}
if(a == 'jlm0'){return 6;}
if(a == 'tpoc'){return 8;}
if(a == 'wisc'){return 4;}
if(a == 'ynic'){return 13;}
if(a == 's_fs'){return 40;}
}
function showSlide(a) {
var c = "<img src='slides/" + a + ".jpeg'>";
if(vr_on){
vr.innerHTML = c;
}
display.innerHTML = c;
}
我在这里做错了什么？
此外，如果song_count('pitb'(，它工作正常;但如果song_count('ismp'(;
这是完整的代码：
<!DOCTYPE html>
<html>
<head>
<title>Display</title>
</head>
<body id='con'>
<style>
.btn{
background:grey;
color:white;
border-right:2px solid black;
display:inline-block;
padding:6px;
padding-left:12px;
padding-right:12px;
}
.menubar{width:calc(100% - 48px);
margin-left:12px;}
.btn:hover{
background:black;
cursor:pointer;
}
body{padding:0;margin:0;}
#container,#viewer{
width:50%;
max-width:50%;
position:absolute;
min-height:100vh;
top:0;
}
.sbtn{font-size:14pt;color:rgb(120,150,255);text-decoration:underline;}
.sbtn:hover{color:rgb(100,120,200);cursor:pointer;}
.songs{
width:calc(100% - 48px);
margin-left:12px;
padding:12px;
background:white;
}
img{width:100%;}
#viewer{right:0;background:black;color:white;}
#container{background:rgb(240,240,240);left:0;}
</style>
<div id="container">
<h1 style="text-align:center">Controller Menu</h1>
<div class='menubar'><div class='btn' onclick='home()'><p>Home</p></div><div class='btn' onclick='start()'><p>Start Countdown Video</p></div><div class='btn' onclick='mlv()'><p>Main Loop Video</p></div></div>
<div class='songs'>
<h1>Songs</h1>
<div class='sbtn' onclick='loadSong("pitb")'><p>Song 1</p></div>
<div class='sbtn' onclick='loadSong("hgta")'><p>Song 2</p></div>
<div class='sbtn' onclick='loadSong("hpdo")'><p>Song 3</p></div>
<div class='sbtn' onclick='loadSong("ismp")'><p>Song 4</p></div>
<div class='sbtn' onclick='loadSong("ogsj")'><p>Song 5</p></div>
<div class='sbtn' onclick='loadSong("sufj")'><p>Song 6</p></div>
<div class='sbtn' onclick='loadSong("torc")'><p>Song 7</p></div>
<div class='sbtn' onclick='loadSong("ynic")'><p>Song 8</p></div>
<div class='sbtn' onclick='loadSong("tmlb")'><p>Song 9</p></div>
<div class='sbtn' onclick='loadSong("gwsn")'><p>Song 10</p></div>
<div class='sbtn' onclick='loadSong("jlm0")'><p>Song 11</p></div>
<div class='sbtn' onclick='loadSong("tpoc")'><p>Song 12</p></div>
<div class='sbtn' onclick='loadSong("wisc")'><p>Song 13</p></div>
</div><br>
<div class='songs'>
<h1>Quick Message</h1>
<div style="padding:8px;background:grey;color:white;margin-top:6px;" onclick="openQuickMessage()">Open quick message</div>
</div><br>
</div><div id='viewer'></div>
<script>
function song_count(a){
if(a == 'pitb'){return 8;}
if(a == 'hgta'){return 16;}
if(a == 'hpdo'){return 4;}
if(a == 'ismp'){return 8;}
if(a == 'saip'){return 8;}
if(a == 'ogsj'){return 8;}
if(a == 'torc'){return 12;}
if(a == 'sufj'){return 6;}
if(a == 'tmlb'){return 4;}
if(a == 'gwsn'){return 2;}
if(a == 'jlm0'){return 6;}
if(a == 'tpoc'){return 8;}
if(a == 'wisc'){return 4;}
if(a == 'ynic'){return 13;}
if(a == 's_fs'){return 40;}
}
function createDisplay(a) {
if(a === true) {
vr_on = true;
vr = document.getElementById('viewer');
vr.innerHTML = '<h1 style="text-align:center;">VR is on!</h1>';
}
else {
vr_on = false;
}
nwObj = window.open();
nw = nwObj.document;
nw.write('<!DOCTYPE html><html><head><title>Display</title></head><body><style>body{overflow:hidden;padding:0;margin:0;}#con{background:black;color:white;height:100vh;position:absolute;top:0;width:100%;max-width:100%;}img{width:100%;}.lds-roller{display:inline-block;position:relative;width:64px;height:64px;}.lds-roller div{animation:lds-roller 1.2s cubic-bezier(.5,0,.5,1) infinite;transform-origin:32px 32px}.lds-roller div:after{content:" ";display:block;position:absolute;width:6px;height:6px;border-radius:50%;background:#fff;margin:-3px 0 0 -3px}.lds-roller div:nth-child(1){animation-delay:-36ms}.lds-roller div:nth-child(1):after{top:50px;left:50px}.lds-roller div:nth-child(2){animation-delay:-72ms}.lds-roller div:nth-child(2):after{top:54px;left:45px}.lds-roller div:nth-child(3){animation-delay:-108ms}.lds-roller div:nth-child(3):after{top:57px;left:39px}.lds-roller div:nth-child(4){animation-delay:-144ms}.lds-roller div:nth-child(4):after{top:58px;left:32px}.lds-roller div:nth-child(5){animation-delay:-.18s}.lds-roller div:nth-child(5):after{top:57px;left:25px}.lds-roller div:nth-child(6){animation-delay:-216ms}.lds-roller div:nth-child(6):after{top:54px;left:19px}.lds-roller div:nth-child(7){animation-delay:-252ms}.lds-roller div:nth-child(7):after{top:50px;left:14px}.lds-roller div:nth-child(8){animation-delay:-288ms}.lds-roller div:nth-child(8):after{top:45px;left:10px}@keyframes lds-roller{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}</style><div id="con"><p onclick="window.opener.fullscreen();">Fullscreen...</p><div style="position:absolute;left:50%;margin-left:-32px;top:50%;margin-top:-32px;"><div class="lds-roller"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div></div></div></body></html>');
nw.close();
display = nw.getElementById('con');
}
function fullscreen() {
display.requestFullscreen();
}
function sendmsg(){
var a = "<br><br><br><br><h1 style='text-align:center'>" + qm.getElementById("msg").value + "</h1>";
if(vr_on){
vr.innerHTML = a;
}
display.innerHTML = a;
}
function start(){
display.innerHTML = '<video id="vid" src="out.mp4" style="width:100%;position:absolute;top:50%;transform: translateY(-50%);" preload="auto"></video>';
nw.getElementById('vid').play();
if(vr_on){
vr.innerHTML = '<video id="vid_vr" src="out.mp4" style="width:100%;" preload="auto" muted></video>';
document.getElementById('vid_vr').play();
}
}
function mlv(){
display.innerHTML = '<video id="vid1" src="out1.mp4" style="width:100%;top:50%;transform: translateY(-50%);" loop preload="auto"></video>';
nw.getElementById('vid1').play();
if(vr_on){
vr.innerHTML = '<video id="vid1_vr" src="out1.mp4" style="width:100%;position:absolute;top:50%;transform: translateY(-50%);" loop preload="auto" muted></video>';
document.getElementById('vid1_vr').play();
}
}
function home(){
if(vr_on){
vr.innerHTML = '<h1 style="text-align:center">Home</h1>';
}
display.innerHTML = '<h1 style="text-align:center">Home</h1>';
}
function showSlide(a) {
var c = "<img src='slides/" + a + ".jpeg'>";
if(vr_on){
vr.innerHTML = c;
}
display.innerHTML = c;
}
function loadSong(a){
var b = 1;
console.log("Start: " + b);
var html = slidehtml(a,b);
if(vr_on){
vr.innerHTML = html;
}
display.innerHTML = html;
window.addEventListener("keydown", function(){
if(event.which == 37){
b = b - 1;
if(b <= 0){b = 1;}
if(vr_on){
vr.innerHTML = slidehtml(a,b);
}
display.innerHTML = slidehtml(a,b);
console.log(b);
}
if(event.which == 39){
console.log("Right: " + b);
b = b + 1;
if(b > song_count(a)){b = song_count(a);}
console.log("Right After: " + b);
if(vr_on){
vr.innerHTML = slidehtml(a,b);
}
console.log(b);
display.innerHTML = slidehtml(a,b);
}
});
}
function quickMessageFocus() {
qm.getElementById('msg').focus();
}
function openQuickMessage() {
'<input id="msg" tpye="text" style="width:calc(100% - 12px);padding:6px;">';
qmObj = window.open('about:blank','quickMessage','toolbar=no,location=no,status=no,menubar=no,scrollbars=no,resizable=yes,width=500px,height=70px');
qm = qmObj.document;
qm.write('<!DOCTYPE html><html><head><title>Quick Message</title></head><body onload="window.opener.quickMessageFocus()" ><style>body{overflow:hidden;padding:0;margin:0;}#qm{background:white;color:black;height:100vh;position:absolute;top:0;width:100%;max-width:100%;}img{width:100%;}.lds-roller{display:inline-block;position:relative;width:64px;height:64px;}.lds-roller div{animation:lds-roller 1.2s cubic-bezier(.5,0,.5,1) infinite;transform-origin:32px 32px}.lds-roller div:after{content:" ";display:block;position:absolute;width:6px;height:6px;border-radius:50%;background:#fff;margin:-3px 0 0 -3px}.lds-roller div:nth-child(1){animation-delay:-36ms}.lds-roller div:nth-child(1):after{top:50px;left:50px}.lds-roller div:nth-child(2){animation-delay:-72ms}.lds-roller div:nth-child(2):after{top:54px;left:45px}.lds-roller div:nth-child(3){animation-delay:-108ms}.lds-roller div:nth-child(3):after{top:57px;left:39px}.lds-roller div:nth-child(4){animation-delay:-144ms}.lds-roller div:nth-child(4):after{top:58px;left:32px}.lds-roller div:nth-child(5){animation-delay:-.18s}.lds-roller div:nth-child(5):after{top:57px;left:25px}.lds-roller div:nth-child(6){animation-delay:-216ms}.lds-roller div:nth-child(6):after{top:54px;left:19px}.lds-roller div:nth-child(7){animation-delay:-252ms}.lds-roller div:nth-child(7):after{top:50px;left:14px}.lds-roller div:nth-child(8){animation-delay:-288ms}.lds-roller div:nth-child(8):after{top:45px;left:10px}@keyframes lds-roller{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}</style><div id="qm"><p onclick="window.opener.sendmsg();">Fullscreen...</p><div style="position:absolute;left:50%;margin-left:-32px;top:50%;margin-top:-32px;"><div class="lds-roller"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div></div></div></body></html>');
qm.close();
quickMessage = qm.getElementById('qm');
quickMessage.innerHTML = "<div style=''><input style='width:calc(70% - 12px);margin-left:12px;margin-top:25px' type='text' id='msg'><input style='width:calc(30% - 24px);margin-left:12px;padding:6px' onclick='window.opener.sendmsg()' type='submit' value='Send to screen ->'></div>";
qmObj.addEventListener('keydown',function(event){
if(event.which == 13){
sendmsg();
qmObj.close();
}
if(event.which == 9){
qmObj.close();
}
});
}
window.addEventListener('keydown',function(event){
if(event.which == 81){
openQuickMessage();
}
});
function slidehtml(a,c){return("<img src='slides/" + a + "43" + c + ".jpeg'>");}
window.addEventListener('load',function(){
createDisplay(true);
});
</script>
</body>
</html>
你有一个全局b，因为你没有在函数中定义这个变量。
我相信每次调用loadSong函数时，都会附加key down事件，这通常已经由上一个/上一个函数调用附加，我建议你做的是在函数外部附加侦听器：
那么你加载的歌曲函数将是：
function loadSong(a){
var b = 1;
console.log("Start: " + b);
var html = slidehtml(a,b);
if(vr_on){
vr.innerHTML = html;
}
display.innerHTML = html;
}