React之简单入门实例（计时器）

最新推荐文章于 2024-04-18 10:02:41 发布
最新推荐文章于 2024-04-18 10:02:41 发布
阅读量581 收藏
点赞数
文章标签： javascript ViewUI

1、问题背景

利用React实现一个计时器的效果，改变时间为1s


2、实现源码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>React之简单入门实例（计时器）</title>
		<link rel="stylesheet" href="css/base.css" />
		<script type="text/javascript" src="js/react.js" ></script>
		<script type="text/javascript" src="js/react-dom.js" ></script>
		<script>
			var ea = React.createClass({
		        render: function() {
		          var elapsed = Math.round(this.props.elapsed  / 100);
		          var seconds = elapsed / 10 + (elapsed % 10 ? '' : '.0' );
		          var message = '开始计时：' + seconds + ' 秒';
		
		          return React.DOM.p(null, message);
		        }
		    });
		
		    var eaf = React.createFactory(ea);
		    var startTime = new Date().getTime();
		      setInterval(function() {
		        ReactDOM.render(
		          eaf({elapsed: new Date().getTime() - startTime}),document.getElementById('timer')
		        );
		    }, 1000);
		</script>
	</head>
	<body>
		<div id="timer"></div>
	</body>
</html>

3、实现结果


iteye_8264
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
React 计时器案例(模块化_组件封装)
05-09
http://blog.csdn.net/liudao7994/article/details/71480235 有图
react计时器
霍常莹的博客
10-09 663
&amp;lt;!--constructor(--&amp;gt; &amp;lt;script type=&quot;text/babel&quot;&amp;gt; class Header extends React.Component{ constructor(){ super(); this.state={ time:new Date().toLocaleTimeString()
探索React Timer Hook：一款高效、易用的时间管理利器
最新发布
gitblog_00028的博客
04-18 305
探索React Timer Hook：一款高效、易用的时间管理利器 项目地址:https://gitcode.com/amrlabib/react-timer-hook 在React开发中，我们经常需要处理计时器相关的任务，如倒计时、动画效果或者定时刷新数据等。然而，直接使用JavaScript的setInterval和clearInterval可能会导致一些问题，如生命周期管理和内存泄漏。为了...
React-计时器
Little_treasure的博客
03-23 327
import React, { Component } from 'react'; class Clock extends React.Component { constructor(props) { super(props); this.state = {date: new Date()}; } componentDidMount() { this.timerID = setInterval( () => this.
React 实现计时器
欢迎
10-18 803
React 实现计时器
React 入门实例教程
02-01
React 入门实例教程React 入门实例教程React 入门实例教程React 入门实例教程
react 入门实例
10-10
react 入门实例代码
react 计时器（毫秒级）
08-10
react 计时器（毫秒级）
React.js入门实例教程之创建hello world 的5种方式
10-22
React 是近期非常热门的一个前端开发框架。应用非常广泛，接下来通过本文给大家介绍React.js入门实例教程之创建hello world 的5种方式 ，需要的朋友参考下吧
react-timer:一个简单的React计时器组件
05-14
React计时器 react-timer是使用react的简单计时器组件。安装yarn add react - timer -- save版本号1.0.0使用React ^0.13.01.0.1使用React ^0.15.11.1.0使用React ^16.0.0用import Timer from 'react-timer'import ...
react-timer-hook:React计时器挂钩
04-17
React计时器挂钩 React timer hook是一个自定义的 ，用于处理react组件中的计时器，秒表和时间逻辑/状态。 useTimer ：计时器（倒数计时器） useStopwatch ：秒表（计时器） useTime ：时间（返回当前时间） 设置 yarn add react-timer-hook或npm install --save react-timer-hook useTimer 例子 import React from 'react' ; import { useTimer } from 'react-timer-hook' ; function MyTimer ( { expiryTimestamp } ) { const { seconds , minutes , hours , days , isRunning
秒表：React上的秒表
02-07
Create React App入门 该项目是通过。 可用脚本 在项目目录中，可以运行： npm start 在开发模式下运行应用程序。 打开在浏览器中查看它。 如果进行编辑，页面将重新加载。 您还将在控制台中看到任何棉绒错误。 npm test 在交互式监视模式下启动测试运行程序。 有关更多信息，请参见关于的部分。 npm run build 构建生产到应用程序build文件夹。 它在生产模式下正确捆绑了React，并优化了构建以获得最佳性能。 最小化构建，文件名包含哈希。 您的应用已准备好进行部署！ 有关更多信息，请参见有关的部分。 npm run eject 注意：这是单向操作。 eject ，您将无法返回！ 如果您对构建工具和配置选择不满意，则可以随时eject 。 此命令将从项目中删除单个构建依赖项。 而是将所有配置文件和传递依赖项（webpack，Babel，
react-timer-basic：一个基本的计时器，它将基于以秒为单位的时间输入开始倒计时
02-04
React Timer基础版 一个基本的计时器，它将根据以秒为单位的时间输入开始倒计时。 计时器提供启动，停止和休息功能。 当计时器的值小于等于10时，计时器的颜色变为红色。 转到进行现场演示。 组件图 该项目还演示： 典型的React项目布局结构 babel的设置和配置 Webpack设置和配置 eslint设置和配置 SCSS设置和配置 屏幕截图： ... ... 与开发 -Javascript运行时 一个用于构建用户界面JavaScript库 -JavaScript的翻译器 模块捆绑器 -CSS语言 -Bootstrap是一个开源工具包，用于使用HTML，CSS和J
Stopwatch:React中的秒表计时器
05-11
该项目是通过引导的。 您将在下面找到一些有关如何执行常见任务的信息。 您可以在找到本指南的最新版本。 目录 自动格式化代码 更改页面<title> 安装依赖项 导入组件 代码分割 添加样式表 后处理CSS 添加CSS预处理器（Sass，Less等） 添加图像，字体和文件 使用public文件夹 更改HTML 在模块系统之外添加资产 何时使用public文件夹 使用全局变量 添加引导程序使用自定义主题 增加流量 添加路由器 添加自定义环境变量 在HTML中引用环境变量 在Shell中添加临时环境变量 在.env添加开发环境变量 我可以使用装饰器吗？ 使用AJAX请求获取数据 与API后端集成 节点 Ruby on Rails 在开发中代理API请求 配置代理后出现“无效的主机头”错误 手动配置代理 配置WebSocket代理 在开发中使用HTTPS 在服务器上生成动态<met
react hook计时器
w345731923的专栏
06-28 815
import { useState, useRef } from 'react'; const Index = (props: any) => { const [nums, setNums] = useState(0); let timer = useRef(); // 点击开始 const start = () => { setNums(0) timer.current = setInterval(() => { console.log(t.
React 组件：计时器例子
Michael是个半路程序员
07-21 1313
让父组件拥有函数（在事件发生时决定采取什么行为），父组件通过props将函数传递给TimerForm。learnfrom《React全家桶前端开发与实例详解》在Timer的return最底部添加新组件。上面的计时器状态不可以保存，需要保存在服务器上。向上传递EditableTimerList。向上传递EditableTimer。这些函数作为props向下传递。本章学习的目标是做一个定时器。这些事件需要在上层结构中传递。TimerForm组件。还不能开始，删除，修改。...
react 做一个实时的日期时间计时器
weixin_40581358的博客
12-08 252
【代码】react 做一个实时的日期时间计时器。
创建自定义 React 秒表计时器组件
我的博客，不一样的自我表达
05-30 331
时间的计算方法是将时间除以每个时间单位的毫秒数。然后我们使用余数运算符%来计算时间是否可以被 60 整除（秒）、60（分钟）和 100（毫秒）。比如1分20秒就是80000毫秒所以要计算秒数我们是这样做的(80000 / 1000) % 60 = 20。我们将使用两个 React Hooks，首先useState它允许我们将状态存储在基于函数的组件中。这就是本教程的全部内容，希望它能作为您构建更复杂的基于时间的应用程序的起点。完成的秒表组件将显示分、秒和毫秒，并具有启动、停止和重置功能。
react清除计时器
10-19
在React中清除计时器可以使用clearInterval()函数。在组件中定义在React中清除计时器可以使用clearInterval()函数。在组件中定义计时器时，需要将计时器赋值给一个变量，然后在需要清除计时器的时候，使用...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值