样式

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #con {
            width: 400px;
            border: 1px solid black;
            margin: 0 auto;
        }

        #div {
            width: 400px;
            height: 100px;
        }

        input {
            width: 400px;
            box-sizing: border-box;
            height: 100px;
            margin-bottom: 10px;
        }

        #ul {
            width: 400px;
            /* height: 100px; */
            background: #ccc;
            overflow: hidden;
        }

        li {
            list-style: none;
            width: 94px;
            height: 40px;
            float: left;
            border: 1px solid black;
            font-size: 20px;
            text-align: center;
            line-height: 40px;
            margin: 2px;
            background: white;
        }

        li:hover {
            background: #ccc;
        }
    </style>

标签

    <div id="con">
        <div id="div"><input type="text" id="input"></div>
        <ul id="ul">
            <li id="pingfang">x²</li>
            <li id="qingkong">C</li>
            <li id="shanchu">X </li>
            <li>/</li>
            <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 id="fu">±</li>
            <li>0</li>
            <li>.</li>
            <li id="deng">=</li>
        </ul>
    </div>

js代码

    <script>
        // 获取id  
        function $(id) {
            return document.getElementById(id);
        }
        // 拿到ul的子元素
         var lis = $('ul').children;
         //拿到每一个li的下标
         for( var i = 0; i < lis.length; i++) {
             //自调用函数
             (function(j){
                 // 点击任意一个li的下标 返回该下标的元素 然后复制给input 显示在input中
                lis[j].onclick = function() {
                     $('input').value +=  lis[j].innerText;
                }
             })(i)
         }
         //点击X 从后往前删除一个元素
         $('shanchu').onclick = function() {
             $('input').value =  $('input').value.substring(0,$('input').value.length -1);

         }
         // 点击C 清空input中的元素
         $('qingkong').onclick = function() {
            $('input').value = ''
         }
         //点击=号 计算出x+y，x-y，x*y，x/y 的值
         $('deng').onclick = function() {
            $('input').value =  eval($('input').value);
         }
         //点击±让input中的数变为负数
         $('fu').onclick = function() {
            $('input').value = -$('input').value 
         }
         //点击x²计算出input中的平方
         $('pingfang').onclick = function() {
            $('input').value = Math.pow($('input').value,2)
         }
    </script>