javascript模拟实现计算器

更新时间：2021年04月06日 16:53:29 作者：“HelloWorld”

这篇文章主要为大家详细介绍了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;
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

js
计算器

javascript+HTML5 canvas绘制时钟功能示例
这篇文章主要介绍了javascript+HTML5 canvas绘制时钟功能,结合实例形式分析了javascript+HTML5 canvas数值运算、图形绘制与时间显示相关操作技巧,需要的朋友可以参考下
2019-05-05
javascript 对象数组根据对象object key的值排序
本文仅仅是实现了javascript 对象数组根据对象object key的值排序，算是对自己学习javascript这么久的一个小结，希望大家能够喜欢
2015-03-03
JSONP基础知识详解
JSONP是JSON with padding(填充式JSON或参数式JSON)的简写，是应用JSON的一种新方法，常用于务器与客户端跨源通信，在后来的Web服务中非常流行。本文将详细介绍JSONP，下面跟着小编一起来看下吧
2017-03-03
JavaScript实现计算圆周率到小数点后100位的方法示例
这篇文章主要介绍了JavaScript实现计算圆周率到小数点后100位的方法,简单分析了圆周率计算的原理并结合实例形式给出了javascript计算圆周率的具体操作技巧,需要的朋友可以参考下
2018-05-05
JS获取本地文件并进行网络传输的代码详解
在web中如想要获取用户计算机上的文件我们通常会用到的方法是通过一个表单元素<input type="file">操作用户选择的文件,本文小编给大家介绍了JS获取本地文件并进行网络传输的方法,需要的朋友可以参考下
2024-08-08
逐行分析鸿蒙系统的 JavaScript 框架(推荐)
鸿蒙系统使用 JavaScript 开发 GUI 是一种类似于微信小程序、轻应用的模式。这篇文章给大家带来了逐行分析鸿蒙系统的 JavaScript 框架的相关知识，感兴趣的朋友跟随小编一起看看吧
2020-09-09
如何使用 Intl.RelativeTimeFormat 在 JavaScript&nbs
Intl.RelativeTimeFormat是JavaScript提供的一个国际化API,用于格式化相对时间,如"3天前"或"2年后",支持多种语言和配置选项,适用于社交媒体时间戳和事件提醒等场景,它简化了国际化的相对时间显示,使开发者能够根据用户的语言和区域设置轻松实现时间格式化
2024-09-09
IE6、IE7中获取Button元素的值的bug说明
IE6、IE7中获取Button元素的值的bug说明，大家在以后使用dom操作的朋友可以注意下。
2011-08-08
Javascript实现时间倒计时效果
这篇文章主要为大家详细介绍了Javascript实现时间倒计时效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-07-07
firefox firebug中文入门教程脚本之家新年特别版
最近看了一篇文章感触颇深，对于firebug作为脚本之家的编辑经常看的到，但可悲的是没怎么用过，不是不用那个而是不会用，刚好看了一篇基础的文章特别整理下。
2010-01-01

javascript模拟实现计算器

功能:

使用的知识点:

综合练习的目的:

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具