js網頁在線計算器運算,js 計算

本文目錄一覽:

用JS腳本實現網頁計算器!!求代碼!求高手!!!!

C#的要不。。。

C#軟件中也能做js

using System;

using System.Collections.Generic;

using System.ComponentModel;

using System.Data;

using System.Drawing;

using System.Linq;

using System.Text;

using System.Windows.Forms;

namespace WindowsFormsApplication2

{

public partial class 計算機 : Form

{

double Num1 = 0;//這三行是考慮計算時候要用的

double Num2 = 0;//這三行是考慮計算時候要用的

string op = “”;//這三行是考慮計算時候要用的

public 計算機()

{

InitializeComponent();

}

private void btnNum1_Click(object sender, EventArgs e)

{

if (txtResult.Text != “”)

{

double temp = double.Parse(txtResult.Text);//這個是做開平方的。。。

temp = Math.Sqrt(temp);

txtResult.Text = temp.ToString();

}

}

private void button6_Click(object sender, EventArgs e)

{

if (txtResult.Text != “”)

{

double temp = double.Parse(txtResult.Text);//這個是那個“階乘鍵的”用的是“!”標記。

double factor = 1;

for (int i = 1; i = temp; i++)

factor = factor * i;

txtResult.Text = factor.ToString();

}

}

private void btnNum1_Click_1(object sender, EventArgs e)

{

Button btn = sender as Button;//這個是第一步:要在計算器中輸入數字的。。。

txtResult.Text += btn.Text;

}

private void btnNum3_Click(object sender, EventArgs e)

{

if (txtResult.Text != “”)

{

double temp = double.Parse(txtResult.Text);//這個是那個“正弦函數”。。

temp = Math.Sin(temp);

txtResult.Text = temp.ToString();

}

}

private void btnPoint_Click(object sender, EventArgs e)

{

if (txtResult.Text == “”)

{

txtResult.Text = “0.”;//這個是“小數點”問題。。。要考慮到:1、一串數字中不能出現兩個小數點。。2.第一個輸入小數點時問題

}

else

{

if (txtResult.Text.IndexOf(“.”) == -1)

{

txtResult.Text += “.”;

}

}

}

private void btnNum0_Click(object sender, EventArgs e)

{

Button btn = sender as Button;//這是數字“0”的問題。。首先不能第一個為0.。。

if (txtResult.Text == “0”)

{

txtResult.Text = btn.Text;

}

else

{

txtResult.Text += btn.Text;

}

}

private void btnAdd_Click(object sender, EventArgs e)

{

Button btn = sender as Button;//這是解決當第一個按“+”號時程序出錯的狀況。。。

if (txtResult.Text != “”)

Num1 = double.Parse(txtResult.Text);

op = btn.Text;

txtResult.Text = “”;

}

private void btnCalculate_Click(object sender, EventArgs e)

{

double result = 0;

Num2 = double.Parse(txtResult.Text);/////這是處理“=”的問題。。。不過還有些不足。。

switch (op)

{

case “+”: result = Num1 + Num2; break;

case “-“: result = Num1 – Num2; break;

case “*”: result = Num1 * Num2; break;

case “/”: result = Num1 / Num2; break;

default: result = 0; break;

}

txtResult.Text = result.ToString();

}

private void btnClear_Click(object sender, EventArgs e)

{

txtResult.Text = “”;///////////////這是處理”清除鍵“的功能。。即:清除所有數字。。

Num1 = 0;

Num2 = 0;

op = “”;

}

private void btnBackspace_Click(object sender, EventArgs e)

{

int len = txtResult.Text.Length;

if (len != 0)

txtResult.Text = txtResult.Text.Substring(0, len – 1);////這是處理“退格鍵”的問題。。即:除去最後一個數字。。。

}

private void button20_Click(object sender, EventArgs e)

{

if (txtResult.Text != “”)

{

double temp = double.Parse(txtResult.Text);////這是處理“相反數”的問題。。即:先按個‘9“鍵。再按此鍵變為”-9“

temp = temp * (-1);

txtResult.Text = temp.ToString();

}

}

private void button4_Click(object sender, EventArgs e)

{

if (txtResult.Text != “”)

{

double temp = double.Parse(txtResult.Text);//這是”餘弦“問題。。。

temp = Math.Cos(temp);

txtResult.Text = temp.ToString();

}

}

private void button4_Click_1(object sender, EventArgs e)

{

if (txtResult.Text != “”)

{

double temp = double.Parse(txtResult.Text);//////這是處理”正切“問題。。

temp = Math.Tan(temp);

txtResult.Text = temp.ToString();

}

}

}

}

