************************************************************
*名称:仿windows计算器
*功能:
* 1、实现单击按钮录入数字
* 2、实现基础四则运算功能,并添加必要的异常处理,例如,除数为零
* 3、实现小数点功能并添加异常处理:小数点只能出现一次
* 4、实现正负号功能
* 5、实现退位功能,已经是最后一位时,显示框显示为零
* 6、清屏功能
*使用的知识点:
* 1、利用大量的自定义函数实现业务逻辑
* 2、灵活运用事件及事件处理
* 3、培养异常处理的编程方法
* 4、培养并实践利用不同思路实现编程
*综合练习的目的:
* 1、将css、html和js有效的进行技术组合,实现业务功能
* 2、锻炼和培养编程思想,解决问题的能力和方法
* 3、锻炼和培养利用多种编程思路,完成预先设定的目标
************************************************************
一、计算器面板的实现
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="index.css">
<script type="text/javascript"src="index.js"></script>
</head>
<body >
<div id="div1">
<div id="div2">
<input type="text" name="num" id="num"/>
</div id="div3">
<input type="button" value="0" name="" id=""/>
<input type="button" value="0" name="" id=""/>
<input type="button" value="0" name="" id=""/>
<input type="button" value="0" name="" id=""/>
<input type="button" value="0" name="" id=""/>
<input type="button" value="0" name="" id=""/>
<input type="button" value="0" name="" id=""/>
<input type="button" value="0" name="" id=""/>
<input type="button" value="0" name="" id=""/>
<input type="button" value="0" name="" id=""/>
<input type="button" value="0" name="" id=""/>
<input type="button" value="0" name="" id=""/>
<input type="button" value="0" name="" id=""/>
<input type="button" value="0" name="" id=""/>
<input type="button" value="0" name="" id=""/>
<input type="button" value="0" name="" id=""/>
<input type="button" value="0" name="" id=""/>
<input type="button" value="0" name="" id=""/>
<input type="button" value="0" name="" id=""/>
<input type="button" value="0" name="" id=""/>
<div>
</div>
</div>
</body>
</html>
*{
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: 149px;
border: 1px solid;
padding-right: 5px;
box-sizing: border-box;
}
出现的效果如图:
二、实现计算器输入框
1.首先实现计算器页面的数字按键,直接在html中实现
</div id="div3">
<input type="button" value="c" name="" id=""/>
<input type="button" value="←" name="" id=""/>
<input type="button" value="+/-" name="" id=""/>
<input type="button" value="/" name="" id=""/>
<input type="button" value="1" name="" id=""/>
<input type="button" value="2" name="" id=""/>
<input type="button" value="3" name="" id=""/>
<input type="button" value="*" name="" id=""/>
<input type="button" value="4" name="" id=""/>
<input type="button" value="5" name="" id=""/>
<input type="button" value="6" name="" id=""/>
<input type="button" value="-" name="" id=""/>
<input type="button" value="7" name="" id=""/>
<input type="button" value="8" name="" id=""/>
<input type="button" value="9" name="" id=""/>
<input type="button" value="+" name="" id=""/>
<input type="button" value="0" name="" id=""/>
<input type="button" value="." name="" id=""/>
<input type="button" value="=" name="" id=""/>
<input type="button" value="m" name="" id=""/>
<div>
其次实现在文本框内默认显示0,并且右对齐
默认数字0在html中实现,并且实现在文本框内不让用户键盘输入,只能点击
<input type="text" value="0" disabled="disabled" name="num" id="num"/>
另一种默认初始化方式在js里面实现,(更推荐)把所有初始化建议写在一个函数里。
function init(argument) {
// body...
var num=document.getElementById('num');
num.value=0;
num.disabled="disabled";
}
右对齐在cs文件里实现
input[type="text"]{
width: 149px;
text-align: right;
background-color: #fff
border: 1px solid;
padding-right: 5px;
box-sizing: border-box;
}
2.实现计算器单击数字就在文本框里显示的功能
这个最简单的方法就是在每一个数字的html里添加一个单击事件,然后在js里定义该单击事件的功能
function num_1_click(argument) {
// body...
var num=document.getElementById('num');
var n=num.value;
n=n+"1";
document.getElementById("num").value=n*1;
}
这样显得代码冗余,有几个按键则需要添加几个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;}
else{
alert("fei");}
在js的初始化里完成数字的单击显示。
3.接下来实现非数字的单击功能
这是非数字的每个功能框架。
var btn_num=this.value;
switch(btn_num){
case "+":
break;
case "-":
break;
case "*":
break;
case "/":
break;
case ".":
break;
case "←":
break;
case "c":
break;
case "+/-":
break;
case "=":
}
接下来实现每个功能。
3.1四则运算的实现
var btn_num1;
var fh;
else{
//alert("fei");
var btn_num=this.value;
switch(btn_num){
case "+":
btn_num1=Number(num.value);
num.value=0;
fh="+";
break;
case "-":
btn_num1=Number(num.value);
num.value=0;
fh="-";
break;
case "*":
btn_num1=Number(num.value);
num.value=0;
fh="*";
break;
case "/":
btn_num1=Number(num.value);
num.value=0;
fh="/";
break;
case "=":
switch(fh){
case "+":
num.value=btn_num1+Number(num.value);
//console.log(btn_num1);
break;
case "-":
num.value=btn_num1-Number(num.value);
//console.log(btn_num1);
break;
case "*":
num.value=btn_num1*Number(num.value);
//console.log(btn_num1);
break;
case "/":
if(Number(num.value)==0){
alert("除数不能是0");
num.value=0;
}else{
num.value=btn_num1/Number(num.value);
}
//console.log(btn_num1);
break;
}
break;
3.2小数点的实现
case ".":
num.value=dec_number(num.value);
break;
/*小数点*/
function dec_number(n){
if(n.indexOf(".")==-1){
n=n+".";
}
return n;
}
3.3退位键的实现
case "←":
num.value=back(num.value);
/*退位键*/
function back(n){
n=n.substr(0,n.length-1);
if(isNull(n)){
n="0";
}
return n;
}
/*验证文本框是否为空或者0*/
function isNull(n){
if(n=="0" || n.length==0){
return true;
}else{
return false;
}
}
3.4清屏功能的实现
case "c":
num.value="0";
3.5正负号功能的实现
case "+/-":
num.value=sign(num.value);
break;
/*正负号*/
function sign(n){
// if(n.indexOf("-")==-1){
// n="-"+n;
// }else{
// n=n.substr(1,n.length);
// }
n=Number(n)*-1;
return n;
}
3.6完善计算器细节
3.6.1当指针指在某个按键上,背景色可以改变。(利用伪类)
input[type="button"]:hover{
background-color: yellow;
border: 1px solid;
}
3.6.2当单击m时,可以打开一个网页。(超级链接)
function init_mooc(){
document.getElementById("imooc").onclick=function(){
window.location.href="http://www.imooc.com";
}
}
3.6.3设置文本框里面的0与边框的间距
input[type="text"]{
width: 152px;
text-align: right;
background-color: #fff;
border: 1px solid;
padding-right: 5px;
box-sizing: border-box;
}
至此,仿win计算器所有功能已经实现,完整代码如下:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="calc.css">
<script type="text/javascript" src="calc.js"></script>
<script type="text/javascript" src="js/mooc.js"></script>
</head>
<body onload="init(),init_mooc()">
<div id="div1">
<div id="div2">
<input type="text" name="num" id="num" />
</div>
<div id="div3">
<input type="button" value="c" name="" id=""/>
<input type="button" value="←" name="" id=""/>
<input type="button" value="+/-" name="" id=""/>
<input type="button" value="/" name="" id=""/>
<input type="button" value="1" name="" id="n1"/>
<input type="button" value="2" name="" id=""/>
<input type="button" value="3" name="" id=""/>
<input type="button" value="*" name="" id=""/>
<input type="button" value="4" name="" id=""/>
<input type="button" value="5" name="" id=""/>
<input type="button" value="6" name="" id=""/>
<input type="button" value="-" name="" id=""/>
<input type="button" value="7" name="" id=""/>
<input type="button" value="8" name="" id=""/>
<input type="button" value="9" name="" id=""/>
<input type="button" value="+" name="" id=""/>
<input type="button" value="0" name="" id=""/>
<input type="button" value="." name="" id=""/>
<input type="button" value="=" name="" id=""/>
<input type="button" value="m" name="" id="imooc"/>
</div>
</div>
</body>
</html>
*{
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: 152px;
text-align: right;
background-color: #fff;
border: 1px solid;
padding-right: 5px;
box-sizing: border-box;
}
input[type="button"]:hover{
background-color: yellow;
border: 1px solid;
}
function init(){
var num=document.getElementById("num");
num.value=0;
num.disabled="disabled";
// var n1=document.getElementById("n1");
// n1.onclick=function(){
// alert("123");
// }
var oButton=document.getElementsByTagName("input");
var btn_num1;
var fh;
for(var i=0;i<oButton.length;i++){
oButton[i].onclick=function(){
if(isNumber(this.value)){
//num.value=(num.value+this.value)*1;
if(isNull(num.value)){
num.value=this.value;
}else{
num.value=num.value+this.value;
}
}else{
//alert("fei");
var btn_num=this.value;
switch(btn_num){
case "+":
btn_num1=Number(num.value);
num.value=0;
fh="+";
break;
case "-":
btn_num1=Number(num.value);
num.value=0;
fh="-";
break;
case "*":
btn_num1=Number(num.value);
num.value=0;
fh="*";
break;
case "/":
btn_num1=Number(num.value);
num.value=0;
fh="/";
break;
case ".":
num.value=dec_number(num.value);
break;
case "←":
num.value=back(num.value);
break;
case "c":
num.value="0";
break;
case "+/-":
num.value=sign(num.value);
break;
case "=":
switch(fh){
case "+":
num.value=btn_num1+Number(num.value);
//console.log(btn_num1);
break;
case "-":
num.value=btn_num1-Number(num.value);
//console.log(btn_num1);
break;
case "*":
num.value=btn_num1*Number(num.value);
//console.log(btn_num1);
break;
case "/":
if(Number(num.value)==0){
alert("除数不能是0");
num.value=0;
}else{
num.value=btn_num1/Number(num.value);
}
//console.log(btn_num1);
break;
}
break;
}
}
}
}
}
/*正负号*/
function sign(n){
// if(n.indexOf("-")==-1){
// n="-"+n;
// }else{
// n=n.substr(1,n.length);
// }
n=Number(n)*-1;
return n;
}
/*退位键*/
function back(n){
n=n.substr(0,n.length-1);
if(isNull(n)){
n="0";
}
return n;
}
/*小数点*/
function dec_number(n){
if(n.indexOf(".")==-1){
n=n+".";
}
return n;
}
/*验证文本框是否为空或者0*/
function isNull(n){
if(n=="0" || n.length==0){
return true;
}else{
return false;
}
}
function isNumber(n){
// if(!isNaN(n)){
// return true;//参数n是数字
// }else{
// return false;//参数n不是数字
// }
return !isNaN(n);
}
// isNaN:不能转换为数字:true,可以转换成数字是false
function init_mooc(){
document.getElementById("imooc").onclick=function(){
window.location.href="http://www.imooc.com";
}
}