嘿，实际上我做了一个 html 页面，其中有两个部分，当我点击第一部分时，数字会增加，当我点击第二部分时，第二部分的数字会增加。我为此使用了 javascript。现在我在每个页面的底部做了一个按钮。我想要当我点击那个按钮时数字应该减少我尝试了很多方法但是每次我失败当你运行 snipet 点击开始按钮你会看到我想要的减号按钮当我点击那个分数应该减少 angular.module('scoreKeeper', []).controller('score', ['$scope', function ($scope) { $scope.gameInfo = { gameStarted: false, servesSinceSwitch: 0, scoreSwitchMode: 0, numberOfPlayers: 2 }; $scope.team1 = { name: "Team 1", score: 0, serving: false }; $scope.team2 = { name: "Team 2", score: 0, serving: false }; $scope.player1 = { name: "P1", serving: true }; $scope.player2 = { name: "P2", serving: true }; $scope.player3 = { name: null, serving: false }; $scope.player4 = { name: null, serving: false }; $scope.startGame = function () {$scope.gameInfo.gameStarted = true;}; $scope.players = function (n) { $scope.gameInfo.numberOfPlayers = n; if (n == 2) { $scope.player3.name = null; $scope.player4.name = null; } else { $scope.player3.name = "P3"; //$scope.player3.serving = true; $scope.player4.name = "P4"; //$scope.player4.serving = true; } }; $scope.addPoint = function (i) { // Start the game, give the Serving class to the person who won the rally if (!$scope.team1.serving && !$scope.team2.serving) { $scope['team' + i].serving = true; $scope.footer.message = "Game on!"; } else { // Increment the player's score, how many serves since the last switch, and the highest current score $scope['team' + i].score++; $scope.gameInfo.servesSinceSwitch++; $scope.gameInfo.highestScore = Math.max($scope.team1.score, $scope.team2.score);
3 回答
慕田峪9158850
TA贡献1794条经验 获得超7个赞
你可以通过这样做来修复它。
在 HTML 中
<header ng-click="addPoint(1, 1)" ng-class="{'serving__isServing':player1.serving,
<h3 ng-click="addPoint(2, -1)" type="button" id="subt1"
在JS中
$scope.addPoint = function (i, points_to_add)
所以现在你必须点击标题来添加...
见下面的代码。（运行代码段）
angular.module('scoreKeeper', []).
controller('score', ['$scope', function ($scope) {
$scope.gameInfo = {
gameStarted: false,
servesSinceSwitch: 0,
scoreSwitchMode: 0,
numberOfPlayers: 2 };
$scope.team1 = {
name: "Team 1",
score: 0,
serving: false };
$scope.team2 = {
name: "Team 2",
score: 0,
serving: false };
$scope.player1 = {
name: "P1",
serving: true };
$scope.player2 = {
name: "P2",
serving: true };
$scope.player3 = {
name: null,
serving: false };
$scope.player4 = {
name: null,
serving: false };
$scope.startGame = function () {$scope.gameInfo.gameStarted = true;};
$scope.players = function (n) {
$scope.gameInfo.numberOfPlayers = n;
if (n == 2) {
$scope.player3.name = null;
$scope.player4.name = null;
} else {
$scope.player3.name = "P3";
//$scope.player3.serving = true;
$scope.player4.name = "P4";
//$scope.player4.serving = true;
}
};
$scope.addPoint = function (i, points_to_add) {
// Start the game, give the Serving class to the person who won the rally
if (!$scope.team1.serving && !$scope.team2.serving) {
$scope['team' + i].serving = true;
$scope.footer.message = "Game on!";
} else {
// Increment the player's score, how many serves since the last switch, and the highest current score
$scope['team' + i].score+=points_to_add;
if ($scope['team' + i].score== -1) {
$scope['team' + i].score=0;
}
$scope.gameInfo.servesSinceSwitch++;
$scope.gameInfo.highestScore = Math.max($scope.team1.score, $scope.team2.score);
// Echo who's in the lead or if it's tied
if ($scope.team1.score > $scope.team2.score) {
if ($scope.player3.name) {
$scope.gameInfo.teamWithHighScore = $scope.team1.name;
} else {
$scope.gameInfo.teamWithHighScore = $scope.player1.name;
}
$scope.footer.message = $scope.gameInfo.teamWithHighScore + " is in the lead";
} else if ($scope.team1.score < $scope.team2.score) {
if ($scope.player3.name) {
$scope.gameInfo.teamWithHighScore = $scope.team2.name;
} else {
$scope.gameInfo.teamWithHighScore = $scope.player2.name;
}
$scope.footer.message = $scope.gameInfo.teamWithHighScore + " is in the lead";
} else if ($scope.team1.score == $scope.team2.score) {
$scope.footer.message = "Game is tied";
}
if ($scope.team1.score == 10 && $scope.team2.score == 10) {
$scope.gameInfo.scoreSwitchMode = 1;
}
// Figure out if serves are switching by 5
if ($scope.gameInfo.servesSinceSwitch == 5 && $scope.gameInfo.scoreSwitchMode == 0) {
$(".team").toggleClass("team__isServing");
$scope.team1.serving = !$scope.team1.serving;
$scope.team2.serving = !$scope.team2.serving;
if ($scope.gameInfo.numberOfPlayers == 4) {
if ($scope.team1.serving) {
$scope.player1.serving = !$scope.player1.serving;
$scope.player3.serving = !$scope.player3.serving;
} else {
$scope.player2.serving = !$scope.player2.serving;
$scope.player4.serving = !$scope.player4.serving;
}
}
$scope.gameInfo.servesSinceSwitch = 0;
// Or by 1
} else if ($scope.gameInfo.scoreSwitchMode == 1) {
$(".team").toggleClass("team__isServing");
$scope.team1.serving = !$scope.team1.serving;
$scope.team2.serving = !$scope.team2.serving;
if ($scope.gameInfo.numberOfPlayers == 4) {
if ($scope.team1.serving) {
$scope.player1.serving = !$scope.player1.serving;
$scope.player3.serving = !$scope.player3.serving;
} else {
$scope.player2.serving = !$scope.player2.serving;
$scope.player4.serving = !$scope.player4.serving;
}
}
}
// Figure out if the game is over and who won
if (Math.abs($scope.team1.score - $scope.team2.score) >= 2 && $scope.gameInfo.highestScore >= 21) {
$(".scoreBoard").addClass("dimmed");
$scope.footer.message = "Game over! " + $scope.gameInfo.teamWithHighScore + " wins!";
}
}
};
$scope.footer = {message: "Rally for serve" };
}]);
* {
box-sizing: border-box;
}
body {
padding: 0;
margin: 0;
height: 100vh;
width: 100vw;
font-family: sans-serif;
background: #ECF0C9;
}
.score {
display: flex;
justify-content: center;
align-items: center;
flex: 1;
position: fixed;
height: 90vh;
width: 100%;
z-index: 999;
color: #ECF0C9;
font-size: 20vmax;
pointer-events: none;
}
.score > span {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
}
.screen {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
}
.scoreBoard {
flex: 1;
display: flex;
justify-content: space-between;
}
.team {
color: #ECF0C9;
flex: 1;
display: flex;
flex-direction: column;
}
.team.team-1 {
margin-right: 4px;
}
.team.team-1 .player-right {
background: #45B29D;
margin-top: 2px;
}
.team.team-1 .player-left {
background: #DF5A49;
}
.team.team-1 .serving__isServing {
order: 1;
}
.team.team-1 .serving__isNotServing {
order: -1;
}
.team.team-2 {
margin-left: 4px;
}
.team.team-2 .player-left {
background: #E27A3F;
margin-top: 2px;
}
.team.team-2 .player-right {
background: #EFC94C;
}
.team.team-2 .serving__isServing {
order: -1;
}
.team.team-2 .serving__isNotServing {
order: 1;
}
.team.team__isServing .serving__isServing {
color: #ECF0C9;
animation: serving 1s infinite reverse;
}
.player {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
}
.player input {
width: 90%;
height: 10vh;
background: #334D5C;
color: #ECF0C9;
border: none;
text-align: center;
font-size: 8vh;
}
.player.player-alone {
order: 3;
}
header, input.teamName {
display: flex;
justify-content: center;
align-items: center;
background: #334D5C;
color: #6b7e7d;
max-height: 10vh;
font-size: 8vh;
flex: 1;
border: none;
text-align: center;
}
@keyframes serving {
0% {
opacity: 1;
}
100% {
opacity: .5;
}
}
footer {
display: flex;
justify-content: center;
align-items: center;
height: 10vh;
font-size: 5vmin;
color: #334D5C;
}
footer.menu {
display: flex;
justify-content: space-between;
padding: 0 2vw;
}
footer.menu div {
display: flex;
flex: 1;
justify-content: space-around;
}
footer.menu button {
background: #334D5C;
color: #ECF0C9;
border: none;
height: 9vh;
font-size: 7vh;
padding: 0 2vw;
}
footer.menu button.notSelected {
color: #909f93;
}
.dimmed {
opacity: .5;
pointer-events: none;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body ng-app="scoreKeeper" ng-controller="score">
<div class="screen screen-start" ng-if="!gameInfo.gameStarted">
<div class="scoreBoard">
<div class="team team-1">
<input type="text" class="teamName" ng-model="team1.name" ng-if="gameInfo.numberOfPlayers == 4"></input>
<div class="player player-left">
<input type="text" ng-model="player1.name"></input>
</div>
<div class="player player-right player-serveSpot" ng-if="gameInfo.numberOfPlayers == 4">
<input type="text" ng-model="player3.name"></input>
</div>
</div>
<div class="team team-2">
<input type="text" class="teamName" ng-model="team2.name" ng-if="gameInfo.numberOfPlayers == 4"></input>
<div class="player player-right">
<input type="text" ng-model="player2.name"></input>
</div>
<div class="player player-left" ng-if="gameInfo.numberOfPlayers == 4">
<input type="text" ng-model="player4.name"></input>
</div>
</div>
</div>
<footer class="menu">
<div>
<button ng-click="players(2)" ng-class="{'notSelected':gameInfo.numberOfPlayers == 4}">2</button>
<button ng-click="players(4)" ng-class="{'notSelected':gameInfo.numberOfPlayers == 2}">4</button>
</div>
<div>
<button ng-click="startGame()">START</button>
</div>
</footer>
</div>
<div class="score" ng-if="team1.serving || team2.serving">
<span>{{team1.score}}</span>
<span>{{team2.score}}</span>
</div>
<div class="screen screen-game" ng-if="gameInfo.gameStarted">
<div class="scoreBoard">
<div class="team team-1" ng-class="{'team__isServing':team1.serving}">
<header ng-click="addPoint(1, 1)" ng-class="{'serving__isServing':player1.serving, 'serving__isNotServing':!player1.serving}">{{player1.name}}</header>
<div class="player player-left" ng-class="{'player-alone':!player3.name}" style="position:relative">
<h3 ng-click="addPoint(2, -1)" type="button" id="subt1" style="position: absolute;bottom: 0;left: 10px;font-size: 50px;color: white;font-weight:bolder; margin: 0px !important;cursor: pointer;">-</h3></div>
<div class="player player-right player-serveSpot" ng-if="player3.name"></div>
<header ng-class="{'serving__isServing':player3.serving, 'serving__isNotServing':!player3.serving}" ng-if="player3.name">{{player3.name}}</header>
</div>
<div class="team team-2" ng-class="{'team__isServing':team2.serving}">
<header ng-click="addPoint(2, 1)" ng-class="{'serving__isServing':player2.serving, 'serving__isNotServing':!player2.serving}">{{player2.name}}</header>
<div class="player player-right" ng-class="{'player-alone':!player3.name}"style="position:relative">
<h1 ng-click="addPoint(2, -1)" type="button" id="subt2"style="position: absolute;bottom: 0;right: 10px;font-size: 50px;color: white;font-weight:bolder; margin: 0px !important;cursor: pointer;">-</h1></div>
<div class="player player-left" ng-if="player4.name"></div>
<header ng-class="{'serving__isServing':player4.serving, 'serving__isNotServing':!player4.serving}" ng-if="player4.name">{{player4.name}}</header>
</div>
</div>
<footer>{{footer.message}}</footer>
</div>
</body>
</html>
呼如林
TA贡献1798条经验 获得超3个赞
您的按钮没有附加任何功能.. 问题在这里：
<div class="team team-1" ng-click="addPoint(1)" ....>
<h3 type="button" id="subt1" style="...">-</h3></div>
</div>
ng-click="addPoint(-1)"
你会有类似的东西
<h3 type="button" ng-click="addPoint(-1)" id="subt1" style="...">-</h3></div>
negative当他们单击按钮时，您需要添加一个。
也更改<h3 type="button"为只是<button></button> 或<input type="submit">
更新：问题就在这里！
<div class="team team-1" ng-click="addPoint(1)" ....>
<h3 type="button" id="subt1" style="...">-</h3></div>
</div>
您h3在 addPoints 元素中有嵌套。如果不单击 addPoint 元素，则无法单击 h3 元素。
因为 h3 是 addPoints 的孩子。您需要删除它，
您仍然可以将它放置在同一个位置，但是当它没有嵌套时。
<h3 type="button" ng-click="addPoint(-1)" id="subt1" style="...">-</h3>
然后添加适当的javascript逻辑。我会改变 addPoint() 到 addPoint(element_number, points_to_add)
所以你做 addPoint(1, -1)
实际上我会更改所有代码。
添加回答
举报
0/150
提交
取消