以下是HTML代码、复制请按键Ctrl+C,复制即可。
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>表白计算器</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class='calculator' id='calc'>
<div class='toggle'>
<div class='theme-switch-wrapper'>
<label class='theme-switch' for='checkbox'>
<input id='checkbox' type='checkbox'>
<div class='slider round'></div>
</label>
</div>
</div>
<div class='display'></div>
<span class='c neumorphic'>C</span>
<span class='signed neumorphic'>+/-</span>
<span class='percent neumorphic'>%</span>
<span class='divide neumorphic'>÷</span>
<span class='seven neumorphic'>7</span>
<span class='eight neumorphic'>8</span>
<span class='nine neumorphic'>9</span>
<span class='times neumorphic'>x</span>
<span class='four neumorphic'>4</span>
<span class='five neumorphic'>5</span>
<span class='six neumorphic'>6</span>
<span class='minus neumorphic'>-</span>
<span class='one neumorphic'>1</span>
<span class='two neumorphic'>2</span>
<span class='three neumorphic'>3</span>
<span class='plus neumorphic'>+</span>
<span class='zero neumorphic'>0</span>
<span class='decimal neumorphic'>.</span>
<span class='equals neumorphic'>=</span>
</div>
<script src="js/script.js"></script>
</body>
</html>
以下是CSS样式代码、复制请按键Ctrl+C,复制即可。
*{margin:0;padding:0;}
:root {
--body-bg-color: #e0e5ec;
--bg-color: #e0e5ec;
--primary-font-color: rgba(144,152,168,1);
--secondary-font-color: rgba(51,64,89,1);
--soft-high-light: rgba(255,255,255,.43);
--dark-high-light: rgba(217,210,200,.51);
}
[data-theme="dark"] {
--bg-color: #131419;
--primary-font-color: #c7c7c7;
--secondary-font-color: #03a9f4;
--soft-high-light: rgba(255,255,255,.05);
--dark-high-light: rgba(0,0,0,.51);
}
* {
box-sizing: border-box;
}
body {
background: var(--body-bg-color);
color: var(--primary-font-color);
}
.calculator {
background: var(--bg-color);
color: var(--primary-font-color);
}
.display {
box-shadow: 6px 6px 16px 0 var(--dark-high-light), -6px -6px 16px 0 var(--soft-high-light), inset 6px 6px 5px 0 var(--dark-high-light), inset -6px -6px 5px 0 var(--soft-high-light);
border: 5px solid var(--soft-high-light);
color: var(--secondary-font-color);
}
.neumorphic {
box-shadow: 6px 6px 16px 0 var(--dark-high-light), -6px -6px 16px 0 var(--soft-high-light);
border-radius: 50%;
transition: .1s all ease-in-out;
border: 1px solid var(--soft-high-light);
}
.neumorphic:hover {
box-shadow: inset 6px 6px 5px 0 var(--dark-high-light), inset -6px -6px 5px 0 var(--soft-high-light);
color: var(--secondary-font-color);
}
/*
GRID LAYOUT & NON NEUMORPHIC
*/
body {
display: grid;
width: 100vw;
height: 100vh;
align-items: center;
justify-items: center;
font-family: 'Odibee Sans';
font-size: 16px;
}
.display {
border-radius: 12px;
transition: .1s all ease-in-out;
height: 60px;
line-height: 60px;
text-align: right;
padding-right: 20px;
width: 100%;
font-size: 32px;
letter-spacing: 4px;
}
.calculator {
box-shadow: 0 0 16px rgba(0, 0, 0, 0.1);
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-areas: "toggle toggle toggle toggle" "display display display display" "c signed percent divide" "seven eight nine times" "four five six minus" "one two three plus" "zero zero decimal equals";
align-items: center;
justify-items: center;
grid-row-gap: 25px;
grid-column-gap: 25px;
border-radius: 20px;
padding: 50px 40px 40px 40px;
}
.c, .signed, .percent, .divide, .seven, .eight, .nine, .times, .four, .five, .six, .minus, .one, .two, .three, .plus, .zero, .decimal, .equals {
text-align: center;
height: 60px;
width: 60px;
line-height: 60px;
}
.zero {
width: 100%;
border-radius: 12px;
}
.toggle {
grid-area: toggle;
}
.display {
grid-area: display;
}
.c {
grid-area: c;
}
.signed {
grid-area: signed;
}
.percent {
grid-area: percent;
}
.divide {
grid-area: divide;
}
.seven {
grid-area: seven;
}
.eight {
grid-area: eight;
}
.nine {
grid-area: nine;
}
.times {
grid-area: times;
}
.four {
grid-area: four;
}
.five {
grid-area: five;
}
.six {
grid-area: six;
}
.minus {
grid-area: minus;
}
.one {
grid-area: one;
}
.two {
grid-area: two;
}
.three {
grid-area: three;
}
.plus {
grid-area: plus;
}
.zero {
grid-area: zero;
}
.decimal {
grid-area: decimal;
}
.equals {
grid-area: equals;
}
.toggle {
width: 100%;
}
.theme-switch-wrapper {
display: block;
float: right;
align-items: center;
}
.theme-switch {
display: inline-block;
height: 34px;
position: relative;
width: 60px;
}
.theme-switch input {
display: none;
}
.slider {
box-shadow: 6px 6px 16px 0 var(--dark-high-light), -6px -6px 16px 0 var(--soft-high-light), inset 6px 6px 5px 0 var(--dark-high-light), inset -6px -6px 5px 0 var(--soft-high-light);
background-color: inherit;
bottom: 0;
cursor: pointer;
left: 0;
position: absolute;
right: 0;
top: 0;
transition: .4s;
border: 2px solid rgba(255, 255, 255, 0.2);
}
.slider:before {
background-color: var(--bg-color);
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
bottom: 4px;
content: "";
height: 22px;
left: 4px;
position: absolute;
transition: .4s;
width: 22px;
}
input:checked + .slider {
background-color: var(--bg-color);
box-shadow: 6px 6px 16px 0 var(--dark-high-light), -6px -6px 16px 0 var(--soft-high-light), inset 6px 6px 5px 0 var(--dark-high-light), inset -6px -6px 5px 0 var(--soft-high-light);
}
input:checked + .slider:before {
background-color: var(--secondary-font-color);
}
input:checked + .slider:before {
transform: translateX(26px);
}
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
以下是JavaScript代码、复制请按键Ctrl+C,复制即可。
var keys = document.querySelectorAll('#calc span');
var operators = ['+', '-', 'x', '÷'];
var decimalAdded = false;
for (var i = 0; i < keys.length; i++) {
keys[i].onclick = function(e) {
var input = document.querySelector('.display');
var inputVal = input.innerHTML;
var btnVal = this.innerHTML;
if (btnVal == 'C') {
input.innerHTML = '';
decimalAdded = false;
} else if (btnVal == '=') {
var equation = inputVal;
var lastChar = equation[equation.length - 1];
equation = equation.replace(/x/g, '*').replace(/÷/g, '/');
if (operators.indexOf(lastChar) > -1 || lastChar == '.')
equation = equation.replace(/.$/, '');
if (equation)
input.innerHTML = eval(equation);
decimalAdded = false;
} else if (operators.indexOf(btnVal) > -1) {
var lastChar = inputVal[inputVal.length - 1];
if (inputVal != '' && operators.indexOf(lastChar) == -1)
input.innerHTML += btnVal;
else if (inputVal == '' && btnVal == '-')
input.innerHTML += btnVal;
if (operators.indexOf(lastChar) > -1 && inputVal.length > 1) {
input.innerHTML = inputVal.replace(/.$/, btnVal);
}
decimalAdded = false;
} else if (btnVal == '.') {
if (!decimalAdded) {
input.innerHTML += btnVal;
decimalAdded = true;
}
} else {
input.innerHTML += btnVal;
}
// prevent page jumps
e.preventDefault();
}
}
const toggleSwitch = document.querySelector('.theme-switch input[type="checkbox"]');
function switchTheme(e) {
if (e.target.checked) {
document.documentElement.setAttribute('data-theme', 'dark');
} else {
document.documentElement.setAttribute('data-theme', 'light');
}
}
toggleSwitch.addEventListener('change', switchTheme, false);
以上是代码结构。
以下适合小白的图片教程,请仔细检查代码学习。