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 相关文章推荐
jQuery使用数组编写图片无缝向左滚动
Dec 11 Javascript
js 单击式的下拉菜单效果实例
Aug 13 Javascript
Jquery 的outerHeight方法使用介绍
Sep 11 Javascript
2014最热门的JavaScript代码高亮插件推荐
Nov 25 Javascript
浏览器环境下JavaScript脚本加载与执行探析之动态脚本与Ajax脚本注入
Jan 19 Javascript
jQuery dataTables与jQuery UI 对话框dialog的使用教程
Sep 02 Javascript
微信小程序教程系列之新建页面(4)
Apr 17 Javascript
微信小程序利用co处理异步流程的方法教程
May 20 Javascript
Vue官方文档梳理之全局配置
Nov 22 Javascript
Angular ng-animate和ng-cookies用法详解
Apr 18 Javascript
React 路由懒加载的几种实现方案
Oct 23 Javascript
JS实现简单的文字无缝上下滚动功能示例
Jun 22 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
php MySQL与分页效率
2008/06/04 PHP
PHP+XML 制作简单的留言本 图文教程
2009/11/02 PHP
$_GET['goods_id']+0 的使用详解
2013/06/06 PHP
php时间戳格式化显示友好的时间函数分享
2014/10/21 PHP
PHP统计当前在线用户数实例讲解
2015/10/21 PHP
Zend Framework框架教程之Zend_Db_Table_Rowset用法实例分析
2016/03/21 PHP
PHP implode()函数用法讲解
2019/03/08 PHP
javascript 读取图片文件的大小
2009/06/25 Javascript
EXT中xtype的含义分析
2010/01/07 Javascript
JS实现标签页效果(配合css)
2013/04/03 Javascript
使用documentElement正确取得当前可见区域的大小
2014/07/25 Javascript
javascript操作字符串的原生方法
2014/12/22 Javascript
AngularJS的表单使用详解
2015/06/17 Javascript
js解决movebox移动问题
2016/03/29 Javascript
Bootstrap基本插件学习笔记之轮播幻灯片(23)
2016/12/08 Javascript
Javascript 制作图形验证码实例详解
2016/12/22 Javascript
Angular JS 生成动态二维码的方法
2017/02/23 Javascript
利用imgareaselect辅助后台实现图片上传裁剪
2017/03/02 Javascript
Vue实战教程之仿肯德基宅急送App
2019/07/19 Javascript
JS中的算法与数据结构之列表(List)实例详解
2019/08/16 Javascript
python Django模板的使用方法
2016/01/14 Python
python实现AES加密解密
2019/03/28 Python
python数据分析工具之 matplotlib详解
2020/04/09 Python
Keras - GPU ID 和显存占用设定步骤
2020/06/22 Python
Python实现列表索引批量删除的5种方法
2020/11/16 Python
CSS3不透明度实例讲解
2016/04/26 HTML / CSS
阿迪达斯丹麦官网:adidas丹麦
2016/10/01 全球购物
英国泰坦旅游网站:全球陪同游览,邮轮和铁路旅行
2016/11/29 全球购物
时尚圣经:The Fashion Bible
2019/03/03 全球购物
Charles & Keith欧盟:新加坡时尚品牌
2019/08/01 全球购物
软件售后服务方案
2014/05/29 职场文书
幼儿园迎国庆65周年活动策划方案
2014/09/16 职场文书
乡镇党的群众路线教育实践活动剖析材料
2014/10/09 职场文书
趣味运动会赞词
2015/07/22 职场文书
学子宴致辞大全
2015/07/27 职场文书
如何用Laravel包含你自己的帮助函数
2021/05/27 PHP