Day11 小实作-数字时钟

使用 React useState Hook 创建数字时钟

https://ithelp.ithome.com.tw/upload/images/20210926/20139800LrFlfY1LiZ.png

import React, {useState} from 'react';
import meal05 from "./assets/images/time.png"; 


const App = () => {

  let time = new Date().toLocaleTimeString('en-US');
  const[atime,setAtime] = useState(time);

  const UpdateTime = ()=>{

    time = new Date().toLocaleTimeString('en-US');
    setAtime(time);
  }

    setInterval(UpdateTime,5000)

  return (
    <div>
<section className="home" >

     <div className="image">
         <img src={meal05} alt=""></img>
     </div>

     <div className="content">      
         
         <h3> {atime} </h3> 

     </div>
</section>     
     </div>   
  
  )
}

export default App

<<:  让按钮来个酷动态!操纵DOM事件:JavaScript篇 (二)

>>:  WordPress 如何关闭 XML-RPC 服务,避免资安攻击风险

仿Trello - Apollo client cache 操作

本系列文以制作专案为主轴,纪录小弟学习React以及GrahQL的过程。主要是记下重点步骤以及我觉...

【把玩Azure DevOps】Day3 Organization与Projects

首先,在网址列输入dev.azure.com这个网址,如果已经是有登入Microsoft Accou...

TypeScript 能手养成之旅 Day 11 明文型别(Literal Types)

前言 明文型别(Literal Types),一开始看到这个名词,真的不是很好懂,不过实际去了解後,...

Day2React安装方式简介

安装方式 根据官网介绍,本次铁人赛会着重介绍下列三种安装方式: CDN连结 快速建立react环境的...

[Day12 - React Native] 为你的 APP 加入 icon - Android

接下来要为 Android App 加上 icon,回到 icon 的资料夹: Android 点进...