js jq 按钮开始/停止转换

最新推荐文章于 2023-09-02 02:02:23 发布

原创最新推荐文章于 2023-09-02 02:02:23 发布 · 5.1k 阅读

8 ·

CC 4.0 BY-SA版权

JavaScript 专栏收录该内容

15 篇文章

订阅专栏

本文介绍如何使用纯JavaScript和jQuery实现按钮的状态切换功能，通过更改按钮的显示文本在“开始”和“停止”之间进行切换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

按钮前是开始，按下是停止，再按下又变回开始

先在body写一个botton

<button id="btn">开始</button>

用js代码实现

var btn = document.getElementById("btn");
var isGo = false;  //开始停止的标志
		
btn.onclick = function(){
			
	if(isGo) {
		btn.innerHTML="开始";
	} else {
		btn.innerHTML="停止";
	}
			
	isGo = !isGo;  //按钮冲突改变
};

用jq代码实现

<script src="js/jquery.min.js" type="text/javascript"></script>

$(function(){
			
	var isGo2 = false;  //开始停止的标志
			
	$("#btn2").click(function(){
		if(isGo2) {
			$(this).html("开始");
		} else {
			$(this).html("停止");
		}
		isGo2 = !isGo2;	
	});
	
});