css+js实现简洁数学计算器代码-html代码-BFW代码库

css+js实现简洁数学计算器代码

代码语言：html

所属分类：其他

代码描述：css+js实现简洁数学计算器代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        *{
      margin:0;
      padding:0;
      box-sizing:border-box;
    }
    :root {
    	--primary-color: #185ee0;
    	--secondary-color: #e6eef9;
    }
    body{
      background-color:#424242;
      display:flex;
      justify-content:center;
      align-items:center;
      width:100%;
      height:100vh;
    }
    section{
      
      justify-content:center;
      border-radius:10px;
    /*   width:300px;
      height:350px; */
      background-color:#212121;
     
      padding:10px;
    }
    .output{
      width:280px;
    /*   height:50px; */
       display:flex;
      justify-content:center;
      
    }
    input[type=text]{
      width:100%;
      height:70px;
      border-radius:10px;
      background-color:transparent;
      color:white;
      border:none;
      border-bottom:1px solid white;
      font-size:20pt;
      text-align:right;
      pointer-events:none;
    }
    input[type=text]::placeholder{
      color:white;
      
    }
    .btn{
     display:flex;
      justify-content:center;
      margin-top:5px;
    
    }
    .fr{
      color:green;
    }
    .fri{
      background-color:green;
      color:gold;
      width:20px;
    /*   flex:1; */
    }
    .frr{
      
      color:red;
    }
    .no{
      color:white;
    }
    input[type=button]{
      border-radius:20%;
      background-color:transparent;
      font-size:20pt;
      color:;
      box-shadow:-1px -2px 2px 0px #616161;
      border:none;
      width:60px;
      height:60px;
      margin:5px;
      margin-top:10px;
    }
    </style>
</head>
<section>
    <form action="">
        <div class="output">
            <input type="text" placeholder="0" id="result">
        </div>
        <div class="btn">

            <input type="button" class="frr" value="c" onclick="Clear()">
            <input type="button" class="fr" value="del" onclick="delet()">
            <input type="button" class="fr" value="%" onclick="display('%')">
            <input type="button" class="fr" value="/" onclick="display('/')">
        </div>
        <div class="btn">
            <input type="button" class="no" value="7" onclick="display('7')">
            <input type="button" class="no" v.........完整代码请登录后点击上方下载按钮下载查看