JavaScript經(jīng)典小項(xiàng)目——制作簡(jiǎn)單的計(jì)算器功能
使用JS完成一個(gè)簡(jiǎn)單的計(jì)算器 功能。實(shí)現(xiàn)2個(gè)輸入框中輸入整數(shù)后,點(diǎn)擊第三個(gè)輸入框能給出2個(gè)整數(shù)的加減乘除。
該項(xiàng)目中所涉及的內(nèi)容包括:構(gòu)建函數(shù)(count),document.getElementById的用法,switch判斷運(yùn)算法則,使用parseInt().
具體步驟:
第一,首先是<body>部分:利用html標(biāo)簽構(gòu)建輸入框<input>,選擇框<select>和確定按鈕<button>.
<body>
<input type="text" id="txt-1" />
<select>
<option value="+">+</option>
<option value="-">-</option>
<option value=""></option>
<option value="/">/</option>
</select>
<input type="text" id="txt-2" />
<input type="button" value="=" onclick="count()" />
<input type="text" id="fruit" />
</body>
第二步是<head>部分:構(gòu)建函數(shù)。
<head>
<script type="text/javascript">
function count() {
var numb1=document.getElementById("txt-1").value;
var numb2=document.getElementById("txt-2").value;
var numb3=document.getElementById("select").value;
//通過(guò)document.getElementById().value獲取相應(yīng)的值,并賦值給相對(duì)應(yīng)的變量。
var result="";
switch (numb3) {
case "+":
result = parseInt(numb1) + parseInt(numb2) ;
break;
case "-":
result = parseInt(numb1) - parseInt(numb2);
break;
case "*":
result = parseInt(numb1) * parseInt(numb2);
break;
case "/":
result = parseInt(numb1) / parseInt(numb2);
break;
}
//使用switch判斷運(yùn)算法則實(shí)現(xiàn)加減乘除的運(yùn)算法則。
document.getElementById("fruit").value = result;
// 設(shè)置結(jié)果輸出框的值。
}
</script>
</head>
本次項(xiàng)目的練習(xí)是針對(duì)學(xué)習(xí)JavaScript新人的提升和歷練,希望我的寫(xiě)作對(duì)你有一定的幫助。