HTML怎样实现简单计算器

单纯的html 只能画出个大概样式出来,在网页上实现简单计算器功能还需要Javascript. 或者是使用其它插件。

用html语言写一个计算器

<script>

var tmp=0;

function add(x){

var sum =eval(x);

return sum;

}

function getresult(){

var x = document.getElementById(“txt1”).value;

var re = add(x);

document.getElementById(“txt1”).value = re;

}

function getNumber(obj){

var str = document.getElementById(“txt1”).value;

document.getElementById(“txt1”).value = str + obj.value;

}

</script>

我用html写了个计算器大家有没有更简洁的代码

<!DOCTYPE html>

<html>

    <meta name=”content-type” content=”text/html; charset=UTF-8″>

    <head>

        <title>Calculator</title>

        

        <!–将按键内容以字符串形式存储在文字框中当按钮为“=”时,调用eval方法计算结果然后将结果输出文字框中–>

<script type=”text/javascript”>

    var numresult;

    var str;

    

    function onclicknum(nums) {

        str = document.getElementById(“nummessege”);

        str.value = str.value + nums;

    }

    function onclickclear() {

        str = document.getElementById(“nummessege”);

        str.value = “”;

    }

    function onclickresult() {

        str = document.getElementById(“nummessege”);

        numresult = eval(str.value);

        str.value = numresult;

        

    }

</script>

    </head>

    <body bgcolor=”skyblue” >

    

    <!–定义按键表格,每个按键对应一个事件触发–>

    

        <table border=”1″ align=”center” bgColor=”skyblue”

            style=”height: 350px; width: 270px”>

            <tr>

                <td colspan=”4″>

                    <input type=”text” id=”nummessege”

                        style=”height: 90px; width: 350px; font-size: 50px” />

                </td>

            </tr>

            <tr>

                <td>

                    <input type=”button” value=”1″ id=”1″ onclick=”onclicknum(1)”

                        style=”height: 70px; width: 90px; font-size: 35px”>

                </td>

                <td>

                    <input type=”button” value=”2″ id=”2″ onclick=”onclicknum(2)”

                        style=”height: 70px; width: 90px; font-size: 35px”>

                </td>

                <td>

                    <input type=”button” value=”3″ id=”3″ onclick=”onclicknum(3)”

                        style=”height: 70px; width: 90px; font-size: 35px”>

                </td>

                <td>

                    <input type=”button” value=”+” id=”add” onclick=”onclicknum(‘+’)”

                        style=”height: 70px; width: 90px; font-size: 35px”>

                </td>

            </tr>

            <tr>

                <td>

                    <input type=”button” value=”4″ id=”4″ onclick=”onclicknum(4)”

                        style=”height: 70px; width: 90px; font-size: 35px”>

                </td>

                <td>

                    <input type=”button” value=”5″ id=”5″ onclick=”onclicknum(5)”

                        style=”height: 70px; width: 90px; font-size: 35px”>

                </td>

                <td>

                    <input type=”button” value=”6″ id=”6″ onclick=”onclicknum(6)”

                        style=”height: 70px; width: 90px; font-size: 35px”>

                </td>

                <td>

                    <input type=”button” value=”-” id=”sub” onclick=”onclicknum(‘-‘)”

                        style=”height: 70px; width: 90px; font-size: 35px”>

                </td>

            </tr>

            <tr>

                <td>

                    <input type=”button” value=”7″ id=”7″ onclick=”onclicknum(7)”

                        style=”height: 70px; width: 90px; font-size: 35px”>

                </td>

                <td>

                    <input type=”button” value=”8″ id=”8″ onclick=”onclicknum(8)”

                        style=”height: 70px; width: 90px; font-size: 35px”>

                </td>

                <td>

                    <input type=”button” value=”9″ id=”9″ onclick=”onclicknum(9)”

                        style=”height: 70px; width: 90px; font-size: 35px”>

                </td>

                <td>

                    <input type=”button” value=”*” id=”mul” onclick=”onclicknum(‘*’)”

                        style=”height: 70px; width: 90px; font-size: 35px”>

                </td>

            </tr>

            <tr>

                <td colspan=”2″>

                    <input type=”button” value=”0″ id=”0″ onclick=”onclicknum(0)”

                        style=”height: 70px; width: 190px; font-size: 35px”>

                </td>

                <td>

                    <input type=”button” value=”.” id=”point” onclick=”onclicknum(‘.’)”

                        style=”height: 70px; width: 90px; font-size: 35px”>

                </td>

                <td>

                    <input type=”button” value=”/” id=”division”

                        onclick=”onclicknum(‘/’)”

                        style=”height: 70px; width: 90px; font-size: 35px”>

                </td>

            </tr>

            <tr>

                <td colspan=”2″>

                    <input type=”button” value=”Del” id=”clear”

                        onclick=”onclickclear()”

                        style=”height: 70px; width: 190px; font-size: 35px” />

                </td>

                <td colspan=”2″>

                    <input type=”button” value=”=” id=”result”

                        onclick=”onclickresult()”

                        style=”height: 70px; width: 190px; font-size: 35px” />

                </td>

            </tr>

        </table>

    </body>

