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 相关文章推荐
基于JQuery的列表拖动排序实现代码
Oct 01 Javascript
PHP守护进程实例
Mar 06 Javascript
JavaScript获取当前运行脚本文件所在目录的方法
Feb 03 Javascript
KnockoutJS 3.X API 第四章之数据控制流if绑定和ifnot绑定
Oct 10 Javascript
在angular 6中使用 less 的实例代码
May 13 Javascript
AngularJS ui-router刷新子页面路由的方法
Jul 23 Javascript
webpack+vue-cli项目中引入外部非模块格式js的方法
Sep 28 Javascript
JavaScript实现邮箱后缀提示功能的示例代码
Dec 13 Javascript
详解如何在vue项目中使用layui框架及采坑
May 05 Javascript
在layui tab控件中载入外部html页面的方法
Sep 04 Javascript
浅谈微信小程序列表埋点曝光指南
Oct 15 Javascript
Element Cascader 级联选择器的使用示例
Jul 27 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
可快速识别放射性物质-国外大神教你diy一个开放式辐射探测器
2020/03/12 无线电
让PHP以ROOT权限执行系统命令的方法
2011/02/10 PHP
解析PHP中的unset究竟会不会释放内存
2013/07/18 PHP
PHP中IP地址与整型数字互相转换详解
2014/08/20 PHP
基于Jquery的温度计动画效果
2010/06/18 Javascript
JS、CSS加载中的小问题探讨
2013/11/26 Javascript
JavaScript判断访问的来源是手机还是电脑,用的哪种浏览器
2013/12/12 Javascript
js浮点数保留两位小数点示例代码(四舍五入)
2013/12/26 Javascript
JavaScript制作的可折叠弹出式菜单示例
2014/04/04 Javascript
jQuery ui 利用 datepicker插件实现开始日期(minDate)和结束日期(maxDate)
2014/05/22 Javascript
JS针对浏览器窗口关闭事件的监听方法集锦
2016/06/24 Javascript
Three.js学习之网格
2016/08/10 Javascript
jQuery fadeOut 异步实例代码详解
2016/08/18 Javascript
js实现拖拽上传图片功能
2017/08/01 Javascript
ReactNative列表ListView的用法
2017/08/02 Javascript
jQuery实现的简单拖拽功能示例【测试可用】
2018/08/14 jQuery
vue两组件间值传递 $router.push实现方法
2019/05/15 Javascript
JS实现压缩上传图片base64长度功能
2019/12/03 Javascript
JavaScript实现简单的计算器
2020/01/16 Javascript
[02:57]DOTA2亚洲邀请赛小组赛第四日 赛事回顾
2015/02/02 DOTA
用Python登录Gmail并发送Gmail邮件的教程
2015/04/17 Python
Python引用模块和查找模块路径
2016/03/17 Python
python实现嵌套列表平铺的两种方法
2018/11/08 Python
python3使用matplotlib绘制散点图
2019/03/19 Python
Python3实现的旋转矩阵图像算法示例
2019/04/03 Python
Python中一个for循环循环多个变量的示例
2019/07/16 Python
django实现web接口 python3模拟Post请求方式
2019/11/19 Python
Python 2种方法求某个范围内的所有素数(质数)
2020/01/31 Python
pytorch快速搭建神经网络_Sequential操作
2020/06/17 Python
html5需遵循的6个设计原则
2016/04/27 HTML / CSS
玩具反斗城葡萄牙官方商城:Toys"R"Us葡萄牙
2016/10/21 全球购物
反腐倡廉标语
2014/06/24 职场文书
安全月宣传标语
2014/10/07 职场文书
企业与个人合作经营协议书
2014/11/01 职场文书
MongoDB误操作后使用oplog恢复数据
2022/04/11 MongoDB
JS前端轻量fabric.js系列物体基类
2022/08/05 Javascript