好吧,我想这在技术上是两个独立的问题,但它们看起来很相似,似乎值得一口气问他们(我真的是新手,其他问题似乎都没有相关答案).
无论出于何种原因,每当我尝试运行我通过本地主机在我的 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/