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 相关文章推荐
javascript在IE下trim函数无法使用的解决方法
Sep 12 Javascript
详解AngularJS中的作用域
Jun 17 Javascript
jquery中toggle函数交替使用问题
Jun 22 Javascript
JQuery中ajax方法访问web服务实例
Jul 18 Javascript
详解页面滚动值scrollTop在FireFox与Chrome浏览器间的兼容问题
Dec 03 Javascript
ionic组件ion-tabs选项卡切换效果实例
Aug 27 Javascript
Vue.JS入门教程之事件监听
Dec 01 Javascript
webpack实现热更新(实施同步刷新)
Jul 28 Javascript
vue首次赋值不触发watch的解决方法
Sep 11 Javascript
关于layui导航栏不展示下拉列表的解决方法
Sep 25 Javascript
js+css实现全屏侧边栏
Jun 16 Javascript
vue 如何使用递归组件
Oct 23 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
Linux下将excel数据导入到mssql数据库中的方法
2010/02/08 PHP
PHP中的strtr函数使用介绍(str_replace)
2011/10/20 PHP
调用WordPress函数统计文章访问量及PHP原生计数器的实现
2016/03/21 PHP
laravel中的错误与日志用法详解
2016/07/26 PHP
PHP获取访问页面HTTP状态码的实现代码
2016/11/03 PHP
24款非常有用的 jQuery 插件分享
2011/04/06 Javascript
jquery jqPlot API 中文使用教程(非常强大的图表工具)
2011/08/15 Javascript
javascript采用数组实现tab菜单切换效果
2012/12/12 Javascript
javascript获取隐藏元素(display:none)的高度和宽度的方法
2014/06/06 Javascript
laytpl 精致巧妙的JavaScript模板引擎
2014/08/29 Javascript
JavaScript实现16进制颜色值转RGB的方法
2015/02/09 Javascript
基于Echarts 3.19 制作常用的图形(非静态)
2016/05/19 Javascript
在JavaScript中调用Java类和接口的方法
2016/09/07 Javascript
JavaScript基础之AJAX简单的小demo
2017/01/29 Javascript
canvas实现弧形可拖动进度条效果
2017/05/11 Javascript
JavaScript EventEmitter 背后的秘密 完整版
2018/03/29 Javascript
JS逻辑运算符短路操作实例分析
2018/07/09 Javascript
详解Vue+ElementUI从零开始搭建自己的网站(一、环境搭建)
2019/04/30 Javascript
Vue 无限滚动加载指令实现方法
2019/05/28 Javascript
[02:10]2018DOTA2亚洲邀请赛赛前采访-Liquid
2018/04/03 DOTA
11个并不被常用但对开发非常有帮助的Python库
2015/03/31 Python
网站渗透常用Python小脚本查询同ip网站
2017/05/08 Python
python中找出numpy array数组的最值及其索引方法
2018/04/17 Python
Python中按键来获取指定的值
2019/03/02 Python
Python常用模块os.path之文件及路径操作方法
2019/12/03 Python
Python pip install如何修改默认下载路径
2020/04/29 Python
Python如何实现大型数组运算(使用NumPy)
2020/07/24 Python
python实现逻辑回归的示例
2020/10/09 Python
基于HTML5陀螺仪实现ofo首页眼睛移动效果的示例
2017/07/31 HTML / CSS
介绍Java的内部类
2012/10/27 面试题
《王二小》教学反思
2014/02/27 职场文书
教师新年寄语
2014/04/03 职场文书
高效课堂标语
2014/06/26 职场文书
网络管理员岗位职责
2015/02/12 职场文书
2015年留守儿童工作总结
2015/05/22 职场文书
2015小学教育教学工作总结
2015/07/21 职场文书