简约计算器效果 html+css
【摘要】 效果：
实现：
定义标签, .result是显示计算结果框，.anniu里放数字和运算符按钮，.zero是清除按钮，它们都在表单域 form里：
<form class="kuang" name="kuang" > <input type="text" class="result" name="result"> <div class="anniu"> <sp...
效果：
实现：
- 定义标签, .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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
可以看到，每个按钮都绑定了一个点击事件。如 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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
计算器的背景图：
总结：
其它文章~：
简约时钟特效 html+css+js
赛博朋克风格按钮 html+css
响应式卡片悬停效果 html+css
水波加载动画 html+css
导航栏滚动渐变效果 html+css+js
书本翻页 html+css
3D立体相册 html+css
炫彩流光按钮 html+css
记一些css属性总结（一）
Sass总结笔记
…等等
最后：
ヾ(￣▽￣)ByeBye
文章来源: blog.csdn.net，作者：北极光之夜。，版权归原作者所有，如需转载，请联系作者。
原文链接：blog.csdn.net/luo1831251387/article/details/113525088
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）