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中动态加载js文件多种解决办法总结
Nov 15 Javascript
ExtJS4 动态生成的grid导出为excel示例
May 02 Javascript
jquery实现的一个简单进度条效果实例
May 12 Javascript
JS+CSS实现可拖拽的漂亮圆角特效弹出层完整实例
Feb 13 Javascript
点击按钮出现60秒倒计时的简单js代码(推荐)
Jun 07 Javascript
Bootstrap CSS组件之分页(pagination)和翻页(pager)
Dec 17 Javascript
JavaScript 中定义函数用 var foo = function () {} 和 function foo()区别介绍
Mar 01 Javascript
Chart.js 轻量级HTML5图表绘制工具库(知识整理)
May 22 Javascript
详解基于node.js的脚手架工具开发经历
Jan 28 Javascript
vue强制刷新组件的方法示例
Feb 28 Javascript
详解Vue路由自动注入实践
Apr 17 Javascript
GitHub上77.9K的Axios项目有哪些值得借鉴的地方详析
Jun 15 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安装为Apache DSO
2006/10/09 PHP
一个基于PDO的数据库操作类(新) 一个PDO事务实例
2011/07/03 PHP
php中通过正则表达式下载内容中的远程图片的函数代码
2012/01/10 PHP
PHP实现的博客欢迎提示功能(很特别哦)
2014/06/05 PHP
php上传图片获取路径及给表单字段赋值的方法
2016/01/23 PHP
php定期拉取数据对比方法实例
2019/09/22 PHP
JavaScript内核之基本概念
2011/10/21 Javascript
JS实现屏蔽shift,Ctrl,alt等功能键的方法
2015/06/01 Javascript
js解决movebox移动问题
2016/03/29 Javascript
深入理解ES6中let和闭包
2018/02/22 Javascript
解决vue页面刷新或者后退参数丢失的问题
2018/03/13 Javascript
微信小程序日期选择器实例代码
2018/07/18 Javascript
详解如何在vue项目中使用eslint+prettier格式化代码
2018/11/10 Javascript
angularjs请求数据的方法示例
2019/08/06 Javascript
vue.js实现二级菜单效果
2019/10/19 Javascript
详解为什么Vue中不要用index作为key(diff算法)
2020/04/04 Javascript
[01:13:01]2018DOTA2亚洲邀请赛 4.4 淘汰赛 TNC vs VG 第三场
2018/04/05 DOTA
Python程序设计入门(3)数组的使用
2014/06/16 Python
Python模糊查询本地文件夹去除文件后缀的实例(7行代码)
2017/11/09 Python
Python cookbook(数据结构与算法)保存最后N个元素的方法
2018/02/13 Python
Python判断两个list是否是父子集关系的实例
2018/05/04 Python
CentOS 7 安装python3.7.1的方法及注意事项
2018/11/01 Python
python word转pdf代码实例
2019/08/16 Python
Python文件读写w+和r+区别解析
2020/03/26 Python
用 Python 制作地球仪的方法
2020/04/24 Python
使用 CSS3 中@media 实现网页自适应的示例代码
2020/03/24 HTML / CSS
英国领先的汽车轮胎和快速健康中心:Kwik Fit
2017/10/29 全球购物
Ryderwear澳洲官网:澳大利亚高端健身训练装备品牌
2018/09/18 全球购物
计算机科学与技术应届生求职信
2013/11/07 职场文书
博士学位自我鉴定范文
2013/12/26 职场文书
乡镇纠风工作实施方案
2014/03/22 职场文书
2014年作风建设心得体会
2014/10/22 职场文书
运动会加油稿20字
2014/11/15 职场文书
2014年应急工作总结
2014/12/11 职场文书
英语导游词
2015/02/13 职场文书
浅析NIO系列之TCP
2021/06/15 Java/Android