React-CSS修改仪表盘

臧小川

已于 2022-02-23 14:45:38 修改

阅读量489

点赞数

分类专栏： react 文章标签： react.js css javascript

于 2022-02-23 14:45:16 首次发布

臧小川

本文链接：https://blog.csdn.net/chuan0106/article/details/123089808

版权

react 专栏收录该内容

112 篇文章 6 订阅

订阅专栏

该博客介绍了一个使用React实现的动态旋转组件，通过 useState 和 useEffect 更新状态并改变图片旋转角度。同时，文章展示了如何结合按钮点击事件改变旋转次数，提供了一个简单的用户交互功能。

摘要由CSDN通过智能技术生成

效果图

在这里插入图片描述

JS

import React, { useEffect, useState, Fragment } from 'react';
import styles from './style.less'
import z from '@/assets/deg/c.png';

const index = () =>
{
    const [count, setCount] = useState(3)
    const strData = '1,2,3,4,5,6,7'
    let a = strData.split(',')
    useEffect(() =>
    {
        let timer = setInterval(() =>
        {
            setCount(count => count + 1)
        }, 1000)
        return () =>
        {
            clearInterval(timer)
        }
    }, [])
    const btnClick = (data) =>
    {
        setCount(parseInt(data))
    }
    return (
        <Fragment>
            <div className={styles.center}>
                <div id="dashboard" className={styles.centerLeft}>
                    <img
                        src={z}
                        className={styles.age}
                        style={{ transform: `rotate(${(count / 7) * 180 - 90}deg)` }}
                    />
                    <span className={styles.dashboard}>ERR {count}</span>
                </div>
            </div>
            <div className={styles.btnBox}>
                {a.map((data, index) => (
                    <button onClick={() => { btnClick(data) }} key={index}>{data}</button>
                ))}
            </div>
        </Fragment>
    );
};
export default index

CSS

.center {

  .centerLeft {
    width: 262px;
    height: 158px;
    margin: 59px 0px 0px 55px;
    background: url('~@/assets/deg/z1.png') no-repeat center center;
    background-size: 100% 100%;
    position: relative;
    // background-color: pink;
  }

  .age {
    width: 16px;
    height: 99px;
    position: absolute;
    left: calc(~'50% - 8px');
    bottom: 0;
    transform-origin: center bottom;
    transform: rotate(-90deg);
    transition: 1s linear;
  }

  .dashboard {
    position: absolute;
    left: calc(~'50% - 44px');
    bottom: -30px;
    font-size: 24px;
    font-family: SourceHanSansSC;
    font-weight: 500;
    color: #AFC6E4;
  }
}

.btnBox {
  margin: 100px;
}