Question

我正在尝试这个简单的css和js密码强度检查器。当css和js包含在文件中时，它工作得非常好，如下所示。如果我把js放在一个单独的文件中然后将它包含在这个文件中它将无法正常工作。另外，如果我将css放在外部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>

Answer 1

在链接开头删除/：

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

那些/表示您的文件位于您网域的根目录。

Answer 2

做你再试的一切。
在firefox中打开该页面。
查看来源
在源页面中，您可以将脚本和css文件视为链接。
点击链接。它会显示页面无法显示。

在这种情况下，您的包含位置是错误的！

将css和js放在正确的位置，直到第5步显示除页面以外的其他内容无法显示

Answer 3

我不知道您使用的服务器，但如果您正在使用Tomcat，则需要丢失源路径的前导斜杠。

尝试：

css/style.css

而不是

/css/style.css

Answer 4

尝试设置没有起始斜杠的路径 - 如果服务器的子目录中包含所有内容，则斜杠可能会破坏路径。

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

在HTML5中，您还可以删除类型属性（以防您使用HTML5文档类型）。

包括js和css不起作用

4 个答案: