根据一系列按键动态加载 javascript 和 CSS 文件答案

【问题标题】：Dynamically load javascript and CSS files based on a sequence of keypresses根据一系列按键动态加载 javascript 和 CSS 文件
【发布时间】：2012-10-02 22:46:02
【问题描述】：

我要加载这两个文件

<link rel="stylesheet" type="text/css" href="sewmuchcss.css">
<script type="text/javascript" src="sewmuchjs.js"></script>

仅当用户按下“上、上、下、下、左、右、左、右”时，才会出现在我的标题中。我将如何实现这一目标？我会使用 jquery 还是 javascript。我该怎么办？提前感谢您的任何帮助或答案。

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

您可以使用 jquery 热键-https://github.com/jeresig/jquery.hotkeys

您可以添加关键事件 -

<link rel="stylesheet" type="text/css" href="sewmuchcss.css">
<script type="text/javascript" src="sewmuchjs.js"></script>

这个js和css由

$('head').append('<link rel="stylesheet" type="text/css" href="sewmuchcss.css">');  
$('head').append('<script type="text/javascript" src="sewmuchjs.js"></script>');

【讨论】：

【解决方案2】：

$('#target').keypress(function(){
     var code = (e.keyCode ? e.keyCode : e.which);
     if(code == 21) // write your preferable keycodes here
     {
          $('<link/>').attr({ rel: 'stylesheet', type: 'text/css' href:'sewmuchcss.css' }).appendTo('head');
          $.getScript('sewmuchjs.js');
     }
})

小提琴：http://jsfiddle.net/pwunq/

【讨论】：

对不起，我不太明白你能详细说明一下
而且，这只是一个键我将如何做多个“上下左右”如果您知道如何帮助，请感谢您的帮助:)
stackoverflow.com/questions/10655202/…
这种方法需要包含 jQuery，也许这可以解释您遇到的错误？
@Nick 我的错误是因为 $('

【解决方案3】：

您可以使用 runat="server" 访问这两个文件并提供 id="likeme" 例如 -

 <link rel="stylesheet" type="text/css" href="sewmuchcss.css" runat="server" id="likeme" >

【讨论】：

这如何回答仅在一系列按键后加载这些文件的问题？
从服务器端按键，你可以调用和设置href

【解决方案4】：

我会使用 jQuery，您可以使用以下算法来检查一行中的多个键：

var keysPressed = [];
                       //  U,  U,  D,  D,  L,  R,  L,  R
var MAGIC_KEY_SEQUENCE = [ 38, 38, 40, 40, 37, 39, 37, 39 ]

$('body').on('keydown',function(e){
     var code = (e.keyCode ? e.keyCode : e.which);

     keysPressed.push( code );

     if ( keysPressed[ keysPressed.length - 1 ] == MAGIC_KEY_SEQUENCE[ keysPressed.length - 1 ] )
     {
       // so far so good

       if ( keysPressed.length == MAGIC_KEY_SEQUENCE.length )
       {
         // all keys were pressed in the right order!
         alert( 'hurray!' );

         $('<link/>').attr({
             rel:'stylesheet',
             type:'text/css',
             href:'sewmuchcss.css'}).appendTo('head');
         $.getScript('sewmuchjs.js');
       }
     }
     else
     {
       // something didn't match, so reset the list
       keysPressed = []       
     }
})

在这里玩它： http://jsfiddle.net/japanick/vfRqk/

【讨论】：

嘿尼克，我现在正在测试它！非常感谢
嘿尼克，警报和一切看起来都很好，但是当您加载页面时脚本会自动运行。我如何让它只有在警报出现后才运行！
@KiaDull 您是否从标题中删除了这两个标签？它们不应出现在标题中，它们只会被此处的 Javascript 引用。一项简单的测试是加载您的页面并查看源代码。如果您发现 "sewmuchcss" 或 "sewmuchjs" 作为或
我使用 jquery jquery-1.4.1.min.js 来运行我需要运行的脚本，我需要使用更高版本的 jquery 来完成这项工作吗？我需要运行的脚本不适用于更高版本的 jquery :(
我更新了 jsfiddle 以使用 jq 1.4.1.min，我不得不将“on”更改为“bind”。 jsfiddle.net/japanick/vfRqk 但是对我来说效果很好！ $('body').bind('keydown', ...