zoukankan      html  css  js  c++  java
  • React之简单入门实例(计时器)

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

     

  • 相关阅读:
    C++---const
    qt--textEdit多行文本编辑框
    qt--QByteArray字节数组
    qt5--拖放
    qt5--自定义事件与事件的发送
    qt5--键盘事件
    qt5--鼠标事件
    qt5-事件过滤器
    qt5-event事件的传递
    qt-事件的接受和忽略
  • 原文地址:https://www.cnblogs.com/hzcya1995/p/13314062.html
Copyright © 2011-2022 走看看