写在前面:运用js中的一些功能实现计算器加减乘除的功能。
主要代码:
<body>
<input type="text" name="" id="txt-num1" >
<select id="sel">
<option value="+">+</option>
<option value="-">-</option>
<option value="/">/</option>
<option value="*">*</option>
</select>
<input type="text" name="" id="txt-num2">
<button id="btn-cal">=</button>
<input type="text" name="" id="txt-result">
<script type="text/javascript">
var o=document.getElementById('btn-cal');//找到按钮对象
//查找输入框
var t1=document.getElementById('txt-num1');
var t2=document.getElementById('txt-num2');
var t3=document.getElementById('txt-result');
//下拉框
var s=document.getElementById('sel');
//给按钮添加点击事件
o.onclick=function(){
//完成计算
//取出两个输入框的值 操作数
var v1=parseFloat(t1.value);//string--->number
var v2=parseFloat(t2.value);
console.log(v1);
var result;
// console.log(v1,v2);
//判断要进行的运算
switch(s.value){
case "+":
result=v1+v2;
break;
case "-":
result=v1-v2;
break;
case "*":
result=v1*v2;
break;
case "/":
result=v1/v2;
break;
default:
result=v1+v2;
break;
}
//将运算结果保存在输入框中
t3.value=result;
}
</script>
</body>
---------------------
【转载,仅作分享,侵删】
作者:Ryan Ji
原文:https://blog.csdn.net/qq_42451979/article/details/80885020
版权声明:本文为博主原创文章,转载请附上博文链接!
|
|