js实现简单计算器

来源：互联网发布：表情呆滞面部僵硬知乎编辑：程序博客网时间：2024/06/15 03:18

参考的网上的一些布局编写的简单计算器。不多说，直接上代码。其中，有详细的注释

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;}

实现界面：

0 0