网页简易计算器html（网页简易计算器界面设计的教案）
本篇文章给大家谈谈网页简易计算器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是标记语言，不是编程语言，不能编辑程序，要写计算器，还需要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
怎么在网页上制作一个简易计算器
(1)先画个页面，把每个数字 运算符号放进去；
(2)然后每个数字 符号绑定一个事件，这个事件获取数字或者符号的值，放进一个Input框；
(3)点击计算，把Input框的字符串表达式计算，eval("1*2")；
(4)还有计算前要对表达式进行校验,不规则的表达式不能计算。
关于网页简易计算器html和网页简易计算器界面设计的教案的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。
