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 预解析
Oct 25 Javascript
JavaScript Event学习补遗 addEventSimple
Feb 11 Javascript
JS 实现图片直接下载示例代码
Jul 22 Javascript
常见表单重复提交问题整理及解决方法
Nov 13 Javascript
Javascript获取统一管理的提示语(message)
Feb 03 Javascript
简单总结JavaScript中的String字符串类型
May 26 Javascript
Bootstrap table分页问题汇总
May 30 Javascript
jQuery中的ready函数与window.onload谁先执行
Jun 21 Javascript
最全面的百度地图JavaScript离线版开发
Sep 10 Javascript
React-intl 实现多语言的示例代码
Nov 03 Javascript
简单说说angular.json文件的使用
Oct 29 Javascript
Vue之Mixins(混入)的使用方法
Sep 24 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+dojo 的数据库保存拖动布局的一个方法dojo 这里下载
2007/03/07 PHP
php实现搜索类封装示例
2016/03/31 PHP
Yii2压缩PHP中模板代码的输出问题
2018/08/28 PHP
PHP实现的数据对象映射模式详解
2019/03/20 PHP
PHP上传图片到数据库并显示的实例代码
2019/12/20 PHP
JavaScript中通过闭包解决只能取得包含函数中任何变量最后一个值的问题
2010/08/12 Javascript
面向对象设计模式的核心法则
2013/11/10 Javascript
jquery高级编程的最佳实践详解
2014/03/23 Javascript
jQuery删除节点用法示例(remove方法)
2016/09/08 Javascript
Vue.js计算属性computed与watch(5)
2016/12/09 Javascript
老生常谈的跨域处理
2017/01/11 Javascript
jQuery实现贪吃蛇小游戏(附源码下载)
2017/03/04 Javascript
详解Immutable及 React 中实践
2018/03/01 Javascript
vue.js 使用axios实现下载功能的示例
2018/03/05 Javascript
详解vue中使用protobuf踩坑记
2019/05/07 Javascript
[01:20:06]TNC vs VG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python实现socket客户端和服务端简单示例
2014/02/24 Python
python list元素为tuple时的排序方法
2018/04/18 Python
利用python画出AUC曲线的实例
2020/02/28 Python
python3爬虫中异步协程的用法
2020/07/10 Python
Python爬虫破解登陆哔哩哔哩的方法
2020/11/17 Python
Python中读取文件名中的数字的实例详解
2020/12/25 Python
HTML5学习心得总结(推荐)
2016/07/08 HTML / CSS
瑞典时尚耳机品牌:Urbanears
2017/07/26 全球购物
真正的英国宝藏:Mappin & Webb
2019/05/05 全球购物
计算机毕业大学生推荐信
2013/12/01 职场文书
优秀幼教自荐信
2014/02/03 职场文书
小学优秀辅导员事迹材料
2014/05/11 职场文书
先进单位申报材料
2014/12/25 职场文书
内勤岗位职责范本
2015/04/13 职场文书
2015年银行员工工作总结
2015/04/24 职场文书
读《茶花女》有感:山茶花的盛开与凋零
2020/01/17 职场文书
vue.js Router中嵌套路由的实用示例
2021/06/27 Vue.js
一次SQL查询优化原理分析(900W+数据从17s到300ms)
2022/06/10 SQL Server
基于Python编写一个监控CPU的应用系统
2022/06/25 Python
Python实现聚类K-means算法详解
2022/07/15 Python