欧美亚洲综合图区在线|天天射天天干国产成卜|99久久免费国产精精品|国产的欧美一区二区三区|日韩中文字幕无码不卡专区|亚麻成人aV极品一区二区|国产成人AV区一区二区三|成人免费一区二区三区视频网站

當前位置：首頁 > 軟件開放 > 正文內(nèi)容

網(wǎng)頁簡易計算器html（網(wǎng)頁簡易計算器界面設計的教案）

軟件開放2年前 (2023-03-09)1416

本篇文章給大家談談網(wǎng)頁簡易計算器html，以及網(wǎ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

上面設置一個簡單的table表格，主要內(nèi)容是計算器的數(shù)字鍵盤和符號，還有就是class名和ID名，函數(shù)名，主要是用作css樣式設計和javascript程序設計，后面會用到，就先貼出來了

colspan="5"?是合并五列的意思，表示這個單元格要占五列

rowspan="3"是合并三行的意思，表示這個單元格要占三行

效果如下，這樣一個簡單的架構(gòu)就完成了

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的代碼，按照思路來一點點寫

首先我們要設計，當鼠標點擊某個單元格時我們能獲取這個單元格上的內(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;

}

設置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)頁簡易計算器界面設計的教案的介紹到此就結(jié)束了，不知道你從中找到你需要的信息了嗎 ？如果你還想了解更多這方面的信息，記得收藏關(guān)注本站。

掃描二維碼推送至手機訪問。

版權(quán)聲明：本文由飛速云SEO網(wǎng)絡優(yōu)化推廣發(fā)布，如需轉(zhuǎn)載請注明出處。

本文鏈接：http://m.landcheck.net/post/11688.html

“網(wǎng)頁簡易計算器html（網(wǎng)頁簡易計算器界面設計的教案）” 的相關(guān)文章

打車軟件開發(fā)（打車軟件開發(fā)需要什么）

打車軟件開發(fā)（打車軟件開發(fā)需要什么）

本篇文章給大家談談打車軟件開發(fā)，以及打車軟件開發(fā)需要什么對應的知識點，希望對各位有所幫助，不要忘了收藏本站喔。 本文目錄一覽： 1、定制開發(fā)一個類似滴滴打車的服務軟件，需多少錢 2、打車app開發(fā)流程 3、打車軟件開發(fā)過程中存在的十大風險有哪些 定制開發(fā)一個類似滴滴打車的服務軟件，需多少錢...

長沙軟件開發(fā)公司（長沙軟件開發(fā)公司排名）

長沙軟件開發(fā)公司（長沙軟件開發(fā)公司排名）

今天給各位分享長沙軟件開發(fā)公司的知識，其中也會對長沙軟件開發(fā)公司排名進行解釋，如果能碰巧解決你現(xiàn)在面臨的問題，別忘了關(guān)注本站，現(xiàn)在開始吧！本文目錄一覽： 1、長沙正宇軟件開發(fā)有限公司上班怎么樣 2、長沙有哪些軟件公司？能將名單列出來嗎？ 3、長沙天軟軟件開發(fā)有限公司怎么樣？ 4、長沙凹印...

手機怎么創(chuàng)建html文件（手機上如何編寫html）

手機怎么創(chuàng)建html文件（手機上如何編寫html）

本篇文章給大家談談手機怎么創(chuàng)建html文件，以及手機上如何編寫html對應的知識點，希望對各位有所幫助，不要忘了收藏本站喔。 本文目錄一覽： 1、手機有沒有可能制作html格式文件 2、手機怎么打開html文件 3、html文件在安卓手機上怎么打開？ 4、智能手機怎么創(chuàng)建.html文件...

qq安全中心釣魚源碼（釣魚網(wǎng)站軟件手機版）

qq安全中心釣魚源碼（釣魚網(wǎng)站軟件手機版）

今天給各位分享qq安全中心釣魚源碼的知識，其中也會對釣魚網(wǎng)站軟件手機版進行解釋，如果能碰巧解決你現(xiàn)在面臨的問題，別忘了關(guān)注本站，現(xiàn)在開始吧！本文目錄一覽： 1、中了假的QQ安全中心釣魚網(wǎng)站 并填寫了身份證號 手機號 以及發(fā)了驗證短信該怎么補救 2、中了qq安全中心的釣魚網(wǎng)站怎么辦？ 3、中了...

游戲直播平臺排名排行榜（直播游戲排行前十）

游戲直播平臺排名排行榜（直播游戲排行前十）

今天給各位分享游戲直播平臺排名排行榜的知識，其中也會對直播游戲排行前十進行解釋，如果能碰巧解決你現(xiàn)在面臨的問題，別忘了關(guān)注本站，現(xiàn)在開始吧！本文目錄一覽： 1、現(xiàn)在游戲直播在哪個平臺好? 2、全網(wǎng)直播十大公會排名是什么? 3、這個在哪里直播？ 4、游戲直播目前有哪些平臺？怎么合作的？...

有溯源碼就一定是正品嗎（商品有溯源碼一定是正品嗎）

有溯源碼就一定是正品嗎（商品有溯源碼一定是正品嗎）

今天給各位分享有溯源碼就一定是正品嗎的知識，其中也會對商品有溯源碼一定是正品嗎進行解釋，如果能碰巧解決你現(xiàn)在面臨的問題，別忘了關(guān)注本站，現(xiàn)在開始吧！本文目錄一覽： 1、飛鶴奶粉二維碼能追溯就是正品嗎 2、京東溯源碼可以查是否是正品嗎 3、進口溯源碼一定是真的嗎 4、奶粉溯源碼有假的么...