How to decrease the values using a function

前端未结

关注

 3  1463

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 secon

相关标签:

3条回答

忘掉有多难

2021-01-27 23:39

you can fix it by doing this.

in HTML

 <header  ng-click="addPoint(1, 1)" ng-class="{'serving__isServing':player1.serving, 
 <h3   ng-click="addPoint(2, -1)"    type="button"  id="subt1"

in JS

 $scope.addPoint = function (i, points_to_add)

so now you will have to click on the header to add... see code below. (run the snippet)

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>

0 讨论(0)

日久生厌

2021-01-27 23:44

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<style type="text/css">
	.metric{width: 300px; height: 100px; border: 5px solid red; margin:20px;
		font-size: 24px;}
</style>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

	<div class="container">
		<div class="metric" ng-click="addPoint(player_one, 1)">
			P1 Click To Add Point<br>
			{{player_one.score}}
		</div>
		<div class="metric" ng-click="addPoint(player_two, 1)">
			P2 Click To Add Point<br>
			{{player_two.score}}
		</div>
		<div class="metric" ng-click="addPoint(player_one, -1)">
			P1 Click To Remove Point<br>
			{{player_one.score}}
		</div>
		<div class="metric" ng-click="addPoint(player_two, -1)">
			P2 Click To Remove Point<br>
			{{player_two.score}}
		</div>
	</div>




</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.player_one = {score:0};
  $scope.player_two = {score:0};

  $scope.addPoint = function(player, points_to_add){
  	if(player.score >= 0 ) {
  		player.score += points_to_add;
   	}
   	if(player.score == -1) {
   		player.score = 0;
   	}
  }



});
</script>
</body>
</html>

0 讨论(0)

自闭症患者

2021-01-27 23:45
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)" 
```
you'll have something like
```
 <h3  type="button" ng-click="addPoint(-1)"  id="subt1" style="...">-</h3></div>    
```
you need to add negative one when they click the button.

also change <h3 type="button" to just <button></button> or <input type="submit">

Update: The problem is here!
```
<div class="team team-1" ng-click="addPoint(1)" ....>
 <h3  type="button"  id="subt1" style="...">-</h3></div>    
</div>
```
you have the h3 nested inside the addPoints element. you can not click on the h3 element without clicking on the addPoint element.

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>
```
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.
0 讨论(0)
发布评论:

提交评论
- 加载中...