用JavaScript做個網頁版的計算器?

哎呀!這個簡單!!我給你啦!!!下面就是用Jscript寫的計算器了複製後保存一切就OK的啦!!!!!!!!!

html

head

meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″

!–written by GoldHuman li hai–

!–2000.8–

title科學計算器/title

style

!–

BODY {

font-family: “宋體”, “Arial”, “Times New Roman”;

font-size: 9pt;

background-color: #edf0e1;

color: #0001fC;

background-attachment: fixed;

}

td{font-family: “宋體”, “Arial Narrow”, “Times New Roman”; font-size:9pt; font-color:#000000}

//–

/style

script language=”javascript”

!–

var endNumber=true

var mem=0

var carry=10

var hexnum=”0123456789abcdef”

var angle=”d”

var stack=””

var level=”0″

var layer=0

//數字鍵

function inputkey(key)

{

var index=key.charCodeAt(0);

if ((carry==2 (index==48 || index==49))

|| (carry==8 index=48 index=55)

|| (carry==10 (index=48 index=57 || index==46))

|| (carry==16 ((index=48 index=57) || (index=97 index=102))))

if(endNumber)

{

endNumber=false

document.calc.display.value = key

}

else if(document.calc.display.value == null || document.calc.display.value == “0”)

document.calc.display.value = key

else

document.calc.display.value += key

}

function changeSign()

{

if (document.calc.display.value!=”0″)

if(document.calc.display.value.substr(0,1) == “-“)

document.calc.display.value = document.calc.display.value.substr(1)

else

document.calc.display.value = “-” + document.calc.display.value

}

//函數鍵

function inputfunction(fun,shiftfun)

{

endNumber=true

if (document.calc.shiftf.checked)

document.calc.display.value=decto(funcalc(shiftfun,(todec(document.calc.display.value,carry))),carry)

else

document.calc.display.value=decto(funcalc(fun,(todec(document.calc.display.value,carry))),carry)

document.calc.shiftf.checked=false

document.calc.hypf.checked=false

inputshift()

}

function inputtrig(trig,arctrig,hyp,archyp)

{

if (document.calc.hypf.checked)

inputfunction(hyp,archyp)

else

inputfunction(trig,arctrig)

}

//運算符

function operation(join,newlevel)

{

endNumber=true

var temp=stack.substr(stack.lastIndexOf(“(“)+1)+document.calc.display.value

while (newlevel!=0 (newlevel=(level.charAt(level.length-1))))

{

temp=parse(temp)

level=level.slice(0,-1)

}

if (temp.match(/^(.*\d[\+\-\*\/\%\^\\|x])?([+-]?[0-9a-f\.]+)$/))

document.calc.display.value=RegExp.$2

stack=stack.substr(0,stack.lastIndexOf(“(“)+1)+temp+join

document.calc.operator.value=” “+join+” “

level=level+newlevel

}

//括號

function addbracket()

{

endNumber=true

document.calc.display.value=0

stack=stack+”(“

document.calc.operator.value=” “

level=level+0

layer+=1

document.calc.bracket.value=”(=”+layer

}

function disbracket()

{

endNumber=true

var temp=stack.substr(stack.lastIndexOf(“(“)+1)+document.calc.display.value

while ((level.charAt(level.length-1))0)

{

temp=parse(temp)

level=level.slice(0,-1)

}

document.calc.display.value=temp

stack=stack.substr(0,stack.lastIndexOf(“(“))

document.calc.operator.value=” “

level=level.slice(0,-1)

layer-=1

if (layer0)

document.calc.bracket.value=”(=”+layer

else

document.calc.bracket.value=””

}

//等號

function result()

{

endNumber=true

while (layer0)

disbracket()

var temp=stack+document.calc.display.value

while ((level.charAt(level.length-1))0)

{

temp=parse(temp)

level=level.slice(0,-1)

}

document.calc.display.value=temp

document.calc.bracket.value=””

document.calc.operator.value=””

stack=””

level=”0″

}

//修改鍵

function backspace()

{

if (!endNumber)

{

if(document.calc.display.value.length1)

document.calc.display.value=document.calc.display.value.substring(0,document.calc.display.value.length – 1)

else

document.calc.display.value=0

}

}

function clearall()

{

document.calc.display.value=0

endNumber=true

stack=””

level=”0″

layer=””

document.calc.operator.value=””

document.calc.bracket.value=””

}

//轉換鍵

function inputChangCarry(newcarry)

{

endNumber=true

document.calc.display.value=(decto(todec(document.calc.display.value,carry),newcarry))

carry=newcarry

document.calc.sin.disabled=(carry!=10)

document.calc.cos.disabled=(carry!=10)

document.calc.tan.disabled=(carry!=10)

document.calc.bt.disabled=(carry!=10)

document.calc.pi.disabled=(carry!=10)

document.calc.e.disabled=(carry!=10)

document.calc.kp.disabled=(carry!=10)

document.calc.k2.disabled=(carry=2)

document.calc.k3.disabled=(carry=2)

document.calc.k4.disabled=(carry=2)

document.calc.k5.disabled=(carry=2)

document.calc.k6.disabled=(carry=2)

document.calc.k7.disabled=(carry=2)

document.calc.k8.disabled=(carry=8)

document.calc.k9.disabled=(carry=8)

document.calc.ka.disabled=(carry=10)

document.calc.kb.disabled=(carry=10)

document.calc.kc.disabled=(carry=10)

document.calc.kd.disabled=(carry=10)

document.calc.ke.disabled=(carry=10)

document.calc.kf.disabled=(carry=10)

}

function inputChangAngle(angletype)

{

endNumber=true

angle=angletype

if (angle==”d”)

document.calc.display.value=radiansToDegress(document.calc.display.value)

else

document.calc.display.value=degressToRadians(document.calc.display.value)

endNumber=true

}

function inputshift()

{

if (document.calc.shiftf.checked)

{

document.calc.bt.value=”deg “

document.calc.ln.value=”exp “

document.calc.log.value=”expd”

if (document.calc.hypf.checked)

{

document.calc.sin.value=”ahs “

document.calc.cos.value=”ahc “

document.calc.tan.value=”aht “

}

else

{

document.calc.sin.value=”asin”

document.calc.cos.value=”acos”

document.calc.tan.value=”atan”

}

document.calc.sqr.value=”x^.5″

document.calc.cube.value=”x^.3″

document.calc.floor.value=”小數”

}

else

{

document.calc.bt.value=”d.ms”

document.calc.ln.value=” ln “

document.calc.log.value=”log “

if (document.calc.hypf.checked)

{

document.calc.sin.value=”hsin”

document.calc.cos.value=”hcos”

document.calc.tan.value=”htan”

}

else

{

document.calc.sin.value=”sin “

document.calc.cos.value=”cos “

document.calc.tan.value=”tan “

}

document.calc.sqr.value=”x^2 “

document.calc.cube.value=”x^3 “

document.calc.floor.value=”取整”

}

}

//存儲器部分

function clearmemory()

{

mem=0

document.calc.memory.value=” “

}

function getmemory()

{

endNumber=true

document.calc.display.value=decto(mem,carry)

}

function putmemory()

{

endNumber=true

if (document.calc.display.value!=0)

{

mem=todec(document.calc.display.value,carry)

document.calc.memory.value=” M “

}

else

document.calc.memory.value=” “

}

function addmemory()

{

endNumber=true

mem=parseFloat(mem)+parseFloat(todec(document.calc.display.value,carry))

if (mem==0)

document.calc.memory.value=” “

else

document.calc.memory.value=” M “

}

function multimemory()

{

endNumber=true

mem=parseFloat(mem)*parseFloat(todec(document.calc.display.value,carry))

if (mem==0)

document.calc.memory.value=” “

else

document.calc.memory.value=” M “

}

//十進制轉換

function todec(num,oldcarry)

{

if (oldcarry==10 || num==0) return(num)

var neg=(num.charAt(0)==”-“)

if (neg) num=num.substr(1)

var newnum=0

for (var index=1;index=num.length;index++)

newnum=newnum*oldcarry+hexnum.indexOf(num.charAt(index-1))

if (neg)

newnum=-newnum

return(newnum)

}

function decto(num,newcarry)

{

var neg=(num0)

if (newcarry==10 || num==0) return(num)

num=””+Math.abs(num)

var newnum=””

while (num!=0)

{

newnum=hexnum.charAt(num%newcarry)+newnum

num=Math.floor(num/newcarry)

}

if (neg)

newnum=”-“+newnum

return(newnum)

}

//表達式解析

function parse(string)

{

if (string.match(/^(.*\d[\+\-\*\/\%\^\\|x\])?([+-]?[0-9a-f\.]+)([\+\-\*\/\%\^\\|x\])([+-]?[0-9a-f\.]+)$/))

return(RegExp.$1+cypher(RegExp.$2,RegExp.$3,RegExp.$4))

else

return(string)

}

//數學運算和位運算

function cypher(left,join,right)

{

left=todec(left,carry)

right=todec(right,carry)

if (join==”+”)

return(decto(parseFloat(left)+parseFloat(right),carry))

if (join==”-“)

return(decto(left-right,carry))

if (join==”*”)

return(decto(left*right,carry))

if (join==”/” right!=0)

return(decto(left/right,carry))

if (join==”%”)

return(decto(left%right,carry))

if (join==””)

return(decto(leftright,carry))

if (join==”|”)

return(decto(left|right,carry))

if (join==”^”)

return(decto(Math.pow(left,right),carry))

if (join==”x”)

return(decto(left^right,carry))

if (join==””)

return(decto(leftright,carry))

alert(“除數不能為零”)

return(left)

}

//函數計算

function funcalc(fun,num)

{

with(Math)

{

if (fun==”pi”)

return(PI)

if (fun==”e”)

return(E)

if (fun==”abs”)

return(abs(num))

if (fun==”ceil”)

return(ceil(num))

if (fun==”round”)

return(round(num))

if (fun==”floor”)

return(floor(num))

if (fun==”deci”)

return(num-floor(num))

if (fun==”ln” num0)

return(log(num))

if (fun==”exp”)

return(exp(num))

if (fun==”log” num0)

return(log(num)*LOG10E)

if (fun==”expdec”)

return(pow(10,num))

if (fun==”cube”)

return(num*num*num)

if (fun==”cubt”)

return(pow(num,1/3))

if (fun==”sqr”)

return(num*num)

if (fun==”sqrt” num=0)

return(sqrt(num))

if (fun==”!”)

return(factorial(num))

if (fun==”recip” num!=0)

return(1/num)

if (fun==”dms”)

return(dms(num))

if (fun==”deg”)

return(deg(num))

if (fun==”~”)

return(~num)

if (angle==”d”)

{

if (fun==”sin”)

return(sin(degressToRadians(num)))

if (fun==”cos”)

return(cos(degressToRadians(num)))

if (fun==”tan”)

return(tan(degressToRadians(num)))

if (fun==”arcsin” abs(num)=1)

return(radiansToDegress(asin(num)))

if (fun==”arccos” abs(num)=1)

return(radiansToDegress(acos(num)))

if (fun==”arctan”)

return(radiansToDegress(atan(num)))

}

else

{

if (fun==”sin”)

return(sin(num))

if (fun==”cos”)

return(cos(num))

if (fun==”tan”)

return(tan(num))

if (fun==”arcsin” abs(num)=1)

return(asin(num))

if (fun==”arccos” abs(num)=1)

return(acos(num))

if (fun==”arctan”)

return(atan(num))

}

if (fun==”hypsin”)

return((exp(num)-exp(0-num))*0.5)

if (fun==”hypcos”)

return((exp(num)+exp(-num))*0.5)

if (fun==”hyptan”)

return((exp(num)-exp(-num))/(exp(num)+exp(-num)))

if (fun==”ahypsin” | fun==”hypcos” | fun==”hyptan”)

{

alert(“對不起,公式還沒有查到!”)

return(num)

}

alert(“超出函數定義範圍”)

return(num)

}

}

function factorial(n)

{

n=Math.abs(parseInt(n))

var fac=1

for (;n0;n-=1)

fac*=n

return(fac)

}

function dms(n)

{

var neg=(n0)

with(Math)

{

n=abs(n)

var d=floor(n)

var m=floor(60*(n-d))

var s=(n-d)*60-m

}

var dms=d+m/100+s*0.006

if (neg)

dms=-dms

return(dms)

}

function deg(n)

{

var neg=(n0)

with(Math)

{

n=abs(n)

var d=floor(n)

var m=floor((n-d)*100)

var s=(n-d)*100-m

}

var deg=d+m/60+s/36

if (neg)

deg=-deg

return(deg)

}

function degressToRadians(degress)

{

return(degress*Math.PI/180)

}

function radiansToDegress(radians)

{

return(radians*180/Math.PI)

}

//界面

//–

/script

/head

!–written by GoldHuman li hai–

!–2000.8–

body

div align=”center”

form name=calc

table border=”1″ width=”500″ height=”250″

tr

td height=50

table width=500

td

img src=”../img/cp_logo.gif”

/td

td

div align=center

input type=text name=”display” value=”0″ readonly size=”40″

/div

/td

/table

/td

/tr

tr

td

table width=500

tr

td width=290

input type=radio name=”carry” onClick=”inputChangCarry(16)”

十六進制

input type=radio name=”carry” checked onClick=”inputChangCarry(10)”

十進制

input type=radio name=”carry” onClick=”inputChangCarry(8)”

八進制

input type=radio name=”carry” onClick=”inputChangCarry(2)”

二進制

/td

td

/td

td width=135

input type=radio name=”angle” value=”d” onClick=”inputChangAngle(‘d’)” checked

角度制

input type=radio name=”angle” value=”r” onClick=”inputChangAngle(‘r’)”

弧度制

/td

/tr

/table

table width=500

tr

td width=170

input name=”shiftf” type=”checkbox” onclick=”inputshift()”上檔功能

input name=”hypf” type=”checkbox” onclick=”inputshift()”雙曲函數

/td

td

input name=”bracket” value=”” type=text size=3 readonly style=”background-color=lightgrey”

input name=”memory” value=”” type=text size=3 readonly style=”background-color=lightgrey”

input name=”operator” value=”” type=text size=3 readonly style=”background-color=lightgrey”

/td

td width=183

input type=”button” value=” 退格 ”

onclick=”backspace()” style=”color=red”

input type=”button” value=” 清屏 “

onClick=”document.calc.display.value = 0 ” style=”color=red”

input type=”button” value=” 全清”

onClick=”clearall()” style=”color=red”

/td

/tr

/table

table width=500

tr

td

table

tr align=center

td

input name=pi type=”button” value=” PI “

onClick=”inputfunction(‘pi’,’pi’)” style=”color=blue”

/td

td

input name=e type=”button” value=” E “

onClick=”inputfunction(‘e’,’e’)” style=”color=blue”

/td

td

input name=bt type=”button” value=”d.ms”

onClick=”inputfunction(‘dms’,’deg’)” style=”color=#ff00ff”

/td

/tr

tr align=center

td

input type=”button” value=” ( “

onClick=”addbracket()” style=”color=#ff00ff”

/td

td

input type=”button” value=” ) “

onClick=”disbracket()” style=”color=#ff00ff”

/td

td

input name=ln type=”button” value=” ln “

onClick=”inputfunction(‘ln’,’exp’)” style=”color=#ff00ff”

/td

/tr

tr align=center

td

input name=sin type=”button” value=”sin “

onClick=”inputtrig(‘sin’,’arcsin’,’hypsin’,’ahypsin’)” style=”color=#ff00ff”

/td

td

input type=”button” value=”x^y “

onClick=”operation(‘^’,7)” style=”color=#ff00ff”

/td

td

input name=log type=”button” value=”log “

onClick=”inputfunction(‘log’,’expdec’)” style=”color=#ff00ff”

/td

/tr

tr align=center

td

input name=cos type=”button” value=”cos “

onClick=”inputtrig(‘cos’,’arccos’,’hypcos’,’ahypcos’)” style=”color=#ff00ff”

/td

td

input name=cube type=”button” value=”x^3 “

onClick=”inputfunction(‘cube’,’cubt’)” style=”color=#ff00ff”

/td

td

input type=”button” value=” n! “

onClick=”inputfunction(‘!’,’!’)” style=”color=#ff00ff”

/td

/tr

tr align=center

td

input name=tan type=”button” value=”tan “

onClick=”inputtrig(‘tan’,’arctan’,’hyptan’,’ahyptan’)” style=”color=#ff00ff”

/td

td

input name=sqr type=”button” value=”x^2 “

onClick=”inputfunction(‘sqr’,’sqrt’)” style=”color=#ff00ff”

/td

td

input type=”button” value=”1/x “

onClick=”inputfunction(‘recip’,’recip’)” style=”color=#ff00ff”

/td

/tr

/table

/td

td width=30

/td

td

table

tr

td

input type=”button” value=” 儲存 “

onClick=”putmemory()” style=”color=red”

/td

/tr

td

input type=”button” value=” 取存 “

onClick=”getmemory()” style=”color=red”

/td

/tr

tr

td

input type=”button” value=” 累存 “

onClick=”addmemory()” style=”color=red”

/td

/tr

tr

td

input type=”button” value=” 積存 “

onClick=”multimemory()” style=”color=red”

/td

/tr

tr

td height=”33″

input type=”button” value=” 清存 “

onClick=”clearmemory()” style=”color=red”

/td

/tr

/table

/td

td width=30

/td

td

table

tr align=center

td

input name=k7 type=”button” value=” 7 “

onClick=”inputkey(‘7’)” style=”color=blue”

/td

td

input name=k8 type=”button” value=” 8 “

onClick=”inputkey(‘8’)” style=”color=blue”

/td

td

input name=k9 type=”button” value=” 9 “

onClick=”inputkey(‘9’)” style=”color=blue”

/td

td

input type=”button” value=” / “

onClick=”operation(‘/’,6)” style=”color=red”

/td

td

input type=”button” value=”取余”

onClick=”operation(‘%’,6)” style=”color=red”

/td

td

input type=”button” value=” 與 “

onClick=”operation(”,3)” style=”color=red”

/td

/tr

tr align=center

td

input name=k4 type=”button” value=” 4 “

onClick=”inputkey(‘4’)” style=”color=blue”

/td

td

input name=k5 type=”button” value=” 5 “

onClick=”inputkey(‘5’)” style=”color=blue”

/td

td

input name=k6 type=”button” value=” 6 “

onClick=”inputkey(‘6’)” style=”color=blue”

/td

td

input type=”button” value=” * “

onClick=”operation(‘*’,6)” style=”color=red”

/td

td

input name=floor type=”button” value=”取整”

onClick=”inputfunction(‘floor’,’deci’)” style=”color=red”

/td

td

input type=”button” value=” 或 “

onClick=”operation(‘|’,1)” style=”color=red”

/td

/tr

tr align=center

td

input type=”button” value=” 1 “

onClick=”inputkey(‘1’)” style=”color=blue”

/td

td

input name=k2 type=”button” value=” 2 “

onClick=”inputkey(‘2’)” style=”color=blue”

/td

td

input name=k3 type=”button” value=” 3 “

onClick=”inputkey(‘3’)” style=”color=blue”

/td

td

input type=”button” value=” – “

onClick=”operation(‘-‘,5)” style=”color=red”

/td

td

input type=”button” value=”左移”

onClick=”operation(”,4)” style=”color=red”

/td

td

input type=”button” value=” 非 “

onClick=”inputfunction(‘~’,’~’)” style=”color=red”

/td

/tr

tr align=center

td

input type=”button” value=” 0 “

onClick=”inputkey(‘0’)” style=”color=blue”

/td

td

input type=”button” value=”+/-“

onClick=”changeSign()” style=”color=blue”

/td

td

input name=kp type=”button” value=” . “

onClick=”inputkey(‘.’)” style=”color=blue”

/td

td

input type=”button” value=” + “

onClick=”operation(‘+’,5)” style=”color=red”

/td

td

input type=”button” value=” = “

onClick=”result()” style=”color=red”

/td

td

input type=”button” value=”異或”

onClick=”operation(‘x’,2)” style=”color=red”

/td

/tr

tr align=center

td

input name=ka type=”button” value=” A “

onClick=”inputkey(‘a’)” style=”color=blue” disabled=true

/td

td

input name=kb type=”button” value=” B “

onClick=”inputkey(‘b’)” style=”color=blue” disabled=true

/td

td

input name=kc type=”button” value=” C “

onClick=”inputkey(‘c’)” style=”color=blue” disabled=true

/td

td

input name=kd type=”button” value=” D “

onClick=”inputkey(‘d’)” style=”color=blue” disabled=true

/td

td

input name=ke type=”button” value=” E ”

onClick=”inputkey(‘e’)” style=”color=blue” disabled=true

/td

td

input name=kf type=”button” value=” F ”

onClick=”inputkey(‘f’)” style=”color=blue” disabled=true

/td

/tr

/table

/td

/tr

/table

/td

/tr

/table

/form

/div

/body

/html

如何用JS創建一個簡單的網頁計算器

!doctype html    

html    

head    

title計算器/title    

meta charset=”utf-8″/    

style type=”text/css”    

.panel{    

   border:4px solid #ddd;    

width:192px;    

margin:100px auto;    

}    

.panel p,.panel input{    

   font-family:”微軟雅黑”;    

font-size:20px;    

margin:4px;    

float:left;    

}    

.panel p{    

   width:122px;    

height:26px;    

border:1px solid #ddd;    

padding:6px;    

overflow:hidden;    

}    

.panel input{    

  width:40px;    

height:40px;    

border:1px solid #ddd;    

}    

/style    

script type=”text/javascript”    

//參數e用來接收傳入的event對象    

function cal(e){    

//1.獲取事件源,處理button的事件    

var obj=e.srcElement||e.target;    

if(obj.nodeName !=”INPUT”){    

  return;    

}    

    

var value=obj.value;    

var p=document.getElementById(“screen”);    

if(value==”C”){    

//2.如果是[C],則清空p    

p.innerText=””;    

}else if(value==”=”){    

//3.如果是[=],則運算    

var exp=p.innerText;    

try{    

var result=eval(“(“+exp+”)”);    

//如果正確執行,將結果寫入p    

p.innerText=result;    

}catch(e){    

//發生錯誤,給予錯誤提示    

  p.innerText=”Error.”;    

}    

}else{    

//4.如果是其它按鈕,則將value追加到p中    

p.innerText+=value;    

    

}    

}    

/script    

/head    

body    

!–在最外層的div上註冊單擊事件,傳入event對象,然後在函數中通過event判斷出事件來源於哪一個button,    

    進而做出應有的處理。這樣的好處是,避免在button上大量的註冊事件。–    

div class=”panel” onClick=”cal(event);”    

div    

p id=”screen”/p    

input type=”button” value=”C”    

div style=”clear:both”/div    

/div    

div    

input type=”button” value=”7″    

input type=”button” value=”8″    

input type=”button” value=”9″    

input type=”button” value=”/”    

input type=”button” value=”4″    

input type=”button” value=”5″    

input type=”button” value=”6″    

input type=”button” value=”*”    

input type=”button” value=”1″    

input type=”button” value=”2″    

input type=”button” value=”3″    

input type=”button” value=”-”    

input type=”button” value=”0″    

input type=”button” value=”.”    

input type=”button” value=”=”    

input type=”button” value=”+”    

div style=”clear:both”/div    

/div    

/body    

/html

這是我自學時候寫的計算器

怎麼在網頁上製作一個簡易計算器

(1)先畫個頁面,把每個數字 運算符號放進去;

(2)然後每個數字 符號綁定一個事件,這個事件獲取數字或者符號的值,放進一個Input框;

(3)點擊計算,把Input框的字符串表達式計算,eval(“1*2”);

(4)還有計算前要對表達式進行校驗,不規則的表達式不能計算。

用JS做一個簡單的網頁計算器如圖所示,只進行簡單的加減乘除運算

按順序 123 分別設 id=a id=b id=c

var result = parseInt($(“#a”).val())+$(“#b”).val()+parseInt($(“#c”).val())

原創文章,作者:小藍,如若轉載,請註明出處:https://www.506064.com/zh-hant/n/227200.html

(0)
打賞 微信掃一掃 微信掃一掃 支付寶掃一掃 支付寶掃一掃
小藍的頭像小藍
上一篇 2024-12-09 16:28
下一篇 2024-12-09 16:28

相關推薦

  • JS Proxy(array)用法介紹

    JS Proxy(array)可以說是ES6中非常重要的一個特性,它可以代理一個數組,監聽數據變化並進行攔截、處理。在實際開發中,使用Proxy(array)可以方便地實現數據的監…

    編程 2025-04-29
  • 解析js base64並轉成unit

    本文將從多個方面詳細介紹js中如何解析base64編碼並轉成unit格式。 一、base64編碼解析 在JavaScript中解析base64編碼可以使用atob()函數,它會將b…

    編程 2025-04-29
  • Node.js使用Body-Parser處理HTTP POST請求時,特殊字符無法返回的解決方法

    本文將解決Node.js使用Body-Parser處理HTTP POST請求時,特殊字符無法返回的問題。同時,給出一些相關示例代碼,以幫助讀者更好的理解並處理這個問題。 一、問題解…

    編程 2025-04-29
  • python爬取網頁並生成表格

    本文將從以下幾個方面詳細介紹如何使用Python爬取網頁數據並生成表格: 一、獲取網頁數據 獲取網頁數據的一般思路是通過HTTP請求獲取網頁內容,最常用的方式是使用Python庫r…

    編程 2025-04-28
  • 網頁防篡改的重要性和市場佔有率

    網頁防篡改對於保護網站安全和用戶利益至關重要,而市場上針對網頁防篡改的產品和服務也呈現出不斷增長的趨勢。 一、市場佔有率 據不完全統計,目前全球各類網頁防篡改產品和服務的市場規模已…

    編程 2025-04-28
  • t3.js:一個全能的JavaScript動態文本替換工具

    t3.js是一個非常流行的JavaScript動態文本替換工具,它是一個輕量級庫,能夠很容易地實現文本內容的遞增、遞減、替換、切換以及其他各種操作。在本文中,我們將從多個方面探討t…

    編程 2025-04-28
  • Python在線編輯器的優勢與實現方式

    Python在線編輯器是Python語言愛好者的重要工具之一,它可以讓用戶方便快捷的在線編碼、調試和分享代碼,無需在本地安裝Python環境。本文將從多個方面對Python在線編輯…

    編程 2025-04-28
  • Python編程實戰:用Python做網頁與HTML

    Python語言是一種被廣泛應用的高級編程語言,也是一種非常適合於開發網頁和處理HTML的語言。在本文中,我們將從多個方面介紹如何用Python來編寫網頁和處理HTML。 一、Py…

    編程 2025-04-28
  • Python爬取網頁信息

    本文將從多個方面對Python爬取網頁信息做詳細的闡述。 一、爬蟲介紹 爬蟲是一種自動化程序,可以模擬人對網頁進行訪問獲取信息的行為。通過編寫代碼,我們可以指定要獲取的信息,將其從…

    編程 2025-04-28
  • JS圖片沿着SVG路徑移動實現方法

    本文將為大家詳細介紹如何使用JS實現圖片沿着SVG路徑移動的效果,包括路徑製作、路徑效果、以及實現代碼等內容。 一、路徑製作 路徑的製作,我們需要使用到SVG,SVG是可縮放矢量圖…

    編程 2025-04-27

發表回復

登錄後才能評論