如何禁用html按钮上的“按下”效果

时间：2018-09-04 05:46:36

标签： javascript html css 

const buttons = document.querySelectorAll('button');

let playerTurn = 'X';

function runGame() {
	//for(i=0; i<9; i++) {
		buttons[0].addEventListener('click', function() {
			buttons[0].innerHTML = playerTurn;
		})
	}
body {
	background-color: coral;
}

h1 {
	font-family: 'Lobster';
	font-size: 1.9rem;
	text-align: center;
}

button {
	width: 100px;
	height: 100px;
	position: relative;
	left: 35px;
	top: 35px;
	background-color: coral;
	border: none;
	margin: 4px;
	transition-duration: 500ms;
	outline: none;
	cursor: pointer;
}

button:hover {
	background-color: black;
}

.game-box {
	background-color: black;
	width: 400px;
	height: 400px;
	border-radius: 10%;
	margin: auto;

}

.shave-left-top {
	border-top-left-radius: 10%;
}

.shave-right-top {
	border-top-right-radius: 10%;
}

.shave-left-bottom {
	border-bottom-left-radius: 10%;
}

.shave-right-bottom {
	border-bottom-right-radius: 10%;
}
<!DOCTYPE html>
<html>
<head>
	<title>javaScript Tic Tac Toe</title>
	<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="style.css">
	<meta charset="utf-8">
</head>
<body>
	<h1>javascript Tic Tac Toe</h1>

	<div class="game-box">
		<div class="row-1">
			<input type="button" name=""> class="shave-left-top" onclick="runGame();"></button> 
			<button onclick="runGame();"></button> 
			<button class="shave-right-top" onclick="runGame();"></button> 
		</div>

		<div class="row-2">
			<button onclick="runGame();"></button> 
			<button onclick="runGame();"></button> 
			<button onclick="runGame();"></button> 
		</div>

		<div class="row-3">
			<button class="shave-left-bottom" onclick="runGame();"></button> 
			<button onclick="runGame();"></button> 
			<button class="shave-right-bottom" onclick="runGame();"></button> 
		</div>

	</div>
<script type="text/javascript" src="script2.js"></script>
</body>
</html>

我正在尝试制作一个简单的javascript tic tac toe游戏。目前，我正在尝试单击一个按钮，并更改和显示其值，这与我想要的方式不起作用。如果您想看一看为什么感觉很轻松，但是主要的问题与按钮有关。单击它时，它会向下移动40px，如何在不使用disable属性的情况下将其禁用。

2 个答案:

答案 0 :(得分：0)

这可以通过将左浮动按钮设置为固定

const buttons = document.querySelectorAll('button');

let playerTurn = 'X';

function runGame() {
	//for(i=0; i<9; i++) {
		buttons[0].addEventListener('click', function() {
			buttons[0].innerHTML = playerTurn;
		})
	}
body {
	background-color: coral;
}

h1 {
	font-family: 'Lobster';
	font-size: 1.9rem;
	text-align: center;
}

button {
	width: 100px;
	height: 100px;
	position: relative;
	left: 35px;
	top: 35px;
	background-color: coral;
	border: none;
	margin: 4px;
	transition-duration: 500ms;
	outline: none;
	cursor: pointer;
    float: left;
}
.row-1:after,.row-2:after,.row-3:after {
    content: " ";
    display: block;
    clear: both;
}

button:hover {
	background-color: black;
}

.game-box {
	background-color: black;
	width: 400px;
	height: 400px;
	border-radius: 10%;
	margin: auto;

}

.shave-left-top {
	border-top-left-radius: 10%;
}

.shave-right-top {
	border-top-right-radius: 10%;
}

.shave-left-bottom {
	border-bottom-left-radius: 10%;
}

.shave-right-bottom {
	border-bottom-right-radius: 10%;
}
<!DOCTYPE html>
<html>
<head>
	<title>javaScript Tic Tac Toe</title>
	<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="style.css">
	<meta charset="utf-8">
</head>
<body>
	<h1>javascript Tic Tac Toe</h1>

	<div class="game-box">
		<div class="row-1">
			<input type="button" name=""> class="shave-left-top" onclick="runGame();"></button> 
			<button onclick="runGame();"></button> 
			<button class="shave-right-top" onclick="runGame();"></button> 
		</div>

		<div class="row-2">
			<button onclick="runGame();"></button> 
			<button onclick="runGame();"></button> 
			<button onclick="runGame();"></button> 
		</div>

		<div class="row-3">
			<button class="shave-left-bottom" onclick="runGame();"></button> 
			<button onclick="runGame();"></button> 
			<button class="shave-right-bottom" onclick="runGame();"></button> 
		</div>

	</div>
<script type="text/javascript" src="script2.js"></script>
</body>
</html>

答案 1 :(得分：0)

在CSS float中：添加了左键。

我稍微更改了JavaScript。单击每个按钮后，按钮将失去其单击侦听器，而不会被单击两次，playerTurn将交换。

const buttons = document.querySelectorAll('button');

let playerTurn = 'X';

for (i = 0; i < 9; i++) {
  buttons[i].addEventListener('click', runGame, false)
}

function runGame(event){
	playerTurn = playerTurn == 'X' ? 'O' : 'X';
  event.target.innerHTML = playerTurn;
  event.target.removeEventListener('click', runGame);
}
body {
  background-color: coral;
}

h1 {
  font-family: 'Lobster';
  font-size: 1.9rem;
  text-align: center;
}

button {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: coral;
  border: none;
  margin: 4px;
  transition-duration: 500ms;
  outline: none;
  cursor: pointer;
  float: left;
}

button:hover {
  background-color: #ff6d6d;
}

.game-box {
  background-color: black;
  width: 325px;
  height: 325px;
  border-radius: 10%;
  margin: auto;
  padding: 35px;
}

.shave-left-top {
  border-top-left-radius: 10%;
}

.shave-right-top {
  border-top-right-radius: 10%;
}

.shave-left-bottom {
  border-bottom-left-radius: 10%;
}

.shave-right-bottom {
  border-bottom-right-radius: 10%;
}
    <title>javaScript Tic Tac Toe</title>
    <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8">

    <h1>javascript Tic Tac Toe</h1>

    <div class="game-box">
      <div class="row-1">
        <button class="shave-left-top"></button>
        <button></button>
        <button class="shave-right-top"></button>
      </div>

      <div class="row-2">
        <button></button>
        <button></button>
        <button></button>
      </div>

      <div class="row-3">
        <button class="shave-left-bottom"></button>
        <button></button>
        <button class="shave-right-bottom"></button>
      </div>

    </div>
    <script type="text/javascript" src="script2.js"></script>

  </body>

</html>

相关问题
最新问题