文章目錄
js簡單實現計算器
先來看效果：
按鍵功能和普通的計算器相同，%是取餘運算（模運算）。
實現計算器時用到的新知識：
- 設置輸入框只讀，不能輸入：加上屬性 readonly=“readonly”
- js函數的寫法：function 函數名(參數名){函數體} ，因爲js變量關鍵字只有var，所以參數不用寫var
- html的每一個標籤可以看做一個類，在函數中獲得標籤對象用 document.getElementById(“標籤id”) ，當然也可以把標籤對象當做參數傳入，標籤調用這些函數，只需要在標籤中添加屬性：οnclick=“test(this)” ，（點擊時調用test這個函數，把自己當做參數傳進去）
- 把字符串當做一條指令的一部分執行：調用方法eval(字符串)即可。
代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>計算器</title>
<style type="text/css">
#showid{
border:solid 1px;
border-radius: 10px;
width: 18.75rem;
text-align: center;
margin: auto;
margin-top: 80px;
}
input[type=text]{
margin-top: 10px;
width: 240px;
height: 80px;
font-size: 30px;
font-weight: bold;
}
input[type=button]{
width:50px;
height:50px;
margin: 5px;
font-size: 30px;
font-weight: bold;
}
</style>
<script type="text/javascript">
/* 聲明函數 */
function test(btn){
var num = btn.value;
switch(num){
case "=":
document.getElementById("inp").value = eval(document.getElementById("inp").value);
break;
case "c":
document.getElementById("inp").value = "";
break;
case "del":
var len = document.getElementById("inp").value.length;
document.getElementById("inp").value = document.getElementById("inp").value.substr(0,len-1);
break;
default:
document.getElementById("inp").value = document.getElementById("inp").value+num;
break;
}
}
/* 調用函數 */
//test();
</script>
</head>
<body>
<div id="showid">
<input type="text" name="" id="inp" value="" readonly="readonly" /><br/>
<input type="button" name="" id="" value="c" onclick="test(this)"/>
<input type="button" name="" id="" value="*" onclick="test(this)"/>
<input type="button" name="" id="" value="/" onclick="test(this)"/>
<input type="button" name="" id="" value="del" onclick="test(this)"/>
<br/>
<input type="button" name="" id="" value="7" onclick="test(this)"/>
<input type="button" name="" id="" value="8" onclick="test(this)"/>
<input type="button" name="" id="" value="9" onclick="test(this)"/>
<input type="button" name="" id="" value="-" onclick="test(this)"/>
<br/>
<input type="button" name="" id="" value="4" onclick="test(this)"/>
<input type="button" name="" id="" value="5" onclick="test(this)"/>
<input type="button" name="" id="" value="6" onclick="test(this)"/>
<input type="button" name="" id="" value="+" onclick="test(this)"/>
<br/>
<input type="button" name="" id="" value="1" onclick="test(this)"/>
<input type="button" name="" id="" value="2" onclick="test(this)"/>
<input type="button" name="" id="" value="3" onclick="test(this)"/>
<input type="button" name="" id="" value="=" onclick="test(this)"/>
<br/>
<input type="button" name="" id="" value="%" onclick="test(this)"/>
<input type="button" name="" id="" value="0" onclick="test(this)"/>
<input type="button" name="" id="" value="." onclick="test(this)"/>
<input type="button" name="" id="" value="=" onclick="test(this)"/>
<br/>
</div>
</body>
</html>
常用數組操作方法
concat() :合併
作用：合併兩個或多個數組。
用法：
var arr = [1,"abc","張三","12"];
var b = ["王二狗","大偉哥"];
var c = "js";
var d = arr.concat(b,c);
join():轉化字符串
作用：將數組的內容合併成一個字符串並返回，用傳入的符號做分隔符，默認是“，”
用法：
var b = arr.join("-");
pop() : 移除
作用：移除數組最後一個元素並返回值
用法：
var b = arr.pop();
push():添加
作用：在數組最後添加一個元素，並返回長度，元素可以是另一個數組（看做一個元素，即原數組長度加1）。
用法：
var b = arr.push("最後一個");
reverse() : 反轉
作用：把數組的元素逆序排列。
用法：
var b = arr.reverse();
shift():移除
作用：移除數組第一個元素並返回值。
用法：
var b = arr.shift();
unshift():添加
作用：添加一個元素在數組第一個位置並返回長度，其他元素一次向後移一位。
用法：
var b = arr.unshift("第一個");
sort():排序
作用：將數組的元素按從小到大排序。
用法：
var b = arr.sort();
splice():移除
作用：移除指定位置的元素，如果需要，可以替換成指定的元素。
用法：
var b = arr.splice(1,3,"a");//"a"參數不寫則僅移除下標1，2，3位置的元素