javascript - 我的 wampserver 似乎在处理外部 JS 和 CSS 文件时遇到问题

标签 javascript css wamp

好吧,我想这在技术上是两个独立的问题,但它们看起来很相似,似乎值得一口气问他们(我真的是新手,其他问题似乎都没有相关答案).

无论出于何种原因,每当我尝试运行我通过本地主机在我的 wampserver 上制作的这个测试宾果网络游戏时(开箱即用的配置 afaik),外部 javascript 根本不会运行,虽然大多数 css 文件运行良好够了,我似乎无法显示表格边框。尽管在撰写这篇文章时,js 文件似乎工作正常,但我似乎仍然无法显示表格边框(甚至内联似乎都无法解决问题)。这可能是一个 php 问题吗?我是 wamp 的新手,而 php 可能是我最无能为力的领域。

var phase1 = []
var phase2 = []
   
for (i = 0; i < 37; i++){
        phase1[i] = i + 1
}

for (i = 0; i < 25; i++){
    var potVal = Math.floor(Math.random()*(phase1.length))
    phase2[i] = phase1[potVal]
    phase1.splice(potVal,1)
}

for (i = 0; i < phase2.length; i++){
    var count = i + 1
    var elem = count.toString()
    document.getElementById(count).innerHTML = phase2[i]
}
body{
    background-color: steelblue;
    font-family: Arial, Helvetica, sans-serif;
}

h1{
    color: white;
    text-align: center;
}

table{
    text-align: center;
    background-color: rgb(223, 165, 6);
    padding: 1%;
    width: 40%;
    height:80%;
    margin: auto;
    
}
table, th, td{
    border: 10px black;
}
<!DOCTYPE <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Demo Bingo Game</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="stylegrrl.css" />
    <link rel="script" type="text/javascript" href="boople.js">
</head>
<body>
        <h1>Bingo Card<br>Test Game</h1>
    <table>
        <tr>
            <th id="1"></th>
            <th id="2"></th>
            <th id="3"></th>
            <th id="4"></th>
            <th id="5"></th>
        </tr>
        <tr>
            <th id="6"></th>
            <th id="7"></th>
            <th id="8"></th>
            <th id="9"></th>
            <th id="10"></th>         
        </tr>
        <tr>
            <th id="11"></th>
            <th id="12"></th>
            <th id="13"></th>
            <th id="14"></th>
            <th id="15"></th>
        </tr>
        <tr>
            <th id="16"></th>
            <th id="17"></th>
            <th id="18"></th>
            <th id="19"></th>
            <th id="20"></th>
        </tr>
        <tr>
            <th id="21"></th>
            <th id="22"></th>
            <th id="23"></th>
            <th id="24"></th>
            <th id="25"></th>
        </tr>
    </table>
</body>
</html>

最佳答案

function test(){  
    var phase1 = []
    var phase2 = []
       
    for (i = 0; i < 37; i++){
            phase1[i] = i + 1
    }

    for (i = 0; i < 25; i++){
        var potVal = Math.floor(Math.random()*(phase1.length))
        phase2[i] = phase1[potVal]
        phase1.splice(potVal,1)
    }

    for (i = 0; i < phase2.length; i++){
        var count = i + 1
        var elem = count.toString()
        document.getElementById(count).innerHTML = phase2[i]
    }
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Demo Bingo Game</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script type="text/javascript" src="test.js"></script>
    <style type="text/css">
        body{
            background-color: steelblue;
            font-family: Arial, Helvetica, sans-serif;
        }

        h1{
            color: white;
            text-align: center;
        }

        table{
            text-align: center;
            background-color: rgb(223, 165, 6);
            padding: 1%;
            width: 40%;
            height:80%;
            margin: auto;
            
        }
        table, th, td{
            border: 10px solid black;
        }
    </style>
</head>
<body>
    <h1>Bingo Card<br>Test Game</h1>
    <table>
        <tr>
            <th id="1"></th>
            <th id="2"></th>
            <th id="3"></th>
            <th id="4"></th>
            <th id="5"></th>
        </tr>
        <tr>
            <th id="6"></th>
            <th id="7"></th>
            <th id="8"></th>
            <th id="9"></th>
            <th id="10"></th>         
        </tr>
        <tr>
            <th id="11"></th>
            <th id="12"></th>
            <th id="13"></th>
            <th id="14"></th>
            <th id="15"></th>
        </tr>
        <tr>
            <th id="16"></th>
            <th id="17"></th>
            <th id="18"></th>
            <th id="19"></th>
            <th id="20"></th>
        </tr>
        <tr>
            <th id="21"></th>
            <th id="22"></th>
            <th id="23"></th>
            <th id="24"></th>
            <th id="25"></th>
        </tr>
    </table>
    <script type="text/javascript">
        test();
    </script>
</body>
</html>

我认为您的代码运行良好。您还需要提及该表格的边框样式属性。

table, th, td{
    border: 10px solid black;
}

请检查这个fiddle

关于javascript - 我的 wampserver 似乎在处理外部 JS 和 CSS 文件时遇到问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49248733/

相关文章:

javascript传递对象作为引用

html - 哪种方法更好? CSS 类或 ID?

php - 用于 wampserver 2.4 的 APC

mysql - MYSQL 5.5.24 中的 MATCH 不起作用

php - PhpMyAdmin 中的错误 #1045 访问被拒绝

javascript - jquery fullcalendar 不渲染自定义字段

javascript - 如何让图像在到达网页边缘时停止移动?

javascript - 使原始的 Angular 表单控件变脏

javascript - 在 geo div 中,如何添加 else show #other-country

html - 如何设置鼠标悬停功能的if else条件