小贝子编程

如何在一个按钮的中心innerHTML ?



我有一个非常简单的TicTacToe游戏，可以在Fedora中的Firefox中完美运行，但是当我使用基于Chromium的浏览器或Windows时，"x"one_answers"o"被放错了位置，字体也没有使用。

var c=0
function a(b){
"X"!=document.getElementById(b).innerHTML&&"O"!=document.getElementById(b).innerHTML&&0==c?(document.getElementById(b).innerHTML="X",c=1):
"X"!=document.getElementById(b).innerHTML&&"O"!=document.getElementById(b).innerHTML&&1==c&&(document.getElementById(b).innerHTML="O",c=0)
z()
}
function r(b){for(c=0;8>=b;b++)document.getElementById(b).innerHTML=""}
function z(){
"X"==document.getElementById(0).innerHTML&&"X"==document.getElementById(1).innerHTML&&"X"==document.getElementById(2).innerHTML?x():
"X"==document.getElementById(3).innerHTML&&"X"==document.getElementById(4).innerHTML&&"X"==document.getElementById(5).innerHTML?x():
"X"==document.getElementById(6).innerHTML&&"X"==document.getElementById(7).innerHTML&&"X"==document.getElementById(8).innerHTML?x():
"X"==document.getElementById(0).innerHTML&&"X"==document.getElementById(3).innerHTML&&"X"==document.getElementById(6).innerHTML?x():
"X"==document.getElementById(1).innerHTML&&"X"==document.getElementById(4).innerHTML&&"X"==document.getElementById(7).innerHTML?x():
"X"==document.getElementById(2).innerHTML&&"X"==document.getElementById(5).innerHTML&&"X"==document.getElementById(8).innerHTML?x():
"X"==document.getElementById(0).innerHTML&&"X"==document.getElementById(4).innerHTML&&"X"==document.getElementById(8).innerHTML?x():
"X"==document.getElementById(2).innerHTML&&"X"==document.getElementById(4).innerHTML&&"X"==document.getElementById(6).innerHTML?x():
"O"==document.getElementById(0).innerHTML&&"O"==document.getElementById(1).innerHTML&&"O"==document.getElementById(2).innerHTML?o():
"O"==document.getElementById(3).innerHTML&&"O"==document.getElementById(4).innerHTML&&"O"==document.getElementById(5).innerHTML?o():
"O"==document.getElementById(6).innerHTML&&"O"==document.getElementById(7).innerHTML&&"O"==document.getElementById(8).innerHTML?o():
"O"==document.getElementById(0).innerHTML&&"O"==document.getElementById(3).innerHTML&&"O"==document.getElementById(6).innerHTML?o():
"O"==document.getElementById(1).innerHTML&&"O"==document.getElementById(4).innerHTML&&"O"==document.getElementById(7).innerHTML?o():
"O"==document.getElementById(2).innerHTML&&"O"==document.getElementById(5).innerHTML&&"O"==document.getElementById(8).innerHTML?o():
"O"==document.getElementById(0).innerHTML&&"O"==document.getElementById(4).innerHTML&&"O"==document.getElementById(8).innerHTML?o():
"O"==document.getElementById(2).innerHTML&&"O"==document.getElementById(4).innerHTML&&"O"==document.getElementById(6).innerHTML&&o()
}
function x(){alert("Ha guanyat X!");c=2}
function o(){alert("Ha guanyat O!");c=2}
body{background-color:#001c5a}
button{
cursor:pointer;
font-family:Tahoma;
font-weight:bolder;
font-size:xx-large;
}
#s{
cursor:default;
margin: 2%;
color:white
}
#q{
width:30rem;
display:flex;
flex-wrap:wrap;
border:solid #c1133d
}
#q button{
display:flex;
flex-direction:column;
width:10rem;
height:10rem;
padding-top:3.5rem;
background-color:#84C7D6;
color:#000;
border:solid #c1133d
}
#x {
width:30rem;
margin: 2%;
padding:2% 2%;
background-color:#c1133d;
color:white;
border:0;
border-radius:66px
}
<html>
<head>
<link rel="stylesheet" href="b.css">
<script src="c.js"></script>
<title>3 en ratlla</title>
</head>
<body>
<center>
<h1 id="s">A jugar!</h1>
<div id="q">
<button id="0" onclick="a(0)"></button>
<button id="1" onclick="a(1)"></button>
<button id="2" onclick="a(2)"></button>
<button id="3" onclick="a(3)"></button>
<button id="4" onclick="a(4)"></button>
<button id="5" onclick="a(5)"></button>
<button id="6" onclick="a(6)"></button>
<button id="7" onclick="a(7)"></button>
<button id="8" onclick="a(8)"></button>
</div>
<button id="x" onclick="r(0)">Tornar a començar</button>
</center>
</body>
</html>

