JavaScript實(shí)現(xiàn)網(wǎng)頁版簡易計(jì)算器功能
更新時(shí)間：2022年07月21日 17:06:47 作者：Mtreellen
這篇文章主要介紹了JavaScript實(shí)現(xiàn)網(wǎng)頁版簡易計(jì)算器功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了JavaScript實(shí)現(xiàn)網(wǎng)頁版計(jì)算器功能的具體代碼，供大家參考，具體內(nèi)容如下
運(yùn)行效果
運(yùn)行：直接將下面的代碼放到任意文本文件中，文件后綴名改為.html，然后用任意瀏覽器打開即可。
實(shí)現(xiàn)思路以及代碼
<!DOCTYPE html>
<html>
?? ?<head>
?? ??? ?<meta charset="UTF-8">
?? ??? ?<title>網(wǎng)頁版的簡易計(jì)算器</title>
<!--使用js完成,之后可用:jquery-->
<!-
-->
<style>
?? ?/*設(shè)置input的寬度和高度*/
?? ?input{
?? ??? ?width: 396px;
?? ??? ?height: 50px;
?? ??? ?font-size: 30px;
?? ?}
?? ?
?? ?/*表格的行文本左右居中*/
?? ?tr{
?? ??? ?/*text-align*/
?? ??? ?text-align: center;
?? ?}
?? ?/*設(shè)置單元格的內(nèi)容寬度和高度以及字體大小*/
?? ?td{
?? ??? ?width: 100px;
?? ??? ?height: 119px;
?? ??? ?font-size:30px;
?? ?}
?? ?/*偽類選擇器:hover*/
?? ?td:hover{
?? ??? ?/*指定背景色*/
?? ??? ?background-color: greenyellow;
?? ??? ?/*cursor:pointer
?? ??? ? * 鼠標(biāo)經(jīng)過的時(shí)候,變成小手
?? ??? ? */
?? ??? ?cursor:pointer ;
?? ?}
</style>
?? ?</head>
<body>
<!--
cellspacing:單元邊沿和單元格之間的空間
cellpadding:單元格和單元格之間的空間
-->
<!--在input上面寫一個(gè)div: 指定這個(gè)當(dāng)前系統(tǒng)時(shí)間-->
<!--禁用文本框的輸入功能:disabled:disabled-->
<center><input type="text" value="0" id="show" disabled="disabled" /></center>
<table border="1px" cellspacing="0" cellpadding="2" align="center" width="400px"?
?? ?height="600px">
?? ?<tr>
?? ??? ?<td id="clear">C</td>
?? ??? ?<td id="del">退格</td>
?? ??? ?<td>%</td>
?? ??? ?<td class="operator">/</td>
?? ?</tr>
?? ?<tr>
?? ??? ?<td class="num">7</td>
?? ??? ?<td class="num">8</td>
?? ??? ?<td class="num">9</td>
?? ??? ?<td class="operator">*</td>
?? ?</tr>
?? ?<tr>
?? ??? ?<td class="num">4</td>
?? ??? ?<td class="num">5</td>
?? ??? ?<td class="num">6</td>
?? ??? ?<td class="operator">-</td>
?? ?</tr>
?? ?<tr>
?? ??? ?<td class="num">1</td>
?? ??? ?<td class="num">2</td>
?? ??? ?<td class="num">3</td>
?? ??? ?<td class="operator">+</td>
?? ?</tr>
?? ?<tr>
?? ??? ?<td colspan="2" class="num">0</td>
?? ??? ?<td class="num">.</td>
?? ??? ?<td id="result">=</td>
?? ?</tr>
</table>
</body>
<script>
?? ?/**
?? ? * -
?? ?1.頁面布局
?? ??? ?要么使用div+css,要么table布局
?? ??? ?table布局:5行4列的表格
?? ??? ?div+css布局:大的div ?嵌套兩個(gè)字div(輸入框的和鍵盤)
?? ?2.邏輯處理
?? ??? ?2.1 將數(shù)字鍵和小數(shù)點(diǎn)看成一類:clas="num"
?? ??? ?2.2 將運(yùn)算符看成一類:class="operator"
?? ??? ?2.3 將清除鍵,退格鍵,=(等號),顯示框,單獨(dú)設(shè)置id屬性
?? ??? ?2.4 獲取顯示框,清除鍵,=號,推格鍵所在的標(biāo)簽對象
?? ??? ?2.5 獲取數(shù)字鍵所在的對象并設(shè)置點(diǎn)擊事件
?? ??? ?2.6 獲取運(yùn)算符所在的對象并設(shè)置點(diǎn)擊事件
?? ? */
//獲取顯示框所在的標(biāo)簽對象
var showResult = document.getElementById("show") ;
//獲取清除鍵所在的標(biāo)簽對象
var clear = document.getElementById("clear") ;
//獲取退格鍵所在的標(biāo)簽對象
var del = document.getElementById("del") ;
//獲取等號所在的對象
var result = document.getElementById("result") ;
//定義三個(gè)變量,分別保存第一個(gè)數(shù),第二個(gè)數(shù)以及運(yùn)算符
//第一個(gè)數(shù)
var numValue1 = "" ;
//第二個(gè)數(shù)
var numValue2 = "" ;
//操作符
var oper ="" ;
//獲取數(shù)字鍵,包含小數(shù)點(diǎn),并設(shè)置點(diǎn)擊事件
var nums = document.getElementsByClassName("num") ;
//遍歷數(shù)字,分別設(shè)置點(diǎn)擊事件
for(var i = 0 ; i< nums.length ; i++){
?? ?//設(shè)置點(diǎn)擊事件:使用匿名函數(shù)
?? ?nums[i].onclick = function(){
?? ??? ?
?? ??? ?//小數(shù)點(diǎn)的問題：只能出現(xiàn)一個(gè)：
?? ??? ?/**
?? ??? ? * 如果這個(gè)this.innerTest==.
?? ??? ? * ?? ??? ?//小數(shù)點(diǎn)只能出現(xiàn)一個(gè)
?? ??? ? * 否則：
?? ??? ? * ?? ??? ?不是小數(shù)點(diǎn)，就屬于整數(shù)運(yùn)算
?? ??? ? * ?? ??? ?numValue1 += this.innerText;
?? ??? ??? ??? ?showResult.value = numValue1*1 ; //去掉首尾無效0
?? ??? ? */
?? ??? ?
?? ??? ?
?? ??? ?
?? ??? ?//測試
//?? ??? ?alert("獲取到了每一個(gè)數(shù)字對象") ;
?? ??? ?//將點(diǎn)擊的數(shù)字顯示到文本框上
?? ??? ?//將nums[i]--->看成一個(gè)this:代表當(dāng)前數(shù)字鍵對象的內(nèi)存地址值
?? ??? ?//var text = this.innerText ; //普通文本
?? ??? ?//測試
//?? ??? ?alert(tesxt) ;
?? ??? ?//改變顯示框?qū)ο蟮膙alue屬性
?? ??? ?//showResult.value = text;
?? ??? ?
?? ??? ?//問題1:目前:用戶輸入第一個(gè)數(shù)只能是一位數(shù)的
?? ??? ?//將數(shù)字內(nèi)容賦值給第一個(gè)數(shù),然后將第一個(gè)數(shù)展示到文本框上
//?? ??? ?numValue1 = this.innerText ;
?? ??? ?numValue1 += this.innerText;
//?? ??? ?showResult.value = numValue1*1 ; //去掉首尾無效0
?? ??? ?showResult.value = numValue1 ; //去掉首尾無效0
?? ??? ?
?? ??? ?//問題2:小數(shù)點(diǎn)的問題(小數(shù)點(diǎn)只能出現(xiàn)一個(gè))
?? ??? ?
?? ??? ?
?? ?}
}
//獲取運(yùn)算符所在的對象并設(shè)置點(diǎn)擊事件
var operators = document.getElementsByClassName("operator") ;
//遍歷操作符,設(shè)置點(diǎn)擊事件
for(var i = 0 ; i < operators.length ; i++){
?? ?//設(shè)置點(diǎn)擊
?? ?operators[i].onclick = function(){
?? ??? ?
?? ??? ?/**
?? ??? ? * 判斷numValue2的值是否為空：
?? ? * ?? ??? ?如果是numValue2=="" ?? ?
?? ? * ?? ??? ?如果numValue2不是空字符串
?? ? * ?? ??? ??? ?用戶可能點(diǎn)擊等號或者運(yùn)算符
?? ??? ? */
?? ??? ?if(numValue2==""){
?? ??? ??? ??? ?numValue2 = numValue1 ;
?? ??? ??? ??? ?numValue1 = "" ;
?? ??? ??? ??? ?//保存操作符
?? ??? ??? ??? ?oper = this.innerText ;
?? ??? ?}else{
?? ??? ??? ?//用戶要么點(diǎn)擊=號要么進(jìn)行四則運(yùn)算
?? ??? ??? ?//問題：應(yīng)該將計(jì)算的結(jié)果賦值numValue2,清空numvalue1?
?? ??? ??? ?
?? ??? ??? ?if(numValue1!=""){
?? ??? ??? ??? ?resultFn() ;
?? ??? ??? ?}
?? ??? ??? ?
?? ??? ??? ?//保留操作符
?? ??? ??? ?oper = this.innerText ;
?? ??? ?}
?? ??? ?
?? ??? ?
?? ??? ?
?? ??? ?//測試
?? ??? ?//alert("運(yùn)算符獲取到了") ;
?? ??? ?//做運(yùn)算 :思考如何做運(yùn)算,最終處理
?? ??? ?//將第二個(gè)數(shù)賦值第一個(gè)數(shù),然后將第一個(gè)數(shù)清空,等待接收用戶下一次輸入的數(shù)據(jù)
?? ?/*?? ?numValue2 = numValue1 ;
?? ??? ?numValue1 = "" ;
?? ??? ?//保存操作符
?? ??? ?oper = this.innerText ;*/
?? ?}
}
//關(guān)于其他的操作:清除鍵
//設(shè)置清除鍵的點(diǎn)擊事件
clear.onclick = function(){
?? ?
?? ?//將第一個(gè)數(shù),第二個(gè)數(shù)以及運(yùn)算符都情況掉
?? ?//顯示框顯示默認(rèn)值0
?? ?numValue1 = "" ;
?? ?numValue2 = "" ;
?? ?oper = "" ;
?? ?showResult.value = "0" ;
}
//刪除鍵的邏輯,設(shè)置點(diǎn)擊事件
del.onclick = function(){
?? ?
//?? ??? ?alert("abc") ;
?? ?//可以用到String :substring()截取功能
?? ?if(numValue1.length!=1){
?? ??? ?//進(jìn)行截取:從0索引開始截取到當(dāng)前numValue1.length-1處的位置結(jié)束,將其值
?? ??? ?//賦值給numValue1
?? ??? ?//場景:刪除剩余一個(gè)數(shù)字即可
?? ? numValue1 = numValue1.substring(0,numValue1.length-1) ;
?? ??? ?//alert(numValue1) ;
?? ?//將numValue1顯示文本框上
//?? ?showResult.value = numValue1 *1 ; //去掉首位無效0
?? ?showResult.value = numValue1 ; //
}
//?? ?else{
//?? ??? ?//自己處理?? ?
?? ??? ?//將第一個(gè)數(shù),第二個(gè)數(shù),運(yùn)算符清空掉
//?? ?}
}
//給等號添加點(diǎn)擊事件,做四則運(yùn)算
result.onclick = function(){
?? ?
?? ?//抽取出一個(gè)方法
?? ?resultFn() ;
}
//具體做四則運(yùn)算的方法
function resultFn(){
?? ?
?? ?//定義運(yùn)算的兩個(gè)數(shù)據(jù): one ,two
?? ?//數(shù)據(jù)類型轉(zhuǎn)換
?? ?var one = new Number(numValue2)?? ?;//實(shí)際是第二個(gè)數(shù)
?? ?var two = new Number(numValue1) ;//實(shí)際第一個(gè)數(shù)
?? ?//保存計(jì)算結(jié)果
?? ?var r = null ;
?? ?//根據(jù)運(yùn)算符進(jìn)行判斷，switch語句
?? ?switch(oper){
?? ?case "+":
?? ??? ?r = one + two ;
?? ??? ?break ;
?? ?case "-":
?? ??? ?r = one - two ;
?? ??? ?break;
?? ?case "*":
?? ??? ?r = one * two ;
?? ??? ?break ;
?? ?case "/":
?? ??? ?//除數(shù)不能為0
?? ??? ?//判斷
?? ?/*?? ?if(two==0){
?? ??? ??? ?//將數(shù)據(jù)情況掉
?? ??? ??? ?//并且彈框提示；除數(shù)不能為0
?? ??? ??? ?
?? ??? ??? ?r = 0?
?? ??? ?}else{
?? ??? ??? ?one /two ;
?? ??? ?}*/
?? ??? ?r = one /two ;
?? ??? ?
?? ??? ?break ;
?? ?}
?? ?
?? ?//將計(jì)算結(jié)果展示到顯示框上
//?? ?showResult.value = r ;
?? ?
?? ?//將計(jì)算的結(jié)果進(jìn)行保留小數(shù)點(diǎn)的有戲位
//?? ?numValue2 = r ;
?? ?numValue2 = new Number(r).toFixed(6) ;
?? ?numValue1 = "" ; //numValue1清空了
?? ?showResult.value = numValue2*1; // numValue2*1
?? ?//問題1 :1.2 * 3 = 3.599999996
?? ?//問題2：去掉首尾無效0?? ?：parseFloat()
?? ?//問題3：在四則元素：判斷用戶如果是點(diǎn)擊等號或者點(diǎn)擊繼續(xù)運(yùn)算，每一次都將第一個(gè)數(shù)清空掉了，
?? ?//判斷第一個(gè)數(shù)是否為空
?? ?
?? ? //問題4：小數(shù)點(diǎn)問題：小數(shù)點(diǎn)只能出現(xiàn)一個(gè)
?? ?
//四則運(yùn)算的問題：
?? ?/**
?? ? * 用戶輸入兩個(gè)數(shù)據(jù)目前是直接處理結(jié)果，那么如何判斷用戶是要點(diǎn)擊=號還是繼續(xù)進(jìn)行四則運(yùn)算？
?? ? * ?? ?在運(yùn)算符點(diǎn)擊監(jiān)聽事件中去坐
?? ? * 判斷numValue2的值是否為空：
?? ? * ?? ??? ?如果是numValue2=="" ?? ?
?? ? * ?? ??? ?如果numValue2不是空字符串
?? ? * ?? ??? ??? ?用戶可能點(diǎn)擊等號或者運(yùn)算符
?? ? * ?? ??? ??? ??? ?
?? ? */
?? ?
}
</script>
</html>以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- javascript寫的簡單的計(jì)算器，內(nèi)容很多，方法實(shí)用，推薦
- js實(shí)現(xiàn)簡單計(jì)算器
- 簡易js代碼實(shí)現(xiàn)計(jì)算器操作
- html+js實(shí)現(xiàn)簡單的計(jì)算器代碼(加減乘除)
- js實(shí)現(xiàn)一個(gè)簡易計(jì)算器
- 用JS寫的簡單的計(jì)算器實(shí)現(xiàn)代碼
- javascript-簡單的計(jì)算器實(shí)現(xiàn)步驟分解(附圖)
- 純javascript代碼實(shí)現(xiàn)計(jì)算器功能(三種方法)
- Vue.js實(shí)現(xiàn)的計(jì)算器功能完整示例
- js網(wǎng)頁版計(jì)算器的簡單實(shí)現(xiàn)
相關(guān)文章
查看圖片(前進(jìn)后退)功能實(shí)現(xiàn)js代碼
前進(jìn)后退實(shí)現(xiàn)的前提是：images文件夾下圖片的命名是從1~5.jpg有規(guī)律的，感興趣的朋友可以參考下哈，希望可以幫助到你2013-04-04
今天小編就為大家分享一篇解決layui調(diào)用自定義方法提示未定義的問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
JavaScript實(shí)現(xiàn)Tab欄切換特效
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)Tab欄切換特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-06-06
微信頁面開發(fā)時(shí)，各個(gè)主頁之間的跳轉(zhuǎn)，完全是通過a鏈接進(jìn)行的，但是來回跳轉(zhuǎn)幾次，再次從其他主頁面跳回首頁的時(shí)候，微信頭部出現(xiàn)了跳轉(zhuǎn)加載進(jìn)度條，但是就是不跳轉(zhuǎn)，也沒有任何反應(yīng)，怎么回事呢？下面小編給大家解答下2016-08-08
S.Sams Lifexperience CopyRight (C) 2003-2007 S.Sams Lifexperience ScriptClassLib MSNLive: S.Sams#msn.com Update by : 2007-01-19 轉(zhuǎn)載傳播請保留版權(quán)2008-06-06
本文主要介紹了javascript實(shí)現(xiàn)下雨效果的示例代碼。具有很好的參考價(jià)值。下面跟著小編一起來看下吧2017-03-03
微信小程序?qū)崿F(xiàn)活動(dòng)報(bào)名登記功能(實(shí)例代碼)
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)活動(dòng)報(bào)名登記,本篇將介紹使用微信小程序?qū)崿F(xiàn)發(fā)起一個(gè)活動(dòng)報(bào)名的設(shè)計(jì)，以此為基礎(chǔ)，我們可以掌握微信小程序表單的基本用法，進(jìn)而在諸如疫情信息登記、出入報(bào)備等場景中使用小程序進(jìn)行開發(fā)，滿足相關(guān)的需求，需要的朋友可以參考下2022-09-09
JavaScript find()方法及返回?cái)?shù)據(jù)實(shí)例
這篇文章主要介紹了JavaScript中的find()方法和返回?cái)?shù)據(jù)的內(nèi)存指向,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-04-04
typescript使用 ?. ?? ??= 運(yùn)算符的方法步驟
本文主要介紹了typescript使用 ?. ?? ??= 運(yùn)算符的方法步驟,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-01-01
JavaScript實(shí)現(xiàn)頁面定時(shí)刷新（定時(shí)器，meta）
很多朋友看到定時(shí)，很容易想到用js定時(shí)器，還有盆友用meta來設(shè)置，下面小編給大家介紹js實(shí)現(xiàn)頁面定時(shí)刷新的方法，一起看看吧2016-10-10