HTML+CSS+JS实现React简单的计算器实例

效果演示：文末获取源码

代码目录：

主要代码实现：

CSS样式：

:root {/* color palette :: https://coolors.co/app/d63c6b-5cc8ff-efefef-292f36-d6d6d6 */--white: #efefef;--white-alpha: rgba(239, 239, 239, .64);--grey: #d6d6d6;--gray: var(--grey);--black: #292f36;--pure-black: #131313;--pure-black-alpha: rgba(19, 19, 19, .64);--pure-black-alpha-light: rgba(19, 19, 19, .24);--pure-black-alpha-transparent: rgba(19, 19, 19, .12);--primary: #d63c6b;--primary-dk: #c41c4f;--accent: #5cc8ff;--accent-dk: #00a3f5;--transition: 300ms;--easing: cubic-bezier(1, 1, 1, 1);--easing-bounce-in: cubic-bezier(0, 0, .43, 1.3);--easing-bounce-out: cubic-bezier(.43, 1.3, 0, 0);font-size: 100%;font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}*,
*:before,
*:after {box-sizing: border-box;
}html,
body {position: relative;width: 100%;height: 100%;background-image: linear-gradient(to bottom right, var(--accent) 0%, var(--primary) 100%);background-repeat: no-repeat;background-attachment: fixed;
}body {padding-top: 20px;user-select: none;
}button {outline: none;border: 0;padding: 1rem;background-color: var(--black);font-size: 1.25rem;line-height: 1;color: var(--accent);transition: all var(--transition) var(--easing);
}button:hover {color: var(--accent-dk);
}button.block {width: 100%;
}button.transparent {background-color: transparent;
}button.no-padding {padding: 0;
}button.long-text {font-size: 1rem;
}.react-calculator {position: relative;margin: 0 auto;width: 320px;box-shadow: 0 19px 38px var(--pure-black-alpha-light), 0 15px 12px var(--pure-black-alpha-transparent);
}body::-webkit-scrollbar,
.editable-field::-webkit-scrollbar,
.memory-bank::-webkit-scrollbar {width: .5rem;
}body::-webkit-scrollbar:horizontal,
.editable-field::-webkit-scrollbar:horizontal,
.memory-bank::-webkit-scrollbar:horizontal {height: .5rem;
}body::-webkit-scrollbar-track,
body::-webkit-scrollbar:horizontal,
.editable-field::-webkit-scrollbar-track,
.editable-field::-webkit-scrollbar:horizontal,
.memory-bank::-webkit-scrollbar-track,
.memory-bank::-webkit-scrollbar:horizontal {background-color: var(--pure-black);
}body::-webkit-scrollbar-thumb,
body::-webkit-scrollbar:horizontal,
.editable-field::-webkit-scrollbar-thumb,
.editable-field::-webkit-scrollbar:horizontal,
.memory-bank::-webkit-scrollbar-thumb,
.memory-bank::-webkit-scrollbar:horizontal {background-color: var(--primary);
}s body:hover::-webkit-scrollbar-thumb,
s body:hover::-webkit-scrollbar:horizontal,
s .editable-field:hover::-webkit-scrollbar-thumb,
s .editable-field:hover::-webkit-scrollbar:horizontal,
s .memory-bank:hover::-webkit-scrollbar-thumb,
s .memory-bank:hover::-webkit-scrollbar:horizontal {background-color: var(--primary-dk);
}.editable-field {position: relative;width: 320px;height: 80px;z-index: 10;outline: none;box-shadow: 0 4px 2px -2px var(--pure-black-alpha);padding: .5rem;overflow-y: hidden;overflow-x: scroll;background-color: var(--pure-black-alpha);font-size: 2rem;line-height: 2;color: var(--primary);text-align: right;direction: rtl;white-space: nowrap;
}.memory-bank {position: absolute;top: 80px;left: 0;z-index: 10;width: 100%;height: 0;overflow: hidden;padding: 0;background-color: var(--pure-black-alpha);color: var(--accent-dk);transition: height 150ms var(--easing), overflow 1ms var(--easing) 200ms, padding 1ms var(--easing) 200ms;
}.memory-bank .toggle-close {position: absolute;top: 5px;right: 5px;padding: 2px 5px;
}.memory-bank .toggle-close .title {display: inline-block;transform: rotate(45deg);
}.memory-bank.visible {height: calc(100% - 80px);padding: 10px;overflow-y: auto;transition: height 200ms var(--easing), padding 1ms var(--easing);
}.button-set--functions,
.button-set--equations {background-color: var(--black);
}.button-set--functions button,
.button-set--equations button {display: inline-block;width: 80px;height: 80px;vertical-align: top;text-transform: uppercase;font-variant: small-caps;color: var(--primary);
}.button-set--functions button:hover,
.button-set--equations button:hover {color: var(--primary-dk);
}.button-set--numbers {width: 240px;float: left;background-color: var(--black);
}.button-set--numbers button {display: block;position: relative;width: 80px;height: 80px;float: left;background-color: var(--black);transition: box-shadow var(--transition) var(--easing);
}.button-set--numbers button:last-child {width: 100%;
}.button-set--functions {clear: left;float: left;width: 240px;
}

部分HTML代码 :

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>React Calculator</title><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" /><link rel="stylesheet" href="css/normalize.min.css"><link rel="stylesheet" href="css/style.css"></head><body><script src='js/react.min.js'></script><script src='js/EventEmitter.min.js'></script><script src="js/script.js"></script></body></html>

上面的其他css样式和js等需要引入即可运行