包括js和css不能正常工作

我正在嘗試這個簡單的css和js密碼強度檢查器。當css和js包含在文件中時，它工作得非常好。如果我把js放在一個單獨的文件中，然後將它包含在這個文件中，它將不起作用。另外，如果我把CSS放在一個外部的css文件中，它就不會設置頁面的樣式。包括js和css不能正常工作

把它列入我只是把：

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

我沒有看到什麼即時做錯了或者是它與代碼做的，它需要在出於某種原因，相同的文件？

該文件是一個PHP文件，因爲我會稍後將PHP添加到它，但這並沒有改變什麼嗎？

<html> 
<head> 
    <title>strength check</title> 
    <style type="text/css"> 
    #passwordStrength { 
     height:10px; 
     display:block; 
     float:left; 
    } 
    .strength0 { 
     width:150px; 
     background:#cccccc; 
    }  
    .strength1 { 
     width:20px; 
     background:#ff0000; 
    } 
    .strength2 { 
     width:40px;  
     background:#ff5f5f; 
    } 
    .strength3 { 
     width:60px; 
     background:#56e500; 
    } 
    .strength4 { 
     background:#4dcd00; 
     width:80px; 
    } 
    .strength5 { 
     background:#399800; 
     width:150px; 
    } 
    </style> 
    <script language="javascript" type="text/javascript"> 
    function passwordStrength(password) { 

     var desc = new Array(); 
     desc[0] = "Very Weak"; 
     desc[1] = "Weak"; 
     desc[2] = "Better"; 
     desc[3] = "Medium"; 
     desc[4] = "Strong"; 
     desc[5] = "Strongest"; 

     var score = 0; 

     //if password bigger than 6 give 1 point 
     if (password.length > 6) score++; 

     //if password has both lower and uppercase characters give 1 point  
     if ((password.match(/[a-z]/)) && (password.match(/[A-Z]/))) score++; 

     //if password has at least one number give 1 point 
     if (password.match(/\d+/)) score++; 

     //if password has at least one special caracther give 1 point 
     if (password.match(/.[!,@,#,$,%,^,&,*,?,_,~,-,(,)]/)) score++; 
     //if password bigger than 12 give another 1 point 
     if (password.length > 12) score++; 

     document.getElementById("passwordDescription").innerHTML = desc[score]; 
     document.getElementById("passwordStrength").className = "strength" + score; 
    } 
    </script> 
</head> 
<body> 
    <input type="password" caption="password" name="password" onkeyup="passwordStrength(this.value);" size="60"> 
    <div style="font-size: 10px"; id="passwordDescription">Password Strength</div> 
    <div class="strength0" id="passwordStrength"></div> 
</body> 
</html>

來源

2012-07-05 cohen

如果是單獨文件，你如何包含它？ – freebird 2012-07-05 12:45:19

你是如何包含js文件的？這可能是值得展示這個以及 – 2012-07-05 12:46:10

它在那裏接近頂部 – cohen 2012-07-05 12:46:41

在您的鏈接的開頭刪除/：

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

那些/意味着你的文件是在根你域。

來源

2012-07-05 12:48:13

哦，謝謝。我認爲這只是意味着它是在一個目錄下。 – cohen 2012-07-05 12:51:49

使用'../'放下一個目錄！ – Amberlamps 2012-07-05 12:52:16

什麼就做什麼，你又試了一次。
在Firefox中打開頁面。
查看源代碼
在源代碼頁中，您可以將腳本和css文件視爲鏈接。
點擊鏈接。它會顯示頁面無法顯示。

在這種情況下，您的包含位置是錯誤的！

將CSS和JS在正確的位置，直到第5步中顯示了除網頁以外的一些東西不能顯示

來源

2012-07-05 12:46:47 madhairsilence

我不知道你用的是什麼服務器，但如果你是使用Tomcat您合作需要失去源路徑的主要斜線。

嘗試：

css/style.css

，而不是

/css/style.css

來源

2012-07-05 12:48:03 Amberlamps

嘗試設置沒有起始斜線的路徑 - 如果您的服務器的子目錄中包含所有內容，則斜槓可能會破壞路徑。

<link rel="stylesheet" href="css/style.css" /> 
<script src="js/js.js"></script>

在HTML5中，您還可以擺脫類型的屬性（萬一你使用HTML5的doctype）。

來源

2012-07-05 12:50:09 harryfk

包括js和css不能正常工作

回答

相關問題