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.Ajax()方法调用Asp.Net后台的方法解析
Feb 13 Javascript
js实现禁止中文输入的方法
Jan 14 Javascript
javascript实现table选中的行以指定颜色高亮显示的方法
May 13 Javascript
jQuery实现鼠标滑过点击事件音效试听
Aug 31 Javascript
JavaScript数组合并的多种方法
May 22 Javascript
使用vue.js实现checkbox的全选和多个的删除功能
Feb 17 Javascript
JQ中$(window).load和$(document).ready区别与执行顺序
Mar 01 Javascript
前端自动化开发之Node.js的环境搭建教程
Apr 01 Javascript
详解Vue CLI3配置之filenameHashing使用和源码设计使用和源码设计
Aug 31 Javascript
vue+element-ui JYAdmin后台管理系统模板解析
Jul 28 Javascript
jQuery实现tab栏切换效果
Dec 22 jQuery
详解JavaScript中的this指向问题
Feb 05 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
计数器详细设计
2006/10/09 PHP
php生成excel文件的简单方法
2014/02/08 PHP
php中this关键字用法分析
2016/12/07 PHP
PHP关键特性之命名空间实例详解
2017/05/06 PHP
在JavaScript中使用inline函数的问题
2007/03/08 Javascript
jquery中通过过滤器获取表单元素的实现代码
2011/07/05 Javascript
JS面向对象编程浅析
2011/08/28 Javascript
浅谈JavaScript之事件绑定
2013/07/08 Javascript
Javascript delete 引用类型对象
2013/11/01 Javascript
jquery中$(#form :input)与$(#form input)的区别
2014/08/18 Javascript
JavaScript字符串对象toLowerCase方法入门实例(用于把字母转换为小写)
2014/10/17 Javascript
Web表单提交之disabled问题js解决方法
2015/01/13 Javascript
javascript日期处理函数,性能优化批处理
2015/09/06 Javascript
利用HTML5的画布Canvas实现刮刮卡效果
2015/09/06 Javascript
AngularJS基础 ng-src 指令简单示例
2016/08/03 Javascript
用headjs来管理和加载js 提高网站加载速度
2016/11/29 Javascript
Vue中使用vue-i18插件实现多语言切换功能
2018/04/25 Javascript
重学 JS:为啥 await 不能用在 forEach 中详解
2019/04/15 Javascript
[04:00]DOTA2解说界神雕侠侣 CJ第四天谷子现场过生日
2013/07/30 DOTA
[01:30]我们共输赢 完美世界城市挑战赛开启全新赛季
2019/04/19 DOTA
使用python 获取进程pid号的方法
2014/03/10 Python
Python写的一个简单DNS服务器实例
2014/06/04 Python
python使用正则表达式提取网页URL的方法
2015/05/26 Python
在pycharm 中添加运行参数的操作方法
2019/01/19 Python
pyhanlp安装介绍和简单应用
2019/02/22 Python
pywinauto自动化操作记事本
2019/08/26 Python
python线程安全及多进程多线程实现方法详解
2019/09/27 Python
猫途鹰:全球领先的旅游点评社区
2017/04/07 全球购物
英国外籍人士的在线超市:British Corner Shop
2019/06/03 全球购物
英国最大的在线快递公司之一:ParcelHero
2019/11/04 全球购物
在Java开发中如何选择使用哪种集合类
2016/08/09 面试题
解除合同协议书
2014/04/17 职场文书
处级领导干部四风问题自我剖析材料
2014/09/29 职场文书
高三语文复习计划
2015/01/19 职场文书
2015年度绩效考核工作总结
2015/05/27 职场文书
体育部部长竞选稿
2015/11/21 职场文书