点击按钮发送验证码,隔10秒再次发送倒计时效果-JS代码

为了防止用户恶意获取短信验证码或邮箱验证,在网站制作时会考虑在点击获取验证码的按钮上做个倒计时的效果。

需要隔10秒再次发送,

实现这个功能,需要用到setInterval和clearInterval。

setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。

setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。

实例效果和代码如下:

See the Pen
获取验证码倒计时效果
by 江山如画 (@jgyzhr)
on CodePen.

125jz网原创文章。发布者:江山如画,转载请注明出处:http://www.125jz.com/4070.html

(0)
江山如画的头像江山如画管理团队
上一篇 2019年10月31日 下午3:55
下一篇 2019年10月31日 下午5:15

99%的人还看了以下文章

  • 如何去除导航栏最后一个不需要的分隔线

    网页导航栏制作时,菜单项之间常用1像素细线做分隔,如上图。 给菜单栏菜单项添加分隔线代码如下: /* 给菜单栏菜单项添加分隔线 */ .nav li { border-right: 1px solid #666; } 最后一个菜单项右边就不需要这个边框线了,如何处理呢? 去除最后一个菜单项右边的分隔线,代码 /* 移除分隔线 */ .nav li:last-…

    2018年7月26日
    4.2K0
  • 点击弹出带关闭按钮的窗口特效(兼容所有浏览器)

    弹出页面被大多浏览器拦截,现在多数改为弹出窗口,即通过弹出层来实现,今天中国网页设计给大家分享两个点击弹出带关闭按钮的窗口代码。 jquery实现可拖动弹出窗口特效 <html > <head> <title>jquery实现可拖动弹出窗口特效-带关闭按钮</title> <script type=&qu…

    2018年5月9日
    3.8K0
  • jQuery带标题的图标图片轮播特效(免费)

    在<head></head>之间引入 <link rel=”stylesheet” type=”text/css” href=”css/font-awesome.css”> <link rel=”stylesheet” href=”css/style.css”> 在<body></body&g…

    2018年9月12日
    3.4K0
  • 网页右侧可隐藏的浮动QQ在线客服源码下载

    在线客服是企业网站必不可少的在线交流渠道,本站分享的在网页右侧可隐藏的浮动QQ在线客服使用jquery编写,固定在网站右侧不随滚动条滚动,点击展开,再次点击收缩,蓝色风格,调用方便。 网页右侧可隐藏的浮动QQ在线客服效果 HTML代码: <div id=floatTools class=jz125> <div class=floatL&gt…

    2018年8月2日
    1.8K0
  • Marquee标签实现跑马灯、滚动公告、通知效果

    1.Marquee基本语法 <marquee> … </marquee> 实例演示:会移动的文字(Marquee) <marquee>啦啦啦,我会移动耶!</marquee> 2.文字移动属性 (1)方向 :direction=# #=left, right,up,down 例: <marqu…

    2019年2月26日
    8.2K0
  • 精美的滑出式水平导航特效

    一个精美的滑出式水平导航特效,打开页面只能看到文本链接,用户将鼠标悬停于标签上时,该导航菜单项目会滑出。 预览     下载源码 1、HTML结构 导航实现仅用一个简单的无序列表 <ul id=”navigation”> <li class=”home”><a href=””><span>Home</sp…

    2018年2月6日
    2.4K0

发表回复

登录后才能评论