Web Front-end
JS Tutorial
Click the button to send the verification code and a countdown will appear.
Click the button to send the verification code and a countdown will appear.
Sometimes when we send a verification code, there will always be a countdown function. The following editor will bring you a simple example of clicking a button to send a verification code and a countdown will appear. The editor thinks it’s pretty good, so I’ll share it with you now and give it as a reference. Let’s follow the editor to take a look, I hope it can help everyone.
The examples are as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var InterValObj; //timer变量，控制时间
var count = 30; //间隔函数，1秒执行
var curCount;//当前剩余秒数
function sendMessage() {
curCount = count;
//设置button效果，开始计时
$("#btnSendCode").attr("disabled", "true");
$("#btnSendCode").val(curCount + "秒后可重新发送");
InterValObj = window.setInterval(SetRemainTime, 1000); //启动计时器，1秒执行一次
//请求后台发送验证码 TODO
}
//timer处理函数
function SetRemainTime() {
if (curCount == 0) {
window.clearInterval(InterValObj);//停止计时器
$("#btnSendCode").removeAttr("disabled");//启用按钮
$("#btnSendCode").val("重新发送验证码");
}
else {
curCount--;
$("#btnSendCode").val(curCount + "秒后可重新发送");
}
}
</script>
</head>
<body>
<input id="btnSendCode" type="button" value="发送验证码" onclick="sendMessage()" /></p>
</body>
</html>Have you learned it? Hurry up and try it out.
Related recommendations:
js implements countdown animation effect through Date object example sharing
Simple mobile phone registration to send verification code countdown Implementation method
jQuery implements the countdown function for sending text messages
The above is the detailed content of Click the button to send the verification code and a countdown will appear.. For more information, please follow other related articles on the PHP Chinese website!
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
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
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
1378
52
How to verify signature in PDF
Feb 18, 2024 pm 05:33 PM
We usually receive PDF files from the government or other agencies, some with digital signatures. After verifying the signature, we see the SignatureValid message and a green check mark. If the signature is not verified, the validity is unknown. Verifying signatures is important, let’s see how to do it in PDF. How to Verify Signatures in PDF Verifying signatures in PDF format makes it more trustworthy and the document more likely to be accepted. You can verify signatures in PDF documents in the following ways. Open the PDF in Adobe Reader Right-click the signature and select Show Signature Properties Click the Show Signer Certificate button Add the signature to the Trusted Certificates list from the Trust tab Click Verify Signature to complete the verification Let
Detailed method to unblock using WeChat friend-assisted verification
Mar 25, 2024 pm 01:26 PM
1. After opening WeChat, click the search icon, enter WeChat team, and click the service below to enter. 2. After entering, click the self-service tool option in the lower left corner. 3. After clicking, in the options above, click the option of unblocking/appealing for auxiliary verification.
How to send files to others on TikTok? How to delete files sent to others?
Mar 22, 2024 am 08:30 AM
On Douyin, users can not only share their life details and talents, but also interact with other users. In this process, sometimes we need to send files to other users, such as pictures, videos, etc. So, how to send files to others on Douyin? 1. How to send files to others on Douyin? 1. Open Douyin and enter the chat interface where you want to send files. 2. Click the "+" sign in the chat interface and select "File". 3. In the file options, you can choose to send pictures, videos, audio and other files. After selecting the file you want to send, click "Send". 4. Wait for the other party to accept your file. Once the other party accepts it, the file will be transferred successfully. 2. How to delete files sent to others on Douyin? 1. Open Douyin and enter the text you sent.
WhatsApp Tips: How to Send HD Photos and Videos
Sep 10, 2023 am 10:13 AM
WhatsApp has launched a new option that allows users to send photos and videos in high resolution through the messaging platform. Read on to find out how it's done. WhatsApp has released an update that allows iPhone and Android users to send photos and videos in high resolution, finally addressing the service's low-quality media sharing limitations. The option is called "HD Quality" and means users can send clearer photos and videos with minimal compression. For example, images captured on the iPhone can now be sent at 3024x4032 resolution instead of the previous maximum of 920x1280, while videos can be sent at 1280×718 resolution instead of 848×476.
How to validate IFSC code using regular expressions?
Aug 26, 2023 pm 10:17 PM
Indian Financial System Code is the abbreviation. Indian bank branches participating in the electronic funds transfer system are identified by a special 11-character code. The Reserve Bank of India uses this code in internet transactions to transfer funds between banks. IFSC code is divided into two parts. Banks are identified by the first four characters, while branches are identified by the last six characters. NEFT (National Electronic Funds Transfer), RTGS (Real Time Gross Settlement) and IMPS (Immediate Payment Service) are some of the electronic transactions that require IFSC codes. Method Some common ways to validate IFSC codes using regular expressions are: Check if the length is correct. Check the first four characters. Checkthefifthcharacter.Che
New features in PHP 8: Added verification and signing
Mar 27, 2024 am 08:21 AM
PHP8 is the latest version of PHP, bringing more convenience and functionality to programmers. This version has a special focus on security and performance, and one of the noteworthy new features is the addition of verification and signing capabilities. In this article, we'll take a closer look at these new features and their uses. Verification and signing are very important security concepts in computer science. They are often used to ensure that the data transmitted is complete and authentic. Verification and signatures become even more important when dealing with online transactions and sensitive information because if someone is able to tamper with the data, it could potentially
How to verify whether input is uppercase letters in golang
Jun 24, 2023 am 09:06 AM
Golang is a high-performance, modern programming language that often involves string processing in daily development. Among them, validating whether the input is in uppercase letters is a common requirement. This article will introduce how to verify whether the input is uppercase letters in Golang. Method 1: Use the unicode package. The unicode package in Golang provides a series of functions to determine the encoding type of characters. For uppercase letters, the corresponding encoding range is 65-90 (decimal), so we can use unicod
How to verify whether the input is full-width characters in golang
Jun 25, 2023 pm 02:03 PM
In golang, Unicode encoding and rune type are required to verify whether the input is full-width characters. Unicode encoding is a character encoding standard that assigns a unique numeric code point to each character in the character set, which includes full-width characters and half-width characters. The rune type is the type used to represent Unicode characters in golang. The first step is to convert the input into a rune type slice. This can be converted by using golang's []rune type, e.g.
