How to decrease the values using a function

前端未结

关注

 3  1530

终归单人心 2021-01-27 23:05

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



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;
}



	




 

  
  
    
      
      
        
        
          
        
        
          
        
      
      
      
        
        
          
        
        
          
        
      
      
    
    
      
        
        
      
      
        
      
    
  
  
  
    {{team1.score}}
    {{team2.score}}
  
  
  
    
      
      
        {{player1.name}}
               
            -
        
        {{player3.name}}
             
      
      
        {{player2.name}}
           
            -
        
        {{player4.name}}
      
      
    
    {{footer.message}}