React Live Clock AM PM 大写字母不可见
React Live Clock AM PM in caps is not visible
我正在使用 React Live 时钟并尝试使用 AM/PM 模式,但输出很小,显示如下 enter image description here
时间格式 = 'h:mm:ss A';
如果您正在使用 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 文件了解有关如何在本地克隆和启动应用程序的详细信息。
祝你好运!
您可以添加一个功能,将要更改的日期和 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>
从 '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 时钟并尝试使用 AM/PM 模式,但输出很小,显示如下 enter image description here
时间格式 = 'h:mm:ss A';
如果您正在使用 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 文件了解有关如何在本地克隆和启动应用程序的详细信息。
祝你好运!
您可以添加一个功能,将要更改的日期和 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>
从 '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;