简约计算器效果 html+css
效果：
实现：
- 定义标签, .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'">7span>
<span onclick="kuang.result.value+='8'">8span>
<span onclick="kuang.result.value+='9'">9span>
<span onclick="kuang.result.value+='+'">+span>
<span onclick="kuang.result.value+='4'">4span>
<span onclick="kuang.result.value+='5'">5span>
<span onclick="kuang.result.value+='6'">6span>
<span onclick="kuang.result.value+='-'">-span>
<span onclick="kuang.result.value+='1'">1span>
<span onclick="kuang.result.value+='2'">2span>
<span onclick="kuang.result.value+='3'">3span>
<span onclick="kuang.result.value+='*'">*span>
<span onclick="kuang.result.value+='0'">0span>
<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样式了。因为我觉得我的效果不算太好看就不详细说了，完整代码如下：
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<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'">7span>
<span onclick="kuang.result.value+='8'">8span>
<span onclick="kuang.result.value+='9'">9span>
<span onclick="kuang.result.value+='+'">+span>
<span onclick="kuang.result.value+='4'">4span>
<span onclick="kuang.result.value+='5'">5span>
<span onclick="kuang.result.value+='6'">6span>
<span onclick="kuang.result.value+='-'">-span>
<span onclick="kuang.result.value+='1'">1span>
<span onclick="kuang.result.value+='2'">2span>
<span onclick="kuang.result.value+='3'">3span>
<span onclick="kuang.result.value+='*'">*span>
<span onclick="kuang.result.value+='0'">0span>
<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