如何使用函数降低数值 [英] How to decrease the values using a function
本文介绍了如何使用函数降低数值的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
嘿，实际上我制作了一个html页面，当我在第一部分中单击时，该页面上有两个部分，而当我在第二部分中单击时，第二部分中的数字增加了.我用JavaScript.现在，我在每一页的底部做了一个按钮.我想当我点击那个按钮时数字应该减少我尝试了很多方法，但是每次我失败 当您运行片段时，单击开始按钮，您将看到我想要的减号按钮，当我单击该分数时应降低
Hey there actually i made a an html page on which there are two portion when i click in first portion the number increases and when i click in second portion the number in second portion increases. I used javascript for it. Now i made a button at the bottom of each page . I want when i click on that button the number should decrease i tried a lot of methods but everytime i fail When u will run the snipet click on start button u will see minus button i want when i click on that score should decrease
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);
// 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;
}
<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>
<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-click="addPoint(1)" ng-class="{'team__isServing':team1.serving}">
<header 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 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-click="addPoint(2)" ng-class="{'team__isServing':team2.serving}">
<header 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 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>
推荐答案
您的按钮没有附加的功能. 问题在这里:
Your button has no functionality attached to it.. The problem is here:
<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.
you need to add negative one when they click the button.
也将<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元素.
you have the h3 nested inside the addPoints element.
you can not click on the h3 element without clicking on the addPoint element.
因为h3是addPoints的子代.
您需要将其删除
您仍可以将其放置在同一位置，但不嵌套时.
because the h3 is a child of the addPoints.
You NEED to remove it
you can still position it in the same place but when its not nested.
<h3 type="button" ng-click="addPoint(-1)" id="subt1" style="...">-</h3>
然后添加适当的javascript逻辑.
我会将addPoint()更改为addPoint(element_number，points_to_add)
所以你要做addPoint(1，-1)
then add the appropriate javascript logic.
i would change addPoint() to addPoint(element_number, points_to_add)
so you do addPoint(1, -1)
实际上，我会更改所有代码.
actually i would change all the code.
这篇关于如何使用函数降低数值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
