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

How to use vue-cli to create a project and package it with webpack

1. Prepare the environment (download nodejs and s...

How to install Jenkins using Docker

Table of contents 1. Pull the image 2. Create a l...

MySQL online log library migration example

Let me tell you about a recent case. A game log l...

Some lesser-known sorting methods in MySQL

Preface ORDER BY 字段名升序/降序, I believe that everyon...

VUE+Canvas implements the sample code of the desktop pinball brick-breaking game

Everyone has played the pinball and brick-breakin...

MySQL database case sensitivity issue

In MySQL, databases correspond to directories wit...

Writing High-Quality Code Web Front-End Development Practice Book Excerpts

(P4) Web standards are composed of a series of sta...

Implementation code of using select to select elements in Vue+Openlayer

Effect picture: Implementation code: <template...

Use CSS and Bootstrap icons to create an up and down jumping indicator arrow animation effect

Sometimes the page is very long and needs an arro...

Detailed explanation of the installation and configuration of ROS in CLion2020.1.3 under ubuntu20.04

1. Download, install and activate CLion Just foll...

Implementation of Docker deployment of Tomcat and Web applications

1. Download docker online yum install -y epel-rel...

How to install php7 + nginx environment under centos6.6

This article describes how to install php7 + ngin...

Thoughts on copy_{to, from}_user() in the Linux kernel

Table of contents 1. What is copy_{to,from}_user(...

Example of using Dockerfile to build an nginx image

Introduction to Dockerfile Docker can automatical...

Detailed explanation of how to query fields containing '%' in MySQL like (ESCAPE usage)

In the SQL like statement, for example SELECT * F...