iT邦幫忙

2023 iThome 鐵人賽

DAY 27
0
自我挑戰組

從零開始學Web Framework : React篇系列 第 27

Day_27: 在特定範圍內追蹤滑鼠

  • 分享至 

  • xImage
  •  

1.code

import React, { useState } from 'react';

const MouseTracker = () => {
  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });

  const handleMouseMove = (e) => {
    setMousePosition({ x: e.clientX, y: e.clientY });
  };

  return (
    <div
      style={{ width: '100%', height: '100vh' }}
      onMouseMove={handleMouseMove}
    >
      <h1>Mouse Tracker</h1>
      <p>Mouse X: {mousePosition.x}</p>
      <p>Mouse Y: {mousePosition.y}</p>
    </div>
  );
};

export default MouseTracker;

2.實作最近有點忙,原本想做能上傳圖片並切割的拼圖遊戲,但有點問題,只能上傳不能切割,查了一下是少了一些額外的東西需要下載才能進行切割......所以時間管理真的很重要。


上一篇
Day_26: 圖片移動由鍵盤操控
下一篇
Day_28:待辦事項列表
系列文
從零開始學Web Framework : React篇30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言