Question

我尝试使用两个按钮增加文本值，文本每一个按钮增加一个值，或者将值增加10或者减少10，并且值不能超过10km或超过90公里。

这是应用程序屏幕，所以你可以看到我的意思：

enter image description here

更新：我现在已经获得了可以使用的代码，但它没有＆＃34; km＆＃34;数字后面的值为10,20,30而不是10km，20km，30km。有谁知道如何调整这些代码来做我想做的事情？

<script language='javascript' type='text/javascript'>
$(document).ready(function(){

$("#increment").click(function(){
if($('#number').val() !="90"){
var $n = $("#number");
$n.val(Number($n.val())+10);
}
}); 

$("#decrement").click(function(){
if($('#number').val() !="10"){
var $n = $("#number");
$n.val(Number($n.val())-10);
    }
});

});
</script>
</head>
<style>
.Radius{
font-size:14px;
font-family:"gillsans";
color: #4361AD;  
text-align: center;
}
</style>
<body>
<div id="Maincontainer">
<input type="text" value="10" id="number" class="Radius" style="background-color:transparent; border:0px solid white; width:110px;     margin-left:15px;"/>
<input type="button" id="increment" value="Increment"/>
<input type="button" id="decrement" value="decrement"/>
</div>
</body>

https://jsfiddle.net/deepanv29/4b7adopb/

Answer 1

<!DOCTYPE>
<html>
<head>
  <script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
</head>
<body>
  <div>
<body>
  <input type="text" value="10Km" id="number"/>
  <input type="hidden" value="10" id="number1"/>
  <input type="button" id="increment" value="Increment"/>
  <input type="button" id="decrement" value="decrement"/>
</body>
</div>

<script language='javascript' type='text/javascript'>
  $(document).ready(function(){
    $("#increment").click(function(){
      if($('#number1').val() !="90"){
        var $n = $("#number1");
        $n.val(Number($n.val())+10);
        var value = $n.val();
        $("#number").val(value +'Km');
       }
    }); 

    $("#decrement").click(function(){
      if($('#number1').val() !="10"){
        var $n = $("#number1");
        $n.val(Number($n.val())-10);
        var value = $n.val();
        $("#number").val(value +'Km');
      }
    });
  });
</script>
</body>
</html>

updates Js fiddle demo for the above code

Answer 2

您只需要在按钮点击时递增和递减值。

int value = 10;

protected void BtnIncre_Click(Object sender, EventArgs e)
{
    if (value < 90) 
    {
        value += 10;
        Session["Value"] = value;
    }
} 

protected void BtnDecre_Click(Object sender, EventArgs e)
{
    if (value > 10)
    {
        value -= 10;
        Session["Value"] = value;
     }
}

Answer 3

<!DOCTYPE>
<html>
<head>
</head>
<body>
    <input type="button" id="dec" value="DEC" onclick="dec();">
    <input type="text" id="Number_value" value="0" readonly>
    <input type="button" id="inc" value="INC" onclick="inc();">
    <script language='javascript' type='text/javascript'>
        function inc()
        {
            var val = parseInt(document.getElementById('Number_value').value);  
            val+=10;
            if(val>90) val = 90;
            document.getElementById('Number_value').value = val;
        }
        function dec()
        {
            var val = parseInt(document.getElementById('Number_value').value);  
            val-=10;
            if(va<10) val = 10;
            document.getElementById('Number_value').value = val;
        }
    </script>
</body>
</html>

如何使用两个按钮

3 个答案: