How to make calculator in asp.net using javascript?_问答_开发者

Howdy! I want to make calculator in asp开发者_如何学Python.net. without involving html and ajax, I want to use java script with asp. Any guide??

You can get started here for JavaScript. You really don't need ASP for a simple calculator although it wouldn't hurt anything to create an ASP project for this I suppose. Just keep in mind, that in this case, shoehorning ASP into this project is definitely not necessary and probably a bit of overkill.

If you are interested in jQuery at all, there is a much better tutorial for a jQuery calculator here.

You obviously need HTML if you want to do this in a browser, otherwise you won't have any input controls. A really simple calculator can be easily made in a few lines of JavaScript (you don't even need jQuery). Something like:

<script type="text/javascript">
    function calculate()
    {
        var v = document.getElementById("data");
        alert(eval(v.value));
    }
</script>


<input type="text" id="data" />
<input type="button" value="Calculate" onclick="calculate()" />

Just type your equation in the text box (eg. 2 + 4 / 10) and click the button!

var cnt = 0;

function addcount(x) {
    var y = document.getElementById("text1").value;
    var l = y.length;
    var last = y.charAt(l - 1);
    if (last != x) {
        cnt = 0;
    }
    cnt = parseInt(cnt) + parseInt(1);
    if (cnt <= 1) {
        document.getElementById("text1").value += x;
    }
    else {
        document.getElementById("text1").innerHTML = '';
    }
}

function event1(m) {
    document.getElementById("text1").value += m;
    var z = document.getElementById("text1").value;
    document.getElementById("text3").value = eval(z);
    document.getElementById("text1").value = eval(z);
}

function event2() {

    var x = document.getElementById("text1").value;

    document.getElementById("text1").value = eval(x);
}

function event3() {
    document.getElementById("text1").value = "";
    document.getElementById("text3").value = "";
}

function event4() {
    var x = document.getElementById("text1").value;
    var sillyString = x.slice(0, -1);
    document.getElementById("text1").value = sillyString;
}

.curve{
    border-radius: 13px;
}
.col{
    background-color: #00acc1;
}
.col1{
    background-color: #e8f5e9;
}
.col2{
    background-color: #1C2331;
}

#text1{

}
#text3{

}

<html>
<head>
    <title>Calculator</title>
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
    <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

</head>
<body>
<div class="curve" style="text-align: center;">
    <table  class="curve col2">
        <tr>
            <th colspan=6 class="curve col"><h1>Calculator</h1></th>
        </tr>
        <tr >
            <td colspan=6><input type="text" id="text1" class="curve col1" style="text-align:right;width:100%;"/></td>
        </tr>
        <tr >
            <td colspan=6><input type="text" id="text3"  class="curve col1" style="text-align:right;width:100%;"/></td>
        </tr>
        <tr>

            <td><button type="button" value="/" onClick="addcount(this.value)" class="curve btn-primary" style="padding:8px 14px;">/</button></td>
            <td><button type="button" value="." onClick="addcount(this.value)" class="curve btn-primary" style="padding:8px 14px;">.</button></td>
            <td><button type="button" value="*" onClick="addcount(this.value)" class="curve btn-primary"style="padding:8px 14px;">*</button></td>
            <td><button type="button" value="-" onClick="addcount(this.value)" class="curve btn-primary"style="padding:8px 14px;">-</button></td>
            <td><button type="button" value="" onClick="event3(this.value)"  class="curve btn-primary"style="padding:6px 18px;">C</button></td>
        </tr>
        <tr>
            <td><button type="button" value="7" onClick="event1(this.value)" class="curve btn-primary" style="padding:7px 12px;">7</button></td>
            <td><button type="button" value="8" onClick="event1(this.value)"  class="curve btn-primary"style="padding:7px 12px;">8</button></td>
            <td><button type="button" value="9" onClick="event1(9)" class="curve btn-primary" style="padding:7px 12px;">9</button></td>
            <td rowspan=2><button type="button" id="ad"value="+" class="curve btn-primary" style="height:70px;padding:8px 13px;" onClick="addcount(this.value)">+</button></td>
            <td><button type="button" value="" onClick="event4(this.value)" class="curve btn-primary" style="padding:6px 10px;">DEL</button></td>
        </tr>
        <tr>
            <td><button type="button" value="4" onClick="event1(4)" class="curve btn-primary" style="padding:7px 12px;">4</button></td>
            <td><button type="button" value="5" onClick="event1(5)" class="curve btn-primary" style="padding:7px 12px;">5</button></td>
            <td><button type="button" value="6" onClick="event1(6)" class="curve btn-primary" style="padding:7px 12px;">6</button></td>
        </tr>
        <tr>
            <td><button type="button" value="1" onclick="event1(1)" class="curve btn-primary" style="padding:7px 12px;">1</button></td>
            <td><button type="button" value="2" onClick="event1(2)" class="curve btn-primary" style="padding:7px 12px;">2</button></td>
            <td><button type="button" value="3" onClick="event1(3)" class="curve btn-primary" style="padding:7px 12px;">3</button></td>
            <td rowspan=2><button type="button" class="curve btn-primary" style="height:70px;padding:8px 13px;" onClick="event2()">=</button></td>
        </tr>
        <tr class="curve">
            <td><button type="button" class="curve btn-primary" onclick="event1(0)" style="padding:7px 12px;">0</button></td>
        </tr>
    </table>
</div>

</body>
</html>