投稿
  1. 簡單一點首頁
  2. 編程

js設計一個網頁計算器,用js做簡單網頁計算器

小藍 • • 編程

本文目錄一覽：

如何用js做一個簡易計算器

js做一個簡易計算器具體如下：

html

head

titlejs運算/title

boby

table

tr

td第一個數/td

tdinput type=”text” id=”onesum”/td

/tr

tr

td運算符號/td

tdinput type=”text” id=”fh”/td

/tr

tr

td第二個數/td

tdinput type=”text” id=”twosum”/td

/tr

tr

td計算結果/td

tdinput type=”text” id=”sum”/td

/tr

tr

td colspan=”2″input type=”button” value=”   計算   ” onclick=”js()”/td

/tr

table

script

function js(){

var num1=document.getElementById(“onesum”).value;

var num2=document.getElementById(“twosum”).value;

var fh=document.getElementById(“fh”).value;

var sum=0;

nu

m1=Number(num1);

num2=Number(num2);

if(fh==’+’)

{

sum=num1+num2;

}

else if(fh==’-‘)

{

sum=num1-num2;

}else if(fh==’*’)

{

sum=num1*num2;

}else if(fh==’/’)

{

sum=num1/num2;

}

//alert(sum);

document.getElementById(“sum”).value=sum;

}

/script

/boby

/html

JavaScript 教程 JavaScript 是屬於網路的腳本語言！ JavaScript 被數百萬計的網頁用來改進設計、驗證表單、檢測瀏覽器、創建cookies，以及更多的應用。

如何使用javascript編寫一個計算器

首先，由於JS的存在數值的精度誤差問題：

0.1+0.2   //0.30000000000000004

0.3-0.1   //0.19999999999999998

所以在編寫計算器是應首先解決計算精度問題，以下四個代碼段分別是js中精確的加減乘除運算函數

//浮點數加法運算

function floatAdd(arg1,arg2){

var r1,r2,m;

try{r1=arg1.toString().split(“.”)[1].length}catch(e){r1=0}

try{r2=arg2.toString().split(“.”)[1].length}catch(e){r2=0}

m=Math.pow(10,Math.max(r1,r2));

return (arg1*m+arg2*m)/m

}

//浮點數減法運算

function floatSub(arg1,arg2){

   var r1,r2,m,n;

   try{r1=arg1.toString().split(“.”)[1].length}catch(e){r1=0}

   try{r2=arg2.toString().split(“.”)[1].length}catch(e){r2=0}

   m=Math.pow(10,Math.max(r1,r2));

   //動態控制精度長度

   n=(r1=r2)?r1:r2;

   return ((arg1*m-arg2*m)/m).toFixed(n);

}

//浮點數乘法運算

function floatMul(arg1,arg2){

   var m=0,s1=arg1.toString(),s2=arg2.toString();

   try{m+=s1.split(“.”)[1].length}catch(e){}

   try{m+=s2.split(“.”)[1].length}catch(e){}

   return Number(s1.replace(“.”,””))*Number(s2.replace(“.”,””))/Math.pow(10,m)

}

//浮點數除法運算

function floatDiv(arg1,arg2) {

   var t1 = 0, t2 = 0, r1, r2;

   try {t1 = arg1.toString().split(“.”)[1].length} catch (e) {}

   try {t2 = arg2.toString().split(“.”)[1].length} catch (e) {}

   with (Math) {

       r1 = Number(arg1.toString().replace(“.”, “”));

       r2 = Number(arg2.toString().replace(“.”, “”));

       return (r1 / r2) * pow(10, t2 – t1);

   }

}

以下是詳細的計算器代碼： 

HTML5

!DOCTYPE html

html lang=”en”

head

meta charset=”UTF-8″

title簡單計算器/title

link href=”main.css” rel=”stylesheet”

/head

body

div id=”calculator”

div id=”calculator_container”

h3計算器/h3

table id=”calculator_table”

tbody

tr

td colspan=”5″

input type=”text” id=”resultIpt” readonly=”readonly” value=”” size=”17″ maxlength=”17″ style=”width:294px;color: black”

/td

/tr

tr

tdinput type=”button” value=”←”       class=”btn_color1 btn_operation”/td

tdinput type=”button” value=”全清”     class=”btn_color1 btn_operation”/td

tdinput type=”button” value=”清屏”     class=”btn_color1″/td

tdinput type=”button” value=”﹢/﹣”    class=”btn_color2 btn_operation”/td

tdinput type=”button” value=”1/×”     class=”btn_color2 btn_operation”/td

/tr

tr

tdinput type=”button”  value=”7″     class=”btn_color3 btn_number”/td

tdinput type=”button”  value=”8″     class=”btn_color3 btn_number”/td

tdinput type=”button”  value=”9″     class=”btn_color3 btn_number”/td

tdinput type=”button”  value=”÷”    class=”btn_color4 btn_operation”/td

tdinput type=”button”  value=”％”    class=”btn_color2 btn_operation”/td

