網頁計算器簡易js代碼,網頁計算器簡易js代碼

本文目錄一覽:

簡易的加減乘除的計算器代碼js

//html

input type=”text” id=”num1″ value=”” /

    select id=”mySelect”

        option value=”+”+/option

        option value=”-“-/option

        option value=”*”*/option

        option value=”/”//option

    /select

    input type=”text” id=”num2″ value=”” /

    input type=”button” id=”jisuan” value=”計算” /

//js

script

    var oTxt1 = document.getElementById(‘num1’);

    var oTxt2 = document.getElementById(‘num2’);

    var oSelect = document.getElementById(‘mySelect’);

    var oBtn = document.getElementById(‘jisuan’);

    oBtn.onclick=function(){

        switch(oSelect.value){

            case ‘+’:

                alert(parseInt(oTxt1.value)+parseInt(oTxt2.value));

                break;

            case ‘-‘:

                alert(parseInt(oTxt1.value)-parseInt(oTxt2.value));

                break;

            case ‘*’:

                alert(parseInt(oTxt1.value)*parseInt(oTxt2.value));

                break;

            case ‘/’:

                if(parseInt(oTxt2.value) !== 0){

                    alert(parseInt(oTxt1.value)/parseInt(oTxt2.value));

                }else{

                    alert(‘除數不能為0’);

                }

                

                break;

            default:

                alert(‘Bug!!!’);

        }

    }

/script

如何用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,以及更多的應用。

用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-hk/n/258663.html

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

相關推薦

  • Python周杰倫代碼用法介紹

    本文將從多個方面對Python周杰倫代碼進行詳細的闡述。 一、代碼介紹 from urllib.request import urlopen from bs4 import Bea…

    編程 2025-04-29
  • Python字符串寬度不限制怎麼打代碼

    本文將為大家詳細介紹Python字符串寬度不限制時如何打代碼的幾個方面。 一、保持代碼風格的統一 在Python字符串寬度不限制的情況下,我們可以寫出很長很長的一行代碼。但是,為了…

    編程 2025-04-29
  • Python基礎代碼用法介紹

    本文將從多個方面對Python基礎代碼進行解析和詳細闡述,力求讓讀者深刻理解Python基礎代碼。通過本文的學習,相信大家對Python的學習和應用會更加輕鬆和高效。 一、變量和數…

    編程 2025-04-29
  • Python滿天星代碼:讓編程變得更加簡單

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

    編程 2025-04-29
  • 倉庫管理系統代碼設計Python

    這篇文章將詳細探討如何設計一個基於Python的倉庫管理系統。 一、基本需求 在着手設計之前,我們首先需要確定倉庫管理系統的基本需求。 我們可以將需求分為以下幾個方面: 1、庫存管…

    編程 2025-04-29
  • 寫代碼新手教程

    本文將從語言選擇、學習方法、編碼規範以及常見問題解答等多個方面,為編程新手提供實用、簡明的教程。 一、語言選擇 作為編程新手,選擇一門編程語言是很關鍵的一步。以下是幾個有代表性的編…

    編程 2025-04-29
  • Python實現簡易心形代碼

    在這個文章中,我們將會介紹如何用Python語言編寫一個非常簡單的代碼來生成一個心形圖案。我們將會從安裝Python開始介紹,逐步深入了解如何實現這一任務。 一、安裝Python …

    編程 2025-04-29
  • 怎麼寫不影響Python運行的長段代碼

    在Python編程的過程中,我們不可避免地需要編寫一些長段代碼,包括函數、類、複雜的控制語句等等。在編寫這些代碼時,我們需要考慮代碼可讀性、易用性以及對Python運行性能的影響。…

    編程 2025-04-29
  • 北化教務管理系統介紹及開發代碼示例

    本文將從多個方面對北化教務管理系統進行介紹及開發代碼示例,幫助開發者更好地理解和應用該系統。 一、項目介紹 北化教務管理系統是一款針對高校學生和教職工的綜合信息管理系統。系統實現的…

    編程 2025-04-29
  • Python愛心代碼動態

    本文將從多個方面詳細闡述Python愛心代碼動態,包括實現基本原理、應用場景、代碼示例等。 一、實現基本原理 Python愛心代碼動態使用turtle模塊實現。在繪製一個心形的基礎…

    編程 2025-04-29

發表回復

登錄後才能評論