0312 腾讯 前端实习 计费平台 一面
- 怎么实现的性能优化
- 浏览器垃圾回收
- promise实现网络请求最大量限制怎么做的
- http自带限制最大量
- http1和http2还有什么区别
- 怎么用的防抖节流
- 响应式窗口调整怎么做的
代码:
- 数字加千分位(正则)
- 计算器问题,显示不了,结果无穷大,...
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>React Calculator</title> <style> .calculator { max-width: 400px; margin: 50px auto; padding: 20px; border: 1px solid #ccc; border-radius: 5px; } .display { padding: 10px; margin-bottom: 10px; background-color: #f2f2f2; text-align: right; border: 1px solid #ccc; border-radius: 5px; } .button { width: 23%; padding: 10px; margin: 1%; font-size: 1.2em; border: 1px solid #ccc; border-radius: 5px; background-color: #e7e7e7; cursor: pointer; } .button:hover { background-color: #d7d7d7; } .row { display: flex; justify-content: space-between; } </style> </head> <body> <div id="app"></div> <script crossorigin src="https://unpkg.com/react/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script> <script crossorigin src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.js"></script> <script type="text/babel"> const { useState } = React; const Calculator = () => { const [current, setCurrent] = useState(''); const [previous, setPrevious] = useState(null); const [operator, setOperator] = useState(null); const clear = () => { setCurrent(''); setPrevious(null); setOperator(null); }; const sign = () => { setCurrent(current.charAt(0) === '-' ? current.slice(1) : `-${current}`); }; const percent = () => { setCurrent(String(parseFloat(current) / 100)); }; const append = (num) => { if (operator && current === previous) { setCurrent(num); } else { setCurrent(current + num); } }; const chooseOperator = (op) => { if (current === '') return; if (previous !== null) { calculate(); } else { setPrevious(current); } setOperator(op); }; const calculate = () => { if (previous === null || operator === null) return; const currentNumber = parseFloat(current); const previousNumber = parseFloat(previous); let result = ''; switch (operator) { case '+': result = previousNumber + currentNumber; case '-': result = previousNumber - currentNumber; case '*': result = previousNumber * currentNumber; case '/': result = previousNumber / currentNumber; default: return; } setCurrent(String(result)); setPrevious(null); setOperator(null); }; return ( <div className="calculator"> <div className="display">{current || '0'}</div> <div className="row"> <button className="button" onClick={clear}>C</button> <button className="button" onClick={sign}>±</button> <button className="button" onClick={percent}>%</button> <button className="button" onClick={() => chooseOperator('/')}>÷</button> </div> <div class="row"> <button class="button" onClick={() => append('7')}>7</button> <button class="button" onClick={() => append('8')}>8</button> <button class="button" onClick={() => append('9')}>9</button> <button class="button" onClick={() => chooseOperator('*')}>x</button> </div> <div class="row"> <button class="button" onClick={() => append('4')}>4</button> <button class="button" onClick={() => append('5')}>5</button> <button class="button" onClick={() => append('6')}>6</button> <button class="button" onClick={() => chooseOperator('-')}>-</button> </div> <div class="row"> <button class="button" onClick={() => append('1')}>1</button> <button class="button" onClick={() => append('2')}>2</button> <button class="button" onClick={() => append('3')}>3</button> <button class="button" onClick={() => chooseOperator('+')}>+</button> </div> <div className="row"> <button className="button" onClick={() => append('0')}>0</button> <button className="button" onClick={() => append('.')}>.</button> <button className="button" onClick={calculate}>=</button> </div> </div> ); }; ReactDOM.render(<Calculator />, document.getElementById('App')); </script> </body> </html>