{"id":93,"date":"2024-09-30T14:41:56","date_gmt":"2024-09-30T06:41:56","guid":{"rendered":"https:\/\/www.erishen.cn\/wordpress\/?p=93"},"modified":"2024-09-30T14:41:56","modified_gmt":"2024-09-30T06:41:56","slug":"%e4%bd%bf%e7%94%a8-styled-components-%e5%ae%9e%e7%8e%b0%e5%b8%a6%e6%9c%89%e5%8a%a8%e6%80%81%e7%a7%92%e9%92%88%e7%9a%84%e5%9c%86%e7%9b%98%e6%97%b6%e9%92%9f%e7%9a%84%e7%a4%ba%e4%be%8b","status":"publish","type":"post","link":"https:\/\/erishen.cn\/?p=93","title":{"rendered":"\u4f7f\u7528 styled-components \u5b9e\u73b0\u5e26\u6709\u52a8\u6001\u79d2\u9488\u7684\u5706\u76d8\u65f6\u949f\u7684\u793a\u4f8b"},"content":{"rendered":"<div class=\"code-toolbar\"><pre data-toolbar-order=\"copy\" data-prismjs-copy><code class=\"language-typescript\">import React, { useState, useEffect } from &#39;react&#39;;\nimport styled from &#39;styled-components&#39;;\n\nconst ClockContainer = styled.div`\n  width: 200px;\n  height: 200px;\n  border: 8px solid #333;\n  border-radius: 50%;\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: white;\n`;\n\nconst Hand = styled.div`\n  position: absolute;\n  bottom: 50%;\n  left: 50%;\n  background: #333;\n  transform-origin: bottom;\n  transition: transform 0.5s ease-in-out;\n\n  &amp;.hour {\n    height: 50px;\n    width: 6px;\n    background: black;\n  }\n\n  &amp;.minute {\n    height: 70px;\n    width: 4px;\n    background: gray;\n  }\n\n  &amp;.second {\n    height: 90px;\n    width: 2px;\n    background: red;\n  }\n`;\n\nconst Center = styled.div`\n  position: absolute;\n  width: 14px;\n  height: 14px;\n  background: black;\n  border-radius: 50%;\n`;\n\nconst Number = styled.div`\n  position: absolute;\n  font-size: 16px;\n  font-weight: bold;\n  color: black;\n`;\n\nconst Clock = () =&gt; {\n  const [secondCounts, setSecondCounts] = useState(0);\n  const [minuteCounts, setMinuteCounts] = useState(0);\n  const [hourCounts, setHourCounts] = useState(0);\n  const [time, setTime] = useState(new Date());\n\n  useEffect(() =&gt; {\n    const interval = setInterval(() =&gt; {\n      setTime(new Date());\n    }, 1000);\n\n    return () =&gt; clearInterval(interval);\n  }, []);\n\n  const formatTime = (date) =&gt; {\n    const hours = date.getHours() % 12;\n    const minutes = date.getMinutes();\n    const seconds = date.getSeconds();\n    return { hours, minutes, seconds };\n  };\n\n  const { hours, minutes, seconds } = formatTime(time);\n\n  useEffect(() =&gt; {\n    if(seconds === 0){\n      setSecondCounts((secondCounts)=&gt; secondCounts + 1);\n    }\n\n    if(minutes === 0 &amp;&amp; seconds === 0){\n      setMinuteCounts((minuteCounts)=&gt; minuteCounts + 1);\n    }\n\n    if(hourCounts === 0 &amp;&amp; minutes === 0 &amp;&amp; seconds === 0){\n      setHourCounts((hourCounts)=&gt; hourCounts + 1);\n    }\n  }, [hours, minutes, seconds]);\n\n  const renderNumbers = () =&gt; {\n    const numbers = Array.from({ length: 12 }, (_, index) =&gt; index + 1);\n    return numbers.map((number) =&gt; {\n      const angle = (number * 30) - 90; \/\/ \u8ba1\u7b97\u6570\u5b57\u4f4d\u7f6e\n      const x = 80 * Math.cos((angle * Math.PI) \/ 180);\n      const y = 80 * Math.sin((angle * Math.PI) \/ 180);\n      return (\n        &lt;Number key={number} style={{ transform: `translate(${x}px, ${y}px)` }}&gt;\n          {number}\n        &lt;\/Number&gt;\n      );\n    });\n  };\n\n  return (\n    &lt;ClockContainer&gt;\n      {renderNumbers()}\n      &lt;Hand className=&quot;hour&quot; style={{ transform: `rotate(${(hours * 30) + (minutes \/ 2) + hourCounts * 360}deg)` }} \/&gt;\n      &lt;Hand className=&quot;minute&quot; style={{ transform: `rotate(${minutes * 6 + minuteCounts * 360}deg)` }} \/&gt;\n      &lt;Hand className=&quot;second&quot; style={{ transform: `rotate(${seconds * 6 + secondCounts * 360}deg)` }} \/&gt;\n      &lt;Center \/&gt;\n    &lt;\/ClockContainer&gt;\n  );\n};\n\nexport default Clock;\n<\/code><\/pre><\/div>\n","protected":false},"excerpt":{"rendered":"<p>import React, { useState, useEffect } from &#39;react&#038;# [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-93","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/erishen.cn\/index.php?rest_route=\/wp\/v2\/posts\/93","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/erishen.cn\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/erishen.cn\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/erishen.cn\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/erishen.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=93"}],"version-history":[{"count":0,"href":"https:\/\/erishen.cn\/index.php?rest_route=\/wp\/v2\/posts\/93\/revisions"}],"wp:attachment":[{"href":"https:\/\/erishen.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=93"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/erishen.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=93"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/erishen.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=93"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}