简单计算器 

<!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>

 

 
posted @ 2020-03-17 22:29  印第安小铁匠  阅读(146)  评论(0)    收藏  举报