简约计算器效果 html+css

2024-04-06 18:39:14

效果：

实现：

定义标签, .result是显示计算结果框，.anniu里放数字和运算符按钮，.zero是清除按钮，它们都在表单域 form里：

<form class="kuang" name="kuang" >
        <input type="text" class="result"  name="result">
         <div class="anniu">
           <span onclick="kuang.result.value+='7'">7</span>
           <span onclick="kuang.result.value+='8'">8</span>
           <span onclick="kuang.result.value+='9'">9</span>
           <span onclick="kuang.result.value+='+'">+</span>
           <span onclick="kuang.result.value+='4'">4</span>
           <span onclick="kuang.result.value+='5'">5</span>
           <span onclick="kuang.result.value+='6'">6</span>
           <span onclick="kuang.result.value+='-'">-</span>
           <span onclick="kuang.result.value+='1'">1</span>
           <span onclick="kuang.result.value+='2'">2</span>
           <span onclick="kuang.result.value+='3'">3</span>
           <span onclick="kuang.result.value+='*'">*</span>
           <span onclick="kuang.result.value+='0'">0</span>
           <span onclick="kuang.result.value+='.'">.</span>
           <span onclick="kuang.result.value+='/'">/</span>
           <span onclick="kuang.result.value=eval(kuang.result.value)">=</span>
         </div>
         <div class="zero" onclick="kuang.result.value=''">I'll clear it (一键清空)</div>
    </form>

可以看到，每个按钮都绑定了一个点击事件。如 kuang.result.value+=‘0’" 意思是计算结果显示框 .result 的value值拼接上字符 ‘0’ 。以此类推，每个按钮都是这个功能，拼接字符串。如此一来，当我们一顿点点点后就得到一串计算过程，如 : 101-50055+2 * 37…
当点击 ‘ = ’ 时，执行eval（）函数。
eval() 函数可计算某个字符串，如‘2+32’。从而得出计算结果。
再将计算结果重新赋值给 .result 的 value 属性来进行显示就好。
一键清除按钮直接将value 值为空，那就相当于清除了。

其它就是样式布局了，发现好像没什么说的了，关键就是上面了，剩下就是简单的css样式了。因为我觉得我的效果不算太好看就不详细说了，完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://fonts.font.im/css?family=Ranga" rel="stylesheet">
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body{
            font-family: 'Ranga', cursive;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: rgb(182, 233, 248);
        }
     .kuang{
         width: 300px;
         height: 400px;
         background-color: rgb(172, 166, 166);
         position: relative;
         background-image: url(6.1.png);
         background-size: 100% 100%;
         border-radius: 10px;
         box-shadow: 4px 4px 6px  rgb(6, 50, 70);
     }
     .result{
        font-family: 'Ranga', cursive;
         position: absolute;
         top: 20px;
         left: 20px;
       width: 260px;
       height: 60px;
       padding: 20px;
       font-size: 23px;
       text-align: right; 
       letter-spacing: 1px;
       outline: none;
       background-color: rgb(166, 219, 190);
       opacity: .9;
     }
     .anniu{
         position: absolute;
         top: 100px;
         left: 20px;
         width: 260px;
         height: 240px;
         display: flex;
         justify-content: space-around;
         flex-wrap: wrap;
         align-content: space-between;
         cursor: pointer;
     }
     .anniu span{
         width: 60px;
         height: 55px;
         color: rgb(34, 36, 58);
         line-height: 55px;
         text-align: center;
         font-size: 30px;
         font-weight: bold;
         background-color: rgb(248, 247, 247);
         border-radius: 5px;
         box-shadow: inset  2px 2px 3px rgb(65, 64, 64),
                     inset -2px -2px 3px rgb(88, 86, 86);
       

     }
     .anniu span:hover{
         opacity: 0.8;
     }
    .anniu span:active{
        opacity: 1;
    }
     .zero{
         position: absolute;
         left: 20px;
         bottom: 20px;
         width: 260px;
         height: 30px;
         line-height: 30px;
         font-size: 18px;
         text-align: center;
         letter-spacing: 1px;
         border-radius: 15px;
         background-color: rgb(248, 247, 247);
         box-shadow: inset  1px 1px 1px rgb(65, 64, 64),
                     inset -1px -1px 1px rgb(88, 86, 86);
                     cursor: pointer;
      opacity: .4;
     }
     .zero:hover{
         opacity: 0.9;
     }
     .zero:active{
         opacity: 0.5;
     }
    </style>
</head>
<body>
    <form class="kuang" name="kuang" >
        <input type="text" class="result"  name="result">
         <div class="anniu">
           <span onclick="kuang.result.value+='7'">7</span>
           <span onclick="kuang.result.value+='8'">8</span>
           <span onclick="kuang.result.value+='9'">9</span>
           <span onclick="kuang.result.value+='+'">+</span>
           <span onclick="kuang.result.value+='4'">4</span>
           <span onclick="kuang.result.value+='5'">5</span>
           <span onclick="kuang.result.value+='6'">6</span>
           <span onclick="kuang.result.value+='-'">-</span>
           <span onclick="kuang.result.value+='1'">1</span>
           <span onclick="kuang.result.value+='2'">2</span>
           <span onclick="kuang.result.value+='3'">3</span>
           <span onclick="kuang.result.value+='*'">*</span>
           <span onclick="kuang.result.value+='0'">0</span>
           <span onclick="kuang.result.value+='.'">.</span>
           <span onclick="kuang.result.value+='/'">/</span>
           <span onclick="kuang.result.value=eval(kuang.result.value)">=</span>


         </div>
         <div class="zero" onclick="kuang.result.value=''">I'll clear it (一键清空)</div>
    </form>

    
</body>
</html>

计算器的背景图：

总结：

其它文章~：
简约时钟特效 html+css+js
赛博朋克风格按钮 html+css
响应式卡片悬停效果 html+css
水波加载动画 html+css
导航栏滚动渐变效果 html+css+js
书本翻页 html+css
3D立体相册 html+css
炫彩流光按钮 html+css
记一些css属性总结（一）
Sass总结笔记
…等等

最后：

ヾ(￣▽￣)Bye_Bye

码农公寓

效果：

实现：

总结：

相关文章