js实现简易计算器小功能
编程学习 2021-07-04 14:07www.dzhlxh.cn编程入门
这篇文章主要为大家详细介绍了js实现简易计算器小功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了js实现简易计算器的具体代码，供大家参考，具体内容如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul li{
list-style: none;
line-height: 50px;
}
.getAnswer{
width: 20px;
}
</style>
</head>
<body>
<form name="calc">
<h2>简易计算器</h2>
<ul>
<li> 第一个数： <input type="text" name="num1" ></li>
<li> 第二个数： <input type="text" name="num2"></li>
<li> <input name="getAnswer" type="button" onclick="calcu1()" value="+">
<input name="getAnswer" type="button" onclick="calcu2()" value="-">
<input name="getAnswer" type="button" onclick="calcu3()" value="*">
<input name="getAnswer" type="button" onclick="calcu4()" value="/">
</li>
<li>计算结果： <input type="text" name="result" id="result"> </li>
</ul>
</form>
<script type="text/javascript">
function calcu1() {
var num1=document.calc.num1.value;
var num2=document.calc.num2.value;
sum1=parseFloat(num1) + parseFloat(num2);
var total = num1+"+"+num2+"="+sum1;
document.calc.result.value=total;
}
function calcu2() {
var num1=document.calc.num1.value;
var num2=document.calc.num2.value;
sum1=parseFloat(num1) - parseFloat(num2);
var total = num1+"-"+num2+"="+sum1;
document.calc.result.value=total;
}
function calcu3() {
var num1=document.calc.num1.value;
var num2=document.calc.num2.value;
var total = num1+"*"+num2+"="+parseFloat(num1)*parseFloat(num2);
document.calc.result.value=total;
}
function calcu4() {
var num1=document.calc.num1.value;
var num2=document.calc.num2.value;
if (num2==0){ alert("除数不能为0,请重新输入");
}else{
var total = num1+"/"+num2+"="+parseFloat(num1) / parseFloat(num2);
document.calc.result.value=total;
}
}
</script>
</body>
</html>
运行结果：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持狼蚁SEO。
上一篇：vue3.0实现点击切换验证码(组件)及校验
下一篇：微信小程序实现购物车功能