月度归档： 2024 年 9 月

import React, { useState, useEffect } from 'react';
import styled from 'styled-components';

const ClockContainer = styled.div`
  width: 200px;
  height: 200px;
  border: 8px solid #333;
  border-radius: 50%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: white;
`;

const Hand = styled.div`
  position: absolute;
  bottom: 50%;
  left: 50%;
  background: #333;
  transform-origin: bottom;
  transition: transform 0.5s ease-in-out;

  &.hour {
    height: 50px;
    width: 6px;
    background: black;
  }

  &.minute {
    height: 70px;
    width: 4px;
    background: gray;
  }

  &.second {
    height: 90px;
    width: 2px;
    background: red;
  }
`;

const Center = styled.div`
  position: absolute;
  width: 14px;
  height: 14px;
  background: black;
  border-radius: 50%;
`;

const Number = styled.div`
  position: absolute;
  font-size: 16px;
  font-weight: bold;
  color: black;
`;

const Clock = () => {
  const [secondCounts, setSecondCounts] = useState(0);
  const [minuteCounts, setMinuteCounts] = useState(0);
  const [hourCounts, setHourCounts] = useState(0);
  const [time, setTime] = useState(new Date());

  useEffect(() => {
    const interval = setInterval(() => {
      setTime(new Date());
    }, 1000);

    return () => clearInterval(interval);
  }, []);

  const formatTime = (date) => {
    const hours = date.getHours() % 12;
    const minutes = date.getMinutes();
    const seconds = date.getSeconds();
    return { hours, minutes, seconds };
  };

  const { hours, minutes, seconds } = formatTime(time);

  useEffect(() => {
    if(seconds === 0){
      setSecondCounts((secondCounts)=> secondCounts + 1);
    }

    if(minutes === 0 && seconds === 0){
      setMinuteCounts((minuteCounts)=> minuteCounts + 1);
    }

    if(hourCounts === 0 && minutes === 0 && seconds === 0){
      setHourCounts((hourCounts)=> hourCounts + 1);
    }
  }, [hours, minutes, seconds]);

  const renderNumbers = () => {
    const numbers = Array.from({ length: 12 }, (_, index) => index + 1);
    return numbers.map((number) => {
      const angle = (number * 30) - 90; // 计算数字位置
      const x = 80 * Math.cos((angle * Math.PI) / 180);
      const y = 80 * Math.sin((angle * Math.PI) / 180);
      return (
        <Number key={number} style={{ transform: `translate(${x}px, ${y}px)` }}>
          {number}
        </Number>
      );
    });
  };

  return (
    <ClockContainer>
      {renderNumbers()}
      <Hand className="hour" style={{ transform: `rotate(${(hours * 30) + (minutes / 2) + hourCounts * 360}deg)` }} />
      <Hand className="minute" style={{ transform: `rotate(${minutes * 6 + minuteCounts * 360}deg)` }} />
      <Hand className="second" style={{ transform: `rotate(${seconds * 6 + secondCounts * 360}deg)` }} />
      <Center />
    </ClockContainer>
  );
};

export default Clock;

这个流程图描述了一个简单的数学计算过程。

1. 开始：开始节点。
2. 输入：输入两个数（1/5 和 1/3）。
3. 相加：计算这两个数的和。
4. 判断：判断和是否大于 3。
   • 如果是：
     • 减去 3/4：从和中减去 3/4。
     • 输出结果：输出结果。
   • 如果否：
     • 输出结果：直接输出和。
5. 结束：结束节点。

代码

const Fraction = require('fraction.js');

function calculateAndAdjust(num1, num2) {
  const sum = new Fraction(num1).add(new Fraction(num2));
  if (sum.compare(3) > 0) {
    return sum.sub(new Fraction(3, 4));
  }
  return sum;
}

// 示例调用
const result = calculateAndAdjust(1 / 5, 1 / 3);
console.log(result.toFraction());

结果

8/15

解释

这个代码片段使用了 fraction.js 库来处理分数运算。首先，它将输入的两个数转换为分数，然后计算它们的和。如果和大于 3，则从和中减去 3/4。最后，输出结果。

注意

• 请确保在运行代码之前安装了 fraction.js 库。
• 这个代码片段假设输入的数是有效的，没有进行错误处理。在实际应用中，可能需要添加错误处理逻辑。

• ERROR 1524 (HY000): Plugin 'mysql_native_password' is not loaded

https://github.com/Homebrew/homebrew-core/issues/180498

MySQL 9 不再支持 mysql_native_password 认证方法，这可能会影响从 MySQL 8.x 升级到 MySQL 9 的用户。为了解决此问题，您需要更新 MySQL 用户表，使用新的认证方法。按照以下步骤操作：

1.- 禁用权限表：
编辑 MySQL 配置文件，通常位于 /opt/homebrew/etc/my.cnf。在 [mysqld] 部分下添加以下行以禁用权限表：

[mysqld]
skip-grant-tables

2.- 重启 MySQL：
使用 Homebrew 重启 MySQL：

brew services restart mysql

3.- 以 root 用户连接 MySQL：

mysql -uroot

4.- 更新用户认证方法：
刷新权限：

FLUSH PRIVILEGES;

5.- 检查使用 mysql_native_password 插件的用户：

SELECT User, Host, plugin FROM mysql.user WHERE plugin = 'mysql_native_password';

6.- 将 root 用户更新为使用 caching_sha2_password 插件：

ALTER USER 'root'@'localhost' IDENTIFIED WITH caching_sha2_password BY 'new_password';

7.- 重新启用权限表：
更新后，删除或注释掉 MySQL 配置文件中的 skip-grant-tables 行。

8.- 重启 MySQL 以应用更改：

brew services restart mysql

通过执行这些步骤，您应该能够在升级到 MySQL 9 后解决认证方法问题。

• err_mysqlConnect: Error: ER_NOT_SUPPORTED_AUTH_MODE: Client does not support authentication protocol requested by server; consider upgrading MySQL client

https://stackoverflow.com/questions/50093144/mysql-8-0-client-does-not-support-authentication-protocol-requested-by-server

使用 npm 安装 mysql2：
https://github.com/sidorares/node-mysql2