今天要改一个前端,本身就不太喜欢做前端的事,没有办法,后台的东西要结合前端来做。其实也是很简单的一个事,做注册语音验证码的接收。
需求:
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);
}
分享到:
相关推荐
1、本示例主要利用jQuery进行传值、页面内容同获取 2、index.htm中加入了js定时循环机制,可以定时传值获取内容,可以用这个机制执行一些定时 查询任务,比如新增数据检索等,也可以加入div+css演变成为右下角提示 3...
在这个"jquery定时自动切换banner广告图片动画插件示例"中,我们将深入探讨如何使用jQuery实现自动切换的广告轮播效果。 首先,我们需要了解jQuery的基本用法。jQuery的核心功能包括选择器(用于找到页面中的HTML...
标题"Jquery图片定时切换展示"表明我们要讨论的是如何利用JQuery来自动更换网页上的显示图片,以达到类似幻灯片的效果。这个效果通常用于产品展示、新闻轮播或者背景图片切换等场景。 描述中的"实现网页图片定时...
【jQuery定时计时器幻灯片】是一款基于JavaScript库jQuery实现的动态图片切换效果,它在展示图片的同时,还提供了一个进度条来显示当前幻灯片的状态和剩余切换时间,为用户提供了良好的交互体验。这款幻灯片适用于...
### jQuery 定时与倒计时功能实现 在前端开发中,定时器和倒计时是常见的需求之一,尤其在需要展示剩余时间、活动倒计时等场景下尤为重要。本文将详细介绍如何使用jQuery来实现一个基本的倒计时功能。 #### 一、...
本程序是用Jquery实现网页的定时刷新的程序,简单一眼就可以看清楚。易懂。
本主题“jquery 定时滚动”聚焦于利用jQuery实现图片或其他内容的自动定时滚动效果,这是一种常见的动态展示手段,尤其适用于新闻、广告轮播或者产品展示等场景。 一、jQuery基本概念 jQuery的核心理念是“Write ...
21. jquery定时自动切换banner广告图片动画插件示例 22. jquery实现LightBox图片点击放大效果的图片盒子插件 23. jQuery实现slider图片滚动,单个滚动,成组滚动示例 24. jQuery实现产品图片循坏旋转的代码 25. ...
通过以上步骤,您就可以实现一个简单的jQuery定时播报消息功能。可以根据需要扩展这个功能,例如添加声音播放、消息队列管理或更复杂的动画效果等。在实际应用中,记得根据项目需求进行相应的优化和调整。
在本主题中,我们将深入探讨如何利用JQuery实现特定的UI交互功能,包括定时显示/隐藏元素、自动填充以及根据单选按钮状态判断显示隐藏文本框。 首先,我们来讲解定时显示/隐藏的实现。JQuery提供了`fadeIn()`和`...
### jQuery 实现 AJAX 定时局部页面刷新 #### 背景介绍 在现代Web开发中,用户体验至关重要。用户往往不希望每次查看新数据时都必须手动刷新整个页面。为了解决这一问题,并提高用户体验,我们可以利用AJAX技术实现...
【jQuery定时计时器幻灯片特效代码】是一种常见的网页动态效果,用于实现图片或内容的自动定时切换,常用于网站的首页展示或者产品介绍等场景。这种特效结合了jQuery库的强大功能,使得幻灯片的切换更加平滑、流畅,...
<title>jQuery定时底部提示层 /* 自定义样式 */ .bottom_box-keleyi-com { position: fixed; bottom: 0; width: 100%; background-color: #F0F0F0; opacity: 0.9; transition: all 0.5s ease; } ....
本篇文章将详细讲解基于jQuery实现的右下角弹出层插件,该插件具备可最小化和定时自动关闭的功能。 一、jQuery右下角弹出层插件基础 1. 插件设计:弹出层通常用于显示通知、消息或者进行用户交互,而放置在屏幕右...
在给出的标题“jQuery 定时局部刷新(setInterval)”中,我们可以看到这个功能被用于定期更新页面上的某些内容,比如时间戳。 首先,我们分析一下提供的代码片段: ```html <script src="jQuery/jquery-1.4.1.min....
jQuery animate封装向上滚动插件,使用定时器setInterval调用封装的插件实现滚动公告
一个完整的jQuery定时提醒闹钟程序通常包括以下部分: - DOM元素的定义:包括闹钟按钮、提示信息和音频元素。 - jQuery初始化:设置闹钟时间、绑定事件、加载音乐等。 - 定时器逻辑:检查时间,当达到设定时间时...
8. **下雪特效**:在网页上模拟下雪效果,可以利用jQuery定时触发雪花的生成、移动和消失,结合CSS3的`translate`和`rotate`实现动态效果。 9. **WIN8风格网站**:Windows 8的磁贴界面风格可以通过jQuery模拟,主要...
21. jquery定时自动切换banner广告图片动画插件示例 22. jquery实现LightBox图片点击放大效果的图片盒子插件 23. jQuery实现slider图片滚动,单个滚动,成组滚动示例 24. jQuery实现产品图片循坏旋转的代码 25. ...