?效果演示：文末獲取源碼

??

???代碼目錄：

主要代碼實現：

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天

大家可以點贊、收藏、關注、評論我啦 、需要完整文件聯系下方微信公眾號獲取

總結

以上是生活随笔為你收集整理的HTML+CSS+JS实现React简单的计算器实例的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。