个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我想在浏览器上呈现数字时钟，我不知道在脚本中的什么地方使用 setInterval() 函数，也不知道用作第一个参数的函数名称是什么。
<!DOCTYPE html>
<html>
<head>
<title>My First App</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script>
</head>
<body>
<div id="react-app"></div>
<div id="clock-box"></div>
<script src="https://cdn.jsdelivr.net/react/0.14.0-rc1/react.js"></script>
<script src="https://cdn.jsdelivr.net/react/0.14.0-rc1/react-dom.js"></script>
<script type="text/jsx">
class StoryBox extends React.Component{
render(){
return(<div> Hello World </div> );
}
}
var target= document.getElementById('react-app');
var clockTarget=document.getElementById('clock-box');
ReactDOM.render(<StoryBox/>,target)
class ClockFunction extends React.Component{
render(){
return(<div>
<h1>Digital Clock</h1>
<h2>
{
new Date().toLocaleTimeString()
}
</h2>
</div>) ;
}
}
ReactDOM.render(<ClockFunction />,clockTarget);
</script>
</body>
</html>
最佳答案
为此你需要一些东西:
setInterval 来更新时间状态中的一个变量，用于跟踪时间setInterval 的安全方法这个组件会做所有这些事情:
class ClockFunction extends React.Component {
constructor() {
super();
this.state = { time: new Date() }; // initialise the state
}
componentDidMount() { // create the interval once component is mounted
this.update = setInterval(() => {
this.setState({ time: new Date() });
}, 1 * 1000); // every 1 seconds
}
componentWillUnmount() { // delete the interval just before component is removed
clearInterval(this.update);
}
render() {
const { time } = this.state; // retrieve the time from state
return (<div>
<h1>Digital Clock</h1>
<h2>
{/* print the string prettily */}
{time.toLocaleTimeString()}
</h2>
</div>);
}
}
关于javascript - 如何使用 React 显示工作中的数字时钟，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44920162/
25
4
0
我的代码如下所示: #include #include #include int main(void) { time_t loop_begin, loop_end, scanf_begi
我正在尝试制作一个游戏时钟，其中每个游戏小时都是 3 个实时分钟。但是由于某种原因，我很难将头环绕在它周围。 我想出了这个半工作位，每小时循环 3 分钟，所以它只显示完整的“游戏时间”，我在 23 以
很难找到解决方法的地方。我希望制作一个时钟，它是一个幻想时区，并且是根据系统时间计算的（因为当您不在网页上时，它需要继续运行）。 白天持续从早上7:00到晚上9:59，这是实时200分钟。 13秒（实
Template.display_time.time = function() { var date = new Date(); var hour = date.getHours();
我想做一个小测试，以测试我在远离 javascript 太久之后的技能。试图成为真正的cwleaver并创建一个时钟对象，听起来很简单。我成功地创建了时钟等，没有遇到任何问题，但在大约 20 分钟后运
我正在学习 Javascript30.com 类(class)，我们必须做一个带有秒、分和小时的 JS 时钟。这是代码: 还有 J
我有一个 Android 应用程序，用户按下开始按钮并启动一些收集数据的功能。我有一个自定义的 EditText，它显示所有这些过程所花费的时间，并且每秒更新一次，直到用户按下停止键。我使用如下所示的
我正在尝试模拟实时数据流，以测试不断过滤和计算数据点的程序。主要是我需要确保它能满足时间要求。 每 50 毫秒就会有一个新的数据点需要计算。 所以我想创建一个 java 时钟，它独立于当前在 jvm
我正在抓狂:我的 Javascript 时钟不工作。我正在使用 Firebug 来查找错误，但没有得到任何输出。 图像文件位于子文件夹 Dual_Months 和 Dual_Numbers 中。我在我
我计划构建多个计时器。我首先使用以下代码构建一个简单的时钟。 问题是，时钟将运行几分钟，网站就会崩溃，我认为这是由于内存不足。 当我console.log输出时。该命令似乎每秒运行多次。 consol
我是新来的，所以如果您对我的问题或“礼仪”有任何不妥之处，请告诉我! 我正在尝试在 Google Chrome 中创建个性化的新标签扩展程序，但出现了 JavaScript 时间码问题。虽然它在我使用
我需要编写一个带有倒计时器的 JavaScript 时钟，当到达特定时间时，该计时器开始倒计时 5 分钟。所以我有我的时钟和它的工作，但我不知道从这里到哪里去，当谈到 JavaScript 时，我真的
我开发了一个用于多线程计算的类，一个线程只使用这个类的一个实例。我还想通过从另一个线程迭代此类的容器来测量计算的持续时间。该应用程序是win32。问题是我读过 QueryPerformanceCoun
我有一个像这样的时钟: const timeContainer = document.querySelector('.timeContainer'); var showTime = (timeZone
我在 Canvas 上做了一个时钟，我实际上是在 Canvas 上从中心画线，每一秒我从中心画一条线在一个圆圈里，我最终在时钟上画了秒线。我如何清除之前绘制的线，使其看起来像一个真正的时钟。 非常感谢
我正在尝试编写一个倒计时时钟脚本。我想在未来使用一个设定的日期，并以一种易于阅读的格式倒计时。小时，分钟，秒。我要打印到 16x2 液晶显示器。我遇到的问题是试图将日期之间的差异的输出转换为一种很好的
我在计算进程的 CPU 时间的各种机制上研究了 stackoverflow 线程。 clock() 内部是如何实现的？它是否使用 rdtsc()(如果是这样，那么它对核心之间的迁移很敏感)。 此外，g
我需要在时钟上显示服务器时间。以下是我目前拥有的代码。我通过 Ajax 调用获得服务器时间。问题是，如果用户更改它的本地/计算机时钟，它也会更新脚本的时钟，这是不对的——它应该继续而不改变，我被卡住了
当我运行下面的代码时，我得到了一个值 0，有几次我确实得到了 intAddition 的值。我已经尝试了很多我在网上找到的建议，但还没有成功。我的同学向我展示了他是如何做的，这与我的非常相似。他从他的
我正在尝试使用 asm 和 rdtsc 实现我自己的 clock() 版本。但是我很不确定它的返回值。是循环吗？奥德是微秒吗？ 我也对 CLOCKS_PER_SEC 感到困惑。这怎么可能是恒定的？ 是
我是一名优秀的程序员,十分优秀！