• 售前

  • 售后

热门帖子
入门百科

JavaScript实现点击切换验证码及校验

[复制链接]
阿阳937 显示全部楼层 发表于 2021-10-25 18:49:27 |阅读模式 打印 上一主题 下一主题
本文实例为大家分享了JavaScript实现点击切换验证码及校验的详细代码,供大家参考,详细内容如下
效果:

代码:
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title></title>
  6. <style>
  7. div {
  8. width: 100px;
  9. height: 40px;
  10. background-color: red;
  11. color: #fff;
  12. text-align: center;
  13. line-height: 40px;
  14. font-size: 30px;
  15. font-weight: 900;
  16. user-select: none;
  17. }
  18. .show {
  19. position: absolute;
  20. left: 0;
  21. top: 0;
  22. right: 0;
  23. bottom: 0;
  24. margin: auto;
  25. width: 200px;
  26. height: 100px;
  27. background-color: pink;
  28. text-align: center;
  29. line-height: 100px;
  30. font-size: 40px;
  31. font-weight: 900;
  32. display: none;
  33. }
  34. </style>
  35. </head>
  36. <body>
  37. <div></div>
  38. <input type="text" value="请输入上图的验证码" />
  39. <button>注册</button>
  40. <div class="show">等待中。。。。</div>
  41. <script type="text/javascript">
  42. //1000-9999
  43. var div = document.getElementsByTagName("div");
  44. var inp = document.getElementsByTagName("input")[0];
  45. var btn = document.getElementsByTagName("button")[0];
  46. div[0].innerHTML = ranFun(1000, 9999);
  47. inp.onclick = function () {
  48. this.value = ""
  49. }
  50. div[0].onclick = function () {
  51. this.innerHTML = ranFun(1000, 9999)
  52. }
  53. btn.onclick = function () {
  54. if (inp.value == div[0].innerHTML) {
  55. div[1].style.display = "block";
  56. setTimeout(function () {
  57.   location.href = "register.html"
  58. }, 3000)
  59. } else {
  60. alert('验证码错误')
  61. div[0].innerHTML = ranFun(1000, 9999);
  62. inp.value = ""
  63. }
  64. }
  65. function ranFun(a, b) {
  66. return Math.floor(Math.random() * (b - a + 1) + a)
  67. }
  68. </script>
  69. </body>
  70. </html>
复制代码
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持草根技术分享。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作