樣式

    <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">x2</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++) {
             //自調(diào)用函數(shù)
             (function(j){
                 // 點擊任意一個li的下標 返回該下標的元素 然后復(fù)制給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中的數(shù)變?yōu)樨摂?shù)
         $('fu').onclick = function() {
            $('input').value = -$('input').value 
         }
         //點擊x2計算出input中的平方
         $('pingfang').onclick = function() {
            $('input').value = Math.pow($('input').value,2)
         }
    </script>