本篇文章给大家谈谈html制作简易计算器的代码，以及用html制作简易计算器对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。
本文目录一览：
我用html写了个计算器大家有没有更简洁的代码
!DOCTYPE html
html
meta name="content-type" content="text/html; charset=UTF-8"
head
titleCalculator/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
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=middleinput name="ReadOut" type="Text" onkeypress="CheckOut()" size=24 value="0"
width=100%/TD
TD/TD
TDinput name="btnClear" type="Button" value=" C " onclick="Clear()"/TD
TDinput name="btnClearEntry" type="Button" value=" CE " onclick="ClearEntry()"/TD
/TR
TR
TDinput name="btnSeven" type="Button" value=" 7 " onclick="NumPressed(7)"/TD
TDinput name="btnEight" type="Button" value=" 8 " onclick="NumPressed(8)"/TD
TDinput name="btnNine" type="Button" value=" 9 " onclick="NumPressed(9)"/TD
TD/TD
TDinput name="btnNeg" type="Button" value=" +/- " onclick="Neg()"/TD
TDinput name="btnPercent" type="Button" value=" % " onclick="Percent()"/TD
/TR
TR
TDinput name="btnFour" type="Button" value=" 4 " onclick="NumPressed(4)"/TD
TDinput name="btnFive" type="Button" value=" 5 " onclick="NumPressed(5)"/TD
TDinput name="btnSix" type="Button" value=" 6 " onclick="NumPressed(6)"/TD
TD/TD
TD align=middleinput name="btnPlus" type="Button" value=" + " onclick="Operation('+')" /TD
TD align=middleinput name="btnMinus" type="Button" value=" - " onclick="Operation('-')"/TD
/TR
TR
TDinput name="btnOne" type="Button" value=" 1 " onclick="NumPressed(1)"/TD
TDinput name="btnTwo" type="Button" value=" 2 " onclick="NumPressed(2)"/TD
TDinput name="btnThree" type="Button" value=" 3 " onclick="NumPressed(3)"/TD
TD/TD
TD align=middleinput name="btnMultiply" type="Button" value=" * " onclick="Operation('*')"/TD
TD align=middleinput name="btnDivide" type="Button" value=" / " onclick="Operation('/')"/TD
/TR
TR
TDinput name="btnZero" type="Button" value=" 0 " onclick="NumPressed(0)"/TD
TDinput name="btnDecimal" type="Button" value=" . " onclick="Decimal()"/TD
TD colspan=2/TD
TDinput name="btnEquals" type="Button" value=" = " onclick="Operation('=')"/TD
TDinput 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 (comma1comma2) {
for (var i=0;icomma1-comma2;i++) str2 += "0";
comma = (type=="/")?0:comma1;
}else {
for (var i=0;icomma2-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 (comma0) 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
简单的计算器代码
meta content="text/html; charset=utf-8" http-equiv="Content-Type" /
title/title
style type="text/css"
#box{width: 295px; margin: 0 auto; text-align: justify; border: 1px solid #ddd; padding: 15px;}
.d_num{display: inline-block; margin: 10px; width: 33px; height: 30px; border: 1px solid #ddd; text-align: center; line-height: 30px; cursor: pointer;}
.sum{margin: 0 10px 10px; line-height: 30px; font-size: 20px;}
#sum{width: 205px; height: 30px; padding: 0 5px; margin-left: 5px; font-size: 20px;}
#process{width: 255px; height: 30px; padding: 0 5px; margin-left: 5px; font-size: 20px;}/style
p id="box"
p class="sum"
input id="process" name="process" type="text" value="0" //p
p class="sum"
SUM:input id="sum" name="sum" type="text" value="0" //p
p
span class="d_num" data-num="1"1/span span class="d_num" data-num="2"2/span span class="d_num" data-num="3"3/span span class="d_num" data-num="lt;-"lt;-/span span class="d_num" data-num="C"C/span/p
p
span class="d_num" data-num="4"4/span span class="d_num" data-num="5"5/span span class="d_num" data-num="6"6/span span class="d_num" data-num="*"*/span span class="d_num" data-num="/"//span/p
p
span class="d_num" data-num="7"7/span span class="d_num" data-num="8"8/span span class="d_num" data-num="9"9/span span class="d_num" data-num="+"+/span span class="d_num" data-num="-"-/span/p
p
span class="d_num" data-num="0"0/span span class="d_num" data-num="00"00/span span class="d_num" data-num="."./span span class="d_num" data-num="%"%/span span class="d_num" data-num="="=/span/p
/p
script type="text/javascript"
var $box = document.getElementById('box');
var $sum = document.getElementById('sum');
var $process = document.getElementById('process');
var sum = 0, process = '', num1 = '', num2 = '', temp = '', statu = false;
$box.onclick = function(e){
var event = window.event || e;
var ele = event.srcElement || event.target;
var _className = ele.className;
if(_className == 'd_num'){
var num = ele.getAttribute('data-num');//点击的.按钮对应的值
var NotNum = isNaN(num);
if(!NotNum || num == '.'){ //点击了数字
if(!statu){ //还没点击过符号
if(num1 == '0'){
num1 = '';
}
num1 += num;
process = num1;
}else{ //已经点击过符号
if(num2 == '0'){
num2 = '';
}
num2 += num;
process = num1 + temp + num2;
}
$process.value = process;
}
else{ //点击了符号
if(num1 == ''){//非法操作
return false;
}
if(num == 'C'){//归零
num1 = '';
num2 = '';
process = '';
temp = '';
sum = '';
$process.value = '0';
$sum.value = '0';
更多相关文章推荐：
html制作简易计算器的代码的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于用html制作简易计算器、html制作简易计算器的代码的信息别忘了在本站进行查找喔。
2、本站永久网址：https://www.yuanmacun.com
3、本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长进行删除处理。
4、本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5、本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6、本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。
源码村资源网 » html制作简易计算器的代码（用html制作简易计算器）
1 评论