/tr

tr

tdinput type=”button”   value=”4″   class=”btn_color3 btn_number”/td

tdinput type=”button”   value=”5″   class=”btn_color3 btn_number”/td

tdinput type=”button”   value=”6″   class=”btn_color3 btn_number”/td

tdinput type=”button”   value=”×”  class=”btn_color4 btn_operation”/td

tdinput type=”button”   value=”√”  class=”btn_color2 btn_operation”/td

/tr

tr

tdinput type=”button”  value=”1″   class=”btn_color3 btn_number”/td

tdinput type=”button”  value=”2″   class=”btn_color3 btn_number”/td

tdinput type=”button”  value=”3″   class=”btn_color3 btn_number”/td

tdinput type=”button”  value=”－”  class=”btn_color4 btn_operation”/td

td rowspan=”2″

input type=”button”  value=”＝”  class=”btn_color2″ style=”height: 82px” id=”simpleEqu”

/td

/tr

tr

td colspan=”2″

input type=”button”  value=”0″   class=”btn_color3 btn_number” style=”width:112px”

/td

tdinput type=”button”  value=”.”   class=”btn_color3 btn_number” /td

tdinput type=”button”  value=”＋”  class=”btn_color4 btn_operation”/td

/tr

/tbody

/table

/div

/div

script type=”text/javascript” src=”calculator.js”/script

/body

/html

CSS3

* {

margin: 0;

padding: 0;

}

#calculator{

position: relative;

margin: 50px auto;

width: 350px;

height: 400px;

border: 1px solid gray;

-webkit-border-radius: 10px;

-moz-border-radius: 10px;

border-radius: 10px;

-webkit-box-shadow: 2px 2px 4px gray;

-moz-box-shadow: 2px 2px 4px gray;

box-shadow: 2px 2px 4px gray;

behavior:url(“ie-css3.htc”);  /*IE8-*/

}

#calculator_table{

position: relative;

margin: 10px auto;

border-collapse:separate;

border-spacing:10px 20px;

}

h3{

position: relative;

width: 60px;

height: 30px;

margin: 0 auto;

}

#calculator_table td{

width: 50px;

height: 30px;

border: 1px solid gray;

-webkit-border-radius: 2px;

-moz-border-radius: 2px;

border-radius: 2px;

behavior:url(“ie-css3.htc”);  /*IE8-*/

}

#calculator_table td input{

font-size: 16px;

border: none;

width: 50px;

height: 30px;

color: white;

}

input.btn_color1{

background-color: orange;

}

input.btn_color2{

background-color: #133645;

}

input.btn_color3{

background-color: #59807d;

}

input.btn_color4{

background-color: seagreen;

}

input:active{

-webkit-box-shadow: 3px 3px 3px gray;

-moz-box-shadow: 3px 3px 3px gray;

box-shadow: 3px 3px 3px gray;

behavior:url(“ie-css3.htc”);  /*IE8-*/

}

JS

window.onload=function() {

var resultIpt = document.getElementById(“resultIpt”); //獲取輸出文本框

var btns_number = document.getElementsByClassName(“btn_number”); //獲取數字輸入按鈕

var btns_operation = document.getElementsByClassName(“btn_operation”); //獲取操作按鈕

var simpleEqu = document.getElementById(“simpleEqu”); //獲取”=”按鈕

var temp = “”;

var num1= 0,num2=0;

//獲取第一個數

for(var i=0;ibtns_number.length;i++){

btns_number[i].onclick=function (){

temp += this.value;

resultIpt.value = temp;

};

}

//對獲取到的數進行操作

for(var j=0;jbtns_operation.length;j++) {

btns_operation[j].onclick = function () {

num1=parseFloat(resultIpt.value);

oper = this.value;

if(oper==”1/×”){

num1 = Math.pow(num1,-1); //取倒數

resultIpt.value = num1.toString();

}else if(oper==”﹢/﹣”){    //取相反數

num1 = -num1;

resultIpt.value = num1.toString();

}else if(oper==”√”){      //取平方根

num1 =Math.sqrt(num1);

resultIpt.value = num1.toString();

}else if(oper==”←”){    //刪除個位

resultIpt.value = resultIpt.value.substring(0, resultIpt.value.length – 1);

}else if(oper==”全清”){  //清除數字

resultIpt.value = “”;

}

else{          //oper==”＋” “－” “×” “÷” “％”時，繼續輸入第二數字

temp = “”;

resultIpt.value = temp;

}

}

}

//輸出結果

simpleEqu.onclick=function(){

num2=parseFloat(temp);  //取得第二個數字

calculate(num1, num2, oper);

resultIpt.value = result.toString();

}

};

//定義一個計算函數

function calculate(num1, num2, oper) {

switch (oper) {

case “＋”:

result=floatAdd(num1, num2); //求和

break;

case “－”:

result=floatSub(num1, num2); //求差

break;

case “×”:

result=floatMul(num1, num2);  //求積

break;

case “÷”:

result=floatDiv(num1, num2);  //求商

break;

case “％”:

result=num1%num2;  //求餘數

break;

}

}

