设置按钮5秒后可以点击下一步||5秒后自动关闭网页

场景：业务需要在点击拍摄的时候提示一个用户须知页面，5秒后可以点击下一步。这属于一个js计时器的功能。这里用jQuery实现一下

效果图：

html

<div style="text-align: center;">
			<input type="button" value="下一步" id="nextBtn" onclick="btnfunction()" disabled>
			<!-- <button id="nextBtn">下一步</button> -->
		</div>

css

#nextBtn{
				font-size: 0.85rem;
				color: white;
				background-color: orangered;
				height: 2.125rem;
				width: 6.25rem;
				border-radius: 0.9125rem;
				border: none;
			}

js

//设置按钮5秒后可以点击
			var second = 5;
			var time = setInterval(function(){
			    if(second>0){
			        $("#nextBtn").val("下一步("+second+"s)");
			        second--;
			    }else{
			        $("#nextBtn").val("下一步");
			        $("#nextBtn").removeAttr("disabled");
			        clearInterval(time);
			    }
			},1000);
 
//测试5秒后可以点击的函数
			
			function btnfunction(){
				alert("测试点击");
			}

如果是页面5秒后自动隐藏

			// 5秒钟以后，这个窗口自动关闭！
			// window.setTimeout("window.close()",5000);

另一个页面设置即可

// window.open("1.html","_blank","top=0.left=0,width=300px,height=300px,toolbar=no");
			
			

好啦，本期内容就分享到这里，我们下期见！