0312 腾讯 前端实习 计费平台 一面

  1. 怎么实现的性能优化
  2. 浏览器垃圾回收
  3. promise实现网络请求最大量限制怎么做的
  4. http自带限制最大量
  5. http1和http2还有什么区别
  6. 怎么用的防抖节流
  7. 响应式窗口调整怎么做的

代码:

  1. 数字加千分位(正则)
  2. 计算器问题,显示不了,结果无穷大,...
<!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>

全部评论

相关推荐

评论
3
9
分享

创作者周榜

更多
牛客网
牛客企业服务