簡易js程式碼實作計算器操作
<html>
<head>
<title>JS版计算器</title>
<link rel="stylesheet" type="text/css" href="">
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<!--js代码可以放置在任意位置，按照先后顺序依次执行 一般放在head标签之间-->
<script type="text/javascript">
/* 定义一个Calculator类*/
function Calculator(){
this.jisuan=function(num1,num2,oper){
var res=0;
switch(oper){
case "+":
res=num1+num2;
break;
case "-":
res=num1-num2;
break;
case "*":
res=num1*num2;
break;
case "/":
res=num1/num2;
break;
}
return res;
}
}
//创建对象
var calculator=new Calculator();
/*定义全局变量*/
var val=0; //放置输入的值
var xval=0;//保存转换Number类型的值
var temp=0; //保存第一次输入的值
var oper="";//保存输入的操作符
/*获取输入数字*/
function inputEvent(e){
val=e.value
var xsval=document.getElementById("inp1");
xsval.value+=val; //连续输入数字(String类型)
//转换Number类型
xval=parseFloat(xsval.value);
}
/*获取第一行的数据*/
function inputPCB(e){
//window.alert(e.value);
var xsval=document.getElementById("inp1");
if(e.value=="Clear"){
xsval.value="";
}else if(e.value=="Back"){
/*这个功能还没有实现，有兴趣的朋友可以自己做一做*/
}else if(e.value=="POWER"){
//计算平方
xsval.value=Math.pow(xsval.value,2);
}
}
/*输入操作符*/
function inputOper(e){
oper=e.value;
//window.alert(typeof oper);
//oper=oper.substr(0);
if (e.value=="+"){
var xsval=document.getElementById("inp1");
//保存上次计算结果，并对字符串进行转换Number类型
temp=parseFloat(xsval.value);
//第一次输入的值设置为空
xsval.value="";
}else if(e.value=="-"){
var xsval=document.getElementById("inp1");
temp=parseFloat(xsval.value);
xsval.value="";
}else if(e.value=="*"){
var xsval=document.getElementById("inp1");
temp=parseFloat(xsval.value);
xsval.value="";
}else if(e.value=="/"){
var xsval=document.getElementById("inp1");
temp=parseFloat(xsval.value);
xsval.value="";
}
}
/*计算结果*/
function inputEquel(e){
var xsval=document.getElementById("inp1");
if(e.value=="="){
//window.alert(xval);
//调用对象方法
xsval.value=calculator.jisuan(temp,xval,oper);
}
}
</script>
<!--css 样式-->
<style>
input{
width:60px;
}
#inp1{
width:280px;
text-align:right;
}
</style>
</head>
<body>
<table border="1">
<!--显示结果行-->
<tr><td colspan="4"><input id="inp1" type="text" value="" name="xianshi"/></td></tr>
<!--第一行-->
<tr><td><input type="button" value="POWER" onclick="inputPCB(this)"/></td><td><input type="button" value="Clear" onclick="inputPCB(this)"/></td><td><input type="button" value="Back"onclick="inputPCB(this)"/></td><td></td></tr>
<!--第二行-->
<tr><td><input type="button" value="1" onclick="inputEvent(this)"/></td><td><input type="button" value="2" onclick="inputEvent(this)"/></td><td><input type="button"value="3" onclick="inputEvent(this)"/></td><td><input type="button" value="4" onclick="inputEvent(this)"/></td></tr>
<!--第三行-->
<tr><td><input type="button" value="5" onclick="inputEvent(this)"/></td><td><input type="button" value="6" onclick="inputEvent(this)"/></td><td><input type="button"value="7" onclick="inputEvent(this)"/></td><td><input type="button" value="8" onclick="inputEvent(this)"/></td></tr>
<!--第四行-->
<tr><td><input type="button" value="9" onclick="inputEvent(this)"/></td><td><input type="button" value="0" onclick="inputEvent(this)"/></td><td><input type="button"value="." onclick="inputEvent(this)"/></td><td><input type="button" value="=" onclick="inputEquel(this)"/></td></tr>
<!--第五行-->
<tr><td><input type="button" value="+" onclick="inputOper(this)"/></td><td><input type="button" value="-" onclick="inputOper(this)"/></td><td><input type="button"value="*" onclick="inputOper(this)"/></td><td><input type="button" value="/" onclick="inputOper(this)"/></td></tr>
</table>
</body>
</html>登入後複製
更多簡易js程式碼實作計算器操作相關文章請關注PHP中文網！
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
如何修復KB5055523無法在Windows 11中安裝？
3 週前
By DDD
如何修復KB5055518無法在Windows 10中安裝？
3 週前
By DDD
R.E.P.O.的每個敵人和怪物的力量水平
3 週前
By 尊渡假赌尊渡假赌尊渡假赌
<🎜>：死鐵路 - 如何馴服狼
3 週前
By DDD
藍王子：如何到達地下室
3 週前
By DDD
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
神秘的JavaScript：它的作用以及為什麼重要
Apr 09, 2025 am 12:07 AM
JavaScript是現代Web開發的基石，它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發，極大地提升了用戶體驗和跨平台開發的靈活性。
誰得到更多的Python或JavaScript？
Apr 04, 2025 am 12:09 AM
Python和JavaScript開發者的薪資沒有絕對的高低，具體取決於技能和行業需求。 1.Python在數據科學和機器學習領域可能薪資更高。 2.JavaScript在前端和全棧開發中需求大，薪資也可觀。 3.影響因素包括經驗、地理位置、公司規模和特定技能。
如何實現視差滾動和元素動畫效果，像資生堂官網那樣？
或者：
怎樣才能像資生堂官網一樣，實現頁面滾動伴隨的動畫效果？
Apr 04, 2025 pm 05:36 PM
實現視差滾動和元素動畫效果的探討本文將探討如何實現類似資生堂官網（https://www.shiseido.co.jp/sb/wonderland/）中�...
JavaScript的演變：當前的趨勢和未來前景
Apr 10, 2025 am 09:33 AM
JavaScript的最新趨勢包括TypeScript的崛起、現代框架和庫的流行以及WebAssembly的應用。未來前景涵蓋更強大的類型系統、服務器端JavaScript的發展、人工智能和機器學習的擴展以及物聯網和邊緣計算的潛力。
如何使用JavaScript將具有相同ID的數組元素合併到一個對像中？
Apr 04, 2025 pm 05:09 PM
如何在JavaScript中將具有相同ID的數組元素合併到一個對像中？在處理數據時，我們常常會遇到需要將具有相同ID�...
前端開發中如何實現類似 VSCode 的面板拖拽調整功能？
Apr 04, 2025 pm 02:06 PM
探索前端中類似VSCode的面板拖拽調整功能的實現在前端開發中，如何實現類似於VSCode...
JavaScript引擎：比較實施
Apr 13, 2025 am 12:05 AM
不同JavaScript引擎在解析和執行JavaScript代碼時，效果會有所不同，因為每個引擎的實現原理和優化策略各有差異。 1.詞法分析：將源碼轉換為詞法單元。 2.語法分析：生成抽象語法樹。 3.優化和編譯：通過JIT編譯器生成機器碼。 4.執行：運行機器碼。 V8引擎通過即時編譯和隱藏類優化，SpiderMonkey使用類型推斷系統，導致在相同代碼上的性能表現不同。
