React实现按钮控制倒计时

来源：互联网发布：摄影网络教学编辑：程序博客网时间：2024/06/05 19:01

<!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>

阅读全文

1 0