This is my fifth day of the Gwen Challenge

Effect:

Implementation:

  1. Define the tags..result is the box that displays the calculated results,.anniu is the button that puts the numbers and operators, and.zero is the clear button, all of which are in the form field:
<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>
Copy the code

As you can see, each button is bound to a click event. For example, kuang.result.value+=’0′” means that the value value of the calculation result display box is concatenated with character ‘0’. And so on, every button is this function, concatenated string. In this way, we get a series of calculations as we dot and dot, such as: 101-50055+2 * 37…. When ‘=’ is clicked, the eval () function is executed. The eval() function evaluates a string, such as’ 2+32 ‘. So we get the calculation result. Reassign the result to the value property of.result for display. The one-click clear button directly sets value to null, which is equivalent to clearing.

The rest is the style layout, found that there is nothing to say, the key is the above, the rest is simple CSS style. Because I think my effect is not too good to elaborate, the complete code is as follows:

<! DOCTYPEhtml>
<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. The 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>
Copy the code

Calculator background:

Conclusion:

Other articles ~ : Simple clock special effects HTML + CSS + JS Cyberpunk button HTML + CSS Responsive card Hover effect HTML + CSS Water loading animation HTML + CSS Navigation bar scrolling gradient effect HTML + CSS Page turning HTML + CSS 3D stereo album HTML + CSS Colorful streamer button HTML + CSS Remember some CSS properties summary (a) Sass summary note…… , etc.

Finally:

ヾ(￣▽￣)ByeBye