数字时钟与搜索框

4.0

2025/3/31

zh网页设计数字时钟搜索框网页设计

提示语

数字时钟和搜索框

生成结果

import React, { useState, useEffect } from 'react';

const App = () => {
  const [time, setTime] = useState(new Date());
  const [searchQuery, setSearchQuery] = useState('');

  useEffect(() => {
    const timerID = setInterval(() => tick(), 1000);
    return () => clearInterval(timerID);
  }, []);

  const tick = () => {
    setTime(new Date());
  };

  const handleSearchChange = (event) => {
    setSearchQuery(event.target.value);
  };

  const handleSearchSubmit = (event) => {
    event.preventDefault();
    alert(`You searched for: ${searchQuery}`);
    setSearchQuery('');
  };

  return (
    <div className='min-h-screen bg-gradient-to-br from-blue-500 to-purple-600 flex flex-col items-center justify-center space-y-8 p-4'>
      <div className='text-white text-6xl font-bold'>
        {time.toLocaleTimeString()}
      </div>
      <form onSubmit={handleSearchSubmit} className='w-full max-w-md'>
        <input
          type='text'
          value={searchQuery}
          onChange={handleSearchChange}
          placeholder='Search something...'
          className='w-full px-4 py-2 rounded-lg bg-white bg-opacity-20 backdrop-blur-md border border-white border-opacity-30 focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-50 placeholder-white placeholder-opacity-70 text-white'
        />
      </form>
    </div>
  );
};

export default App;

Open Sandbox

更多推荐

查看全部

交互式元素周期表

网页设计zh

4.0

Create a website for me using a single HTML code so I can place it on my Google Blogger blog. The name of the website is " Interactive Periodic Table " Create this website for me based on the following instructions, descriptions, and recommendations: using this website, user can Explores the elements that make up our world. The periodic table is arranged based on atomic number, electron configuration, and recurring chemical properties. the user Clicks on any element to discover detailed information. The user Downloads easily the result on his device. The site must be responsive and provide users with the ability to enter information and download results easily, quickly, and conveniently. Please add a reset button to restore the site to its original state. When writing the website code, please optimize the website's appearance to make it as professional as possible, advanced, responsive, and compatible with various devices. please display a RESET BUTTON. Be creative in choosing shapes, colors, and fonts, all of which must be professional, artistic, and attractive so that the website can meet the competition. please use only english language.

HTML代码响应式设计元素周期表2025/6/20

专业作品集网站

网页设计en

4.0

create a detailed,uniique beautiful professional portfolio sample website

作品集网站设计专业展示2025/4/4

旅游网站落地页设计

网页设计en

4.0

create a landing page for a tourism website of a destination

旅游网站设计目的地2025/4/4

获奖照片弹窗设计

网页设计zh

4.0

生成一个获奖照片弹窗，要求动态展示

弹窗设计动态展示获奖照片2025/4/2

国风倒计时页面设计

网页设计zh

4.0

创建一个包含侧边栏的国风倒计时或纪念日页面

国风设计倒计时页面纪念日页面2025/4/2

打造终极书店网站

网页设计zh

4.0

Create an a bookstore website that shows books in different categories with short descriptions and a picture of the book and a summery button and get button that goes to WhatsApp account with number +967772492426 make the design best design ever with using Tailwind, do your best and add any features you thing it will be perfect for the idea

书店网站Tailwind设计WhatsApp集成2025/4/1