javascript实现简易计算器功能


Posted in Javascript onSeptember 23, 2020

本文实例为大家分享了javascript实现简易计算器的具体代码,供大家参考,具体内容如下

功能:

1、实现单击数字按钮输入数字
2、实现基础四则运算功能,并添加必要的异常处理,例如:除数不能为零
3、实现小数点添加功能,并添加异常处理,小数点只能出现一次
4、实现正负号功能
5、实现回退功能,已经是最后一位时,显示框显示为零
6、清屏功能

使用的知识点:

1、利用大量的自定义函数实现业务逻辑
2、灵活运用事件及事件处理
3、培养异常处理的编程方法
4、培养并实践利用不同思路实现编程

综合练习目的:

1、将CSS、HTML和JS有效的惊醒技术组合,实现业务功能
2、锻炼和培养编程思想,解决问题的能力和方法
3、锻炼和培养利用多种编程思路,完成预先设定的目标

页面效果

javascript实现简易计算器功能

源代码

html

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>简易计算器</title>
 <link rel="stylesheet" type="text/css" href="demo.css" >
 <script type="text/javascript" src="demo.js"></script>
</head>
<body>
 <form action="http//:www.baidu.com">
 <input type="text" id="text" value="0" disabled /><br/>
 <input type="button" id="reset" class="btn" value="C"/>
 <input type="button" id="back" class="btn" value="←"/>
 <input type="button" id="plus" class="btn" value="+/-"/>
 <input type="button" id="divide" class="btn" value="/"/><br/>
 <input type="button" id="num1" class="btn" value="1"/>
 <input type="button" id="num2" class="btn" value="2"/>
 <input type="button" id="num3" class="btn" value="3"/>
 <input type="button" id="multiply" class="btn" value="*"/><br/>
 <input type="button" id="num4" class="btn" value="4"/>
 <input type="button" id="num5" class="btn" value="5"/>
 <input type="button" id="num6" class="btn" value="6"/>
 <input type="button" id="subtract" class="btn" value="-"/><br/>
 <input type="button" id="num7" class="btn" value="7"/>
 <input type="button" id="num8" class="btn" value="8"/>
 <input type="button" id="num9" class="btn" value="9"/>
 <input type="button" id="add" class="btn" value="+"/><br/>
 <input type="button" id="num0" class="btn" value="0"/>
 <input type="button" id="point" class="btn" value="."/>
 <input type="button" id="equal" class="btn" value="="/>
 <input type="button" id="ddd" class="btn" value="d"/>
 </form>
</body>
</html>

css

*{
 margin: 0;
 padding: 0;
}
/*内外边距*/
input{
 width: 160px;
}
/*宽*/
form{
 width: 200px;
 height: 300px;
 margin: 100px auto 0;

}
/*宽高;外边距*/
#text{
 text-align: right;
 padding-right: 10px;
}
/*文字靠右*/
.btn:hover{
 background: #ccc;
 border: 2px solid #ccc;
}
/*背景颜色,边框*/
.btn{
 width: 40px;
 height: 25px;
 margin-top: 5px;
}
/*宽高,上边距*/

js

