利用定时器写一个协议按钮禁用，渐变

最新推荐文章于 2025-07-26 15:37:19 发布

转载最新推荐文章于 2025-07-26 15:37:19 发布 · 134 阅读

js 专栏收录该内容

38 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现在一定时间内禁用按钮的方法，并展示了如何通过修改透明度来实现元素的渐变效果。涉及到的技术包括HTML、CSS和JavaScript，特别关注了定时器的使用和DOM操作。

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

协议按钮禁

	<textarea rows="50" cols="50">我是通过cols和rows定的大小，我的cols是20，rows是10</textarea> 
	<input type="button" id="btn" value="请仔细阅读协议（5）" disabled="disabled"/><!--disabled禁止点击-->
	<script>
		var time=5;
		var timeId=setInterval(function(){
			if(time<=0){
				setTimeout(timeId);	
				my$("btn").value="同意";
				my$("btn").disabled=false;
			}else{
				time--;
				my$("btn").value="请仔细阅读协议（"+time+"）";
			}				
		},1000);
	</script>
<div id="dv">
		<style>
			#dv{
				height: 200px;
				widows: 200px;
				background-color: pink;
			}
		</style>
	</div>
	<input type="button" value="渐变" id="btn" />
	<script>

渐变

		my$("btn").onclick=function(){
			var opa=10;	//透明度	尽量不要将其定义为小数，因为小数的加减可能会出现错误		
			var timeId=setInterval(function(){
				opa--;
				if(opa<0){
					clearInterval(timeId);
				}else{
					my$("dv").style.opacity=opa/10;
				}					
			},80);
		}
	</script>