js实现简单计算器

最新推荐文章于 2024-08-03 18:28:24 发布

yingzizizizizizzz

最新推荐文章于 2024-08-03 18:28:24 发布

阅读量3.6k

点赞数 1

分类专栏： JS

本文链接：https://blog.csdn.net/yingzizizizizizzz/article/details/71172054

版权

JS 专栏收录该内容

62 篇文章 2 订阅

订阅专栏

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

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

实现界面：