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

野性酷女 2022-09-26 02:37 168阅读 0赞

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、实现结果

![Image 1][]

[Image 1]:

发表评论取消回复

表情：

评论列表（有 0 条评论，168人围观）

还没有评论，来说两句吧...

相关阅读

相关 React入门学习小案例之番茄计时器与温度控制 App

番茄计时器首先搭建工程 npx create-react-app demoname 在 src 目录下新建 components ，新建一个 Timer.j

忘是亡心i/ 2022年12月10日 10:07/ 0 赞/ 81 阅读

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

1、问题背景利用React实现一个计时器的效果，改变时间为1s 2、实现源码 <!DOCTYPE html> <html>

野性酷女/ 2022年09月26日 02:37/ 0 赞/ 169 阅读

相关 React 入门实例教程

现在最热门的前端框架，毫无疑问是 [React][] 。上周，基于 React 的 [React Native][] 发布，结果一天之内，就获得了 5000 颗星，受瞩目程

痛定思痛。/ 2022年07月17日 03:37/ 0 赞/ 189 阅读

相关 React 入门实例教程

作者： [阮一峰][Link 1] 日期： [2015年3月31日][2015_3_31] 现在最热门的前端框架，毫无疑问是 [React][] 。上周，基于 Reac

心已赠人/ 2022年07月16日 08:10/ 0 赞/ 189 阅读

相关 React_Flux入门实例

Flux 架构入门实例过去一年中，前端技术大发展，最耀眼的明星就是React。本文参考的是阮大神的实例。加上自己的一些理解。React 本身只涉及UI层，如果搭建大型应

小咪咪/ 2022年07月12日 04:56/ 0 赞/ 161 阅读

相关 React 入门实例教程

作者： [阮一峰][Link 1] 日期： [2015年3月31日][2015_3_31] 现在最热门的前端框架，毫无疑问是 [React][] 。上周，基于 Reac

比眉伴天荒/ 2022年07月11日 05:41/ 0 赞/ 170 阅读

相关 js简单计时器

js代码： <script type="text/javascript"> setInterval(function()\{ v

谁借莪１个温暖的怀抱￠/ 2022年06月18日 11:49/ 0 赞/ 179 阅读

相关 React 入门实例教程

现在最热门的前端框架，毫无疑问是 [React][] 。上周，基于 React 的 [React Native][] 发布，结果一天之内，就获得了 5000 颗星，受瞩目程

柔情只为你懂/ 2022年06月16日 03:49/ 0 赞/ 182 阅读

相关 React 入门实例教程

现在最热门的前端框架，毫无疑问是 [React][] 。上周，基于 React 的 [React Native][] 发布，结果一天之内，就获得了 5000 颗星，受瞩目程

骑猪看日落/ 2022年06月12日 21:11/ 0 赞/ 171 阅读

相关 Redux之react-redux简单项目入门

一：效果图 ![70][] 二：目录结构注意：已经安装了react官方脚手架（进行修改） ![70 1][] 三：相关代码

一时失言乱红尘/ 2022年05月20日 02:05/ 0 赞/ 173 阅读