javascript模拟实现计算器
本文实例为大家分享了javascript模拟实现计算器的具体代码，供大家参考，具体内容如下
功能:
1、实现单击按钮录入数字
2、实现基础四则运算功能，并添加必要的异常处理。
3、实现小数点功能并添加异常处理：小数点只能出现一次
4、实现正负号功能
5、实现退位功能，已经是最后一位时，显示框显示为0
6、AC清屏功能
使用的知识点:
1、利用大量的自定义函数实现业务逻辑
2、灵活运用事件及事件处理
3、培养异常处理的编程方法
4、培养并实践利用不同思路实现编程
综合练习的目的:
1、将css,html和js有效的进行技术组合，实现业务功能
2、锻炼和培养编程思想，解决问题的能力和方法
3、锻炼和培养利用多种编程思路，完成预先设定的目标
而且最近刚上手js，感觉特别有趣，学习java基础的时候没有那么大的兴趣。感觉刚一上手js感觉特别好玩有趣，在这里把一个简单的计算器源码展示出来：
html页面：
<!DOCTYPE html> <html> <head> <title>js计算器</title> <link rel="stylesheet" type="text/css"href="index.css" > <script type="text/javascript" src="index.js"> </script> </head> <body onload="init()"> <!-- 1个文本框10个数字....20个按钮 --> <div id="div1"> <form action=""> <div id="div2"> <input type="text" name="num" disabled="disabled" id="num" value="0"> </div> </form> <div id="div3"> <input type="button" name="" value="C" id="baidu"> <input type="button" name="" value="←" id=""> <input type="button" name="" value="+/-" id=""> <input type="button" name="" value="/" id=""> <input type="button" name="" value="7" id=""> <input type="button" name="" value="8" id=""> <input type="button" name="" value="9" id=""> <input type="button" name="" value="*" id=""> <input type="button" name="" value="4" id=""> <input type="button" name="" value="5" id=""> <input type="button" name="" value="6" id=""> <input type="button" name="" value="-" id=""> <input type="button" name="" value="1" id="" > <input type="button" name="" value="2" id="" > <input type="button" name="" value="3" id="" > <input type="button" name="" value="+" id=""> <input type="button" name="" value="0" id=""> <input type="button" name="" value="=" id=""> <input type="button" name="" value="." id=""> <input type="button" name="" value="AC" id=""> </div> </div> </body> </html>
js页面：
function init(){
var num=document.getElementById("num");
num.value=0;
var btn_num1;
var fh;
num.disabled="disabled";
// var n1=document.getElementById("n1");
// n1.οnclick=function(){
// }
var oButton=document.getElementsByTagName("input");
for(var i=0;i<oButton.length;i++){
oButton[i].onclick=function(){
if(isnumber(this.value)){
//num.value=(num.value+this.value)*1;//把默认0消除
if(isNull(num.value)){
num.value=this.value;
}else{
num.value=num.value+this.value;
}
}else{
//测试功能是否正确
// alert("bushishuzi")
var btn_num=this.value;
//测试功能是否正确（弹窗）
// alert(btn_num);
switch(btn_num){
case "+":
// alert(11);
btn_num1=num.value*1;//=parseInt(num.value)这个也可以,后面的话需要改为number
num.value=0;
fh="+";
break;
case "-":
btn_num1=num.value*1;
num.value=0;
fh="-";
break;
case "*":
btn_num1=num.value*1;
num.value=0;
fh="*";
break;
case "/":
btn_num1=num.value*1;
num.value=0;
fh="/";
break;
case ".":
num.value=dec_number(num.value);
break;
case "←":
num.value=back(num.value);
break;
case "+/-":
num.value=sign(num.value);
break;
case "AC":
num.value="0";
break;
case "C":
init_baidu();
break;
case "=":
switch(fh){
case"+":
num.value=btn_num1+num.value*1;
break;
case"-":
num.value=btn_num1-num.value*1;
break;
case"*":
num.value=btn_num1*num.value*1;
break;
case"/":
if(num.value==0){
num.value=0;
alert("除数不能为0");
}else{
num.value=btn_num1/num.value*1;
}
break;
}
break;
}
}
}
}
}
//小数点的功能
function dec_number(n){
if(n.indexOf(".")==-1){
n=n+".";
}
return n;
}
//验证文本框是否为空或者为0
function isNull(n){
if(n*1==0||n.length==0){
return true;
}else{
return false;
}
}
//退位键
function back(n){
n=n.substr(0,n.length-1);
if(isNull(n)){
n="0";
}
return n;
}
//正负号+/-
function sign(n){
if(n.indexOf("-")==-1){
n="-"+n;
}else{
n=n.substr(1,n.length);
}
return n;
}
//isNaN:不能转换成数字：true,可以转换成数字是false
function isnumber(n){
return !isNaN(n);
}
//C按钮使用一个超级链接，链接到百度，这个可以随便发挥
function init_baidu(){
window.location.href="http://www.baidu.com";
}
css页面：
*{
margin:0px;
padding:0px;
}
div{
width:170px;
}
#div1{
top:60px;
left: 100px;
position:absolute;
}
input[type="button"]{
width:30px;
margin-right: 5px;
}
input[type="text"]{
width:147px;
text-align: right;
background-color:white;
border:1px solid;
padding-right:1px;
box-sizing:content-box;
}
input[type="button"]:hover{/*//伪类和按钮的使用*/
background-color:white;
border:1px solid;
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
超精准的javascript验证身份证号的具体实现方法
编写程序前先来了解下身份证号的构成: 身份证号分为两种,旧的为15位,新的为18位. 身份证15位编码规则:dddddd yymmdd xx p 其中 dddddd:地区码 yymmdd: 出生年月日 xx: 顺序类编码,无法确定 p: 性别,奇数为男,偶数为女: 身份证18位编码规则:dddddd yyyymmdd xxx y 其中 dddddd:地区码 yyyymmdd: 出生年月日 xxx:顺序类编码,无法确定,奇数为男,偶数为女 y: 校
-
js精准计算
var numA = 0.1; var numB = 0.2; alert( numA + numB ); 0.1 + 0.2 = 0.30000000000000004. 计算精度误差问题(和二进制相关). 对于浮点数的四则运算,几乎所有的编程语言都会有类似精度误差的问题,只不过在 C++/C#/Java 这些语言中已经封装好了方法来避免精度的问题,而JavaScript是一门弱类型的语言,从设计思想上就没有对浮点数有个严格的数据类型,所以精度误差的问题就显得格外突出. 我们先把 0.1 和
-
js拖拉表格实现内容计算
本文实例为大家分享了js拖拉表格实现内容计算的具体代码,供大家参考,具体内容如下 前言 制作网页版Excel H5新增功能:可拖拉-draggable, 可编辑-contenteditable 实现结果 代码实现 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Table</title&g
-
js实现一个简易的计算器
利用原生js实现一个简易的计算器(附详细注释),供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title&
-
javascript实现简易计算器功能
本文实例为大家分享了javascript实现简易计算器的具体代码,供大家参考,具体内容如下 功能: 1.实现单击数字按钮输入数字 2.实现基础四则运算功能,并添加必要的异常处理,例如:除数不能为零 3.实现小数点添加功能,并添加异常处理,小数点只能出现一次 4.实现正负号功能 5.实现回退功能,已经是最后一位时,显示框显示为零 6.清屏功能 使用的知识点: 1.利用大量的自定义函数实现业务逻辑 2.灵活运用事件及事件处理 3.培养异常处理的编程方法 4.培养并实践利用不同思路实现编程 综合练习目
-
js精准的倒计时函数分享
先看看倒计时效果: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>倒计时函数</title> <script> var timer=(function(){ return function (json){ if(json.currentTime){ var now=new Date(
-
JS实现苹果计算器
本文实例为大家分享了JS实现苹果计算器的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>手机</title> <style type="text/css"> #phone{ position: relative; width: 380px; height: 700px; box
-
JavaScript经典案例之简易计算器
本文实例为大家分享了JavaScript实现简易计算器的具体代码,供大家参考,具体内容如下 效果图: 逻辑: 1.首先通过遍历,为所有元素添加事件: 2.各个按钮功能分别实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=devic
-
JavaScript 如何计算文本的行数的实现
需求:根据行数决定是否限制展开和收起. 思路:用2个块统计行高,一个不加高度限制用来统计行数(css隐藏),一个加高度限制用来显示(加高度限制会导致统计行数不准) 要想知道文本的行数,那就需要知道文本的总高度和每一行的高度,总高度除以行高就是行数.当然总高度的计算必须是文字所在的 DOM 没有对高度的限制,随着文本的增加 DOM 要随之变高才行:最后还要考虑 DOM 的样式padding和margin对高度的影响.这样一来我们就可以计算出文本的行数了.总结一下我们需要如下几步: 克隆文本所在的
-
javascript模拟实现计算器
本文实例为大家分享了javascript模拟实现计算器的具体代码,供大家参考,具体内容如下 功能: 1.实现单击按钮录入数字 2.实现基础四则运算功能,并添加必要的异常处理. 3.实现小数点功能并添加异常处理:小数点只能出现一次 4.实现正负号功能 5.实现退位功能,已经是最后一位时,显示框显示为0 6.AC清屏功能 使用的知识点: 1.利用大量的自定义函数实现业务逻辑 2.灵活运用事件及事件处理 3.培养异常处理的编程方法 4.培养并实践利用不同思路实现编程 综合练习的目的: 1.将css,h
-
JavaScript模拟重力状态下抛物运动的方法
本文实例讲述了JavaScript模拟重力状态下抛物运动的方法.分享给大家供大家参考.具体分析如下: 这段JavaScript代码模拟重力状态下的抛物运动,可设置以下参数:横向初速度.纵向初速度.重力加速度(如果这个加速度是一个随时间变化的值,就能达到其他非匀加速运动的效果了).动画间隔时间等,相对专业 <!doctype html> <html> <head> <title>js抛物运动</title> <meta charset=&qu
-
javascript模拟map输出与去除重复项的方法
本文实例讲述了javascript模拟map输出与去除重复项的方法.分享给大家供大家参考.具体方法如下: 1.Javascriptmap输出 function Map(){ // private var obj = {} ;// 空的对象容器,承装键值对 // put 方法 this.put = function(key , value){ obj[key] = value ;// 把键值对绑定到obj对象上 } // size 方法 获得map容器的个数 this.size = functio
-
JavaScript模拟实现继承的方法
本文实例讲述了JavaScript模拟实现继承的方法.分享给大家供大家参考.具体分析如下: 我们都知道,在JavaScript中只能模拟实现OO中的"类",也就意味着,在JavaScript中没有类的继承.我们也只能通过在原对象里添加或改写属性来模拟实现. 先定义一个父类, //父类 function ParentClass() { this.className = "ParentClass"; this.auth = "Auth"; this.
-
纯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
-
javascript模拟实现ajax加载框实例
本文实例讲述了javascript模拟实现ajax加载框的方法,分享给大家供大家参考.具体方法如下: 复制代码 代码如下: function loading(p_value,str) { if (p_value) { if (!document.getElementById("load_area")) { var para1 = document.createElement("span"); var node=document.createTextNode(str)
-
javascript实现简单计算器效果【推荐】
最终效果如下图-2,有bug:就是整数后点击%号结果正确,如果小数后面点击%的话结果就错误!其他都正常,求指点:input的value是string类型的,在JS中改如何正确处理下图-1中的if部分?? 图-1 图-2 HTML代码如下 <body> <div id="calculator"> <div class="LOGO"> <span class="name">简单的计算器</span
-
JavaScript模拟文件拖选框样式v1.0的实例
文件拖选v1.0 图片不清楚时请右键点击"在新链接中打开图片" 实现效果 页面布局 实现思路 拖选框 css样式中设置拖选框样式,注意设置position: absolute;漂浮状态. 监听p#container的鼠标按下事件并获取起始坐标,鼠标按下时通过append()方法添加p#selectBox. 鼠标按下事件后鼠标移动事件,比较鼠标的当前位置event.pageX,event.pageY来为p#selectBox添加坐标top/left 和尺寸width/height. 鼠标
-
JavaScript模拟下拉菜单代码
优点:点击body区域同样可以隐藏下拉菜单,且不会和body已有的onclick事件冲突. 缺点:请大家指出,虚心接受!运行框代码看似繁多,实属无奈,请下载附件,以便更好观察或修改~! 下拉菜单 body{margin:20px auto;font-family:Arial, Helvetica, sans-serif;font-size:12px;width:950px;height:400px;border:solid 1px #aaa; position:relative;padding:
-
javascript实现简易计算器的代码
今天闲来无聊,想写点什么,突然想到用javascript写一个计算器.程序还存在很多的Bug,先在这里记录一下,以后慢慢更正. 代码如下: <!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.or