Three ways to implement user registration countdown function using js and jQuery-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

Three ways to implement user registration countdown function using js and jQuery

小云云

Dec 23, 2017 am 09:45 AM

javascript jquery User registration

The countdown function is very common, and there are many ways to implement the countdown function. This article mainly introduces the countdown function of the user registration protocol implemented by js and jQuery. It analyzes the related implementation skills of the three countdown functions in the form of examples. Friends in need can refer to it. Next, I hope it can help everyone.

Method 1:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>www.jb51.net 注册倒计时</title>
  <script type="text/javascript">
    //用户有十秒钟的时间看协议，超过十秒钟，“同意”按钮将生效
    var Seconds = 10;
    //计时器ID
    var setIntervalID;
    function ok() {
      var getid = document.getElementById("but");
      if (Seconds <= 0) {
        getid.value="同意";
        getid.disabled = false; //或者写成getid.disabled=""; 启用getid控件。
        //停止计时器
        clearInterval(setIntervalID);
      }
      else {
        getid.value = "请仔细阅读协议还剩下【" + Seconds + "】秒";
      }
      Seconds--;
    }
   setIntervalID=setInterval("ok()", 1000);
  </script>
</head>
<body>
<textarea cols="20" rows="8"></textarea><br />
<!--disabled="disabled" 默认submit表单是禁用的，也就是只读的，不能点击-->
<input type="submit" id ="but" value="同意" disabled="disabled" />
</body>
</html>

Copy after login

Running effect:

Method 2:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>www.jb51.net 注册倒计时</title>
  <script src="jquery-1.7.2.min.js"></script>
</head>
<body>
  <form action="http://www.jb51.net/" method="post" name="agree">
    <input type="submit" class="button" value="" name="agreeb">
  </form>
</body>
</html>
<script>
  var secs = 5;
  var si;
  $(function () {
    $(".button").attr("disabled", "disabled");
    $(".button").val("请认真查看<服务条款和声明>(" + secs + ")")
    si = setInterval(a, 1000);
  })
  function a() {
    $(".button").val("请认真查看<服务条款和声明>(" + (secs-1) + ")");
    if (secs == 0) {
      clearInterval(si);
      $(".button").val("我同意" ).removeAttr("disabled");
    }
    secs--;
  }
</script>

Copy after login

Running effect:

Method three:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title>www.jb51.net 注册倒计时</title>
</head>
<body>
  <form action="http://www.jb51.net/" method="post" name="agree">
    <input type="submit" class="button" value="请认真查看<服务条款和声明> (30)" name="agreeb">
  </form>
</body>
</html>
<script>
  var secs = 30;
  document.agree.agreeb.disabled = true;
  for (var i = 1; i <= secs; i++) {
    window.setTimeout("update(" + i + ")", i * 1000);
  }
  function update(num) {
    if (num == secs) {
      document.agree.agreeb.value = " 我 同 意 ";
      document.agree.agreeb.disabled = false;
    }
    else {
      var printnr = secs - num;
      document.agree.agreeb.value = "请认真查看<服务条款和声明> (" + printnr + ")";
    }
  }
</script>

Copy after login

Running effect:

Have you learned how to strike? Hurry up and give it a try.

Related recommendations:

An example to explain the countdown function of the WeChat applet

The countdown function of sending a verification code when registering with a mobile phone

Javascript Get verification code 60 seconds countdown

The above is the detailed content of Three ways to implement user registration countdown function using js and jQuery. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

What's New in Windows 11 KB5054979 & How to Fix Update Issues

3 weeks ago By DDD

How to fix KB5055523 fails to install in Windows 11?

2 weeks ago By DDD

InZoi: How To Apply To School And University

4 weeks ago By DDD

How to fix KB5055518 fails to install in Windows 10?

2 weeks ago By DDD

Roblox: Dead Rails – How To Summon And Defeat Nikola Tesla

1 months ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Where is the login entrance for gmail email?

7856

Java Tutorial

1649

CakePHP Tutorial

1403

Laravel Tutorial

1300

PHP Tutorial

1241

Related knowledge

Why can't I register at the Bitget Wallet exchange? Sep 06, 2024 pm 03:34 PM

