React Live Clock AM PM 大写字母不可见

Question

我正在使用 React Live 时钟并尝试使用 AM/PM 模式，但输出很小，显示如下 enter image description here

时间格式 = 'h:mm:ss A';

Answer 1

如果您正在使用 react-live-clock, you can set the style attribute as described here。

例如以下设置：

<Clock style={{fontSize: '10.5em'}}  format={'h:mm:ss A'} ticking={true} timezone={'US/Pacific'} />

生成了这个视图：

注：

我将示例项目上传到我的 github 存储库 here；

按照 README.MD 文件了解有关如何在本地克隆和启动应用程序的详细信息。

祝你好运！

Answer 2

您可以添加一个功能，将要更改的日期和 A 和 P 分别格式化为 AM 和 PM。

var WithoutFormattingA = "8:11:35 A";
var WithoutFormattingP = "8:11:35 P";

function formatDate(unformattedDate) {
    var timeOfDay = unformattedDate.substr(unformattedDate.length - 1)

    if(timeOfDay === 'A' || timeOfDay === 'P') {
        return unformattedDate + "M";
    } else {
        return "Invalid date format.";
    }
}

ReactDOM.render(
  <div>
    <div>Formatted {WithoutFormattingA} to {formatDate(WithoutFormattingA)}</div>
    <div>Formatted {WithoutFormattingP} to {formatDate(WithoutFormattingP)}</div>
  </div>,
  document.getElementById("react")
);

<div id="react"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

Answer 3

从 'react';

导入 React, { useEffect, useState }

const WeatherApp = () => { const [time, setTime] = useState(new Date());

useEffect(() => {

var timer = setInterval(() => setTime(new Date()), 1000);

return function cleanup() {

  clearInterval(timer);

};

});

return ( <>

  <h3 style={{ paddingTop: '5px', fontSize: '5rem' }}>

    {time.getHours() >= 12 ? (

      <>
        {time.getHours() > 12 ? (

          <>

            {time.getHours() - 12 < 10 ? (

              <>0{time.getHours() - 12}</>

            ) : (
              <>{time.getHours() - 12}</>

            )}

          </>

        ) : (

          <>{time.getHours()}</>

        )}

        :

        {time.getMinutes() < 10 ? (

          <>0{time.getMinutes()}</>

        ) : (

          <>{time.getMinutes()}</>
        )}

        :

        {time.getSeconds() < 10 ? (

          <>0{time.getSeconds()}</>

        ) : (

          <>{time.getSeconds()}</>

        )}{' '}

        {time.getHours() >= 12 && time.getHours() < 24 ? (

          <>
            <sub style={{ fontSize: '20px' }}>PM</sub>
          </>
        ) : (
          <>
            <sub style={{ fontSize: '20px' }}>AM</sub>
          </>
        )}
      </>
    ) : (
      <>
        {time.getHours() < 10 ? (
          <>{time.getHours()}</>
        ) : (
          <>{time.getHours()}</>
        )}
        :
        {time.getMinutes() < 10 ? (
          <>0{time.getMinutes()}</>
        ) : (
          <>{time.getMinutes()}</>
        )}
        :
        {time.getSeconds() < 10 ? (
          <>0{time.getSeconds()}</>
        ) : (
          <>{time.getSeconds()}</>
        )}
        <sub style={{ fontSize: '20px' }}>AM</sub>
      </>
    )}
  </h3>
</>

); };

导出默认 WeatherApp；

React Live Clock AM PM 大写字母不可见

React Live Clock AM PM in caps is not visible

reactjs

clock

live