语音验证码接收前端实现-优快云博客

本文链接：https://blog.youkuaiyun.com/iteye_9461/article/details/82643348

本文详细介绍了如何在前端实现注册页面的语音验证码接收功能，包括显示提示信息、限制用户操作和定时恢复链接可用性。

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

今天要改一个前端，本身就不太喜欢做前端的事，没有办法，后台的东西要结合前端来做。其实也是很简单的一个事，做注册语音验证码的接收。

需求：
1. 如果短信没有接收到验证码，就显示"xxx,如果没有收到短信验证码，请尝试语音获取"，“语音获取”是一个超链接，开始它是红色的；

2. 点击“语音获取”后，马上变灰色，点击无效；

3. 70s后，它将成可点击状态。

实现：

<p id="getVoiceVerifyCode" hidden="hidden">收不到短信请点击<a href="javascript:void(0)" onclick="sendVoiceVerifyCode()"><span id="disabledColor" class="red">语音获取</span></a></p>

function recoverColor(){
		 $("#disabledColor").removeClass("gray9");
		 $("#disabledColor").addClass("red");
}

function sendVoiceVerifyCode(){
	// 点击后不能让用户再次点击了
	if($("#disabledColor").hasClass("gray9")){
		return;
	}
	// 点击之后变灰色
	$("#disabledColor").removeClass("red");
	$("#disabledColor").addClass("gray9");

        // 发送请求

	// 执行timeout方法
	    setTimeout(recoverColor,70000);
}

Jquery 定时