There are various reasons for being unable to register for the BitgetWallet exchange, including account restrictions, unsupported regions, network issues, system maintenance and technical failures. To register for the BitgetWallet exchange, please visit the official website, fill in the information, agree to the terms, complete registration and verify your identity.

Why does Douyin have two accounts? How to install two TikToks on your mobile phone? May 06, 2024 pm 09:28 PM

In the digital age, social media has become an integral part of people's lives. Douyin, as one of the most popular short video platforms in China, has attracted a large number of users. Some users even registered two accounts. So, why does Douyin have two accounts? This article will answer this question for you and explain how to install two Douyin accounts on your phone. 1. Why does Douyin have two accounts? Functional differentiation: Some users will differentiate accounts based on content type or function. For example, one account is used to share daily life, and another account is used to demonstrate professional skills. 2. Privacy protection: Some users hope to protect their privacy through two accounts, separate life and work, and avoid information leakage. 3. Interaction needs: Some users may register two due to interaction needs

What is the detailed explanation of Douyin's spark color changing rules? Various spark colors meet conditions May 04, 2024 am 09:31 AM

In order to enhance user interaction and improve user experience, the Douyin platform has launched Spark, an interesting interactive mechanism. Users can activate and upgrade their sparks through a series of actions on Douyin. Different colors represent different achievements and honors. Understanding the color changing rules of Douyin Spark can help users better participate and interact, and enjoy the social fun brought by Douyin. 1. What is the detailed explanation of Douyin’s spark color changing rules? 1. Behavior activates users’ interactive behaviors, such as likes, comments, shares, etc., which can activate sparks. 2. Level improvement As user interaction increases, the sparks will gradually upgrade and the color will change accordingly. 3. Color change The color change of sparks is usually related to the user's interaction frequency, interaction quality, and enthusiasm for participating in activities. 4. The task is completed

DeepSeek official website entrance and latest promotional activities Feb 19, 2025 pm 05:15 PM

DeepSeek's official website is now launching multiple discount activities to provide users with a shopping experience. New users sign up to get a $10 coupon, and enjoy a 15% limited time discount for the entire audience. Recommend friends can also earn rewards, and you can accumulate points for redemption of gifts when shopping. The event deadlines are different. For details, please visit the DeepSeek official website for inquiries.

How to complete tasks in Tomato novel May 03, 2024 am 02:27 AM

You can earn coins and points by completing tasks on Tomato Novels. Methods include: completing new user registration tasks. Check in daily. Read the assigned novel chapter. Leave a comment on the specified novel chapter. Invite friends to register. Share novels on social platforms.

How to register XT.COM exchange account in mainland China? Aug 16, 2024 pm 06:51 PM

Mainland users can register on the XT.COM exchange through the following steps: Visit the XT.COM official website. Click the "Register" button in the upper right corner. Select the "Mobile Registration" option. Enter your mainland mobile phone number, obtain and enter the verification code. Set a password. Complete authentication. Registration completed.

Sesame Open Door Official Website Trading Platform Sesame Open Door Official Website Exchange Registration Entrance Feb 28, 2025 am 10:57 AM

Gate.io Sesame Open is the world's leading blockchain digital asset trading platform, including fiat currency trading, currency trading, leveraged trading, perpetual contracts, ETF leveraged tokens, wealth management, Startup initial public offering and other sections, providing users with security, stability, openness and transparency.

How to change Douyin recommendations to the initial state? What is the impact of the recommendation becoming the initial state? May 06, 2024 pm 02:10 PM

As a national short video platform, Douyin’s recommendation algorithm has always attracted much attention from users. In daily use, we may encounter situations where Douyin recommendations become no longer accurate. So, how do Douyin recommendations change to the initial state? 1. How do Douyin recommendations change to the initial state? Douyin’s recommendation algorithm is mainly optimized based on users’ behavioral data, including viewing time, likes, comments, shares, etc. When these data change significantly, the recommendation algorithm may think that the user's interests have changed and therefore adjust the recommended content. The following situations may cause Douyin recommendations to change to the initial state: users have been inactive for a long time, are not interested in new content, or have changed their viewing habits, etc. New user registration: For new users, the recommendation system will recommend popular and popular videos by default to help

See all articles