JavaScript实现简易计算器小功能
更新时间：2020年10月22日 11:32:33 作者：jiangrunkang.
这篇文章主要为大家详细介绍了JavaScript实现简易计算器小功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了JavaScript实现简易计算器的具体代码，供大家参考，具体内容如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>计算器</title>
</head>
<body>
<!--页面布局-->
<input type="text" id="num1" placeholder="请输入第一个数字"/>
<input type="text" id="operator" placeholder="请输入运算符">
<input type="text" id="num2" placeholder="请输入第二个数字"/>
<input type="button" onclick="count()" value="计算"/><br/>
<span>计算结果：</span><span id="result"></span>
<!--JavaScript-->
<script>
function count() {
var num1 = document.getElementById("num1").value;
var num2 = document.getElementById("num2").value;
var operator = document.getElementById("operator").value;
var num = "";
//判断输入的两个数字是否为数字,如果为数字，返回结果为false
var num1 = parseFloat(num1);
var num2 = parseFloat(num2);
var isNotNumber = isNaN(num1) || isNaN(num2);
if (!isNotNumber) {
switch (operator) {
case "+":
num = num1 + num2;
break;
case "-":
num = num1 - num2;
break;
case "*":
num = num1 * num2;
break;
case "/":
if (num2 == 0) {
// 除数不能为0
alert("除数不能为0");
} else {
num = num1 / num2;
break;
}
default:
alert("请输入正确的运算符！！！");
}
num = num.toFixed(2);
document.getElementById("result").innerText = num;
} else {
alert("请输入数字！！！")
}
}
</script>
</body>
</html>
运行效果：
测试结果：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
虎年春节将至，本文使用 React + Three.js技术栈，实现趣味 3D创意页面，主要包括：ShadowMaterial、 MeshPhongMaterial等基本材质的使用、使用 LoadingManager展示模型加载进度、OrbitControls`的缓动动画、TWEEN简单补间动画效果等，感兴趣的朋友一起看看吧2022-01-01
扩展运算符 (spread syntax) 是 ES6 提供的一种非常便捷的新语法，给我们操作数组和对象带来了非常大的便利，我在很多文章中也提到了这个语法。但是其实扩展运算符的用法还是比较多比较杂的，我用一篇文章来做一下总结，梳理一下扩展运算的语法和使用细节。2020-11-11
这篇文章主要介绍了javascript闭包(Closure)用法,结合实例形式较为详细的分析了JavaScript闭包的概念、功能及使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-11-11
这篇文章主要为大家介绍了javascript实现checkbox复选框实例代码，对checkbox复选框进行美化，感兴趣的小伙伴们可以参考一下2016-01-01
这篇文章主要介绍了ES6 Symbol在对象中的作用,结合实例形式分析了ES6 Symbol在对象中声明、使用方法与相关注意事项,需要的朋友可以参考下2020-06-06
这篇文章主要为大家详细介绍了JS实现鼠标移动拖尾效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-12-12
这篇文章主要介绍了浅谈webpack4 图片处理汇总，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
最近在做SOSO地图相关开发，遇到相关画圆知识，特此简单记录下来,接下来讲解如何在在地图上画圆，感兴趣的朋友可以了解下2013-01-01
这篇文章主要为大家介绍了微信小程序实现动态渲染Markdown示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-08-08
JavaScript async&await方法中的异常处理方案
在 async/await 方法中,可以使用 try-catch 块来处理异常,通过使用 try-catch,可以捕获异步操作中抛出的异常,并在 catch 块中进行适当的处理,本文给大家详细介绍了async&await方法中异常如何处理,需要的朋友可以参考下2023-08-08
最新评论