用html制作简易计算器（用html制作简易计算器的代码）

2023-05-15 22:42:15分类：杂七乱八热度：160评论： 1

本篇文章给大家谈谈用html制作简易计算器，以及用html制作简易计算器的代码对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

求助HTML编个代码实现简单计算器的功能如图片所示9+6点击计算下框能出现答案

测试过了，没有问题。

head

script src="/Resources/common/js/jquery-1.8.2.min.js"/script

title计算demo/title

script type="text/javascript"

function jisuan() {

var a = $("#txtValue").val();

var num;

var nums;

var num1;

var num2;

var result;

if (a.indexOf('+') 0) {

num = "" + a.split('+') + "";

nums = num.split(',');

num1 = parseInt(nums[0]);

num2 = parseInt(nums[1]);

result = num1 + num2;

$("#txtResult").val(result);

} else if (a.indexOf('-') 0) {

num = "" + a.split('-') + "";

nums = num.split(',');

num1 = parseInt(nums[0]);

num2 = parseInt(nums[1]);

result = num1 - num2;

$("#txtResult").val(result);

} else if (a.indexOf('*') 0) {

num = "" + a.split('*') + "";

nums = num.split(',');

num1 = parseInt(nums[0]);

num2 = parseInt(nums[1]);

result = num1 * num2;

$("#txtResult").val(result);

} else if (a.indexOf('/') 0) {

num = "" + a.split('/') + "";

nums = num.split(',');

num1 = parseInt(nums[0]);

num2 = parseInt(nums[1]);

result = num1 / num2;

$("#txtResult").val(result);

} else {

num = "" + a.split('%') + "";

nums = num.split(',');

num1 = parseInt(nums[0]);

num2 = parseInt(nums[1]);

result = num1 % num2;

$("#txtResult").val(result);

}

}

function qingchu() {

$("#txtValue").val('');

$("#txtResult").val('');

}

/script

/head

body

input type="text" id="txtValue" name="txtValue" style="width:300px;height:120px;" /br /

input type="button" onclick="jisuan();" id="btnJisuan" value="计算" /

input type="button" id="btnQinchu" onclick="qingchu();" value="清除" /br /

input type="text" id="txtResult" style="width:300px;height:120px;" /

/body

/html

html写一个计算器

首先要说明一点，纯html是不能编辑计算器的，因为html是标记语言，不是编程语言，不能编辑程序，要写计算器，还需要js代码，下面为全部代码：

html

head

title计算器/title

meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/

/head

body

script language="JavaScript"

!-- Hide the script from old browsers --

function compute(obj)

{obj.expr.value = eval(obj.expr.value)}

var one = '1'

var two = '2'

var three = '3'

var four = '4'

var five = '5'

var six = '6'

var seven = '7'

var eight = '8'

var nine = '9'

var zero = '0'

var plus = '+'

var minus = '-'

var multiply = '*'

var divide = '/'

var decimal = '.'

function enter(obj, string)

{obj.expr.value += string}

function clear(obj)

{obj.expr.value = ''}

// --End Hiding Here --

/script

form name="calc"

table border=1

td colspan=4input type="text" name="expr" size=30 action="compute(this.form)" tr

tdinput type="button" value=" 7 " onClick="enter(this.form, seven)"

tdinput type="button" value=" 8 " onClick="enter(this.form, eight)"

tdinput type="button" value=" 9 " onClick="enter(this.form, nine)"

tdinput type="button" value=" / " onClick="enter(this.form, divide)"

trtdinput type="button" value=" 4 " onClick="enter(this.form, four)"

tdinput type="button" value=" 5 " onClick="enter(this.form, five)"

tdinput type="button" value=" 6 " onClick="enter(this.form, six)"

tdinput type="button" value=" * " onClick="enter(this.form, multiply)"

trtdinput type="button" value=" 1 " onClick="enter(this.form, one)"

tdinput type="button" value=" 2 " onClick="enter(this.form, two)"

tdinput type="button" value=" 3 " onClick="enter(this.form, three)"

tdinput type="button" value=" - " onClick="enter(this.form, minus)"

trtd colspan=2input type="button" value=" 0 " onClick="enter(this.form, zero)"

tdinput type="button" value=" . " onClick="enter(this.form, decimal)"

tdinput type="button" value=" + " onClick="enter(this.form, plus)"

trtd colspan=2input type="button" value=" = " onClick="compute(this.form)"

td colspan=2input type="button" value="AC" size= 3 onClick="clear(this.form)" /table

/form

/body

/html

html网页计算器代码怎么写？

html网页计算器代码编写过程如下：

1.首先我们要做好一个计算器的界面，主要用到html与css的知识，下面是代码

table id="calculater" onClick="calculater()"

tr

td id="display" colspan="5"0/td

/tr

tr

td class="numberkey" 1/td

td class="numberkey" 2/td

td class="numberkey" 3/td

td class="numberkey" +/td

td class="numberkey"  id="deletesign"c/td

/tr

tr

td class="numberkey" 4/td

td class="numberkey" 5/td

td class="numberkey" 6/td

td class="numberkey" -/td

td rowspan="3" id="equality" onclick="resultscalcaulte()"=/td

/tr

tr

td class="numberkey" 7/td

