随便写的,可能有bug可以评论区指出哈。
HTML代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title&gt;AI简易计算器</title&gt;
</head&gt;
<body&gt;
<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代码

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

效果
在这里插入图片描述

原文地址:https://blog.csdn.net/joe_g12345/article/details/134562718

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任

如若转载,请注明出处:http://www.7code.cn/show_24088.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注