我似乎无法链接到我的.js文件

Question

I'm trying to implement and link up CSS as well as JS to an HTML file provided by a friend of mine for a project I'm working on. 我正在尝试实现CSS和JS并将其链接到我的一个朋友为我正在进行的项目提供的HTML文件中。

I've linked up the CSS with no problems, but the .js file I'm trying to link just won't work. 我已经很好地链接了CSS，但是我尝试链接的.js文件却无法正常工作。 Because the script won't work, my HTML keypad doesn't work :( 因为脚本不起作用，所以我的HTML键盘不起作用:(

Anyone notice anything I'm doing wrong? 有人注意到我做错了吗？

 window.pass = 1234; window.redirectURL = 'http://www.google.com'; $(document).ready(function() { start(); }); function start() { window.tries = 0; $(".key").click(function(){ var n = $(this).html(); $('.screen').append( n ); window.tries++; updateFlasher(); validate(); }); } function updateFlasher() { if (window.tries <=3) { var dis = window.tries * 55; $('.flasher').css({ 'left' : dis + 'px' }); } else { $('.flasher').css({ 'left' : '20px', 'display' : 'none' }); } } function validate() { if (window.tries >= 4){ checkWin(); $('.screen').html(''); window.tries = 0; $('.flasher').css({ 'display' : 'block' }); } } function checkWin() { var w = $('.screen').html(); if (w == window.pass){ $('.success').show().delay(5000).queue(function(n) { $('.success').hide(); n(); }); var u = window.redirectURL; $(location).attr('href', u ); } else { $('.error').show().delay(1000).queue(function(n) { $('.error').hide(); n(); }); } }

 @charset "UTF-8"; /* CSS Document */ /*basic reset*/ /*browsers have built in values for elements so we'll reset a few things to zero, you can add to this or remove items as needed*/ div,p,body,header,footer,section,article,nav { margin: 0; padding: 0; } img { border: none; margin: 0; padding: 0; } /* html selectors */ body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 12px; color: #333; background-color: #1d1d1d; } a:link, a:visited { text-decoration:none; } a:hover, a:active { text-decoration:none; } /* hide elements from browser but show for doc outline */ .hidden { display: none; } * { box-sizing: border-box; margin: 0; padding: 0; } body { background-color: #1d1d1d; } ::selection { background-color: transparent; } .screen{ height: 75px; width: 225px; border-radius: 15px; border: 8px solid #2b2b2b; background-color: #111; font-size: 50px; color: limegreen; padding: 0px 20px 0px 20px; letter-spacing: 26px; font-family: 'VT323', monospace; position: relative; } .flasher { content: ""; display: block; width: 30px; height: 5px; background-color: limegreen; position: absolute; top: 55px; left: 20px; animation: blink 1s linear infinite; -webkit-animation: blink 1s linear infinite; } .keypad_wrapper { position: relative; width: 225px; height: 375px; background-color: #2b2b2b; margin: 100px auto; } .key { width: 75px; height: 75px; float: left; border-radius: 15px; border: 8px solid #2b2b2b; line-height: 58px; text-align: center; font-size: 50px; background-color: #3b3b3b; box-shadow: inset 0px -2px 0px rgba(0,0,0,.5), inset 0px 1px 0px rgba(255,255,255,.2); cursor: pointer; text-shadow: 0px -2px 2px rgba(0,0,0,.5), 0px 1px 2px rgba(255,255,255,.4); color: #eee; } .key:hover { background-color: #4b4b4b; } .key:active { background-color: #333; box-shadow: inset 0px -1px 0px rgba(255,255,255,.2), inset 0px 2px 0px rgba(0,0,0,.5); color: #aaa; line-height: 62px; } .key.last { position: relative; left: 75px; } .notification { color: limegreen; font-family: 'VT323', monospace; text-align: center; font-size: 40px; position: absolute; width: 225px; top: 15px; display: none; } @keyframes blink { 0%{opacity: 0;} 50%{opacity: 1;} 100%{opacity: 0;} } @-webkit-keyframes blink { 0%{opacity: 0;} 50%{opacity: 1;} 100%{opacity: 0;} }

 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.3.min.js"></script> <script src="main.js"></script> </head> <div class="keypad_wrapper"> <div class="screen"></div> <div class="flasher"></div> <div class="error notification">ERROR</div> <div class="success notification">SUCCESS</div> <div class="key">1</div> <div class="key">2</div> <div class="key">3</div> <div class="key">4</div> <div class="key">5</div> <div class="key">6</div> <div class="key">7</div> <div class="key">8</div> <div class="key">9</div> <div class="key last">0</div> </div> </body> </html>

Answer 1

Works in my browser, all I added to your code was: 在我的浏览器中工作，我添加到您的代码中的全部是：

<link rel="stylesheet" type="text/css" href="style.css" />

But I assume from your question that you had this working already. 但是我从您的问题中假设您已经进行了这项工作。 You could try downloading jquery to your machine locally and referencing it locally. 您可以尝试在本地将jquery下载到您的计算机并在本地引用它。 Perhaps it gets stuck there. 也许它卡在那里。

我似乎无法链接到我的.js文件

问题描述

1 个解决方案

解决方案1
0 2015-12-22 21:36:38

我似乎无法链接到我的.js文件

问题描述

1 个解决方案

解决方案1 0 2015-12-22 21:36:38

解决方案1
0 2015-12-22 21:36:38