我尝试过不同的浏览器和操作系统，它应该工作，但有时它不。我不知道为什么在Windows中没有使用我想要的字体。

浏览器:

Firefox
  • 谷歌Chrome

解决方案(不工作):

  • text-align
  • justify-content
  • vertical-align

尝试使用display:flex，它为我工作。

var c=0
function a(b){
"X"!=document.getElementById(b).innerHTML&&"O"!=document.getElementById(b).innerHTML&&0==c?(document.getElementById(b).innerHTML="X",c=1):
"X"!=document.getElementById(b).innerHTML&&"O"!=document.getElementById(b).innerHTML&&1==c&&(document.getElementById(b).innerHTML="O",c=0)
z()
}
function r(b){for(c=0;8>=b;b++)document.getElementById(b).innerHTML=""}
function z(){
"X"==document.getElementById(0).innerHTML&&"X"==document.getElementById(1).innerHTML&&"X"==document.getElementById(2).innerHTML?x():
"X"==document.getElementById(3).innerHTML&&"X"==document.getElementById(4).innerHTML&&"X"==document.getElementById(5).innerHTML?x():
"X"==document.getElementById(6).innerHTML&&"X"==document.getElementById(7).innerHTML&&"X"==document.getElementById(8).innerHTML?x():
"X"==document.getElementById(0).innerHTML&&"X"==document.getElementById(3).innerHTML&&"X"==document.getElementById(6).innerHTML?x():
"X"==document.getElementById(1).innerHTML&&"X"==document.getElementById(4).innerHTML&&"X"==document.getElementById(7).innerHTML?x():
"X"==document.getElementById(2).innerHTML&&"X"==document.getElementById(5).innerHTML&&"X"==document.getElementById(8).innerHTML?x():
"X"==document.getElementById(0).innerHTML&&"X"==document.getElementById(4).innerHTML&&"X"==document.getElementById(8).innerHTML?x():
"X"==document.getElementById(2).innerHTML&&"X"==document.getElementById(4).innerHTML&&"X"==document.getElementById(6).innerHTML?x():
"O"==document.getElementById(0).innerHTML&&"O"==document.getElementById(1).innerHTML&&"O"==document.getElementById(2).innerHTML?o():
"O"==document.getElementById(3).innerHTML&&"O"==document.getElementById(4).innerHTML&&"O"==document.getElementById(5).innerHTML?o():
"O"==document.getElementById(6).innerHTML&&"O"==document.getElementById(7).innerHTML&&"O"==document.getElementById(8).innerHTML?o():
"O"==document.getElementById(0).innerHTML&&"O"==document.getElementById(3).innerHTML&&"O"==document.getElementById(6).innerHTML?o():
"O"==document.getElementById(1).innerHTML&&"O"==document.getElementById(4).innerHTML&&"O"==document.getElementById(7).innerHTML?o():
"O"==document.getElementById(2).innerHTML&&"O"==document.getElementById(5).innerHTML&&"O"==document.getElementById(8).innerHTML?o():
"O"==document.getElementById(0).innerHTML&&"O"==document.getElementById(4).innerHTML&&"O"==document.getElementById(8).innerHTML?o():
"O"==document.getElementById(2).innerHTML&&"O"==document.getElementById(4).innerHTML&&"O"==document.getElementById(6).innerHTML&&o()
}
function x(){alert("Ha guanyat X!");c=2}
function o(){alert("Ha guanyat O!");c=2}
body{background-color:#001c5a}
button{
cursor:pointer;
font-family:Tahoma;
font-weight:bolder;
font-size:xx-large;
}
#s{
cursor:default;
margin: 2%;
color:white
}
#q{
width:30rem;
display:flex;
flex-wrap:wrap;
border:solid #c1133d
}
#q button{
display:flex;
padding: 0;
justify-content: center;
align-content: space-around;
align-items: center;
width:10rem;
height:10rem;
background-color:#84C7D6;
color:#000;
border:solid #c1133d
}
#x {
width:30rem;
margin: 2%;
padding:2% 2%;
background-color:#c1133d;
color:white;
border:0;
border-radius:66px
}
<html>
<head>
<link rel="stylesheet" href="b.css">
<script src="c.js"></script>
<title>3 en ratlla</title>
</head>
<body>
<center>
<h1 id="s">A jugar!</h1>
<div id="q">
<button id="0" onclick="a(0)"></button>
<button id="1" onclick="a(1)"></button>
<button id="2" onclick="a(2)"></button>
<button id="3" onclick="a(3)"></button>
<button id="4" onclick="a(4)"></button>
<button id="5" onclick="a(5)"></button>
<button id="6" onclick="a(6)"></button>
<button id="7" onclick="a(7)"></button>
<button id="8" onclick="a(8)"></button>
</div>
<button id="x" onclick="r(0)">Tornar a començar</button>
</center>
</body>
</html>

