效果演示：文末获取源码
代码目录：
主要代码实现：
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等需要引入即可运行
源码获取
查看博主主页或私信博主获取
精彩推荐更新中：
HTML5大作业实战100套
打卡 文章 更新39/ 100天
大家可以点赞、收藏、关注、评论我啦 、需要完整文件联系下方微信公众号获取
