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:
|
<<: JavaScript canvas to achieve raindrop effects
>>: Native JavaScript message board
Recommend
CSS pseudo-element::marker detailed explanation
This article will introduce an interesting pseudo...
Detailed explanation of Apache website service configuration based on Linux
As an open source software, Apache is one of the ...
Mobile web screen adaptation (rem)
Preface I recently sorted out my previous notes o...
A brief discussion on the maximum number of open files for MySQL system users
What you learn from books is always shallow, and ...
WeChat applet implements search box function
This article example shares the specific code for...
Detailed explanation of the benefits of PNG in various network image formats
BMP is an image file format that is independent o...
MySQL master-slave synchronization mechanism and synchronization delay problem tracking process
Preface As a DBA, you will often encounter some M...
Analysis of the HTML writing style and reasons of experienced people
1. Navigation: Unordered List vs. Other Label Ele...
Tutorial on building file sharing service Samba under CentOS6.5
Samba Services: This content is for reference of ...
Docker installation and deployment example on Linux
After reading the following article, you can depl...
Based on vue-simple-uploader, encapsulate the global upload plug-in function of file segment upload, instant upload and breakpoint resume
Table of contents 1. Introduction 2. About vue-si...
Detailed explanation of Docker data management (data volumes & data volume containers)
When using Docker in a production environment, da...
How to view and set the mysql time zone
1. Check the database time zone show variables li...
Implementation of formatting partitions and mounting in Centos7
Linux often encounters situations such as adding ...
MySQL 5.7.21 installation and configuration method graphic tutorial (window)
Install mysql5.7.21 in the window environment. Th...