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 相关文章推荐
js 替换功能函数,用正则表达式解决,js的全部替换
Dec 08 Javascript
用javascript作一个通用向导说明
Aug 30 Javascript
浅析js中2个等号与3个等号的区别
Aug 06 Javascript
js Math 对象的方法
Sep 01 Javascript
json的定义、标准格式及json字符串检验
May 11 Javascript
Javascript监视变量变化的方法
Jun 09 Javascript
AngularJS 依赖注入详解及示例代码
Aug 17 Javascript
浅谈js-FCC算法Friendly Date Ranges(详解)
Apr 10 Javascript
通过示例彻底搞懂js闭包
Aug 10 Javascript
解决vue 界面在苹果手机上滑动点击事件等卡顿问题
Nov 27 Javascript
bootstrap Table实现合并相同行
Jul 19 Javascript
VUE 自定义组件模板的方法详解
Aug 30 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程序
2006/10/09 PHP
PHP中获取变量的变量名的一段代码的bug分析
2011/07/07 PHP
基于PHP Socket配置以及实例的详细介绍
2013/06/13 PHP
php实现mysql数据库连接操作及用户管理
2015/11/08 PHP
javascript json2 使用方法
2010/03/16 Javascript
基于jQuery的简单九宫格实现代码
2012/08/09 Javascript
JavaScript控制Session操作方法
2013/01/17 Javascript
Json对象与Json字符串互转(4种转换方式)
2013/03/27 Javascript
jquery队列函数用法实例
2014/12/16 Javascript
javascript运算符——位运算符全面介绍
2016/07/14 Javascript
jQuery实现磁力图片跟随效果完整示例
2016/09/16 Javascript
关于webuploader插件使用过程遇到的小问题
2016/11/07 Javascript
JQuery和HTML5 Canvas实现弹幕效果
2017/01/04 Javascript
Vue2学习笔记之请求数据交互vue-resource
2017/02/23 Javascript
浅谈Vue.js
2017/03/02 Javascript
基于JavaScript+HTML5 实现打地鼠小游戏逻辑流程图文详解(附完整代码)
2017/11/02 Javascript
jQuery中使用validate插件校验表单功能
2019/05/24 jQuery
Vue循环中多个input绑定指定v-model实例
2020/08/31 Javascript
Javascript执行上下文顺序的深入讲解
2020/11/04 Javascript
python实现挑选出来100以内的质数
2015/03/24 Python
python类继承用法实例分析
2015/05/27 Python
用python与文件进行交互的方法
2018/03/01 Python
基于Python 装饰器装饰类中的方法实例
2018/04/21 Python
解决新django中的path不能使用正则表达式的问题
2018/12/18 Python
Django logging配置及使用详解
2019/07/23 Python
Diamondback自行车:拥有你的冒险
2019/04/22 全球购物
戴尔荷兰官方网站:Dell荷兰
2020/10/04 全球购物
简述Linux文件系统通过i节点把文件的逻辑结构和物理结构转换的工作过程
2012/04/17 面试题
如何通过 CSS 写出火焰效果
2021/03/24 HTML / CSS
销售冠军获奖感言
2014/02/03 职场文书
中学生运动会入场词
2014/02/12 职场文书
小学毕业感言500字
2014/02/28 职场文书
2014年祖国生日寄语
2014/09/19 职场文书
小学生安全教育心得体会
2016/01/15 职场文书
Java版 单机五子棋
2022/05/04 Java/Android
错误码NET::ERR_CERT_DATE_INVALID证书已过期解决方法?
2022/07/07 数码科技