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 相关文章推荐
用js调用迅雷下载代码的二种方法
Apr 15 Javascript
js中split和replace的用法实例
Feb 28 Javascript
Form表单按回车自动提交表单的实现方法
Nov 18 Javascript
干货!教大家如何选择Vue和React
Mar 13 Javascript
javascript 开发之网页兼容各种浏览器
Sep 28 Javascript
javascript按钮禁用和启用的效果实例代码
Oct 29 Javascript
Angular CLI在Angular项目中如何使用scss详解
Apr 10 Javascript
vue 基于element-ui 分页组件封装的实例代码
Dec 10 Javascript
vue 详情跳转至列表页实现列表页缓存
Mar 27 Javascript
JS实现的自定义map方法示例
May 17 Javascript
在vue-cli3中使用axios获取本地json操作
Jul 30 Javascript
如何手动实现一个 JavaScript 模块执行器
Oct 16 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的String类代码
2010/04/20 PHP
php中计算中文字符串长度、截取中文字符串的函数代码
2011/08/09 PHP
深入解析PHP中的(伪)多线程与多进程
2013/07/01 PHP
ThinkPHP5.0框架验证码功能实现方法【基于第三方扩展包】
2019/03/11 PHP
Yii2框架自定义类统一处理url操作示例
2019/05/25 PHP
JavaScript的面向对象(二)
2006/11/09 Javascript
从新浪弄下来的全屏广告代码 与使用说明
2007/03/15 Javascript
使用documentElement正确取得当前可见区域的大小
2014/07/25 Javascript
JavaScript的null和undefined区别示例介绍
2014/09/15 Javascript
jquery获取select选中值的方法分析
2015/12/22 Javascript
javascript如何定义对象数组
2016/06/07 Javascript
jquery mobile 实现自定义confirm确认框效果的简单实例
2016/06/17 Javascript
深入浅出 jQuery中的事件机制
2016/08/23 Javascript
jQuery中$.ajax()方法参数解析
2016/10/22 Javascript
JS中Select下拉列表类(支持输入模糊查询)功能
2017/01/17 Javascript
jQuery EasyUI的TreeGrid查询功能实现方法
2017/08/08 jQuery
nodejs(officegen)+vue(axios)在客户端导出word文档的方法
2018/07/31 NodeJs
在vue项目中优雅的使用SVG的方法实例详解
2018/12/03 Javascript
微信小程序实现的一键复制功能示例
2019/04/24 Javascript
详解React 元素渲染
2020/07/07 Javascript
[51:53]完美世界DOTA2联赛循环赛 LBZS vs DM BO2第二场 11.01
2020/11/02 DOTA
[30:00]完美世界DOTA2联赛PWL S2 Rebirth vs LBZS 第二场 11.28
2020/12/01 DOTA
Python实现的一个简单LRU cache
2014/09/26 Python
RC4文件加密的python实现方法
2015/06/30 Python
python操作MySQL 模拟简单银行转账操作
2017/09/27 Python
Python之ReportLab绘制条形码和二维码的实例
2018/01/15 Python
python re模块的高级用法详解
2018/06/06 Python
python脚本实现验证码识别
2018/06/07 Python
pandas 数据实现行间计算的方法
2018/06/08 Python
Python数据类型之Tuple元组实例详解
2019/05/08 Python
Python中内建模块collections如何使用
2020/05/27 Python
Python根据字典的值查询出对应的键的方法
2020/09/30 Python
24岁生日感言
2014/01/13 职场文书
2015年五一劳动节慰问信
2015/03/23 职场文书
python中os.path.join()函数实例用法
2021/05/26 Python
CSS控制继承中的height能变为可继承吗
2022/06/10 HTML / CSS