Question

好吧，我想这在技术上是两个独立的问题，但它们似乎足够相似，一次性问他们似乎是值得的（我真的很新，所有其他问题似乎没有相关的答案）。

无论出于何种原因，每当我尝试运行我在我的wampserver上通过localhost制作的测试宾果游戏时（开箱即用配置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>

Answer 1

＆＃13;

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]
    }
}

＆＃13;

<!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>

＆＃13;

我认为你的代码工作正常。您还需要为该表提及边框样式属性。

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

请检查此fiddle

我的wampserver似乎遇到了处理外部JS和CSS文件的问题

1 个答案: