zoukankan      html  css  js  c++  java
  • 简单计算器

    <!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>
     
  • 相关阅读:
    ABP拦截器之UnitOfWorkRegistrar(一)
    ABP中的拦截器之EntityHistoryInterceptor
    ABP中的拦截器之AuditingInterceptor
    ABP中的拦截器之ValidationInterceptor(下)
    ABP中的拦截器之ValidationInterceptor(上)
    ABP中模块初始化过程(二)
    ABP中的模块初始化过程(一)
    工欲善其事必先利其器
    ie9/8的iframe中jQuery报错
    git仓库删除所有提交历史记录
  • 原文地址:https://www.cnblogs.com/yangisme/p/12514116.html
Copyright © 2011-2022 走看看