2021-09-12

最新推荐文章于 2024-07-20 21:01:09 发布

啦啦856

最新推荐文章于 2024-07-20 21:01:09 发布

阅读量94

点赞数

文章标签： css html html5

本文链接：https://blog.csdn.net/weixin_55997091/article/details/120255979

版权

计算器2.0

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</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>

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

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

啦啦856

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2021-09-12

计算器2.0<!DOCTYPE html><html><head><meta charset="utf-8"><title>文档标题</title></head><body><table id="calculater" onClick="calculater()"> <tr> <td id="display" colspan="
复制链接

扫一扫