纯js写一个计算器你要多久？话不多说，先上图话不多说，上代码js代码参考地址：https://github.com/59

话不多说，先上图

话不多说，上代码

<!-- html代码 -->
<!DOCTYPE html>
<html>
<head>
<title>计算器</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="calculator.css">
</head>
<body>
    <div id="calculator">
        <input type="text" name="" id="view" class="view" value="0">
        <ul>
            <li>C</li>
            <li>±</li>
            <li>(</li>
            <li>)</li>
            <li>+</li>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>-</li>
            <li>*</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>.</li>
            <li>/</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>0</li>
            <li>=</li>
        </ul>
    </div>
<script type="text/javascript" src="calculator.js"></script>
</body>
</html>

/* css代码 */
.view{
    text-align: right;
    padding: 0px 5px;
    border-radius: 10px;
    margin: 12px 12px;
    width:460px;
    height: 75px;
    border: 4px solid #946766;
    font-size: 2em;
    color: #fff;
    outline: none;
    background: #9d6767;
    box-shadow: -2px -2px 1px #555;
}
div{
    border-radius: 20px;
    width: 500px;
    height: 500px;
    background-color: #ffeceb;
    margin: 0 auto;
    box-shadow: 3px 3px 1px #555;
}
ul{
    padding: 0px;
    margin: 0px;
    margin-left: 17px;
}
ul li{
    font-weight: bold;
    background-color: #fdafaf;
    font-size: 2em;
    border-radius: 20px;
    margin: 4px 4px 4px 4px;
    line-height: 86px;
    text-align: center;
    width: 84px;
    height: 84px;
    list-style: none;
    float: left;
    box-shadow: 3px 3px 1px #555;
    color: #f9e1c9;
}
ul li:hover{
    color: #f9d656;
    background-color: #eee;
    box-shadow: -3px -3px 1px #555;
}

js代码参考地址：github.com/591197596/c…