第八节，改变元素css,设置定时器

来源：互联网发布：div css模板源码编辑：程序博客网时间：2024/05/22 12:16

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="./js/react.js"></script>
<script src="./js/react-dom.js"></script>

<script src="./js/browser.min.js"></script>

</head>
<body>
<div id="ex1"></div>
<script type="text/babel">
let Animates = React.createClass({
//ceateClass创建的类，首字母必须大写例如 HelloMessage
//let是ECMA6的声明变量，用它所声明的变量，只在let命令所在的代码块内有效。
getInitialState(){
//getInitialState 是系统固定方法，不能变更
//用于设置 this.state 内的初始属性
return {
opacity : 1.0,
}
},
componentDidMount(){
//componentDidMount 是系统固定方法，不能变更
//用于已插入真实 DOM之后的操作

this.timer = setInterval(function(){
//设置一个定时器
var opacity = this.state.opacity; //获取透明度
opacity -= 0.05; //透明度递减
if(opacity <= 0.1){ //当透明度少于等于0.01时，重新赋值 1
opacity = 1;
}
this.setState({ //设置this.state.opacity 透明度
opacity : opacity,
});

}.bind(this),100);
//注意setinterval()方法中，回调函数一定要加.bind(this)方法,把定时器绑定到dom对象中
},
render(){
return (
//设置内嵌css opacity
<div style={{opacity : this.state.opacity}}>
hello {this.props.name}
</div>
);
}
});

ReactDOM.render(
<Animates name="world" />,
document.getElementById('ex1')
);
</script>
</body>
</html>

0 0