阅读 373

5分钟实现简约计算器效果 html+css

这是我参与更文挑战的第5天

效果:

在这里插入图片描述

实现:

  1. 定义标签, .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总结笔记 ......等等

最后:

ヾ( ̄▽ ̄)ByeBye

文章分类
前端
文章标签