//精確計算

//浮點數加法運算

function floatAdd(arg1,arg2){

var r1,r2,m;

try{r1=arg1.toString().split(“.”)[1].length}catch(e){r1=0}

try{r2=arg2.toString().split(“.”)[1].length}catch(e){r2=0}

m=Math.pow(10,Math.max(r1,r2));

return (arg1*m+arg2*m)/m

}

//浮點數減法運算

function floatSub(arg1,arg2){

var r1,r2,m,n;

try{r1=arg1.toString().split(“.”)[1].length}catch(e){r1=0}

try{r2=arg2.toString().split(“.”)[1].length}catch(e){r2=0}

m=Math.pow(10,Math.max(r1,r2));

//動態控制精度長度

n=(r1=r2)?r1:r2;

return ((arg1*m-arg2*m)/m).toFixed(n);

}

//浮點數乘法運算

function floatMul(arg1,arg2){

var m=0,s1=arg1.toString(),s2=arg2.toString();

try{m+=s1.split(“.”)[1].length}catch(e){}

try{m+=s2.split(“.”)[1].length}catch(e){}

return Number(s1.replace(“.”,””))*Number(s2.replace(“.”,””))/Math.pow(10,m)

}

//浮點數除法運算

function floatDiv(arg1,arg2) {

var t1 = 0, t2 = 0, r1, r2;

try {t1 = arg1.toString().split(“.”)[1].length} catch (e) {}

try {t2 = arg2.toString().split(“.”)[1].length} catch (e) {}

with (Math) {

r1 = Number(arg1.toString().replace(“.”, “”));

r2 = Number(arg2.toString().replace(“.”, “”));

return (r1 / r2) * pow(10, t2 – t1);

}

}

如何用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

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

用js代碼做一個簡易計算器

function test(){

     var txt1 = document.getElementById(“txt1”),

         txt2 = document.getElementById(“txt2”),

         txt3 = document.getElementById(“txt3”),

         opt  = document.getElementById(“sel”);

     txt3.value =  eval(txt1.value + opt.value + txt2.value);//eval函數可計算某個字元串，並執行其中的的js代碼

}

input type=”text” id=”txt1″ /

select id=”sel”

     option value=”+”+/option

     option value=”-“-/option

     option value=”*”*/option

     option value=”/”//option

/select

input type=”text” id=”txt2″ /

=

input type=”text” id=”txt3″ /

input type=”button” id=”btn” value=”計算” onclick=”test()”/

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

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

相關推薦

  • JS Proxy(array)用法介紹

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

    CUGEL的頭像 CUGEL
    編程 2025-04-29

  • Python簡單數學計算

    本文將從多個方面介紹Python的簡單數學計算，包括基礎運算符、函數、庫以及實際應用場景。 一、基礎運算符 Python提供了基礎的算術運算符，包括加（+）、減（-）、乘（*）、除…

    TMJEH的頭像 TMJEH
    編程 2025-04-29

  • Python滿天星代碼：讓編程變得更加簡單

    本文將從多個方面詳細闡述Python滿天星代碼，為大家介紹它的優點以及如何在編程中使用。無論是剛剛接觸編程還是資深程序員，都能從中獲得一定的收穫。 一、簡介 Python滿天星代碼…

    DCQKT的頭像 DCQKT
    編程 2025-04-29

  • Python海龜代碼簡單畫圖

    本文將介紹如何使用Python的海龜庫進行簡單畫圖，並提供相關示例代碼。 一、基礎用法 使用Python的海龜庫，我們可以控制一個小海龜在窗口中移動，並利用它的「畫筆」在窗口中繪製…

    RYQJM的頭像 RYQJM
    編程 2025-04-29

  • 解析js base64並轉成unit

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

    KNLLK的頭像 KNLLK
    編程 2025-04-29

  • Node.js使用Body-Parser處理HTTP POST請求時，特殊字元無法返回的解決方法

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

    FEYDS的頭像 FEYDS
    編程 2025-04-29

  • python爬取網頁並生成表格

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

    HJUXQ的頭像 HJUXQ
    編程 2025-04-28

  • Python櫻花樹代碼簡單

    本文將對Python櫻花樹代碼進行詳細的闡述和講解，幫助讀者更好地理解該代碼的實現方法。 一、簡介 櫻花樹是一種圖形效果，它的實現方法比較簡單。Python中可以通過turtle這…

    XYVWR的頭像 XYVWR
    編程 2025-04-28

  • 網頁防篡改的重要性和市場佔有率

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

    KYCPK的頭像 KYCPK
    編程 2025-04-28

  • t3.js：一個全能的JavaScript動態文本替換工具

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

    PQKUB的頭像 PQKUB
    編程 2025-04-28

發表回復

登錄後才能評論