window.onload = function(){
 var t = document.getElementById('text');//数字文本
 var num = {
 //数字0-9
 num1:document.getElementById('num1'),
 num2:document.getElementById('num2'),
 num3:document.getElementById('num3'),
 num4:document.getElementById('num4'),
 num5:document.getElementById('num5'),
 num6:document.getElementById('num6'),
 num7:document.getElementById('num7'),
 num8:document.getElementById('num8'),
 num9:document.getElementById('num9'),
 num0:document.getElementById('num0')
 };
 var symbol = {
 divide:document.getElementById('divide'),//除
 multiply:document.getElementById('multiply'),//乘
 subtract:document.getElementById('subtract'),//减
 add:document.getElementById('add'),//加
 reset:document.getElementById('reset'),//归零
 back:document.getElementById('back'),//回退
 plus:document.getElementById('plus'),//正负号
 equal:document.getElementById('equal'),//等于号
 point:document.getElementById('point'),//小数点
 ddd:document.getElementById('ddd')//跳百度
 };
 var n = [];//储存符号
 var sum = '';//前面储存输入的数字
 var a = false; 

 for(var i in symbol){
 symbol[i].onclick = function(){
 switch(this.value){
 case '.' :
  if(text.value!== "0" && this.value=="."){
  //文本框里数字不为零,并且输入小数点
  if(text.value.indexOf(".")!==-1){
  // 处理点重复的问题;文本框里面有小数点
  text.value = text.value;
  } else {
  text.value += this.value;
  }
  } else {
  text.value += this.value;
  }
  break;
 case '+':
  if(n != '+'){
  n = this.value; //储存符号
  sum = t.value; //储存输入的数字
  t.value = '0'; //清0
  }
  break;
 case '-':
  if(n != '-'){
  n = this.value;
  sum = t.value;
  t.value = '0';
  }
  break;
 case '*':
  if(n != '*'){
  n = this.value;
  sum = t.value;
  t.value = '0';
  }
  break;
 case '/':
  if(n != '/'){
  n = this.value;
  sum = t.value;
  t.value = '0';
  }
  break;
 case '=':
  switch(n){
  case '+':
  t.value = parseFloat(sum) + parseFloat(t.value); //输出结果
  n = ''; //符号清空
  break;
  case '-':
  t.value = parseFloat(sum) - parseFloat(t.value);
  n = '';
  break;
  case '*':
  t.value = parseFloat(sum) * parseFloat(t.value);
  n = '';
  break;
  case '/':
  if(parseFloat(t.value) == 0){
  alert('除数不能为0');
  t.value=0;
  } else {
  t.value = parseFloat(sum) / parseFloat(t.value);
  n = '';
  }
  break;
  }
  break;
 case '←' :
  //长度减一
  if (t.value.length>1) {
  t.value = t.value.substr(0,t.value.length-1);
  } else {
  t.value = '0';
  }
  break;
 case 'C' :
  //清0
  t.value = 0;
  break;
 case '+/-' :
  //点击一次*-1
  t.value = t.value * -1;
  break;
 case 'd':
  window.open('http://www.baidu.com');
  break;
 }
 }
 }

 //封装,点击数字输入到文本域中
 function number(numx){
 if (t.value == '0') {
 t.value = numx;
 } else {
 t.value += numx;
 }
 }

 //输入数字
 num.num1.onclick = function(){
 number(this.value);
 }
 num.num2.onclick = function(){
 number(this.value);
 }
 num.num3.onclick = function(){
 number(this.value);
 }
 num.num4.onclick = function(){
 number(this.value);
 }
 num.num5.onclick = function(){
 number(this.value);
 }
 num.num6.onclick = function(){
 number(this.value);
 }
 num.num7.onclick = function(){
 number(this.value);
 }
 num.num8.onclick = function(){
 number(this.value);
 }
 num.num9.onclick = function(){
 number(this.value);
 }
 num.num0.onclick = function(){
 number(this.value);
 }
 

}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript操作html控件实例(javascript添加html)
Dec 02 Javascript
extjs_02_grid显示本地数据、显示跨域数据
Jun 23 Javascript
封装了jQuery的Ajax请求全局配置
Feb 05 Javascript
JavaScript实现将数组数据添加到Select下拉框的方法
Aug 21 Javascript
bootstrap布局中input输入框右侧图标点击功能
May 16 Javascript
详解js界面跳转与值传递
Nov 22 Javascript
vue如何从接口请求数据
Jun 22 Javascript
JQuery Ajax动态加载Table数据的实例讲解
Aug 09 jQuery
详解JavaScript中typeof与instanceof用法
Oct 24 Javascript
Easyui 关闭jquery-easui tab标签页前触发事件的解决方法
Apr 28 jQuery
js通过canvas生成图片缩略图
Oct 02 Javascript
微信小程序自定义modal弹窗组件的方法详解
Dec 20 Javascript
javascript使用正则表达式实现注册登入校验
Sep 23 #Javascript
javascript实现点击按钮切换轮播图功能
Sep 23 #Javascript
Vue3为什么这么快
Sep 23 #Javascript
Angular短信模板校验代码
Sep 23 #Javascript
JavaScript实现单点登录的示例
Sep 23 #Javascript
Vue+Java+Base64实现条码解析的示例
Sep 23 #Javascript
通过实例解析jQ Ajax操作相关原理
Sep 23 #Javascript
You might like
支持数组的ADDSLASHES的php函数
2010/02/16 PHP
PHP用GD库生成高质量的缩略图片
2011/03/09 PHP
PHP redis实现超迷你全文检索
2017/03/04 PHP
PHP简单实现二维数组赋值与遍历功能示例
2017/10/19 PHP
Yii2压缩PHP中模板代码的输出问题
2018/08/28 PHP
Thinkphp5.0框架视图view的模板布局用法分析
2019/10/12 PHP
List Information About the Binary Files Used by an Application
2007/06/18 Javascript
javascript iframe中打开文件,并检测iframe存在否
2008/12/28 Javascript
javascript学习(二)javascript常见问题总结
2013/01/02 Javascript
jquery右下角弹出提示框示例代码
2013/10/08 Javascript
Javascript实现简单二级下拉菜单实例
2014/06/15 Javascript
详解js私有作用域中创建特权方法
2016/01/25 Javascript
JavaScript中Array的实用操作技巧分享
2016/09/11 Javascript
Bootstrap输入框组件使用详解
2017/06/09 Javascript
Vue 表单控件绑定的实现示例
2017/08/11 Javascript
微信小程序实现文字跑马灯
2020/05/26 Javascript
用Vue编写抽象组件的方法
2019/05/06 Javascript
javascript实现简易聊天室
2019/07/12 Javascript
Vue中keep-alive的两种应用方式
2020/07/15 Javascript
tornado框架blog模块分析与使用
2013/11/21 Python
python re正则表达式模块(Regular Expression)
2014/07/16 Python
再谈Python中的字符串与字符编码(推荐)
2016/12/14 Python
Python实现进程同步和通信的方法
2018/01/02 Python
Django的HttpRequest和HttpResponse对象详解
2018/01/26 Python
基于Python爬取股票数据过程详解
2020/10/21 Python
matplotlib之多边形选区(PolygonSelector)的使用
2021/02/24 Python
HTML5之多线程(Web Worker)
2019/01/02 HTML / CSS
HTML5 Blob 实现文件下载功能的示例代码
2019/11/29 HTML / CSS
澳大利亚领先的亚麻品牌:Bed Threads
2019/12/16 全球购物
JAVA和C++的区别
2013/10/06 面试题
会计电算化毕业生自荐信
2014/03/03 职场文书
大学生读书笔记范文
2015/07/01 职场文书
2015年卫生院健康教育工作总结
2015/07/24 职场文书
2016年9月份红领巾广播稿
2015/12/21 职场文书
tree shaking对打包体积优化及作用
2022/07/07 Java/Android
解决ubuntu安装软件时,status-code=409报错的问题
2022/12/24 Servers