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 相关文章推荐
了不起的node.js读书笔记之例程分析
Dec 22 Javascript
JQuery限制复选框checkbox可选中个数的方法
Apr 20 Javascript
jQuery实现用户输入自动完成功能
Feb 13 Javascript
微信小程序中用WebStorm使用LESS
Mar 08 Javascript
jquery mobile实现可折叠的导航按钮
Mar 11 Javascript
angular 用拦截器统一处理http请求和响应的方法
Jun 08 Javascript
React 子组件向父组件传值的方法
Jul 24 Javascript
详解bootstrap导航栏.nav与.navbar区别
Nov 23 Javascript
axios发送post请求,提交图片类型表单数据方法
Mar 16 Javascript
微信小程序使用swiper组件实现类3D轮播图
Aug 29 Javascript
浅谈Vue.js 中的 v-on 事件指令的使用
Nov 25 Javascript
小程序实现多列选择器
Feb 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实现的中文分词类完整实例
2017/02/06 PHP
php7安装mongoDB扩展的方法分析
2017/08/02 PHP
Ajax+PHP实现的删除数据功能示例
2019/02/12 PHP
PHP的简单跳转提示的实现详解
2019/03/14 PHP
Laravel模糊查询区分大小写的实例
2019/09/29 PHP
基于mootools插件实现遮罩层新手引导
2012/05/24 Javascript
js获取单选框或复选框值及操作
2012/12/18 Javascript
jquery ajax,ashx,json的用法总结
2014/02/12 Javascript
JavaScript使用指针操作实现约瑟夫问题实例
2015/04/07 Javascript
详解JavaScript中jQuery和Ajax以及JSONP的联合使用
2015/08/13 Javascript
BootstrapTable+KnockoutJS自定义T4模板快速生成增删改查页面
2016/08/01 Javascript
js在ie下打开对话窗口的方法小结
2016/10/24 Javascript
bootstrap侧边栏圆点导航
2017/01/11 Javascript
Angular 4依赖注入学习教程之FactoryProvider配置依赖对象(五)
2017/06/04 Javascript
Vue.js 中取得后台原生HTML字符串 原样显示问题的解决方法
2018/06/10 Javascript
vue的keep-alive中使用EventBus的方法
2019/04/23 Javascript
JS替换字符串中指定位置的字符(多种方法)
2020/05/28 Javascript
JavaScript实现原型封装轮播图
2020/12/27 Javascript
六个窍门助你提高Python运行效率
2015/06/09 Python
Windows中安装使用Virtualenv来创建独立Python环境
2016/05/31 Python
用python处理MS Word的实例讲解
2018/05/08 Python
python 3.3 下载固定链接文件并保存的方法
2018/12/18 Python
python+opencv打开摄像头,保存视频、拍照功能的实现方法
2019/01/08 Python
Python 使用 PyMysql、DBUtils 创建连接池提升性能
2019/08/14 Python
Python列表list常用内建函数实例小结
2019/10/22 Python
python实现大学人员管理系统
2019/10/25 Python
美国设计师精美珠宝购物网:Netaya
2016/08/28 全球购物
Famous Footwear加拿大:美国多品牌运动休闲鞋店
2018/12/05 全球购物
乐高奥地利官方商店:LEGO Shop AT
2019/07/16 全球购物
JSF面试题:如何管量web层中的Bean,用什么标签。如何通过jsp页面与Bean绑定在一起进行处理?
2012/10/05 面试题
一套C++笔试题面试题
2012/06/06 面试题
十佳护士获奖感言
2014/02/18 职场文书
伦敦奥运会的口号
2014/06/21 职场文书
语文教研活动总结
2014/07/02 职场文书
Linux安装Nginx步骤详解
2021/03/31 Servers
Java练习之潜艇小游戏的实现
2022/03/16 Java/Android