`

Jquery 定时

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

需求:
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定时任务执行,js定时获取页面内容

    1、本示例主要利用jQuery进行传值、页面内容同获取 2、index.htm中加入了js定时循环机制,可以定时传值获取内容,可以用这个机制执行一些定时 查询任务,比如新增数据检索等,也可以加入div+css演变成为右下角提示 3...

    jquery定时自动切换banner广告图片动画插件示例.rar

    在这个"jquery定时自动切换banner广告图片动画插件示例"中,我们将深入探讨如何使用jQuery实现自动切换的广告轮播效果。 首先,我们需要了解jQuery的基本用法。jQuery的核心功能包括选择器(用于找到页面中的HTML...

    Jquery图片定时切换展示

    标题"Jquery图片定时切换展示"表明我们要讨论的是如何利用JQuery来自动更换网页上的显示图片,以达到类似幻灯片的效果。这个效果通常用于产品展示、新闻轮播或者背景图片切换等场景。 描述中的"实现网页图片定时...

    jQuery定时计时器幻灯片.zip

    【jQuery定时计时器幻灯片】是一款基于JavaScript库jQuery实现的动态图片切换效果,它在展示图片的同时,还提供了一个进度条来显示当前幻灯片的状态和剩余切换时间,为用户提供了良好的交互体验。这款幻灯片适用于...

    jquery定时、倒计时。

    ### jQuery 定时与倒计时功能实现 在前端开发中,定时器和倒计时是常见的需求之一,尤其在需要展示剩余时间、活动倒计时等场景下尤为重要。本文将详细介绍如何使用jQuery来实现一个基本的倒计时功能。 #### 一、...

    Jquery实现定时刷新页面程序

    本程序是用Jquery实现网页的定时刷新的程序,简单一眼就可以看清楚。易懂。

    jquery 定时滚动

    本主题“jquery 定时滚动”聚焦于利用jQuery实现图片或其他内容的自动定时滚动效果,这是一种常见的动态展示手段,尤其适用于新闻、广告轮播或者产品展示等场景。 一、jQuery基本概念 jQuery的核心理念是“Write ...

    JavaScript_JQuery_CSS_CSS_DIV漂亮的实例123个

    21. jquery定时自动切换banner广告图片动画插件示例 22. jquery实现LightBox图片点击放大效果的图片盒子插件 23. jQuery实现slider图片滚动,单个滚动,成组滚动示例 24. jQuery实现产品图片循坏旋转的代码 25. ...

    jquery实现定时播报消息功能

    通过以上步骤,您就可以实现一个简单的jQuery定时播报消息功能。可以根据需要扩展这个功能,例如添加声音播放、消息队列管理或更复杂的动画效果等。在实际应用中,记得根据项目需求进行相应的优化和调整。

    使用Jquery定时实现显示隐藏,并且自动填充,,单选判断显示隐藏文本框,小功能

    在本主题中,我们将深入探讨如何利用JQuery实现特定的UI交互功能,包括定时显示/隐藏元素、自动填充以及根据单选按钮状态判断显示隐藏文本框。 首先,我们来讲解定时显示/隐藏的实现。JQuery提供了`fadeIn()`和`...

    jquery实现Ajax定时局部页面刷新

    ### jQuery 实现 AJAX 定时局部页面刷新 #### 背景介绍 在现代Web开发中,用户体验至关重要。用户往往不希望每次查看新数据时都必须手动刷新整个页面。为了解决这一问题,并提高用户体验,我们可以利用AJAX技术实现...

    jQuery定时计时器幻灯片特效代码

    【jQuery定时计时器幻灯片特效代码】是一种常见的网页动态效果,用于实现图片或内容的自动定时切换,常用于网站的首页展示或者产品介绍等场景。这种特效结合了jQuery库的强大功能,使得幻灯片的切换更加平滑、流畅,...

    jquery定时滑出可最小化的底部提示层特效代码

    &lt;title&gt;jQuery定时底部提示层 /* 自定义样式 */ .bottom_box-keleyi-com { position: fixed; bottom: 0; width: 100%; background-color: #F0F0F0; opacity: 0.9; transition: all 0.5s ease; } ....

    jQuery右下角弹出层插件_可最小化和定时自动关闭

    本篇文章将详细讲解基于jQuery实现的右下角弹出层插件,该插件具备可最小化和定时自动关闭的功能。 一、jQuery右下角弹出层插件基础 1. 插件设计:弹出层通常用于显示通知、消息或者进行用户交互,而放置在屏幕右...

    jQuery 定时局部刷新(setInterval)

    在给出的标题“jQuery 定时局部刷新(setInterval)”中,我们可以看到这个功能被用于定期更新页面上的某些内容,比如时间戳。 首先,我们分析一下提供的代码片段: ```html &lt;script src="jQuery/jquery-1.4.1.min....

    jQuery滚动公告

    jQuery animate封装向上滚动插件,使用定时器setInterval调用封装的插件实现滚动公告

    jQuery制作定时提醒闹钟,带音乐特效代码

    一个完整的jQuery定时提醒闹钟程序通常包括以下部分: - DOM元素的定义:包括闹钟按钮、提示信息和音频元素。 - jQuery初始化:设置闹钟时间、绑定事件、加载音乐等。 - 定时器逻辑:检查时间,当达到设定时间时...

    jQuery各类炫酷效果demo

    8. **下雪特效**:在网页上模拟下雪效果,可以利用jQuery定时触发雪花的生成、移动和消失,结合CSS3的`translate`和`rotate`实现动态效果。 9. **WIN8风格网站**:Windows 8的磁贴界面风格可以通过jQuery模拟,主要...

    jquery 动态示例

    21. jquery定时自动切换banner广告图片动画插件示例 22. jquery实现LightBox图片点击放大效果的图片盒子插件 23. jQuery实现slider图片滚动,单个滚动,成组滚动示例 24. jQuery实现产品图片循坏旋转的代码 25. ...

Global site tag (gtag.js) - Google Analytics