简单计算器

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    body {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
        background: rgb(80, 80, 90);
    }

    .calculator {
        display: grid;
        position: relative;
    }

    .calculator .value {
        grid-column: span 4;
        text-align: right;
        outline: none;
        padding: 10px;
        border-radius: 8px;
        border: 1px solid #6b6364;
        width: 240px;
        height: 80px;
        color: aliceblue;
        font-weight: 700;
        font-size: 30px;
        background: #565759;
    }

    .calculator .num {
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid #565759;
        background: rgba(124, 124, 124, 0.842);
        width: 60px;
        height: 60px;
        color: aliceblue;
    }

    .calculator span.zero {
        grid-column: span 2;
        width: 120px;
    }

    .calculator span.ac {
        grid-column: span 3;
        width: 180px;
    }
</style>
<body>
    <form class="calculator" name="calc">
        <input type="text" class="value" name="txt">
        <span class="num ac" onclick="document.calc.txt.value = ''">AC</span>
        <span class="num" onclick="document.calc.txt.value += '/'">/</span>
        <span class="num" onclick="document.calc.txt.value += '7'">7</span>
        <span class="num" onclick="document.calc.txt.value += '8'">8</span>
        <span class="num" onclick="document.calc.txt.value += '9'">9</span>
        <span class="num" onclick="document.calc.txt.value += '*'">*</span>
        <span class="num" onclick="document.calc.txt.value += '4'">4</span>
        <span class="num" onclick="document.calc.txt.value += '5'">5</span>
        <span class="num" onclick="document.calc.txt.value += '6'">6</span>
        <span class="num" onclick="document.calc.txt.value += '-'">-</span>
        <span class="num" onclick="document.calc.txt.value += '1'">1</span>
        <span class="num" onclick="document.calc.txt.value += '2'">2</span>
        <span class="num" onclick="document.calc.txt.value += '3'">3</span>
        <span class="num" onclick="document.calc.txt.value += '+'">+</span>
        <span class="num zero" onclick="document.calc.txt.value += '0'">0</span>
        <span class="num" onclick="document.calc.txt.value += '.'">.</span>
        <span class="num" onclick="document.calc.txt.value = eval(calc.txt.value)">=</span>
    </form>
</body>

</html>

相关阅读:
wpf随笔
 XGrid绑定(转)
SQL Server 批量插入数据的两种方法(转)
UdpClient的Connect究竟做了什么(转)
InvokeHelper，让跨线程访问/修改主界面控件不再麻烦(转)
[C#] Control.Invoke方法和跨线程访问控件
 多线程访问winform控件出现异常的解决方法
 http://www.jdon.com/mda/oo_relation.html
三范式浅析(转)
SQL 表锁(转)
原文地址：https://www.cnblogs.com/yangisme/p/12514116.html