網(wǎng)頁簡易計算器html（網(wǎng)頁簡易計算器界面設(shè)計的教案）
本篇文章給大家談?wù)劸W(wǎng)頁簡易計算器html，以及網(wǎng)頁簡易計算器界面設(shè)計的教案對應(yīng)的知識點，希望對各位有所幫助，不要忘了收藏本站喔。
本文目錄一覽：
html網(wǎng)頁計算器代碼怎么寫？
html網(wǎng)頁計算器代碼編寫過程如下：
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
上面設(shè)置一個簡單的table表格，主要內(nèi)容是計算器的數(shù)字鍵盤和符號，還有就是class名和ID名，函數(shù)名，主要是用作css樣式設(shè)計和javascript程序設(shè)計，后面會用到，就先貼出來了
colspan="5"?是合并五列的意思，表示這個單元格要占五列
rowspan="3"是合并三行的意思，表示這個單元格要占三行
效果如下，這樣一個簡單的架構(gòu)就完成了
2.接下來就是css的設(shè)計，下面是代碼
*{
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;能使其默認距離為零，沒有這句會比較難設(shè)計好看的樣式。
cursor: pointer;
這里代碼的意義是：使鼠標放在上面時變成一個手的標志
效果如下
3.接下來是javascript的代碼，按照思路來一點點寫
首先我們要設(shè)計，當鼠標點擊某個單元格時我們能獲取這個單元格上的內(nèi)容，即數(shù)字或符號
所以我們在table標簽里加上onClick="calculater()"，添加一個點擊事件
然后用event.srcElement.innerText獲取單元格上的內(nèi)容，event是事件的意思，在這里這個事件當然是點擊了，srcElement就是事件的元素，在這里是被點擊的單元格，innerText是獲取這個單元格的內(nèi)容。
這里我們就可以寫出這個函數(shù)第一行代碼，獲取被點擊的單元格的內(nèi)容
function calculater(){
results=event.srcElement.innerText;
}
results就是單元格的內(nèi)容
4.當然獲取了什么要顯示在第一個單元格那里，這里我們還是用innerText，來輸出這個點擊的值
display.innerText=results;
這里代碼的意義是：display是第一格單元格的id,就是在第一行顯示你點擊了什么
calculater()的代碼就變成這樣
function calculater(){
results=event.srcElement.innerText;
display.innerText=results;
}
這樣我們就能輸出我們點擊的單元格內(nèi)容
5.但這樣我們只能輸出一次單擊的內(nèi)容，為了把內(nèi)容串起來，我們把代碼改為
var results="";
function calculater(){
results+=event.srcElement.innerText;
display.innerText=results;
}
設(shè)置results為全局變量，event.srcElement.innerText用+=累加進results，
這樣我們就能輸入并顯示一條算式
6.我們在“=”單元格標簽里加上onClick="resultscalcaulte()"，計算這個結(jié)果
function resultscalcaulte(){
calresults=eval(results);
display.innerText=calresults;
}
eval();能運行括號里的javascript語句的字符串，并返回其值，如果results等于7+8，那eval就會計算7+8，并返回56，然后后面一條代碼把56顯示出來
7.加入上面的運算后，還是無法顯示結(jié)果，原因是點擊“=”單元格會先觸發(fā)resultscalcaulte()函數(shù)，再觸發(fā)calculater()函數(shù)，所以我們在resultscalcaulte()得到的結(jié)果就被calculater()的結(jié)果覆蓋了，我們需要再在calculater()里加上
if (event.srcElement.innerText=="=") {
return;
}
使點擊“=”單元格觸發(fā)的calculater()函數(shù)得不到任何結(jié)果
最后得到最簡單的計算器運算代碼
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的結(jié)果
用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 = "";
//===============================================================================
//[描述] 浮點數(shù)精確計算
//[參數(shù)] str1 - 第一個數(shù)
// str2 - 第二個數(shù)
// type - 運算符
// precision - 小數(shù)位精度
//[調(diào)用方式] longCount(str1,str2,type,precision);
//[返回值] 計算結(jié)果
//===============================================================================
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
怎么在網(wǎng)頁上制作一個簡易計算器
(1)先畫個頁面，把每個數(shù)字 運算符號放進去；
(2)然后每個數(shù)字 符號綁定一個事件，這個事件獲取數(shù)字或者符號的值，放進一個Input框；
(3)點擊計算，把Input框的字符串表達式計算，eval("1*2")；
(4)還有計算前要對表達式進行校驗,不規(guī)則的表達式不能計算。
關(guān)于網(wǎng)頁簡易計算器html和網(wǎng)頁簡易計算器界面設(shè)計的教案的介紹到此就結(jié)束了，不知道你從中找到你需要的信息了嗎 ？如果你還想了解更多這方面的信息，記得收藏關(guān)注本站。
掃描二維碼推送至手機訪問。
版權(quán)聲明：本文由飛速云SEO網(wǎng)絡(luò)優(yōu)化推廣發(fā)布，如需轉(zhuǎn)載請注明出處。
