JavaScript经典小项目——制作简单的计算器功能
使用JS完成一个简单的计算器 功能。实现2个输入框中输入整数后，点击第三个输入框能给出2个整数的加减乘除。
该项目中所涉及的内容包括：构建函数(count)，document.getElementById的用法，switch判断运算法则，使用parseInt().
具体步骤：
第一，首先是<body>部分：利用html标签构建输入框<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>部分：构建函数。
<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;
//通过document.getElementById().value获取相应的值，并赋值给相对应的变量。
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判断运算法则实现加减乘除的运算法则。
document.getElementById("fruit").value = result;
// 设置结果输出框的值。
}
</script>
</head>
本次项目的练习是针对学习JavaScript新人的提升和历练，希望我的写作对你有一定的帮助。
网友评论