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来定位
Feb 20 Javascript
select组合框option的捕捉实例代码
Sep 30 Javascript
在JavaScript中访问字符串的子串
Jul 07 Javascript
通过Jquery.cookie.js实现展示浏览网页的历史记录超管用
Oct 23 Javascript
vue proxyTable 接口跨域请求调试的示例
Sep 12 Javascript
angularjs中$http异步上传Excel文件方法
Feb 23 Javascript
webpack vue项目开发环境局域网访问方法
Mar 20 Javascript
基于JS实现带动画效果的流程进度条
Jun 01 Javascript
bootstrap table表格插件之服务器端分页实例代码
Sep 12 Javascript
Element Alert警告的具体使用方法
Jul 27 Javascript
如何在vue中使用kindeditor富文本编辑器
Dec 19 Vue.js
JavaScript实现下拉列表
Jan 20 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
一个完整的PHP类包含的七种语法说明
2015/06/04 PHP
php简单实现多维数组排序的方法
2016/09/30 PHP
PHP实现链表的定义与反转功能示例
2018/06/09 PHP
ThinkPHP like模糊查询,like多匹配查询,between查询,in查询,一般查询书写方法
2018/09/26 PHP
JS数学函数Exp使用说明
2012/08/09 Javascript
jQuery.buildFragment使用方法及思路分析
2013/01/07 Javascript
使用jQuery动态加载js脚本文件的方法
2014/04/03 Javascript
Javascript 赋值机制详解
2014/11/23 Javascript
jquery中$each()方法的使用指南
2015/04/30 Javascript
javascript最基本的函数汇总
2015/06/25 Javascript
详解JavaScript逻辑And运算符
2015/12/04 Javascript
基于jquery实现图片相关操作(重绘、获取尺寸、调整大小、缩放)
2015/12/25 Javascript
Bootstrap入门书籍之(五)导航条、分页导航
2016/02/17 Javascript
AngularJS基础 ng-focus 指令简单示例
2016/08/01 Javascript
javascript 解决浏览器不支持的问题
2016/09/24 Javascript
Move.js入门
2017/02/08 Javascript
如何利用JavaScript编写一个格斗小游戏
2021/01/06 Javascript
[40:06]DOTA2亚洲邀请赛 4.3 突围赛 Liquid vs VGJ.T 第一场
2018/04/04 DOTA
[45:32]Liquid vs LGD 2018国际邀请赛淘汰赛BO3 第二场 8.23
2018/08/24 DOTA
Python实现的下载8000首儿歌的代码分享
2014/11/21 Python
详解Python的迭代器、生成器以及相关的itertools包
2015/04/02 Python
python生成词云的实现方法(推荐)
2017/06/13 Python
Python实现动态加载模块、类、函数的方法分析
2017/07/18 Python
基于DataFrame改变列类型的方法
2018/07/25 Python
TensorFlow实现自定义Op方式
2020/02/04 Python
英国领先的葡萄酒专家:Majestic Wine
2017/05/30 全球购物
英国和国际包裹递送:ParcelCompare
2019/08/26 全球购物
.net开发工程师面试题
2014/02/25 面试题
八一建军节部队活动方案
2014/02/04 职场文书
狼和鹿教学反思
2014/02/05 职场文书
国培教师自我鉴定
2014/02/12 职场文书
运动会演讲稿100字
2014/08/25 职场文书
专升本学生毕业自我鉴定
2014/10/04 职场文书
交通事故协议书范文
2014/10/23 职场文书
如何自己动手写SQL执行引擎
2021/06/02 MySQL
Python通用验证码识别OCR库ddddocr的安装使用教程
2022/07/07 Python