React实现按钮控制倒计时

最新推荐文章于 2024-07-09 15:10:07 发布

只要塔山

最新推荐文章于 2024-07-09 15:10:07 发布

阅读量2.7k

点赞数 1

分类专栏：其他

本文链接：https://blog.csdn.net/zhangcc233/article/details/77466050

版权

其他专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
<script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
<script
src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var LikeButton = React.createClass({
getInitialState: function(){
return {
count: 30,
liked: true,
flag:true,
stop:true,
};
},
handleClick: function(){
clearInterval(this.timer);
this.state.stop=false;
this.state.flag = !this.state.flag;

if (this.state.flag) {
this.setState({
liked:true,
count: this.state.count
});
}else{
if(this.state.liked){
this.timer = setInterval(function () {
var count = this.state.count;
this.state.liked = false;
count -= 1;
if (count < 1) {
this.setState({
liked: true
});
count = 30;
　　　　　　　　clearInterval(this.timer);
}
this.setState({
count: count
});
}.bind(this), 1000);
}
}

},
render: function(){

var text = this.state.stop ? '点击开始计时' : this.state.count + '秒';
return(
<p>
<button onClick={this.handleClick}>{text}</button>
</p>
)}
});

ReactDOM.render(
<LikeButton />,
document.getElementById('example')
);
</script>
</body>
</html>