HTML实现简易计算器

AICodeThunder2023-11-28 15:41

随便写的，可能有bug，可以在评论区指出哈。

HTML代码：

html 复制代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>AI简易计算器</title>
</head>
<body>
<table id="calculater" onClick="calculater()">
        <tr>
            <td id="display" colspan="5">0</td>
        </tr>
        <tr>
            <td class="numberkey" >1</td>
            <td class="numberkey" >2</td>
            <td class="numberkey" >3</td>
            <td class="numberkey" >+</td>
            <td class="numberkey"  id="deletesign">c</td>   
        </tr>
        <tr>
            <td class="numberkey" >4</td>
            <td class="numberkey" >5</td>
            <td class="numberkey" >6</td>
            <td class="numberkey" >-</td>
            <td rowspan="3" id="equality" onclick="resultscalcaulte()">=</td> 
        </tr>
        <tr>
            <td class="numberkey" >7</td>
            <td class="numberkey" >8</td>
            <td class="numberkey" >7</td>
            <td class="numberkey" >*</td>
        </tr>
        <tr >
            <td class="numberkey" >+/-</td>
            <td class="numberkey" >0</td>
            <td class="numberkey" >.</td>
            <td class="numberkey" >/</td>            
        </tr>
</body>
</html>

CSS代码：

css 复制代码

*{
        padding:0;
        margin:1px;
    }
    #calculater{
        margin: auto;
        margin-top: 30px;
        border: solid 6px #2371D3;
        border-spacing: 0px;
    }
    #display{
        width: 100%;
        height: 30px;
        border-bottom: solid 4px #2371D3;
         font-weight: bold;
         color: #193D83;
        font-family: 黑体;
        padding-left: 2px;
    }
    .numberkey{
        cursor: pointer;
        width: 40px;
        height: 30px;
        border: solid 1px #FFFFFF;
        background: #2371D3;
        color: #ffffff;
        text-align: center;
        font-weight: bold;
        font-family: 黑体;
    }
    #equality{
       cursor: pointer;
       width: 40px; 
       height: 100%;
       background: #2371D3;
        border: solid 1px #FFFFFF;
        color: #ffffff;
        text-align: center;
        font-weight: bold;
        font-family: 黑体; 
    }
    .numberkey:hover{
       background: #EA6F30; 
    }
    #equality:hover{
       background: #EA6F30; 
    }

Javascript代码：

js 复制代码

var results="";
    var calresults="";
    function calculater(){
        if (event.srcElement.innerText=="=") {
            return;
        }
       results+=event.srcElement.innerText;
       display.innerText=results;
    }
    function resultscalcaulte(){
      calresults=eval(results);
      display.innerText=calresults;
    }

效果：