react点击按钮控制背景透明度的开始变化和停止变化

最新推荐文章于 2023-10-31 14:34:24 发布

reg183

最新推荐文章于 2023-10-31 14:34:24 发布

阅读量512

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/chendongpu/article/details/115724744

版权

前端专栏收录该内容

255 篇文章 3 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
 
<div id="example"></div>
<script type="text/babel">
class Hello extends React.Component {
 
 constructor(props) {
     super(props);
     this.state = {opacity: 1.0,flag:true};
 }

 componentDidMount() {
   this.timer = setInterval(function () {
     var opacity = this.state.opacity;
     opacity -= .05;
     if (opacity < 0.1) {
       opacity = 1.0;
     }
     this.setState({
       opacity: opacity
     });
   }.bind(this), 100);
 }

 toggle=()=>{
     if(this.state.flag){
        this.setState({flag:false});
        clearInterval(this.timer);
        console.log("timer:",this.timer);
     }else{
        this.setState({flag:true});
        this.timer = setInterval(function () {
            var opacity = this.state.opacity;
            opacity -= .05;
            if (opacity < 0.1) {
            opacity = 1.0;
            }
            this.setState({
            opacity: opacity
            });
        }.bind(this), 100);
     }
 }

 render () {
   return (
     <div style={{opacity: this.state.opacity}}>
       Hello {this.props.name}
       <button onClick={this.toggle}>{this.state.flag?"停止":"开始"}</button>
      
     </div>
   );
 }
}

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

reg183

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
2
评论
react点击按钮控制背景透明度的开始变化和停止变化

<!DOCTYPE html><html><head><meta charset="UTF-8" /><title>Hello React!</title><script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script><script src="https://cdn.stati...
复制链接

扫一扫