js实现简易计算器小功能


Posted in Javascript onNovember 18, 2020

本文实例为大家分享了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>

运行结果:

js实现简易计算器小功能

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
繁简字转换功能
Jul 19 Javascript
JS二维数组的定义说明
Mar 03 Javascript
yepnope.js使用详解及示例分享
Jun 23 Javascript
一个JavaScript处理textarea中的字符成每一行实例
Sep 22 Javascript
Treegrid的动态加载实例代码
Apr 29 Javascript
Javascript之Date对象详解
Jun 07 Javascript
js轮播图代码分享
Jul 14 Javascript
Javascript中字符串相关常用的使用方法总结
Mar 13 Javascript
Cookies 和 Session的详解及区别
Apr 21 Javascript
Ionic项目中Native Camera的使用方法
Jun 07 Javascript
解决cordova+vue 项目打包成APK应用遇到的问题
May 10 Javascript
Array.filter中如何正确使用Async
Nov 04 Javascript
微信小程序实现购物车功能
Nov 18 #Javascript
在Vue中使用Echarts可视化库的完整步骤记录
Nov 18 #Vue.js
微信小程序实现日历小功能
Nov 18 #Javascript
微信小程序实现底部弹出模态框
Nov 18 #Javascript
微信小程序实现左滑删除效果
Nov 18 #Javascript
详解vue实现坐标拾取器功能示例
Nov 18 #Vue.js
JQuery+drag.js上传图片并且实现图片拖曳
Nov 18 #jQuery
You might like
require(),include(),require_once()和include_once()区别
2008/03/27 PHP
PHP分页显示制作详细讲解
2008/11/19 PHP
PHP中使用php://input处理相同name值的表单数据
2015/02/03 PHP
php中使用GD库做验证码
2016/03/31 PHP
PHP实现基于面向对象的mysqli扩展库增删改查操作工具类
2017/07/18 PHP
THINKPHP3.2使用soap连接webservice的解决方法
2017/12/13 PHP
JavaScript按位运算符的应用简析
2014/02/04 Javascript
javascript实现一个数值加法函数
2015/06/26 Javascript
每天一篇javascript学习小结(Array数组)
2015/11/11 Javascript
JS判断元素是否在数组内的实现代码
2016/03/30 Javascript
JavaScript ES5标准中新增的Array方法
2016/06/28 Javascript
详细谈谈AngularJS的子级作用域问题
2016/09/05 Javascript
JavaScript数组迭代方法
2017/03/03 Javascript
JavaScript实现一个带AI的井字棋游戏源码
2018/05/21 Javascript
微信小程序实现下拉菜单切换效果
2020/03/30 Javascript
Js逆向实现滑动验证码图片还原的示例代码
2020/03/10 Javascript
ant-design表单处理和常用方法及自定义验证操作
2020/10/27 Javascript
[43:32]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS NewBee第一场
2014/05/26 DOTA
python删除列表内容
2015/08/04 Python
查看django版本的方法分享
2018/05/14 Python
Python 十六进制整数与ASCii编码字符串相互转换方法
2018/07/09 Python
如何在Django中添加没有微秒的 DateTimeField 属性详解
2019/01/30 Python
Python实现的插入排序,冒泡排序,快速排序,选择排序算法示例
2019/05/04 Python
python tkinter实现彩球碰撞屏保
2019/07/30 Python
django 链接多个数据库 并使用原生sql实现
2020/03/28 Python
使用HTML和CSS实现的标签云效果(附demo)
2021/02/03 HTML / CSS
货车司机岗位职责
2014/03/18 职场文书
关于梦想的演讲稿
2014/05/05 职场文书
党的群众路线教育实践活动调研报告
2014/11/03 职场文书
2014年健康教育工作总结
2014/11/20 职场文书
资料员岗位职责范本
2015/04/13 职场文书
人口与计划生育责任书
2015/05/09 职场文书
飞屋环游记观后感
2015/06/08 职场文书
乡镇司法所2015年度工作总结
2015/10/14 职场文书
2016感恩父亲节主题广播稿
2015/12/18 职场文书
springboot实现string转json json里面带数组
2022/06/16 Java/Android