javascript实现简易计算器功能

2024-11-29 15:14:10

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

功能：

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

使用的知识点：

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

综合练习目的：

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

页面效果：

源代码

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;
}
/*宽高，上边距*/

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代码编写的一个计算器程序,很多行业都能用到这个程序,例如做装修预算.贷款利率等等. 首先来看一下完成后的效果: 方法一: 具体编写代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=&q
网页计算器一个JS计算器

一个挺小的JavaScript网页计算器,界面美化的我想还是不错的,毕竟在没有使用任何图片修饰的情况下,很好看,而且功能挺实用,可以完成基本的数学算数运算,点击"运行代码"可以运行一下看效果. 计算器 button {width:40; border: 1 solid #808080;background-color: #FFFFFF} &nbsp ← 1 2 3 + 4 5 6 - 7 8 9 × C 0 = ÷ [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]
javascript-简单的计算器实现步骤分解(附图)

知识点: 1.数学运算"+,-,*,/"的使用 2.输入内容的判断,对于事件对象的来源的判断效果: 代码: 复制代码代码如下: <style> #calculate { line-height: 60px; text-align: center; background: #ccc; font-size: 16px; font-weight: bold; } #calculate tbody input{ width: 100%; height: 60px; back
简易js代码实现计算器操作

复制代码代码如下: <html> <head> <title>JS版计算器</title> <link rel="stylesheet" type="text/css" href=""> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <!--
js网页版计算器的简单实现

复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&
基于JSP实现一个简单计算器的方法

本文实例讲述了基于JSP实现一个简单计算器的方法.分享给大家供大家参考.具体实现方法如下: index.jsp 复制代码代码如下: <%@ page language="java" import="java.util.*" pageEncoding="GB18030"%> <% String path = request.getContextPath(); String basePath = request.getSch
js实现简单计算器

参考部分资料,编写一个简单的计算器案例,虽然完成了正常需求,但是也有不满之处,待后续实力提升后再来补充,先把不足之处列出: 1:本来打算只要打开页面,计算器的输入框会显示一个默认为0的状态,但是在输入框加入默认显示为0的时候,选择数据输入时,该0会显示输入数字的前面,例如"0123",由于能力有限,待后续实力提升再来补充完善! 2:目前只能实现鼠标控制选择按钮,待完善键盘录入功能. 3:乘法的那个符号在本来想改成"×"这个符号的,待后续完善. 附图片一张: html
用JS写的简单的计算器实现代码

1.本页效果图片 2.美化后的效果 Array.prototype.remove=function(index) { if(isNaN(index)||index>this.length){return false;} for(var i=0,n=0;i 0){ del = 1; this.tmp = this.register[0]; } if(_sign == '-'){ this.tmp = -this.tmp; }else{ this.tmp = Math.abs(this.
javascript写的简单的计算器，内容很多，方法实用，推荐

最近用javascript写了一个简单的计算器,自己测试感觉还好,先给大家观赏下界面: 界面就是这样了,但是功能如何呢? 现在只是个简单的标准计算器,能进行加减乘除连续运算,以及求余运算.如果发生被除数为零的错误,下面会给出提示,就像这样: 自己不知道写的怎么样,但是对于新手来说,这肯定是一份大餐,里面可以接触到的东西不少,可以拿来学习.如果有高手看出里面的疏漏.错误等望不吝赐教,给予指点. 下面贴上代码,希望里面的注释足够多了. js部分: 复制代码代码如下: var num=0,resul
html+js实现简单的计算器代码(加减乘除)

html+js实现简单的计算器代码(加减乘除) <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> </head> <body> <table> <tr> <td&

javascript实现简易计算器功能

相关推荐

随机推荐