以下是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);

以上是代码结构。

以下适合小白的图片教程，请仔细检查代码学习。