高仿mac计算器
本帖最后由 jiujiukeji 于 2018-11-28 21:10 编辑<!DOCTYPE html>
<html lang='en' class=''>
<head>
<style class="cp-pen-styles">html {
font-size: 62.5%;
box-sizing: border-box;
}
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: inherit;
}
body {
width: 100vw;
min-height: 100vh;
background: radial-gradient(50% 100%, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0)), linear-gradient(90deg, rgba(50, 100, 170, 0.7) 1px, transparent 0), linear-gradient(180deg, rgba(50, 100, 170, 0.7) 1px, transparent 0), linear-gradient(90deg, rgba(50, 100, 170, 0.4) 1px, transparent 0), linear-gradient(180deg, rgba(50, 100, 170, 0.4) 1px, transparent 0), linear-gradient(90deg, #3264aa 2px, transparent 0), linear-gradient(180deg, #3264aa 2px, transparent 0), url("//images.pexels.com/photos/1540258/pexels-photo-1540258.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260") no-repeat;
background-color: #074b97;
background-size: 100% 100%, 50px 50px,50px 50px,25px 25px,25px 25px,100px 100px, 100px 100px, cover;
background-attachment: local;
background-blend-mode: lighten;
display: flex;
justify-content: center;
align-items: center;
}
.calculator {
background: #1d1e22;
padding: 2.8rem .64rem .64rem;
color: white;
border-radius: .5rem;
box-shadow: 0 0.3rem 3rem 0.1rem rgba(0, 0, 0, 0.6);
position: relative;
min-width: 40rem;
}
.calculator-bar {
display: grid;
grid-template-columns: repeat(3, 1.4rem);
grid-column-gap: .6rem;
position: absolute;
top: .64rem;
left: .64rem;
}
.calculator-bar > div {
cursor: pointer;
height: 1.4rem;
width: 1.4rem;
border-radius: 100%;
position: relative;
}
.calculator-bar > div::before, .calculator-bar > div::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
color: #1d1e22;
opacity: 0;
transition: opacity .2s linear;
}
.calculator-bar:hover div::before, .calculator-bar:hover div::after {
transition: opacity .2s linear;
opacity: 1;
}
.calculator-bar .close {
background: #ff5a5a;
}
.calculator-bar .close::before {
transform: translate(-50%, -50%) rotate(-45deg);
width: 1rem;
height: 1px;
background: currentColor;
}
.calculator-bar .close::after {
transform: translate(-50%, -50%) rotate(45deg);
width: 1rem;
height: 1px;
background: currentColor;
}
.calculator-bar .minimize {
background: #5adc5a;
}
.calculator-bar .minimize::before {
transform: translate(-50%, -50%);
width: 1rem;
height: 1px;
background: currentColor;
}
.calculator-bar .maximize {
background: #ffc85a;
}
.calculator-bar .maximize::before {
border: 5px solid transparent;
border-color: transparent transparent transparent currentColor;
transform: translate(0%, -90%) rotate(-45deg);
}
.calculator-bar .maximize::after {
border: 5px solid transparent;
border-color: transparent currentColor transparent transparent;
transform: translate(-90%, 0%) rotate(-45deg);
}
.calculator-display {
font-size: 5rem;
height: 80px;
padding: 0 20px;
background-color: #1d1e22;
color: #fff;
display: flex;
align-items: center;
justify-content: flex-end;
}
button {
height: 60px;
border-radius: 3px;
border: 1px solid #c4c4c4;
font-size: 2rem;
color: #333;
background-color: #fff;
background-image: linear-gradient(to bottom, transparent, transparent 50%, rgba(0, 0, 0, 0.04));
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05), inset 0 1px 0 0 rgba(255, 255, 255, 0.45), inset 0 -1px 0 0 rgba(255, 255, 255, 0.15), 0 1px 0 0 rgba(255, 255, 255, 0.15);
text-shadow: 0 1px rgba(255, 255, 255, 0.4);
}
button:hover {
background-color: #eaeaea;
}
button.operator {
background-color: #eee;
color: #337cac;
}
button.all-clear {
background-color: #f0595f;
border-color: #b0353a;
color: #fff;
}
button.all-clear:hover {
background-color: #f17377;
}
button.equal-sign {
background-color: #2e86c0;
border-color: #337cac;
color: #fff;
}
button.equal-sign:hover {
background-color: #4e9ed4;
}
.calculator-keys {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 2rem;
padding: 2rem 1.36rem;
background-color: #fff;
border-radius: 0 0 .5rem .5rem;
}
.equal-sign {
grid-row: 2 / span 4;
grid-column: 4 / 5;
height: 100%;
}
/*.clear{
background-color: #4e9ed4;
}
button.clear:hover {
background-color: #f17377;
}*/
</style></head><body>
<div class="calculator" id="calculator">
<div class="calculator-bar">
<div class="close" id="close"></div>
<div class="minimize"></div>
<div class="maximize"></div>
</div>
<div class="calculator-display" id="calculator-display">0</div>
<div class="calculator-keys">
<button type="button" class="operator" value="+" data-ops="+">+</button>
<button type="button" class="operator" value="-" data-ops="-">-</button>
<button type="button" class="operator" value="*" data-ops="*">×</button>
<button type="button" class="operator" value="/" data-ops="/">÷</button>
<button type="button" class="num" value="7" data-num="7" >7</button>
<button type="button" class="num" value="8" data-num="8">8</button>
<button type="button" class="num" value="9" data-num="9">9</button>
<!-- <button type="button" id="clear" class="clear">C</button> -->
<button type="button" class="num" value="4" data-num="4">4</button>
<button type="button" class="num" value="5" data-num="5">5</button>
<button type="button" class="num" value="6" data-num="6">6</button>
<button type="button" class="num" value="1" data-num="1">1</button>
<button type="button" class="num" value="2" data-num="2">2</button>
<button type="button" class="num" value="3" data-num="3">3</button>
<button type="button" class="num" value="0" data-num="0">0</button>
<button type="button" class="num" value="." data-num=".">.</button>
<button type="button" class="all-clear" id="reset" value="all-clear">AC</button>
<button type="button" id="equal-sign" class="equal-sign"data-result="">=</button>
</div>
</div>
</body></html>
<script>
(function () {
"use strict";
var el = function (element) {
if (element.charAt(0) === "#") {
return document.querySelector(element);
}
return document.querySelectorAll(element);
};
var viewer =el("#calculator-display") , equals = el("#equal-sign"), nums = el(".num"), ops = el(".operator"), theNum = "",close= el("#close"),
oldNum = "", resultNum, operator;
var setNum = function () {
if (resultNum) {
theNum = this.getAttribute("data-num");
resultNum = "";
} else {
theNum += this.getAttribute("data-num");
}
viewer.innerHTML = theNum;
};
var moveNum = function () {
oldNum = theNum;
theNum = "";
operator = this.getAttribute("data-ops");
equals.setAttribute("data-result", "");
};
var turnOff = function() {
// console.log(1)
el('#calculator').setAttribute("style","display:none");
};
var displayNum = function () {
oldNum = parseFloat(oldNum);
theNum = parseFloat(theNum);
switch (operator) {
case "+":
resultNum = oldNum + theNum;
break;
case "-":
resultNum = oldNum - theNum;
break;
case "*":
resultNum = oldNum * theNum;
break;
case "/":
resultNum = oldNum / theNum;
break;
default:
resultNum = theNum;
}
if (!isFinite(resultNum)) {
if (isNaN(resultNum)) {
resultNum = "You broke it!";
} else {
resultNum = "Look at what you've done";
el('#calculator').classList.add("broken");
el('#reset').classList.add("show");
}
}
viewer.innerHTML = resultNum;
equals.setAttribute("data-result", resultNum);
oldNum = 0;
theNum = resultNum;
};
// var clearAll = function () {
// oldNum = "";
// theNum = "";
// viewer.innerHTML = "0";
// equals.setAttribute("data-result", resultNum);
// };
for (var i = 0, l = nums.length; i < l; i++) {
nums.onclick = setNum;
}
for (var i = 0, l = ops.length; i < l; i++) {
ops.onclick = moveNum;
}
equals.onclick = displayNum;
// el("#clear").onclick = clearAll;
close.onclick = turnOff;
el("#reset").onclick = function () {
window.location = window.location;
};
}());
</script>
效果图
附件：
向楼主学学。做得不错 高仿。做的好 建议楼主放出成品 多谢 我也希望楼主放出成品 ！ qzaqwxsw 发表于 2018-11-28 18:47
我也希望楼主放出成品 ！
这个就是成品啊~~~ peterq521 发表于 2018-11-28 18:41
建议楼主放出成品 多谢
这个就是成品啊~~~
嗯，我打开方式有问题 本帖最后由 阳光下的少年 于 2018-11-28 19:38 编辑
感谢分享，今晚回去研究一下 下载链接呢？
页:
[1]
2