簡體   English   中英

在沒有輸入框的情況下輸入后,是否有更好的方法使頁面重定向?

[英]Is there a better way to make a page redirect after input is given WITHOUT an input box?

到目前為止,我想出了這段代碼...是否有更好的方法來執行此操作而無需輸入框或單擊Enter /單擊東西? 我打算把它當作復活節彩蛋,但它很大,看起來有點令人沮喪。

<!-- 7H3 F0110W1N6 R3D1R3C7S 7H3 P463 WH3N 7H3 C0RR3C7 C0D3 1S 3N73R3D -->
<!-- THE FOLLOWING REDIRECTS THE PACE WHEN THE CORRECT CODE IS ENTERED -->
<!-- THE CODE IS: UP UP DOWN DOWN LEFT RIGHT LEFT RIGHT B A S -->
<script>
    document.addEventListener('keydown', function(event) {
if(event.keyCode == 38) {
        document.addEventListener('keydown', function(event) {
    if(event.keyCode == 38) {
        document.addEventListener('keydown', function(event) {
        if(event.keyCode == 40) {
            document.addEventListener('keydown', function(event) {
            if(event.keyCode == 40) {
                document.addEventListener('keydown', function(event) {
                if(event.keyCode == 37) {
                    document.addEventListener('keydown', function(event) {
                    if(event.keyCode == 39) {
                        document.addEventListener('keydown', function(event) {
                        if(event.keyCode == 37) {
                            document.addEventListener('keydown', function(event) {
                            if(event.keyCode == 39) {
                                document.addEventListener('keydown', function(event) {
                                if(event.keyCode == 66) {
                                    document.addEventListener('keydown', function(event) {
                                    if(event.keyCode == 65) {
                                        document.addEventListener('keydown', function(event) {
                                        if(event.keyCode == 83) {
                                            alert('CODE ENTERED');
                                            window.location = "NEW WEB ADRESS"
                                        }
                                    });
                                    }
                                });
                                }
                            });
                            }
                        });
                        }
                    });
                    }
                });
                }
            });
            }
        });
        }
    });
    }
});  
}
});
</script>

一個聽眾可以做到這一點。

var input = '';
var secretCode = 'abcdefg';

document.addEventListener('keydown', function(event) {
  input += String.fromCharCode(event.keyCode);
  if(input === secretCode) {
      alert('CODE ENTERED');
      window.location = "NEW WEB ADRESS"
  }
});

我會這樣做。

  • 1個事件監聽器。
  • 沒有不推薦使用的代碼(不推薦使用keyCode )。
  • 沒有內存泄漏。
  • 如果啟用了大寫鎖定,則可以使用。
  • 如果輸入了錯誤的密鑰,則允許重新啟動。
  • 可讀的代碼。

 var keys = [ 'ArrowUp', 'ArrowUp', 'ArrowDown', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowLeft', 'ArrowRight', 'b', 'a' ]; var keyed = 0; window.addEventListener('keydown', function(e) { if (keys[keyed].toLowerCase() === e.key.toLowerCase()) { keyed++; } else { keyed = 0; } if (keyed >= keys.length) { keyed = 0; console.log('Code entered!'); } }); 

您可以將鍵保留在數組中,如果輸入了第一項,則將其彈出。 因此,您可以保留優先級。

var secretKeys = [38, 38, 40, 40, 37, 39, 37, 39, 66, 65, 83];

document.addEventListener('keydown', function(event) {
  input = event.keyCode;
  if(input === secretKeys[0]) {
    secretKeys.shift();
    if (secretKeys.length == 0) {
      alert('You entered the secret key');
      window.location = "NEW WEB ADRESS";
    }
  }
});

我不確定您是否知道,但是每次您在初始解決方案中按一個鍵時,就會添加越來越多的事件偵聽器。 這是完全不必要和不切實際的,因為僅用一個解決方案就可以實現相同的解決方案。

代碼中的錯誤是您將URL分配給window.location而不是window.location.href

編輯:分配給window.locationwindow.location.href都是正確的,並且產生相同的結果。

 const codes = [38, 38, 40, 40, 37, 39, 37, 39, 66, 65, 83]; let codeIndex = 0; document.addEventListener("keydown", (event) => { console.log(event.keyCode); if (event.keyCode != codes[codeIndex++]) { codeIndex = 0; // wrong code, reset } if (codeIndex == codes.length) { alert("CODE ENTERED"); // success! // window.location.href = "NEW WEB ADDRESS"; } }); 
 p { font-family: Arial, sans-serif; font-size: 1em; line-height: 1.25em; } key { display: inline-block; padding: 0 0.5em; border: 1px solid #ccc; border-radius: 0.25em; background-color: #eee; font-family: monospace; } 
 <p>Focus on this snippet and enter the code to trigger the alert: <key title="Up">&uarr;</key> <key title="Up">&uarr;</key> <key title="Down">&darr;</key> <key title="Down">&darr;</key> <key title="Left">&larr;</key> <key title="Right">&rarr;</key> <key title="Left">&larr;</key> <key title="Right">&rarr;</key> <key title="B">B</key> <key title="A">A</key> <key title="S">S</key> </p> 

您可以跟蹤輸入的代碼,並在一段時間后或當其長度超過Konami代碼長度時將其重置,以便用戶無需重新刷新頁面即可重新開始。

 function arraysMatch(arr1, arr2) { return arr1.length === arr2.length && arr1.every(function (char, indx) { return arr1[indx] === arr2[indx]; }); } var konamiCode = [38, 38, 40, 40, 37, 39, 37, 39, 66, 65, 83]; var code = []; var timeout = null; document.addEventListener("keyup", function (event) { clearTimeout(timeout); if (code.length >= konamiCode.length) { code = []; } code.push(event.keyCode); if (arraysMatch(konamiCode, code)) { alert("code entered!"); } timeout = setTimeout(function () { code = []; }, 3000) }); 

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM