用户阅读完条款内容才能激活按钮的倒计时功能

最新推荐文章于 2024-04-29 16:22:57 发布

奔跑的前端er

最新推荐文章于 2024-04-29 16:22:57 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/caoxinhui521/article/details/53291884

本文介绍了一种使用HTML和JavaScript实现的功能，在用户完成特定倒计时后解锁表单提交按钮的方法。通过设置初始状态为禁用的按钮，并利用JS进行倒计时更新按钮文本，最终在倒计时结束后使按钮可用。

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

html中的内容：

<p>示例一：要求用户阅读完条款内容才能激活按钮</p>
	<form action="#" method="post" name="agree">
		<input type="submit" class="button" value="请认真查看<服务条款和声明> (30)" id="agree_btn" name="agreeb">
	</form>

js代码：

var secs = 30;
// 选中第一个按钮，并设置按钮的属性是disabled
document.agree.agreeb.disabled=true;
// 开始倒计时，更新
for(var i=1;i<=secs;i++) {
	window.setTimeout("update(" + i + ")", i * 1000);
}
// 更新数字
function update(num) {
	// 倒计时结束后
	if(num == secs) {
		// 按钮样式改为我同意，并且设置按钮为有效
		document.agree.agreeb.value =" 我 同 意 ";
		document.agree.agreeb.disabled=false;
	}
	else {
		// 计算倒计时还剩的时间，并显示出来
		var printnr = secs-num;
		document.agree.agreeb.value = "请认真查看<服务条款和声明> (" + printnr +")";
	}
}