td class="numberkey" 8/td

td class="numberkey" 7/td

td class="numberkey" */td

/tr

tr

td class="numberkey" +/-/td

td class="numberkey" 0/td

td class="numberkey" ./td

td class="numberkey" //td          

/tr

上面设置一个简单的table表格，主要内容是计算器的数字键盘和符号，还有就是class名和ID名，函数名，主要是用作css样式设计和javascript程序设计，后面会用到，就先贴出来了

colspan="5" 是合并五列的意思，表示这个单元格要占五列

rowspan="3"是合并三行的意思，表示这个单元格要占三行

效果如下，这样一个简单的架构就完成了

2.接下来就是css的设计，下面是代码

*{

padding:0;

margin:1px;

}

#calculater{

margin: auto;

margin-top: 30px;

border: solid 6px #2371D3;

border-spacing: 0px;

}

#display{

width: 100%;

height: 30px;

border-bottom: solid 4px #2371D3;

font-weight: bold;

color: #193D83;

font-family: 黑体;

padding-left: 2px;

}

.numberkey{

cursor: pointer;

width: 40px;

height: 30px;

border: solid 1px #FFFFFF;

background: #2371D3;

color: #ffffff;

text-align: center;

font-weight: bold;

font-family: 黑体;

}

#equality{

cursor: pointer;

width: 40px;

height: 100%;

background: #2371D3;

border: solid 1px #FFFFFF;

color: #ffffff;

text-align: center;

font-weight: bold;

font-family: 黑体;

}

.numberkey:hover{

background: #EA6F30;

}

#equality:hover{

background: #EA6F30;

}

以上是css代码，比较简单

border-spacing: 0px;

这里代码的意义是：table中单元格与单元格，表格边缘都有默认距离，这里border-spacing: 0px;能使其默认距离为零，没有这句会比较难设计好看的样式。

cursor: pointer;

这里代码的意义是：使鼠标放在上面时变成一个手的标志

效果如下

3.接下来是javascript的代码，按照思路来一点点写

首先我们要设计，当鼠标点击某个单元格时我们能获取这个单元格上的内容，即数字或符号

所以我们在table标签里加上onClick="calculater()"，添加一个点击事件

然后用event.srcElement.innerText获取单元格上的内容，event是事件的意思，在这里这个事件当然是点击了，srcElement就是事件的元素，在这里是被点击的单元格，innerText是获取这个单元格的内容。

这里我们就可以写出这个函数第一行代码，获取被点击的单元格的内容

function calculater(){

results=event.srcElement.innerText;

}

results就是单元格的内容

4.当然获取了什么要显示在第一个单元格那里，这里我们还是用innerText，来输出这个点击的值

display.innerText=results;

这里代码的意义是：display是第一格单元格的id,就是在第一行显示你点击了什么

calculater()的代码就变成这样

function calculater(){

results=event.srcElement.innerText;

display.innerText=results;

}

这样我们就能输出我们点击的单元格内容

5.但这样我们只能输出一次单击的内容，为了把内容串起来，我们把代码改为

var results="";

function calculater(){

results+=event.srcElement.innerText;

display.innerText=results;

}

设置results为全局变量，event.srcElement.innerText用+=累加进results，

这样我们就能输入并显示一条算式

6.我们在“=”单元格标签里加上onClick="resultscalcaulte()"，计算这个结果

function resultscalcaulte(){

calresults=eval(results);

display.innerText=calresults;

}

eval();能运行括号里的javascript语句的字符串，并返回其值，如果results等于7+8，那eval就会计算7+8，并返回56，然后后面一条代码把56显示出来

7.加入上面的运算后，还是无法显示结果，原因是点击“=”单元格会先触发resultscalcaulte()函数，再触发calculater()函数，所以我们在resultscalcaulte()得到的结果就被calculater()的结果覆盖了，我们需要再在calculater()里加上

if (event.srcElement.innerText=="=") {

return;

}

使点击“=”单元格触发的calculater()函数得不到任何结果

最后得到最简单的计算器运算代码

var results="";

var calresults="";

function calculater(){

if (event.srcElement.innerText=="=") {

return;

}

results+=event.srcElement.innerText;

display.innerText=results;

}

function resultscalcaulte(){

calresults=eval(results);

display.innerText=calresults;

}

8.下面是计算7*8的结果

用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

用html制作简易计算器（用html制作简易计算器的代码）,用html制作简易计算器,信息,文章,java,第1张

关于用html制作简易计算器和用html制作简易计算器的代码的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。

相关阅读：

1、装修过门石风水讲究（装修过门石风水讲究什么）

2、360房产网中牟合同备案查询（360房产网官网查询中牟）

3、宣传学校的语句（为学校宣传的几句话）

4、求职信300字格式（求职信300500字）

5、房产中介系统小说（讲房产中介的小说）

1、本网站名称：源码村资源网
2、本站永久网址：https://www.yuanmacun.com
3、本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长进行删除处理。
4、本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5、本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6、本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。
源码村资源网 » 用html制作简易计算器（用html制作简易计算器的代码）
源码村长

源码村长

分享到：

相关推荐

1 评论

您需要 登录账户 后才能发表评论

发表评论

欢迎 访客 发表评论