js实现简单计算器(样式酷炫)
2017-09-07 14:02
357 查看
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>js实现简单计算器</title> <link rel="stylesheet" type="text/css" href="css/normalize.css" /> <link rel="stylesheet" href="css/style.css"> </head> <body> <h1>js实现简单计算器</h1> <p class="warning">不要进行除0操作</p> <div id="calculator" class="calculator"> <button id="clear" class="clear">C</button> <div id="viewer" class="viewer">0</div> <button class="num" data-num="7">7</button> <button class="num" data-num="8">8</button> <button class="num" data-num="9">9</button> <button data-ops="加上" class="ops">+</button> <button class="num" data-num="4">4</button> <button class="num" data-num="5">5</button> <button class="num" data-num="6">6</button> <button data-ops="减去" class="ops">-</button> <button class="num" data-num="1">1</button> <button class="num" data-num="2">2</button> <button class="num" data-num="3">3</button> <button data-ops="乘以" class="ops">*</button> <button class="num" data-num="0">0</button> <button class="num" data-num=".">.</button> <button id="equals" class="equals" data-result="">=</button> <button data-ops="除以" class="ops">/</button> </div> <button id="reset" class="reset">Reset Universe?</button> <script src="js/calculator.js" type="text/javascript"></script> </body> </html>
style.css
html {
background: #100a1c;
background-image: -webkit-radial-gradient(50% 30% ellipse at center top, #201e40 0%, rgba(0, 0, 0, 0) 100%), -webkit-radial-gradient(60% 50% ellipse at center bottom, #261226 0%, #100a1c 100%);
background-image: radial-gradient(50% 30% ellipse at center top, #201e40 0%, rgba(0, 0, 0, 0) 100%), radial-gradient(60% 50% ellipse at center bottom, #261226 0%, #100a1c 100%);
background-attachment: fixed;
color: #6cacc5;
}
body {
color: #6cacc5;
font: 300 18px/1.6 "Source Sans Pro",sans-serif;
margin: 0;
/*padding: 5em 0 2em;*/
text-align: center;
}
h2 {
font-weight: 300;
margin: 0;
}
/* Gradient text only on Webkit */
.warning {
background: -webkit-linear-gradient(45deg, #c97874 10%, #463042 90%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
color: #8c5059;
font-weight: 400;
margin: 0 auto 6em;
max-width: 9em;
}
.calculator {
font-size: 28px;
margin: 0 auto;
width: 10em;
}
.calculator::before, .calculator::after {
content: " ";
display: table;
}
.calculator::after {
clear: both;
}
/* Calculator after dividing by zero */
.broken {
-webkit-animation: broken 2s;
animation: broken 2s;
-webkit-transform: translate3d(0, -2000px, 0);
transform: translate3d(0, -2000px, 0);
opacity: 0;
}
.viewer {
color: #c97874;
float: left;
line-height: 3em;
text-align: right;
text-overflow: ellipsis;
overflow: hidden;
width: 7.5em;
height: 3em;
}
button {
border: 0;
background: rgba(42, 50, 113, 0.28);
color: #6cacc5;
cursor: pointer;
float: left;
font: inherit;
margin: 0.25em;
width: 2em;
height: 2em;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
button:hover {
background: #201e40;
}
button:focus {
outline: 0;
/* The value fade-ins that appear */
}
button:focus::after {
-webkit-animation: zoom 1s;
animation: zoom 1s;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
content: attr(data-num);
cursor: default;
font-size: 100px;
position: absolute;
top: 1.5em;
left: 50%;
text-align: center;
margin-left: -24px;
opacity: 0;
width: 48px;
}
/* Same as above, modified for operators */
.ops:focus::after {
content: attr(data-ops);
margin-left: -210px;
width: 420px;
}
/* Same as above, modified for result */
.equals:focus::after {
content: attr(data-result);
margin-left: -300px;
width: 600px;
}
/* Reset button */
.reset {
background: rgba(201, 120, 116, 0.28);
color: #c97874;
font-weight: 400;
margin-left: -77px;
padding: 0.5em 1em;
position: absolute;
top: -20em;
left: 50%;
width: auto;
height: auto;
/* When button is revealed */
}
.reset:hover {
background: #c97874;
color: #100a1c;
}
.reset.show {
top: 20em;
-webkit-animation: fadein 4s;
animation: fadein 4s;
}
/* Animations */
/* Values that appear onclick */
@-webkit-keyframes zoom {
0% {
-webkit-transform: scale(0.2);
transform: scale(0.2);
opacity: 1;
}
70% {
-webkit-transform: scale(1);
transform: scale(1);
}
100% {
opacity: 0;
}
}
@keyframes zoom {
0% {
-webkit-transform: scale(0.2);
transform: scale(0.2);
opacity: 1;
}
70% {
-webkit-transform: scale(1);
transform: scale(1);
}
100% {
opacity: 0;
}
}
/* Division by zero animation */
@-webkit-keyframes broken {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
}
5% {
-webkit-transform: rotate(5deg);
transform: rotate(5deg);
}
15% {
-webkit-transform: rotate(-5deg);
transform: rotate(-5deg);
}
20% {
-webkit-transform: rotate(5deg);
transform: rotate(5deg);
}
25% {
-webkit-transform: rotate(-5deg);
transform: rotate(-5deg);
}
50% {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
70% {
-webkit-transform: translate3d(0, 2000px, 0);
transform: translate3d(0, 2000px, 0);
opacity: 1;
}
75% {
opacity: 0;
}
100% {
-webkit-transform: translate3d(0, -2000px, 0);
transform: translate3d(0, -2000px, 0);
}
}
@keyframes broken {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
}
5% {
-webkit-transform: rotate(5deg);
transform: rotate(5deg);
}
15% {
-webkit-transform: rotate(-5deg);
transform: rotate(-5deg);
}
20% {
-webkit-transform: rotate(5deg);
transform: rotate(5deg);
}
25% {
-webkit-transform: rotate(-5deg);
transform: rotate(-5deg);
}
50% {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
70% {
-webkit-transform: translate3d(0, 2000px, 0);
transform: translate3d(0, 2000px, 0);
opacity: 1;
}
75% {
opacity: 0;
}
100% {
-webkit-transform: translate3d(0, -2000px, 0);
transform: translate3d(0, -2000px, 0);
}
}
/* Reset button fadein */
@-webkit-keyframes fadein {
0% {
top: 20em;
opacity: 0;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fadein {
0% {
top: 20em;
opacity: 0;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@media (min-width: 420px) {
.calculator {
width: 12em;
}
.viewer {
width: 8.5em;
}
button {
margin: 0.5em;
}
}
calculator.js
(function() { "use strict"; // Shortcut to get elements var el = function(element) { if (element.charAt(0) === "#") { // If passed an ID... return document.querySelector(element); // ... returns single element } return document.querySelectorAll(element); // Otherwise, returns a nodelist }; // Variables var viewer = el("#viewer"), // Calculator screen where result is displayed equals = el("#equals"), // Equal button nums = el(".num"), // List of numbers ops = el(".ops"), // List of operators theNum = "", // Current number oldNum = "", // First number resultNum, // Result operator; // Batman // When: Number is clicked. Get the current number selected var setNum = function() { if (resultNum) { // If a result was displayed, reset number theNum = this.getAttribute("data-num"); resultNum = ""; } else { // Otherwise, add digit to previous number (this is a string!) theNum += this.getAttribute("data-num"); } viewer.innerHTML = theNum; // Display current number }; // When: Operator is clicked. Pass number to oldNum and save operator var moveNum = function() { oldNum = theNum; theNum = ""; operator = this.getAttribute("data-ops"); equals.setAttribute("data-result", ""); // Reset result in attr }; // When: Equals is clicked. Calculate result var displayNum = function() { // Convert string input to numbers oldNum = parseFloat(oldNum); theNum = parseFloat(theNum); // Perform operation switch (operator) { case "加上": resultNum = oldNum + theNum; break; case "减去": resultNum = oldNum - theNum; break; case "乘以": resultNum = oldNum * theNum; break; case "除以": resultNum = oldNum / theNum; break; // If equal is pressed without an operator, keep number and continue default: resultNum = theNum; } // If NaN or Infinity returned if (!isFinite(resultNum)) { if (isNaN(resultNum)) { // If result is not a number; set off by, eg, double-clicking operators resultNum = "You broke it!"; } else { // If result is infinity, set off by dividing by zero resultNum = "Look at what you've done"; el('#calculator').classList.add("broken"); // Break calculator el('#reset').classList.add("show"); // And show reset button } } // Display result, finally! viewer.innerHTML = resultNum; equals.setAttribute("data-result", resultNum); // Now reset oldNum & keep result oldNum = 0; theNum = resultNum; }; // When: Clear button is pressed. Clear everything var clearAll = function() { oldNum = ""; theNum = ""; viewer.innerHTML = "0"; equals.setAttribute("data-result", resultNum); }; /* The click events */ // Add click event to numbers for (var i = 0, l = nums.length; i < l; i++) { nums[i].onclick = setNum; } // Add click event to operators for (var i = 0, l = ops.length; i < l; i++) { ops[i].onclick = moveNum; } // Add click event to equal sign equals.onclick = displayNum; // Add click event to clear button el("#clear").onclick = clearAll; // Add click event to reset button el("#reset").onclick = function() { window.location = window.location; }; }());
相关文章推荐
- vue2.0实现引用qrcode.js实现获取改变二维码的样式(2)
- 实现lightBox时的样式与行为分离减少JS第1/2页
- 用js查找法实现当前栏目样式的高亮显示
- 基于JS实现简单的样式切换效果代码
- JS 实现文字左右滚动,必不可少的样式
- 结构-行为-样式-angularJs ngAnimate(Js实现)
- js中简易选项卡的实现(3种方法实现样式的封装)
- js实现简单百度分页和两种tab样式切换简单实现
- dialog使用方法(同一页面,调用一个js代码,实现多个不同样式的弹窗)
- 用JS实现点击DIV改变背景样式,再次点击后背景恢复
- JS实现的样式切换功能tableCSS实例
- js实现的鼠标放上和移开显示不同图片和文字,样式比较好看
- Jquery 酷炫 用户 选择效果(js 实现带图片的 select 效果)
- 原生js实现导航栏点击之后添加样式
- WebResource实现在自定义控件中内嵌JS文件和样式文件
- iOS实现 webView loadHTMLString加载外部css、js样式
- 一周乱弹(1,eclipse 远程调试tomcat。2,常量类的作用。3,通过花生壳实现远程连接 端口:3389),4oracle查询日期5,bootstrap文本样式6,6 js四舍五入
- JS实现导航栏项目自动切换标签样式
- jquery 实现倒计时 在处理JS 样式的效果
- [转]通js实现自定义Tooltip样式