react结合EventEmitter实现一个简洁计算器效果代码
代码语言:html
所属分类:布局界面
代码描述:react结合EventEmitter实现一个简洁计算器效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!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"/> <style> :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; } </style> </head> <body> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react.0.14.3.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/EventEmitter.min.js"></script> <script > const ee = new EventEmitter(); const App = React.createClass({ displayName: "App", render() { return /*#__PURE__*/( React.createElement("main", { className: "react-calculator" }, /*#__PURE__*/ React.createElement(InputField, null), /*#__PURE__*/ React.createElement(TotalRecall, null), /*#__PURE__*/ React.createElement(ButtonSetNumbers, null), /*#__PURE__*/ React.createElement(ButtonSetFunctions, null), /*#__PURE__*/ React.createElement(ButtonSetEquations, null))); } }); const Button = React.createClass({ disp.........完整代码请登录后点击上方下载按钮下载查看
网友评论0