jquery 实现倒计时60秒

这篇具有很好参考价值的文章主要介绍了jquery 实现倒计时60秒。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

jquery 实现倒计时60秒

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" id="viewport" name="viewport">
  <title>jquery 实现倒计时60秒</title>
  <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
</head>

<body>
  <input type="button" id="btn" value="免费获取验证码" />
  <script type="text/javascript">
    //发送验证码按钮的60s倒计时

    var countdown = 60;
    $('#btn').css('background', '#0af');
    $('#btn').css('border', 'none');
    $('#btn').css('borderRadius', '5px');
    $('#btn').css('height', '30px');
    $('#btn').css('color', '#fff');
    $('#btn').css('cursor', 'pointer');

    // function sendemail(obj) {
    //   var obj = $("#btn");
    //   getCountTime(obj);
    // }

    function getCountTime(obj) {
      if (countdown == 0) {
        obj.attr('disabled', false);
        obj.val("免费获取验证码");
        countdown = 60;
        $('#btn').css('background', '#0af');
        return;
      } else {
        obj.attr('disabled', true);
        obj.val("重新发送(" + countdown + ")");
        countdown--;
        $('#btn').css('background', '#999')
      }
      setTimeout(function () {
        getCountTime(obj)
      }, 1000)
    }


    $('#btn').click(function () {
      getCountTime($('#btn'))
    })
  </script>
</body>

</html>

文章来源地址https://www.toymoban.com/news/detail-757933.html

到了这里,关于jquery 实现倒计时60秒的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • JavaScript实现广告倒计时和跳过广告

    最近打开手机上的app,映入眼帘的都是一个几秒的开屏广告,带有倒计时,一般为5秒,时间一到广告窗口自动关闭,如果不喜欢的话可以点击跳过,跳过广告其实质应该就是关闭广告。以前用JavaScript做过一个定时关闭的广告,于是把代码完善了一下,加上倒计时效果和实现

    2024年02月09日
    浏览(30)
  • 前端实现手机短信验证码倒计时效果

    实现效果:实现按钮倒计时10s后可重新发送验证码 一、思路 1、禁用按钮,调用后端接口,获取验证码 2、setTimeOut(() = {},1000)延迟1s执行,time - 1,返回文案,9s 3、迭代处理,调用自身函数,time - 1,返回文案,8s,实现9s 8s 7s 这样倒计时的效果。 4、不能无限迭代减1,判断时

    2024年02月04日
    浏览(45)
  • 案例:模拟京东秒杀倒计时(完整代码)【前端实现】

    目录 实现效果  案例分析 代码分析 代码实现 (完整) 背景图片引用   实现效果  案例分析  1.倒计时是不断变化的 所以需要一个定时器( setInterval )  2.三个盒子通过 innerHTML 进行赋值 放入时分秒  3.使用 Date() 对象获取当前时间(时间戳)  4.传递参数获取活动开始的时间

    2024年02月09日
    浏览(39)
  • html 3D 倒计时爆炸特效

    下面是代码: style.css代码为: 有两个js代码  dat.gui.min.js为: index.js为: 下面是运行效果(这是3D动态的):

    2024年01月24日
    浏览(32)
  • 有趣的HTML实例(一) 倒计时

    冰会化成水的……我相信我们的子孙还可以在贝加尔湖钓鲑鱼!   目录 一、前言 二、作品介绍 三、代码介绍 四、效果显示  五、编码实现 index.html script.js style.css   六、获取源码 公众号获取源码  获取源码?私信?关注?点赞?收藏?         在我们的 html 学习过程

    2024年02月08日
    浏览(33)
  • HTML数字倒计时效果附源码

    HTML页面代码

    2024年02月10日
    浏览(29)
  • HTML中用户注册倒计时案例

    二、运行截图  

    2024年02月15日
    浏览(34)
  • JavaScript 倒计时的时间偏差问题与解决方法

    倒计时是前端开发中常见的功能,但是使用 setTimeout 和 setInterval 方法实现的倒计时存在一个严重的问题:时间偏差。这是因为 JavaScript 的事件循环机制导致的,本文将详细解释时间偏差的原因,并提供解决方案。 时间偏差的原因 在 JavaScript 中,setTimeout 和 setInterval 方法的工

    2024年02月11日
    浏览(33)
  • 手机短信验证码登录功能的开发实录(机器识别码、短信限流、错误提示、发送验证码倒计时60秒)

    短信验证码是通过发送验证码到手机的一种有效的验证码系统,作为比较准确和安全地保证购物的安全性,验证用户的正确性的一种手段,几乎网站登录都会使用该方式。 其特点是依据某些验证码接入商提供手机短信验证码服务,各网站通过接口发送请求到接入商的服务器,

    2024年02月02日
    浏览(33)
  • JS定时任务封装(支持精确倒计时)

    使用、控制都很方便:

    2024年02月06日
    浏览(39)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包