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 基础篇(一)
Mar 30 Javascript
利用jQuery实现可输入搜索文字的下拉框
Oct 23 Javascript
javascript数据类型验证方法
Dec 31 Javascript
JavaScript知识点总结之如何提高性能
Jan 15 Javascript
Vue.js仿Metronic高级表格(一)静态设计
Apr 17 Javascript
JS实现的全排列组合算法示例
Oct 09 Javascript
vue+iview+less+echarts实战项目总结
Feb 22 Javascript
Vue中的v-for指令不起效果的解决方法
Sep 27 Javascript
angularJs复选框checkbox选中进行ng-show显示隐藏的方法
Oct 08 Javascript
js变量声明var使用与不使用的区别详解
Jan 21 Javascript
jquery实现点击弹出对话框
Feb 08 jQuery
解决vue里a标签值解析变量,跳转页面,前面加默认域名端口的问题
Jul 22 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生成N个不重复的随机数实例
2013/11/12 PHP
php实现给一张图片加上水印效果
2016/01/02 PHP
Joomla使用Apache重写模式的方法
2016/05/04 PHP
功能强大的php文件上传类
2016/08/29 PHP
PHP数组操作简单案例分析
2016/10/15 PHP
PHP获取路径和目录的方法总结【必看篇】
2017/03/04 PHP
PHP面向对象程序设计之对象克隆clone和魔术方法__clone()用法分析
2019/06/12 PHP
JavaScript 定义function的三种方式小结
2009/10/16 Javascript
javascript图片相似度算法实现 js实现直方图和向量算法
2014/01/14 Javascript
jQuery学习笔记之jQuery+CSS3的浏览器兼容性
2015/01/19 Javascript
jQuery子属性过滤选择器用法分析
2015/02/10 Javascript
深入理解JavaScript系列(18):面向对象编程之ECMAScript实现
2015/03/05 Javascript
JavaScript 数组some()和filter()的用法及区别
2016/05/20 Javascript
Vue 固定头 固定列 点击表头可排序的表格组件
2016/11/25 Javascript
100多个基础常用JS函数和语法集合大全
2017/02/16 Javascript
Angular.js实现动态加载组件详解
2017/05/28 Javascript
Vue.js 的移动端组件库mint-ui实现无限滚动加载更多的方法
2017/12/23 Javascript
vue2过滤器模糊查询方法
2018/09/16 Javascript
NodeJS搭建HTTP服务器的实现步骤
2018/10/12 NodeJs
[02:44]DOTA2英雄基础教程 克林克兹
2014/01/15 DOTA
python运行其他程序的实现方法
2017/07/14 Python
PyCharm代码整体缩进,反向缩进的方法
2018/06/25 Python
Python3实现爬虫爬取赶集网列表功能【基于request和BeautifulSoup模块】
2018/12/05 Python
11个Python Pandas小技巧让你的工作更高效(附代码实例)
2019/04/30 Python
Python ini文件常用操作方法解析
2020/04/26 Python
Python使用urlretrieve实现直接远程下载图片的示例代码
2020/08/17 Python
python 如何在测试中使用 Mock
2021/03/01 Python
中国跨境海淘网站:考拉海购
2016/08/01 全球购物
KIKO比利时官网:意大利彩妆品牌
2017/07/23 全球购物
薇姿法国官网:Vichy法国
2021/01/28 全球购物
类成员函数的重载、覆盖和隐藏区别
2016/01/27 面试题
银行门卫岗位职责
2013/12/29 职场文书
优秀教师主要事迹
2014/02/01 职场文书
硕士生找工作求职信
2014/07/05 职场文书
共青团员自我评价范文
2014/09/14 职场文书
工作计划范文之财务管理
2019/08/09 职场文书