</html>

html网页计算器代码怎么写

我这里有一个现成的,自己再改一下吧(<HTML>

<HEAD>

<SCRIPT LANGUAGE = “JavaScript”>

function calcu(){

var numb1= document.calc.num1.value;

var numb2= document.calc.num2.value;

var total= parseFloat(numb1)*parseFloat(numb2);

document.calc.result.value=total;

}

</SCRIPT>

<script type=”text/javascript” language=”JavaScript1.2″ src=”menu.js”></script>

</HEAD>

<BODY>

<FORM name=”calc”>

<P><BR>

<font size=”5″>会说话的QQ竞拍喽!</fo

<BR>

竟拍价?

<INPUT name=”num2″ TYPE=”text” id=”num2″ value=”120″ size=”15″> <BR>

购买数量:

<INPUT TYPE=”text” name=”num1″ size=”15″> <BR>

预计总价:

<INPUT name=”result” TYPE=”text” size=”15″>

</P>

<P>

<INPUT name=”getAnswer” TYPE=”button” id=”getAnswer” onClick=”calcu()”

value=”计算看看”><!–单机鼠标调

</P>

</FORM>

</BODY>

</HTML>

用HTML代码写一个计算器

<html>

<head>

<title>计算器</title>

</head>

<body bgcolor=”#ffffff” onload=”FKeyPad.ReadOut.focus();FKeyPad.ReadOut.select();”>

<FORM name=”Keypad” action=””>

<TABLE align=”center”>

<B>

<TABLE align=”center” border=2 width=50 height=60 cellpadding=1 cellspacing=5>

<TR>

<TD colspan=3 align=middle><input name=”ReadOut” type=”Text” onkeypress=”CheckOut()” size=24 value=”0″

width=100%></TD>

<TD></TD>

<TD><input name=”btnClear” type=”Button” value=” C ” onclick=”Clear()”></TD>

<TD><input name=”btnClearEntry” type=”Button” value=” CE ” onclick=”ClearEntry()”></TD>

</TR>

<TR>

<TD><input name=”btnSeven” type=”Button” value=” 7 ” onclick=”NumPressed(7)”></TD>

<TD><input name=”btnEight” type=”Button” value=” 8 ” onclick=”NumPressed(8)”></TD>

<TD><input name=”btnNine” type=”Button” value=” 9 ” onclick=”NumPressed(9)”></TD>

<TD></TD>

<TD><input name=”btnNeg” type=”Button” value=” +/- ” onclick=”Neg()”></TD>

<TD><input name=”btnPercent” type=”Button” value=” % ” onclick=”Percent()”></TD>

</TR>

<TR>

<TD><input name=”btnFour” type=”Button” value=” 4 ” onclick=”NumPressed(4)”></TD>

<TD><input name=”btnFive” type=”Button” value=” 5 ” onclick=”NumPressed(5)”></TD>

<TD><input name=”btnSix” type=”Button” value=” 6 ” onclick=”NumPressed(6)”></TD>

<TD></TD>

<TD align=middle><input name=”btnPlus” type=”Button” value=” + ” onclick=”Operation(‘+’)”> </TD>

<TD align=middle><input name=”btnMinus” type=”Button” value=” – ” onclick=”Operation(‘-‘)”></TD>

</TR>

<TR>

<TD><input name=”btnOne” type=”Button” value=” 1 ” onclick=”NumPressed(1)”></TD>

<TD><input name=”btnTwo” type=”Button” value=” 2 ” onclick=”NumPressed(2)”></TD>

<TD><input name=”btnThree” type=”Button” value=” 3 ” onclick=”NumPressed(3)”></TD>

<TD></TD>

<TD align=middle><input name=”btnMultiply” type=”Button” value=” * ” onclick=”Operation(‘*’)”></TD>

<TD align=middle><input name=”btnDivide” type=”Button” value=” / ” onclick=”Operation(‘/’)”></TD>

</TR>

<TR>

<TD><input name=”btnZero” type=”Button” value=” 0 ” onclick=”NumPressed(0)”></TD>

<TD><input name=”btnDecimal” type=”Button” value=” . ” onclick=”Decimal()”></TD>

<TD colspan=2></TD>

<TD><input name=”btnEquals” type=”Button” value=” = ” onclick=”Operation(‘=’)”></TD>

<TD><input name=”btnReturn” type=”Button” value=”返 回” onclick=”goReturn()”></TD>

</TR>

</TABLE>

</TABLE>

</B>

</FORM>

</CENTER>

<font face=”Verdana, Arial, Helvetica” size=2>

<SCRIPT LANGUAGE=”JavaScript”>

<!– Begin

var FKeyPad = document.forms[‘Keypad’];

var Accum = “0”;

var FlagNewNum = false;

var PendingOp = “”;

//===============================================================================

//[描述] 浮点数精确计算

//[参数] str1 – 第一个数

// str2 – 第二个数

// type – 运算符

// precision – 小数位精度

//[调用方式] longCount(str1,str2,type,precision);

//[返回值] 计算结果

//===============================================================================

function longCount(str1,str2,type) {

var comma1 = 0;

if (str1.indexOf(“.”)!=-1) {

str1 = str1.replace(/0*$/,””);

comma1 = str1.length – str1.indexOf(“.”)-1;

}

var comma2 = 0;

if (str2.indexOf(“.”)!=-1) {

str2 = str2.replace(/0*$/,””);

comma2 = str2.length – str2.indexOf(“.”)-1;

}

str1 = str1.replace(/\./,””);

str2 = str2.replace(/\./,””);

var value,comma;

if (type!=”*”) {

if (comma1>comma2) {

for (var i=0;i<comma1-comma2;i++) str2 += “0”;

comma = (type==”/”)?0:comma1;

}else {

for (var i=0;i<comma2-comma1;i++) str1 += “0”;

comma = (type==”/”)?0:comma2;

}

}else {

comma = comma1 + comma2;

}

if (type==”+”) {

value = parseInt(str1,10) + parseInt(str2,10);

}else if (type==”-“) {

value = parseInt(str1,10) – parseInt(str2,10);

}else if (type==”*”) {

value = parseInt(str1,10) * parseInt(str2,10);

}else if (type==”/”) {

value = parseInt(str1,10) / parseInt(str2,10);

}

value = String(value);

if (comma>0) value = value.substring(0,value.length-comma)+”.”+value.substring(value.length-

comma,value.length);

if (value.indexOf(“.”)!=-1)

value = value.replace(/0*$/,””);

return value;

}

function NumPressed (Num) {

if (FlagNewNum) {

FKeyPad.ReadOut.value = Num;

FlagNewNum = false;

}

else {

if (FKeyPad.ReadOut.value == “0”)

FKeyPad.ReadOut.value = Num;

else

FKeyPad.ReadOut.value += Num;

}

}

function Operation (Op) {

var Readout = FKeyPad.ReadOut.value;

if (FlagNewNum PendingOp != “=”);

else

{

FlagNewNum = true;

if ( ‘+’ == PendingOp || ‘-‘ == PendingOp || ‘/’ == PendingOp || ‘*’ == PendingOp)

Accum = longCount(Accum,Readout,PendingOp);

else

Accum = Readout;

FKeyPad.ReadOut.value = Accum;

PendingOp = Op;

FKeyPad.ReadOut.focus();

FKeyPad.ReadOut.select();

}

}

function Decimal () {

var curReadOut = FKeyPad.ReadOut.value;

if (FlagNewNum) {

curReadOut = “0.”;

FlagNewNum = false;

}

else

{

if (curReadOut.indexOf(“.”) == -1)

curReadOut += “.”;

}

FKeyPad.ReadOut.value = curReadOut;

}

function ClearEntry () {

FKeyPad.ReadOut.value = “0”;

FlagNewNum = true;

}

function Clear () {

Accum = “0”;

PendingOp = “”;

ClearEntry();

}

function Neg () {

alert(FKeyPad.ReadOut.value);

FKeyPad.ReadOut.value = longCount(FKeyPad.ReadOut.value,”-1″,”*”);

}

function Percent () {

FKeyPad.ReadOut.value = longCount(FKeyPad.ReadOut.value,Accum,”*”);

FKeyPad.ReadOut.value = longCount(FKeyPad.ReadOut.value,100,”/”);

}

function goReturn() {

top.returnValue = FKeyPad.ReadOut.value;

self.close();

}

function CheckOut() {

var keyCode = window.event.keyCode;

if (keyCode>=48 keyCode<=57) {

if (FlagNewNum) {

FKeyPad.ReadOut.value = “”;

//window.event.keyCode = null;

FlagNewNum = false;

}

return true;

}else if (keyCode==43 || keyCode==45 || keyCode==42 || keyCode==47 || keyCode==61) {

Operation(String.fromCharCode(keyCode));

}else if (keyCode==46) {//.

if (FKeyPad.ReadOut.value.indexOf(“.”) == -1)

return true;

}else if (keyCode==13) goReturn();

window.event.returnValue = false;

return false;

}

// End –>

</SCRIPT>

</body>

</html>

使用HTML控件实现简单的计算器

可以用 js 做的,非常的简单,你你是少要两个文本框,也就是

<input type=”text” id=”num1″ name=”num1″ />

<input type=”text” id=”num2″ name=”num1″ />

结果就用个 <lable id=”lbl”></lable>

<script type=”text/javascript”>

function Y(x) {

var num1 = parseFloat(document.getElementById(“num1”).value);

var num2 = parseFloat(document.getElementById(“num2”).value);

switch (x) {

case ‘-‘:

return num1 – num2;

case ‘+’:

return num1 + num2;

case ‘*’:

return num1 * num2;

case ‘/’:

return num1 / num2;

default:

}

}

function add() {

document.getElementById(“lbl”).value = Y(+);

}

//剩下的你应该会了吧

</script>