连续减小功能值

Question

嘿，实际上我制作了一个html页面，当我在第一部分中单击时，该页面上有两个部分，而当我在第二部分中单击时，第二部分中的数字增加了。 我为此使用了Angular JS。 现在，我在每一页的底部做了一个按钮。 我想当我单击该按钮时该数字应减少，但是当我单击该按钮时它使用的功能仅减少一次。 如果您还有其他疑问如何使用函数降低值我在这里有更多详细信息

<button  type="button" ng-click="delPoint(1)"  id="sub1"
         style="position: absolute;bottom: 0;left: 10px;font-size: 50px;color: white;font-weight:bolder;    margin: 0px !important;cursor: pointer;">-</button>

<button  type="button" ng-click="delPoint(2)" id="sub2"
         style="position: absolute;bottom: 0;right: 10px;font-size: 50px;color: white;font-weight:bolder;    margin: 0px !important;cursor: pointer;">-</button>

$scope.delPoint = function (j) {
   if ($scope.team1.score > 0 && $scope.team2.score >0){
      $scope['team' + j].score--;
      $scope.gameInfo.servesSinceSwitch--;
   }

Answer 1

 <!DOCTYPE html> <html> <head> <title>Game</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script> <style type="text/css"> .app{ width: 1040px; /*border: 5px solid red;*/ height: 800px; margin:0 auto; background: #ECF0C9; } .player{ position: relative; float: left; border: 5px solid red; width: 470px; height: 621px; margin: 20px; position: relative; } .centered{ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); /*border: 5px solid red;*/ font-size: 140px; height: 500px; width: 457px; text-align: center; color: white; } .player_name{ width: 400px; text-align: center; height: 37px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: #334D5C; color: #ECF0C9; } .controls{ /*border: 5px solid red;*/ margin: 20px; height: 100px; clear: both; } .number_of_players_option{ /*border: 5px solid blue;*/ height: 50px; margin: 20px; width: 100px; float: left; } .start_game_option{ /*border: 5px solid blue;*/ height: 50px; margin: 20px; width: 640px; float: left; } .status_bar{ /*border: 5px solid blue;*/ height: 50px; margin: 20px; width: 940px; } .reducer{ position: absolute; bottom: -18px; right: 10px; font-size: 100px; color: white; } .one{ background: #DF5A49; } .two{ background: #EFC94C; } .button{ background: #334D5C; color: #ECF0C9; float: right; height: 40px; width: 200px; letter-spacing: 2px; } .short_button{ background: #334D5C; color: #ECF0C9; float: right; height: 40px; width: 100px; letter-spacing: 2px; } .name{ text-align: center; background: #334D5C; color: #6b7e7d; height: 50px; } </style> </head> <body ng-app="scoreKeeper" ng-controller="score" > <div class="app"> <div ng-show="show_setup" class="setup"> <div ng-repeat="player in players" class={{player.class}}> <div class="centered"> <input class="player_name" ng-model=player.name> </div> </div> <div class="controls"> <div class="number_of_players_option"> <button class="short_button" ng-click="startGame(2)">2</button> </div> <div class="number_of_players_option"> <button class="short_button" ng-click="startGame(4)">4</button> </div> <div ng-click="show_setup = false" class="start_game_option"> <button class="button" ng-click="startGame()">START</button> </div> </div> </div> <div ng-show="!show_setup"class="game"> <div ng-repeat="player in players" class={{player.class}}> <div class="name"><br>{{player.name}}</div> <div class="centered" ng-click="addPoint(player)"> <h3>{{player.score}}</h3> </div> <div class="reducer" ng-click="removePoint(player)"> - </div> </div> <div class="controls"> <div class="status_bar">{{game_info.message}}</div> </div> </div> </div> <script type="text/javascript"> angular.module('scoreKeeper', []). controller('score', ['$scope', function ($scope) { //setup $scope.players = [ { name:"P1", score:0, class:"player one" }, { name:"P2", score:0, class:"player two" } ]; $scope.show_setup = true; $scope.addPoint=function(player){ player.score++; if(player.score == -1){player.score=0}; } $scope.removePoint=function(player){ player.score--; if(player.score == -1){player.score=0}; } }]); </script> </body> </html>

连续减小功能值

问题描述

1 个解决方案

解决方案1
0 已采纳 2019-09-14 01:23:23

连续减小功能值

问题描述

1 个解决方案

解决方案1 0 已采纳 2019-09-14 01:23:23

解决方案1
0 已采纳 2019-09-14 01:23:23