<分区>
标签 javascript html css
<分区>
首先关闭here is the code .我正在创建一个数学方程式游戏，您应该在其中猜测方程式中缺少的运算符。运算符是用 javascript 插入的图像，当其中一个运算符图像插入到类为 math-box 的 div 中时，div 会比所有其他 div 标记略高。我想弄清楚为什么会这样，我想我有一个解决方案可以使所有“数学框”类都围绕相同的高度水平，那就是通过 float 。但是，我确实想知道为什么它比其他所有的都高
window.onload = function() {
var eq = document.getElementById('equation'),
op = document.getElementById('operator'),
btn = document.getElementsByTagName('button')[0];
btn.onclick = function() {
/*
var countdown = setInterval(function(){
var timer = document.querySelector('#container h1');
var count = parseInt(timer.innerHTML);
count--;
if(count < 1){
clearInterval(countdown);
timer.innerHTML = 0;
count = 30;
}else{
timer.innerHTML = count;
}
},1000)
*/
var param = Math.round(Math.random() * (3 - 1) + 1),
operand = [], num = [],
equation = "", result = "",
mathBox = "", div = "",
skip, answer,
add = document.getElementById('add'),
sub = document.getElementById('sub'),
divi = document.getElementById('div'),
multi = document.getElementById('mul'),
mathAnswer = document.getElementById('answer');
mathAnswer.innerHTML = "";
for (var i = 0; i < param; i++) {
var randomOperator = Math.round(Math.random() * (4 - 1) + 1);
if (i === 0) {
equation += num[i] = Math.round(Math.random() * (5 - 1) + 1);
}
if (randomOperator === 1) {
operand[i] = "+";
} else if (randomOperator === 2) {
operand[i] = "-";
} else if (randomOperator === 3) {
operand[i] = "*";
} else {
operand[i] = "/";
}
equation += operand[i];
equation += num[i + 1] = Math.round(Math.random() * (5 - 1) + 1);
}
skip = Math.round(Math.random() * (operand.length - 1));
for (var i = 0; i < num.length; i++) {
div = "<div class='math-box'>" + num[i] + "</div>";
if (operand[i] && i != skip) {
switch (operand[i]) {
case "+":
div += "<div class='math-box'> <img src='https://rawgit.com/Jermaine0Forbes/Javascript-Apps/master/img/operators/add.svg' /></div>";
break;
case "-":
div += "<div class='math-box'> <img src='https://rawgit.com/Jermaine0Forbes/Javascript-Apps/master/img/operators/sub.svg' /></div>";
break;
case "*":
div += "<div class='math-box'> <img src='https://rawgit.com/Jermaine0Forbes/Javascript-Apps/master/img/operators/multi.svg' /></div>";
break;
case "/":
div += "<div class='math-box'> <img src='hhttps://rawgit.com/Jermaine0Forbes/Javascript-Apps/master/img/operators/div.svg' /></div>";
break;
}
} else if (i === skip) {
answer = operand[skip];
div += "<div class='math-box'> </div>";
}
mathBox += div;
}
4 + 7 * 3 / 9 - 2;
function needDecimal() {
var decimalDigits;
/* result = Function("return "+equation);
result = result();*/
for (var i = 0; i < num.length; i++) {
if (i == 0) {
result = num[i];
continue;
}
if (operand[i - 1] === "+") {
result += num[i];
} else if (operand[i - 1] === "-") {
result -= num[i];
} else if (operand[i - 1] === "*") {
result *= num[i];
} else if (operand[i - 1] === "/") {
result /= num[i];
} else {
continue;
}
}
decimalDigits = result - Math.floor(result);
if (decimalDigits > 0) {
result = result.toFixed(1);
}
return result;
}
result = needDecimal();
console.log(equation + " = " + result);
eq.innerHTML = mathBox + " = " + result;
op.style.display = "block";
add.onclick = function() {
if (answer === "+") {
mathAnswer.innerHTML = "<span id='true'> true</span>";
} else {
mathAnswer.innerHTML = "<span id='false'> false</span>";
}
}
sub.onclick = function() {
if (answer === "-") {
mathAnswer.innerHTML = "<span id='true'> true</span>";
} else {
mathAnswer.innerHTML = "<span id='false'> false</span>";
}
}
multi.onclick = function() {
if (answer === "*") {
mathAnswer.innerHTML = "<span id='true'> true</span>";
} else {
mathAnswer.innerHTML = "<span id='false'> false</span>";
}
}
divi.onclick = function() {
if (answer === "/") {
mathAnswer.innerHTML = "<span id='true'> true</span>";
} else {
mathAnswer.innerHTML = "<span id='false'> false</span>";
}
}
}
}* {
margin: 0;
padding: 0;
}
div {
box-sizing: border-box;
}
div:before {
content: "";
display: table;
clear: both;
}
body {
background: #b6b3aa;
font-family: arial,sans-serif
}
#container {
width: 90%;
margin: auto;
background: white;
min-height: 600px;
}
#timer {
width: 100%;
background: #162d76;
text-align: center;
color: white;
}
#timer h1 {
font-size: 44px;
padding: 5px 0;
}
.math-box {
height: 50px;
width: 50px;
border: 4px solid black;
text-align: center;
line-height: 50px;
margin: 15px 5px;
display: inline-block;
}
.math-box img {
width: 100%;
}
#equation {
font-weight: bold;
font-size: 2em;
}
#equation .math-box {
}
#operator {
font-weight: bold;
font-size: 2em;
display: none;
}
#operator .math-box:hover {
cursor: pointer;
}
#true {
color: green;
text-transform: uppercase;
}
#false {
color: red;
text-transform: uppercase;
}<div id="container">
<div id="timer"><h1>30</h1></div>
<button>click</button>
<div id="equation"></div>
<div id="operator">
<div class="math-box" id="add">
<img src="https://rawgit.com/Jermaine0Forbes/Javascript-Apps/master/img/operators/add.svg"/>
</div>
<div class="math-box" id="sub">
<img src="https://rawgit.com/Jermaine0Forbes/Javascript-Apps/master/img/operators/sub.svg"/>
</div>
<div class="math-box" id="div">
<img src="https://rawgit.com/Jermaine0Forbes/Javascript-Apps/master/img/operators/div.svg"/>
</div>
<div class="math-box" id="mul">
<img src="https://rawgit.com/Jermaine0Forbes/Javascript-Apps/master/img/operators/multi.svg"/>
</div>
</div>
<div id="answer"></div>
</div>最佳答案
.math-box {
vertical-align: top;
}
试试这个
关于javascript - 为什么一个行内 block 元素比其他元素略高，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40518905/