Javascript 文本对齐：居中； 线高：80px； 位置：相对位置； 过渡：均为0.2s； -webkit转换：所有0.2秒； -moz转换：全部为0.2s； -o-过渡：均为0.2s； -ms转换：均为0.2s； } .box:悬停，#开始设置：悬停{ 背景色：#00F5FF； 颜色：白色； 盒影：4px 3px 0px 0px#266df2； -moz盒阴影：4px 3px 0px 0px#266df2； -网络工具包盒阴影：4px 3px 0px 0px#266df2； } .box:活动，#startreset:活动{ 盒影：0px 0px#266df2； -moz盒阴影：0px 0px#266df2； -网络工具包盒阴影：0px 0px#266df2； 顶部：4px； } #方框4{ 右边距：0px； } #星光仪{ 宽度：83px； 填充：8px； 背景色：rgba（255、255、255、0.5）； 保证金：0px自动； 字体大小：粗体； 边界半径：3px； 光标：指针； 盒影：4px3px0px0pxRGBA（0,0,0,0.2）； -moz盒阴影：4px3px0px0pxrgba（0,0,0,0.2）； -网络工具包盒阴影：4px 3px 0px 0px rgba（0,0,0,0.2）； 文本对齐：居中； 位置：相对位置； 过渡：均为0.2s； -webkit转换：所有0.2秒； -moz转换：全部为0.2s； -o-过渡：均为0.2s； -ms转换：均为0.2s； /*这不允许用户为所有浏览器选择文本*/ 用户选择：无； -webkit用户选择：无； -moz用户选择：无； -ms用户选择：无； } #剩余时间{ 宽度：157px； 填充：7px； 位置：绝对位置； 顶部：395px； 左：400px； 背景色：#843； 边界半径：3px； 盒影：4px3px0px 0px#00ad99； -moz盒阴影：4px3px0px 0px#00ad99； -网络工具包盒阴影：4px 3px 0px 0px#00ad99； /*可见性：隐藏*/ 显示：无； } #游戏结束{ 高度：200px； 宽度：500px； 背景：线性梯度（#F8974A，#3EB8C5）； 颜色：白色； 字号：2.5em； 文本对齐：居中； 文本转换：大写； 位置：绝对位置； 顶部：100px； 左：45像素； /*给“游戏结束”div一个更高的z索引可以确保它位于其他元素之上，默认值为0*/ z指数：2； 显示：无； } 马瑟罗酒店 分数：0 对的 再试一次 点击正确答案 开始比赛 剩余时间：60秒 游戏结束
代码有几个地方出了问题。这是一个清理过的版本Javascript 文本对齐：居中； 线高：80px； 位置：相对位置； 过渡：均为0.2s； -webkit转换：所有0.2秒； -moz转换：全部为0.2s； -o-过渡：均为0.2s； -ms转换：均为0.2s； } .box:悬停，#开始设置：悬停{ 背景色：#00F5FF； 颜色：白色； 盒影：4px 3px 0px 0px#266df2； -moz盒阴影：4px 3px 0px 0px#266df2； -网络工具包盒阴影：4px 3px 0px 0px#266df2； } .box:活动，#startreset:活动{ 盒影：0px 0px#266df2； -moz盒阴影：0px 0px#266df2； -网络工具包盒阴影：0px 0px#266df2； 顶部：4px； } #方框4{ 右边距：0px； } #星光仪{ 宽度：83px； 填充：8px； 背景色：rgba（255、255、255、0.5）； 保证金：0px自动； 字体大小：粗体； 边界半径：3px； 光标：指针； 盒影：4px3px0px0pxRGBA（0,0,0,0.2）； -moz盒阴影：4px3px0px0pxrgba（0,0,0,0.2）； -网络工具包盒阴影：4px 3px 0px 0px rgba（0,0,0,0.2）； 文本对齐：居中； 位置：相对位置； 过渡：均为0.2s； -webkit转换：所有0.2秒； -moz转换：全部为0.2s； -o-过渡：均为0.2s； -ms转换：均为0.2s； /*这不允许用户为所有浏览器选择文本*/ 用户选择：无； -webkit用户选择：无； -moz用户选择：无； -ms用户选择：无； } #剩余时间{ 宽度：157px； 填充：7px； 位置：绝对位置； 顶部：395px； 左：400px； 背景色：#843； 边界半径：3px； 盒影：4px3px0px 0px#00ad99； -moz盒阴影：4px3px0px 0px#00ad99； -网络工具包盒阴影：4px 3px 0px 0px#00ad99； /*可见性：隐藏*/ 显示：无； } #游戏结束{ 高度：200px； 宽度：500px； 背景：线性梯度（#F8974A，#3EB8C5）； 颜色：白色； 字号：2.5em； 文本对齐：居中； 文本转换：大写； 位置：绝对位置； 顶部：100px； 左：45像素； /*给“游戏结束”div一个更高的z索引可以确保它位于其他元素之上，默认值为0*/ z指数：2； 显示：无； } 马瑟罗酒店 分数：0 对的 再试一次 点击正确答案 开始比赛 剩余时间：60秒 游戏结束,javascript,html,css,Javascript,Html,Css,代码有几个地方出了问题。这是一个清理过的版本 var gameOn=false； var评分； var区间； 函数stopGame（）{ gameOn=false； 如果（间隔）{ 间隔时间； 间隔=空； } document.getElementById（“startreset”）.innerHTML=“开始游戏”； document.getElementById（“剩余时间”）.style.display=“”； } //如果我们单击开始/重置 document.getElementByI
var gameOn=false；
var评分；
var区间；
函数stopGame（）{
gameOn=false；
如果（间隔）{
间隔时间；
间隔=空；
}
document.getElementById（“startreset”）.innerHTML=“开始游戏”；
document.getElementById（“剩余时间”）.style.display=“”；
}
//如果我们单击开始/重置
document.getElementById（“startreset”）.onclick=function（）{
//如果我们不玩
如果（游戏机）{
停止游戏（）；
}否则{
//将模式更改为播放
gameOn=true；
//将分数设为0
得分=0；
document.getElementById（“scorevalue”）.innerHTML=score；
//显示倒计时框
document.getElementById（“剩余时间”）.style.display=“块”；
document.getElementById（“startreset”）.innerHTML=“重置游戏”；
var计数器=60；
间隔=设置间隔（timeIt，100）；
函数timeIt（）{
document.getElementById（“计时器关闭”）.innerHTML=计数器；
计数器--；
如果（计数器==0）{
停止游戏（）；
document.getElementById（“游戏结束”）.style.display=“阻止”；
}
}
}
}html{
身高：100%；
背景：径向梯度（圆形，#fff，#ccc）；
}
#头衔{
宽度：400px；
填充：0px 20px；
左边距：350px；
边缘顶部：50px；
背景色：#843；
颜色：白色；
边界半径：10px；
字号：3em；
字母间距：2.7px；
字体系列：草书，无衬线；
文本对齐：居中；
盒影：4px3px0px0pxRGBA（49,79,79,0.5）；
-moz盒阴影：4px3px0px0pxRGBA（49,79,79,0.5）；
-网络工具包盒阴影：4px3px0px0pxRGBA（49,79,79,0.5）；
}
/*页面中央的游戏容器*/
#太阳黄{
高度：400px；
宽度：550px；
背景色：#FFDC00；
/*上下边距设置为100px，左右边距设置为自动，以便左右边距越来越大，直到框居中*/
利润率：90px280px0px280px；
填充：20px；
边界半径：10px；
/*参考“长方体阴影”[水平偏移（如果数字为正数，则阴影将位于长方体的右侧）][垂直偏移（如果数字为正数，则阴影将位于长方体的底部，如果为负数，则阴影将位于相反的位置）][模糊半径（这是阴影模糊或锐利的程度）][可选扩展半径（阴影有多大）【颜色】*/
盒影：4px4px0px0pxRGBA（248151,74,0.8）；
-moz盒阴影：4px4px0px0pxRGBA（248151,74,0.8）；
-网络工具包盒阴影：4px4px0px0pxRGBA（248151,74,0.8）；
位置：相对位置；
}
#得分{
背景色：#843；
颜色：#2F4F4F；
填充：10px；
位置：绝对位置；
左：500px；
/*每当使用“框阴影”时，为mozilla和safari添加跨浏览器兼容性语法*/
盒影：4px3px0px0pxRGBA（49,79,79,0.5）；
-moz盒阴影：4px3px0px0pxRGBA（49,79,79,0.5）；
-网络工具包盒阴影：4px3px0px0pxRGBA（49,79,79,0.5）；
}
#正确的{
位置：绝对位置；
左：260px；
背景色：#00FF0D；
颜色：白色；
填充：11px；
显示：无；
}
#错{
位置：绝对位置；
左：260px；
背景色：#EF0200；
颜色：白色；
填充：11px；
显示：无；
}
#问题:{
宽度：450px；
高度：150像素；
保证金：50px自动10px自动；
背景色：#00F5FF；
长方体阴影：4px 3px 0px 0px rgba（49,79,79,0.5）
<!DOCTYPE html>
<html lang="en">
<head>
<title>Math Game</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">
<link rel="stylesheet" href="styling.css">
</head>
<body>
<div id="title">
The Matheroo
</div>
<div id="sunYellow">
<!--Because the score value is going to change as the user plays the game we need to place it in a span and refer to it later with some JAVA-->
<div id="score">
Score: <span id="scorevalue">0</span>
</div>
<div id="correct">
Correct!
</div>
<div id="wrong">
Try Again
</div>
<div id="question">
</div>
<div id="instruction">
Click on the Correct Answer
</div>
<div id="choices">
<div id="box1" class="boxes"></div>
<div id="box2" class="boxes"></div>
<div id="box3" class="boxes"></div>
<div id="box4" class="boxes"></div>
</div>
<div id="startreset">
Start Game
</div>
<div id="time-remaining">
Time Remaining: <span id="timer-down">60</span> sec
</div>
<div id="game-over">
</div>
</div>
<script src="Javascript.js"></script>
</body>
</html>
--------------------------------------
`var gameOn = false;`
`var score;`
`var interval;`
//if we click on the start/reset
document.getElementById("startreset").onclick = function(){
//if we are playing
if(gameOn == true){
//reload page
location.reload(); //reload the page
}else{//if we are not playing
//change mode to playing
gameOn = true;
//set score to 0
score = 0;
document.getElementById("scorevalue").innerHTML = score;
//show countdown box
document.getElementById("time-remaining").style.display = "block";
//reduce time by 1sec in loops
if(counter > 0){
var counter = 60;
interval = setInterval(timeIt, 100);
function timeIt(){
document.getElementById("timer-down").innerHTML = counter;
counter--;
}
}
while (document.getElementById("timer-down").innerHTML = 0){
document.getElementById("game-over").style.display = "block";
}
document.getElementById("startreset").innerHTML = "Reset Game";
}
}
--------------------------------------
html{
height: 100%;
background: radial-gradient(circle, #fff, #ccc);
}
#title{
width: 400px;
padding: 0px 20px;
margin-left: 350px;
margin-top: 50px;
background-color: #84FFE3;
color: white;
border-radius: 10px;
font-size: 3em;
letter-spacing: 2.7px;
font-family: cursive, sans-serif;
text-align: center;
box-shadow: 4px 3px 0px 0px rgba(49, 79, 79, 0.5);
-moz-box-shadow: 4px 3px 0px 0px rgba(49, 79, 79, 0.5);
-webkit-box-shadow: 4px 3px 0px 0px rgba(49, 79, 79, 0.5);
}
/*The container for the game in the center of the page*/
#sunYellow{
height: 400px;
width: 550px;
background-color: #FFDC00;
/*Top and bottom margin is set to 100px and the left and right margin is set to auto so that the left and right margin gets bigger and bigger until the box is centered*/
margin: 90px 280px 0px 280px;
padding: 20px;
border-radius: 10px;
/* Reference for 'box-shadow' [horizontal offset(if the number is positive then the shadow will be on the right side of our box)] [vertical offset(if the number is positive then the shadow will be on the bottom of our box, if negative it will be the opposite)] [blur radius(This is how blurry or sharp the shadow will be)] [optional spread radius(how big the shadow is)] [color]*/
box-shadow: 4px 4px 0px 0px rgba(248,151,74, 0.8);
-moz-box-shadow: 4px 4px 0px 0px rgba(248,151,74, 0.8);
-webkit-box-shadow: 4px 4px 0px 0px rgba(248,151,74, 0.8);
position: relative;
}
#score{
background-color: #84FFE3;
color: #2F4F4F;
padding: 10px;
position: absolute;
left: 500px;
/*Whenever using a 'box-shadow' add the cross browser compatibility syntaxs for mozilla and safari*/
box-shadow: 4px 3px 0px 0px rgba(49, 79, 79, 0.5);
-moz-box-shadow: 4px 3px 0px 0px rgba(49, 79, 79, 0.5);
-webkit-box-shadow: 4px 3px 0px 0px rgba(49, 79, 79, 0.5);
}
#correct{
position: absolute;
left: 260px;
background-color: #00FF0D;
color: white;
padding: 11px;
display: none;
}
#wrong{
position: absolute;
left: 260px;
background-color: #EF0200;
color: white;
padding: 11px;
display: none;
}
#question{
width: 450px;
height: 150px;
margin: 50px auto 10px auto;
background-color: #00F5FF;
box-shadow: 4px 3px 0px 0px rgba(49, 79, 79, 0.5);
-moz-box-shadow: 4px 3px 0px 0px rgba(49, 79, 79, 0.5);
-webkit-box-shadow: 4px 3px 0px 0px rgba(49, 79, 79, 0.5);
font-size: 100px;
text-align: center;
font-family: cursive, sans-serif;
color: black;
}
#instruction{
width: 450px;
height: 50px;
background-color: #00FF0D;
margin: 10px auto;
text-align: center;
line-height: 50px;
box-shadow: 4px 3px 0px 0px rgba(49, 79, 79, 0.5);
-mox-box-shadow: 4px 3px 0px 0px rgba(49, 79, 79, 0.5);
-webkit-box-shadow: 4px 3px 0px 0px rgba(49, 79, 79, 0.5);
}
#choices{
width: 450px;
height: 100px;
margin: 5px auto;
}
.boxes{
width: 85px;
height: 85px;
background-color: white;
float: left;
margin-right: 36px;
border-radius: 3px;
cursor: pointer;
box-shadow: 4px 3px 0px 0px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 4px 3px 0px 0px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 4px 3px 0px 0px rgba(0, 0, 0, 0.2);
text-align: center;
line-height: 80px;
position: relative;
transition: all 0.2s;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-o-transition: all 0.2s;
-ms-transition: all 0.2s;
}
.boxes:hover, #startreset:hover{
background-color: #00F5FF;
color: white;
box-shadow: 4px 3px 0px 0px #266df2;
-moz-box-shadow: 4px 3px 0px 0px #266df2;
-webkit-box-shadow: 4px 3px 0px 0px #266df2;
}
.boxes:active, #startreset:active{
box-shadow: 0px 0px #266df2;
-moz-box-shadow: 0px 0px #266df2;
-webkit-box-shadow: 0px 0px #266df2;
top: 4px;
}
#box4{
margin-right: 0px;
}
#startreset{
width: 83px;
padding: 8px;
background-color: rgba(255, 255, 255, 0.5);
margin: 0px auto;
font-weight: bold;
border-radius: 3px;
cursor: pointer;
box-shadow: 4px 3px 0px 0px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 4px 3px 0px 0px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 4px 3px 0px 0px rgba(0, 0, 0, 0.2);
text-align: center;
position: relative;
transition: all 0.2s;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-o-transition: all 0.2s;
-ms-transition: all 0.2s;
/*This doesnt allow a user to select text for all browsers*/
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
#time-remaining{
width: 157px;
padding: 7px;
position: absolute;
top: 395px;
left: 400px;
background-color: #84FFE3;
border-radius: 3px;
box-shadow: 4px 3px 0px 0px #00ad99;
-moz-box-shadow: 4px 3px 0px 0px #00ad99;
-webkit-box-shadow: 4px 3px 0px 0px #00ad99;
/* visibility: hidden;*/
display: none;
}
#game-over{
height: 200px;
width: 500px;
background: linear-gradient(#F8974A, #3EB8C5);
color: white;
font-size: 2.5em;
text-align: center;
text-transform: uppercase;
position: absolute;
top: 100px;
left: 45px;
/*Giving the 'game-over' div a higher z-index ensures it is on top of the other elements, which the default is 0*/
z-index: 2;
display: none;
}
--------------------------------------
while (document.getElementById("timer-down").innerHTML = 0)
while (document.getElementById("timer-down").innerHTML == 0 | document.getElementById("timer-down").innerHTML == '0')