HTML实现简易计算器

随便写的,可能有bug,可以在评论区指出哈。
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">0td>
        tr>
        <tr>
            <td class="numberkey" >1td>
            <td class="numberkey" >2td>
            <td class="numberkey" >3td>
            <td class="numberkey" >+td>
            <td class="numberkey"  id="deletesign">ctd>   
        tr>
        <tr>
            <td class="numberkey" >4td>
            <td class="numberkey" >5td>
            <td class="numberkey" >6td>
            <td class="numberkey" >-td>
            <td rowspan="3" id="equality" onclick="resultscalcaulte()">=td> 
        tr>
        <tr>
            <td class="numberkey" >7td>
            <td class="numberkey" >8td>
            <td class="numberkey" >7td>
            <td class="numberkey" >*td>
        tr>
        <tr >
            <td class="numberkey" >+/-td>
            <td class="numberkey" >0td>
            <td class="numberkey" >.td>
            <td class="numberkey" >/td>            
        tr>
body>
html>

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代码:

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

效果:
HTML实现简易计算器_第1张图片

你可能感兴趣的:(html,javascript,前端)