How to use JavaScript to implement slider verification function
This article will explain in detail how to use JavaScript to achieve slider verification function. The editor thinks it is very practical, so I share it with you for reference. I hope you can get something after reading this article.
The details are as follows
Document * {margin: 0; padding: 0;} .box {position: relative; width: 500px; height: 40px; border: 1px solid # 000;} p {position: relative; z-index: 5 Font: 20px/40px 'ccc; box-sizing'; text-align: center; color: rgba (95, 90, 90, 0.479);} .btn {width: 40px; height: 40px; border: 1px solid # ccc; box-sizing: border-box; background-color: # fff Cursor: pointer; z-index: 6; position: absolute; top: 0; left: 0; background-position: center; background-repeat: no-repeat; background-size: 50% auto; background-image: url (. / figure 1.png) } .bg {height: 100%; position: absolute; top: 0; left: 0; background-color: # 7ac23c;}
Drag the slider to verify
/ / get the event var box = document.querySelector ('.box') var p = document.querySelector ('p') var btn = document.querySelector ('.btn') var bg = document.querySelector ('.bg') / / the event this.box.onselectstart = function () {return false / / prevent default behavior} / / does not validate successfully by default var flag = false / / Press event btn.onmousedown = function () {var E1 = window.event; var x1 = e1.offsetX; / / move event btn.onmousemove = function () {var e2 = window.event Var x2 = e2.clientX / / calculate the value of left var left = x2-x1 if (left > 0) {/ / set the distance of the slider this.style.left = left + 'px'; / / set the width of the background bg.style.width = left +' px' If (left > box.offsetWidth-this.offsetWidth) {/ / verify success flag = true; p.innerText = 'pass verification' p.style.color ='# 000' / / event clear this.onmousedown = null This.onmousemove = null;} / / Mouse release btn.onmouseup = function () {/ / event clear this.onmousemove = null / / determine whether the verification is successful if (flag) {return} this.style.left = 0; / / set the distance of the slider bg.style.width = 0; / / set the width of the background};}
On "how to use JavaScript to achieve slider verification function" this article is shared here, I hope the above content can be of some help to you, so that you can learn more knowledge, if you think the article is good, please share it out for more people to see.