赋予按钮flexbox样式:

button {
display: flex;
align-items: center;
justify-content: center;
}

并删除顶部填充。

var c = 0
function a(b) {
var el = document.getElementById(b);
"X" != el.innerHTML && "O" != el.innerHTML && 0 == c ? (el.innerHTML = "X", c = 1) :
"X" != el.innerHTML && "O" != el.innerHTML && 1 == c && (el.innerHTML = "O", c = 0)
z()
}
function r(b) {
for (c = 0; 8 >= b; b++) document.getElementById(b).innerHTML = ""
}
function z() {
"X" == document.getElementById(0).innerHTML && "X" == document.getElementById(1).innerHTML && "X" == document.getElementById(2).innerHTML ? x() :
"X" == document.getElementById(3).innerHTML && "X" == document.getElementById(4).innerHTML && "X" == document.getElementById(5).innerHTML ? x() :
"X" == document.getElementById(6).innerHTML && "X" == document.getElementById(7).innerHTML && "X" == document.getElementById(8).innerHTML ? x() :
"X" == document.getElementById(0).innerHTML && "X" == document.getElementById(3).innerHTML && "X" == document.getElementById(6).innerHTML ? x() :
"X" == document.getElementById(1).innerHTML && "X" == document.getElementById(4).innerHTML && "X" == document.getElementById(7).innerHTML ? x() :
"X" == document.getElementById(2).innerHTML && "X" == document.getElementById(5).innerHTML && "X" == document.getElementById(8).innerHTML ? x() :
"X" == document.getElementById(0).innerHTML && "X" == document.getElementById(4).innerHTML && "X" == document.getElementById(8).innerHTML ? x() :
"X" == document.getElementById(2).innerHTML && "X" == document.getElementById(4).innerHTML && "X" == document.getElementById(6).innerHTML ? x() :
"O" == document.getElementById(0).innerHTML && "O" == document.getElementById(1).innerHTML && "O" == document.getElementById(2).innerHTML ? o() :
"O" == document.getElementById(3).innerHTML && "O" == document.getElementById(4).innerHTML && "O" == document.getElementById(5).innerHTML ? o() :
"O" == document.getElementById(6).innerHTML && "O" == document.getElementById(7).innerHTML && "O" == document.getElementById(8).innerHTML ? o() :
"O" == document.getElementById(0).innerHTML && "O" == document.getElementById(3).innerHTML && "O" == document.getElementById(6).innerHTML ? o() :
"O" == document.getElementById(1).innerHTML && "O" == document.getElementById(4).innerHTML && "O" == document.getElementById(7).innerHTML ? o() :
"O" == document.getElementById(2).innerHTML && "O" == document.getElementById(5).innerHTML && "O" == document.getElementById(8).innerHTML ? o() :
"O" == document.getElementById(0).innerHTML && "O" == document.getElementById(4).innerHTML && "O" == document.getElementById(8).innerHTML ? o() :
"O" == document.getElementById(2).innerHTML && "O" == document.getElementById(4).innerHTML && "O" == document.getElementById(6).innerHTML && o()
}
function x() {
alert("Ha guanyat X!");
c = 2
}
function o() {
alert("Ha guanyat O!");
c = 2
}
body {
background-color: #001c5a
}
button {
display: flex;            /* add */
align-items: center;      /* add */
justify-content: center;  /* add */
cursor: pointer;
font-family: Tahoma;
font-weight: bolder;
font-size: xx-large;
}
#s {
cursor: default;
margin: 2%;
color: white
}
#q {
width: 30rem;
display: flex;
flex-wrap: wrap;
border: solid #c1133d
}
#q button {
display: flex;
flex-direction: column;
width: 10rem;
height: 10rem;
/* padding-top: 3.5rem; -- remove */
background-color: #84C7D6;
color: #000;
border: solid #c1133d
}
#x {
width: 30rem;
margin: 2%;
padding: 2% 2%;
background-color: #c1133d;
color: white;
border: 0;
border-radius: 66px
}
<html>
<head>
<link rel="stylesheet" href="b.css">
<script src="c.js"></script>
<title>3 en ratlla</title>
</head>
<body>
<center>
<h1 id="s">A jugar!</h1>
<div id="q">
<button id="0" onclick="a(0)"></button>
<button id="1" onclick="a(1)"></button>
<button id="2" onclick="a(2)"></button>
<button id="3" onclick="a(3)"></button>
<button id="4" onclick="a(4)"></button>
<button id="5" onclick="a(5)"></button>
<button id="6" onclick="a(6)"></button>
<button id="7" onclick="a(7)"></button>
<button id="8" onclick="a(8)"></button>
</div>
<button id="x" onclick="r(0)">Tornar a començar</button>
</center>
</body>
</html>

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium