JavaScript制作簡單網(wǎng)頁計算器
本文實(shí)例為大家分享了JavaScript制作簡單網(wǎng)頁計算器的具體代碼,供大家參考,具體內(nèi)容如下
一、題目
利用JavaScript中的函數(shù),完成數(shù)字加、減、乘、除的運(yùn)算,實(shí)現(xiàn)一個簡單的計算器。
二、代碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>網(wǎng)頁計算器</title>
</head>
?
<body>
<div>
?? ?<p>數(shù)字1:<input type="text" id="num1"/></p>
?? ?<p>數(shù)字2:<input type="text" id="num2"/></p>
?? ?<p>
?? ??? ?<input type="button" value="相加" onclick="add()"/>
?? ??? ?<input type="button" value="相減" onclick="sub()"/>
?? ??? ?<input type="button" value="相乘" onclick="mul()"/>
?? ??? ?<input type="button" value="相除" onclick="div()"/>
?? ?</p>
?? ?<p>結(jié)果(數(shù)字1 op 數(shù)字2):<p><input type="text" id="result"/></p></p>
</div>
<script>
?? ?
?? ?function add(){
?? ??? ?var num1=parseFloat(document.getElementById("num1").value);
?? ??? ?var num2=parseFloat(document.getElementById("num2").value);
?? ??? ?if(isNaN(num1)||isNaN(num2)){
?? ??? ??? ?alert("請輸入數(shù)字!");
?? ??? ?}else{
?? ??? ??? ?result.value=(num1+num2).toFixed(2);
?? ??? ??? ?return result.value;
?? ??? ?}
?? ?}
?? ?function sub(){
?? ??? ?var num1=parseFloat(document.getElementById("num1").value);
?? ??? ?var num2=parseFloat(document.getElementById("num2").value);
?? ??? ?if(isNaN(num1)||isNaN(num2)){
?? ??? ??? ?alert("請輸入數(shù)字!");
?? ??? ?}else{
?? ??? ??? ?result.value=(num1-num2).toFixed(2);
?? ??? ??? ?return result.value;
?? ??? ?}
?? ?}
?? ?function mul(){
?? ??? ?var num1=parseFloat(document.getElementById("num1").value);
?? ??? ?var num2=parseFloat(document.getElementById("num2").value);
?? ??? ?if(isNaN(num1)||isNaN(num2)){
?? ??? ??? ?alert("請輸入數(shù)字!");
?? ??? ?}else{
?? ??? ??? ?result.value=(num1*num2).toFixed(2);
?? ??? ??? ?return result.value;
?? ??? ?}
?? ?}
?? ?function div(){
?? ??? ?var num1=parseFloat(document.getElementById("num1").value);
?? ??? ?var num2=parseFloat(document.getElementById("num2").value);
?? ??? ?if(isNaN(num1)||isNaN(num2)){
?? ??? ??? ?alert("請輸入數(shù)字!");
?? ??? ?}else if(num2==0){
?? ??? ??? ?alert("除數(shù)不能為0!");
?? ??? ?}else{
?? ??? ??? ?result.value=(num1/num2).toFixed(2);
?? ??? ??? ?return result.value;
?? ??? ?}
?? ?}
?? ?
?? ?
</script>
</body>
</html>三、結(jié)果




四、總結(jié)
- document.getElementById("num1").value獲取的是一個字符串;
- NaN表示非數(shù)值;
- parseFloat()函數(shù)解析字符串并返回浮點(diǎn)數(shù);
- toFixed() 方法可把 Number 四舍五入為指定小數(shù)位數(shù)的數(shù)字;toFixed(2)就是保留兩位小數(shù);
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- javascript寫的簡單的計算器,內(nèi)容很多,方法實(shí)用,推薦
- js實(shí)現(xiàn)簡單計算器
- 簡易js代碼實(shí)現(xiàn)計算器操作
- html+js實(shí)現(xiàn)簡單的計算器代碼(加減乘除)
- js實(shí)現(xiàn)一個簡易計算器
- 用JS寫的簡單的計算器實(shí)現(xiàn)代碼
- javascript-簡單的計算器實(shí)現(xiàn)步驟分解(附圖)
- 純javascript代碼實(shí)現(xiàn)計算器功能(三種方法)
- Vue.js實(shí)現(xiàn)的計算器功能完整示例
- js網(wǎng)頁版計算器的簡單實(shí)現(xiàn)
相關(guān)文章
javascript中解析四則運(yùn)算表達(dá)式的算法和示例
這篇文章主要介紹了javascript中解析四則運(yùn)算表達(dá)式的算法和示例,本文介紹了中綴表示法、逆波蘭表示法這2種算法,并分別給出了代碼實(shí)例,需要的朋友可以參考下2014-08-08
js+html5實(shí)現(xiàn)canvas繪制鏤空字體文本的方法
這篇文章主要介紹了js+html5實(shí)現(xiàn)canvas繪制鏤空字體文本的方法,涉及html5文字效果的相關(guān)技巧,需要的朋友可以參考下2015-06-06
阻止JavaScript事件冒泡傳遞(cancelBubble 、stopPropagation)
阻止JavaScript事件冒泡傳遞(cancelBubble 、stopPropagation)...2007-05-05
js實(shí)現(xiàn)的二級橫向菜單條實(shí)例
這篇文章主要介紹了js實(shí)現(xiàn)的二級橫向菜單條,是非常美觀簡潔的二級導(dǎo)航條效果,可實(shí)現(xiàn)針對鼠標(biāo)事件的動態(tài)響應(yīng)及頁面樣式切換功能,簡單實(shí)用,需要的朋友可以參考下2015-08-08
uni-app跨端自定義指令實(shí)現(xiàn)按鈕權(quán)限操作
實(shí)現(xiàn)uni-app自定義指令按鈕權(quán)限需要涉及到對于vue.config.js新增loader配置,基礎(chǔ)正則知識,webpack的loader開發(fā)和調(diào)試,以及npm本地調(diào)試和發(fā)布,接下來就從了解這些前置知識開始,需要的朋友可以參考下2023-01-01
JS實(shí)現(xiàn)物體帶緩沖的間歇運(yùn)動效果示例
這篇文章主要介紹了JS實(shí)現(xiàn)物體帶緩沖的間歇運(yùn)動效果,可實(shí)現(xiàn)物體定時間歇運(yùn)動的功能,涉及javascript定時器、數(shù)學(xué)運(yùn)算及頁面元素動態(tài)修改的相關(guān)操作技巧,需要的朋友可以參考下2016-12-12

