JavaScript to implement click to switch verification code and verification

JavaScript to implement click to switch verification code and verification

This article shares the specific code of JavaScript to implement click-to-switch verification code and verification for your reference. The specific content is as follows

Effect:

Code:

<!DOCTYPE html>
<html>

<head>
 <meta charset="UTF-8">
 <title></title>
 <style>
 div {
 width: 100px;
 height: 40px;
 background-color: red;
 color: #fff;
 text-align: center;
 line-height: 40px;
 font-size: 30px;
 font-weight: 900;
 user-select: none;
 }

 .show {
 position: absolute;
 left: 0;
 top: 0;
 right: 0;
 bottom: 0;
 margin: auto;
 width: 200px;
 height: 100px;
 background-color: pink;
 text-align: center;
 line-height: 100px;
 font-size: 40px;
 font-weight: 900;
 display: none;
 }
 </style>
</head>

<body>

 <div></div>
 <input type="text" value="Please enter the verification code above" />
 <button>Register</button>
 <div class="show">Waiting. . . . </div>
 <script type="text/javascript">

 //1000-9999
 var div = document.getElementsByTagName("div");
 var inp = document.getElementsByTagName("input")[0];
 var btn = document.getElementsByTagName("button")[0];
 div[0].innerHTML = ranFun(1000, 9999);

 inp.onclick = function () {
 this.value = ""
 }

 div[0].onclick = function () {
 this.innerHTML = ranFun(1000, 9999)
 }

 btn.onclick = function () {
 if (inp.value == div[0].innerHTML) {
 div[1].style.display = "block";
 setTimeout(function () {
  location.href = "register.html"
 }, 3000)
 } else {
 alert('Verification code error')
 div[0].innerHTML = ranFun(1000, 9999);
 inp.value = ""
 }
 }



 function ranFun(a, b) {
 return Math.floor(Math.random() * (b - a + 1) + a)
 }
 </script>
</body>

</html>

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:
  • js implements the login registration box mobile phone number and verification code verification (front-end part)
  • JavaScript implements random generation of verification code and verification

<<:  JavaScript canvas to achieve raindrop effects

>>:  Native JavaScript message board

Recommend

Detailed explanation of the use of custom parameters in MySQL

MySQL variables include system variables and syst...

Complete Tutorial on Deploying Java Web Project on Linux Server

Most of this article refers to other tutorials on...

25 Examples of Using Circular Elements in Web Design

Today, this post lists some great examples of circ...

How to share Flash pages through verification methods in website standards

1. Embed is illegal The <embed> tag is a pri...

Method example of safely getting deep objects of Object in Js

Table of contents Preface text parameter example ...

Xftp download and installation tutorial (graphic tutorial)

If you want to transfer files between Windows and...

CSS3 diamond puzzle realizes the function of rotating only div and not rotating the background image

Demand background The project is made using Vue, ...

Solve the problem that document.getElementBy series methods cannot obtain objects

getElementById cannot get the object There is a s...

Analysis of the Docker deployment Consul configuration process

Execute Command docker run -d --name consul -p 85...

MySQL learning notes: complete select statement usage example detailed explanation

This article uses an example to illustrate the co...

Payment function implementation in vue project (WeChat payment and Alipay payment)

Table of contents Common payment methods in proje...

How to implement logic reuse with Vue3 composition API

Composition API implements logic reuse steps: Ext...

MySQL executes commands for external sql script files

Table of contents 1. Create a sql script file con...

Select web page drop-down list and div layer covering problem

Questions about select elements in HTML have been...

Three examples of blur background effects using CSS3

Let’s not start with the introduction and get str...