使用js随机显示验证码

最新推荐文章于 2024-04-08 16:42:05 发布

puff20030803

最新推荐文章于 2024-04-08 16:42:05 发布

阅读量46

点赞数

文章标签：前端 javascript Powered by 金山文档

本文链接：https://blog.csdn.net/puff20020308/article/details/128853061

版权

该代码示例使用JavaScript创建了一个简单的网页交互功能。用户点击按钮会生成一个新的4位随机字符串显示在页面上，再次点击会更新字符串。用户需在输入框中正确输入这个字符串，点击提交按钮进行验证。如果输入匹配则提示提交成功，否则提示不成功。

摘要由CSDN通过智能技术生成

<body>
    <div></div>
    <button>点一次</button>
    <input type="text">
    <button>提交</button>
    <script>
        var div = document.querySelector('div')
        var btn = document.getElementsByTagName('button')
        var str = 'qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM123456789'
        var input = document.querySelector('input')
        addEventListener(btn[0], 'click', function () {
            var str1 = ''
            for (var j = 0; j < 4; j++) {
                var i = Math.floor(Math.random() * (str.length - 1))
                str1 += str[i]
                div.innerHTML = str1
                btn[0].innerHTML = '再点一次'
            }

        })
        addEventListener(btn[1], 'click', function () {
            if (input.value === div.innerHTML) {
                alert('提交成功')
            } else {
                alert('不成功')
            }
        })

        function addEventListener(element, eventName, callback) {
            if (element.addEventListener) {
                element.addEventListener(eventName, callback)
            } else {
                element.attachEvent('on' + eventName, callback)
            }
        }

    </script>
</body>