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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

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; 
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

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;
    }
1
2
3
4
5
6
7
8
9
10
11
12
13

效果：
在这里插入图片描述

相关阅读:
课堂笔记| 第四章类的高级特性
潮玩宇宙：大逃杀模式的利与弊
游戏平台采集数据
从此以后，将硬件接入大语言模型(LLM)将变得如此简单~
Spring Security内部工作原理
C++迭代器失效
【Rust】Rust环境配置与语法基础
“人生苦短，我用Python“——Web测试
二十三、商城 - 商品录入-新增商品（11）
HTTP 与 HTTPS-HTTP 与 HTTPS 有哪些区别?

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