reactjs实现一个苹果手机计算器效果代码
代码语言:html
所属分类:布局界面
代码描述:reactjs实现一个苹果手机计算器效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=400, height=600, initial-scale=0.8, maximum-scale=1"> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/babel.min.js"></script> <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto:100'> <style> html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } body { margin: 0; font: 100 14px 'Roboto'; } button { display: block; background: none; border: none; padding: 0; font-family: inherit; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: pointer; outline: none; -webkit-tap-highlight-color: rgba(0,0,0,0); } button:active { box-shadow: inset 0px 0px 80px 0px rgba(0,0,0,0.25); } #wrapper { height: 100vh; display: flex; align-items: center; justify-content: center; } #app { width: 320px; height: 520px; position: relative; } .calculator { width: 100%; height: 100%; background: black; display: flex; flex-direction: column; } #wrapper .calculator { box-shadow: 0px 0px 20px 0px #aaa; } .calculator-display { color: white; background: #1c191c; line-height: 130px; font-size: 6em; flex: 1; } .auto-scaling-text { display: inline-block; } .calculator-display .auto-scaling-text { padding: 0 30px; position: absolute; right: 0; transform-origin: right; } .calculator-keypad { height: 400px; display: flex; } .calculator .input-keys { width: 240px; } .calculator .function-keys { display: flex; } .calculator .digit-keys { background: #e0e0e7; display: flex; flex-direction: row; flex-wrap: wrap-reverse; } .calculator-key { width: 80px; height: 80px; border-top: 1px solid #777; border-right: 1px solid #666; text-align: center; line-height: 80px; } .calculator .function-keys .calculator-key { font-size: 2em; } .calculator .function-keys .key-multiply { line-height: 50px; } .calculator .digit-keys .calculator-key { font-size: 2.25em; } .calculator .digit-keys .key-0 { width: 160px; text-align: left; padding-left: 32px; } .calculator .digit-keys .key-dot { padding-top: 1em; font-size: 0.75em; } .calculator .operator-keys .calculator-key { color: white; border-right: 0; font-size: 3em; } .calculator .function-keys { background: linear-gradient(to bottom, rgba(202,202,204,1) 0%, rgba(196,194,204,1) 100%); } .calculator .operator-keys { background: linear-gradient(to bottom, rgba(252,156,23,1) 0%, rgba(247,126,27,1) 100%); } </style> </head> <body> <div id="wrapper"> <div id="app"></div> </div> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react.15.4.2.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react-dom.15.4.2.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/polyfill.number.toLocaleString.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react-point.min.js"></script> <script type = "text/babel"> const PointTarget = ReactPoint.PointTarget class AutoScalingText extends React.Component { state = { scale: 1 }; componentDidUpdate() { const { scale } = this.state const node = this.node const parentNode = node.parentNode const availableWidth = parentNode.offsetWidth const actualWidth = node.offsetWidth const actualScale = availableWidth / actualWidth if (scale === actualScale) return if (actualScale < 1) { this.setState({ scale: actualScale }) } else if (scale < 1) { this.setState({ scale: 1 }) } } render() { const { scale } = this.state return ( < div className="auto-scaling-text" style={{ transform: `scale(${scale},${scale})` }} ref={node => this.node = node} >{this.props.children}</div> ) } } class CalculatorDisplay extends React.Component { render() { const { value, ...props } = this.props const language = navigator.language || 'en-US' let formattedValue = parseFloat(value).toLocaleString(language, { useGrouping: true, maximumFractionDigits: 6 }) // Add back missing .0 in e.g. 12.0 const match = value.match(/\.\d*?(0*)$/) if (match) formattedValue += (/[1-9]/).test(match[0]) ? match[1] : match[0] return ( <div {...props} className="calculator-display"> <AutoScalingText>{formattedValue}</AutoScalingText> </div> ) } } class CalculatorKey extends React.Component { render() { const { onPress, className, ...props } = this.props return ( <PointTarget onPoint={onPress}> <button className={`calculator-key ${className}`} {...props}/> </PointTarget> ) } } const CalculatorOperations = { '/': (prevValue, nextValue) => prevValue / nextValue, '*': (prevValue, nextValue) => prevValue * nextValue, '+': (prevValue, nextValue) => prevValue + nextValue, '-': (prevValue, nextValue) => prevValue - nextValue, '=': (prevValue, nextValue) => nextValue } class Calc.........完整代码请登录后点击上方下载按钮下载查看
网友评论0