js实现简单计算器
2017-05-04 16:44
260 查看
参考的网上的一些布局编写的简单计算器。不多说，直接上代码。其中，有详细的注释
HTML布局，采用的是li标签来布局的，当然<table><tr><td>来实现也可以
CSS代码：
主要用到了float:left，div垂直居中（参考上一篇博客），和文字垂直水平居中。
js代码：
主要是逻辑上的处理。
连续运算的功能，和多位的数字运算功能
实现界面：
HTML布局，采用的是li标签来布局的，当然<table><tr><td>来实现也可以
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>简易计算器实现</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="conter"> <div class="text"> <input id="input" type="text" placeholder="0"> </div> <div id="content"> <ul> <li>7</li> <li>8</li> <li>9</li> <li>+</li> <li>4</li> <li>5</li> <li>6</li> <li>-</li> <li>1</li> <li>2</li> <li>3</li> <li>×</li> <li>0</li> <li>C</li> <li>=</li> <li>÷</li> </ul> </div> </div> <script src="jsAchieve.js"></script> </body> </html>
CSS代码：
主要用到了float:left，div垂直居中（参考上一篇博客），和文字垂直水平居中。
*{
padding: 0px;
margin: 0px;
}
li{
list-style: none;
}
/*body { background:#00779e; }*/
.conter{
position: absolute;
top:50%;
transform: translateY(-50%);
left:50%;
margin-left: -125px; /*到此为止都是设置整个计算器水平垂直居中在屏幕上*/
width: 250px;
height: 200px;
/*margin: 0 auto;*/
}
.text{margin-bottom: 10px}
input{
border: none;
width: 223px;
height: 30px;
background: url("ico.png") no-repeat ;
text-align: right;
color: #333;
font-size: 14px;
font-weight: bold;
line-height: 30px;
padding: 0 10px; /*设置文本框的文字不挨着右边框 */
}
#content ul{
width: 250px;
}
#content li{
margin-bottom: 5px;
width: 60px;
height: 30px;
float: left;
background: url("ico.png") no-repeat -303px 0;
color: #ffffff;
text-align: center; /*设置文字水平居中 */
line-height:30px; /*设置文字垂直居中 ，只要和按钮的框高度一样就可以*/
cursor: pointer;
}
#content .active{
background: url("ico.png") no-repeat -244px 0;
}js代码：
主要是逻辑上的处理。
连续运算的功能，和多位的数字运算功能
/**
* Created by lenovo on 2017/5/4.
*/
var sOperation ='';
var sNum = 0;
var temp = '';//保存input中的数字，用于多位数的运算
var isHasOperation = false;//是否有运算符号了
window.onload = function () {
var lis = document.getElementsByTagName('li');
var i;
for(i=0;i<lis.length;i++){
lis[i].onmouseover = function () {
this.className = 'active';
}
lis[i].onmousedown = doInput;
lis[i].onmouseout = function () {
this.className = '';
}
}
}
function doInput() {
var kContent = this.innerHTML;
var oInput = document.getElementById('input');
switch(kContent)
{
case '+':
case '-':
case '×':
case '÷':
sOperation = kContent;
isHasOperation = true;
temp = '';
break;
case '=':
oInput.value = calc(parseInt(sNum,10),parseInt(oInput.value,10),sOperation);
sOperation = '';
sNum = oInput.value;
isHasOperation = false;//在运算之后，把标识符改成没有运算过得false
temp = '';
break;
case 'C':
oInput.value = '0';
sOperation = '';
kContent = '';
temp = '';
sNum = 0;
break;
default:
if(temp !==''){//计算文本框中显示的数字
oInput.value = parseInt(temp+kContent,10);
temp=temp+kContent;
}
else {
oInput.value = parseInt(kContent,10);
temp = kContent;
}
if (!isHasOperation){//true有运算符号了，说明是第二位了，则直接将按钮值显示在屏幕上
//false没有运算符号说明是第一位，需要一个变量来存储这位
sNum=oInput.value;
}
break;
}
}
function calc(num1,num2,operator) {
var result = 0;
switch(operator)
{
case '+': result = num1 + num2;break;
case '-': result = num1 - num2;break;
case '×': result = num1 * num2;break;
case '÷': result = num1 / num2;break;
default:result = num2;
}
return result;
}实现界面：
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 