如何通过JavaScript进行验证码的刷新

最新推荐文章于 2021-04-04 15:52:41 发布

c_slow_learner_h

最新推荐文章于 2021-04-04 15:52:41 发布

阅读量2.5k

点赞数 1

分类专栏： JavaScript 文章标签： javascript web html

本文链接：https://blog.csdn.net/qq_38403625/article/details/105547437

版权

JavaScript 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种使用JavaScript刷新网页验证码的方法，通过修改图片源的请求参数来避免浏览器缓存，提供了两种实现方式，一种是点击验证码图片本身，另一种是通过点击超链接触发刷新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我们直接进入主题,代码如下：

通过点击验证码图片进行验证码的刷新

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>验证码刷新</title>
    <script>
        window.onload = function () {
            var img = document.getElementById("checkCode");
            img.onclick = function() {
                var date = new Date().getTime();
                img.src = "/text/captche?time=" + date;	
                //我们刷新验证码需要重新请求服务器，我们路径不能是一模一样的，不然浏览器会一直加载本地已经缓存的图片，通过加一个时间后缀来欺骗服务器来达到我们的目的。
            }
        }
    </script>
</head>
<body>
<img id="checkCode" src="/text/captche" />	//这里的“/text/captche”是@WebServlet注释请求路径。
</body>
</html>

其实上面的代码还可以进一步的简化

<script>
        window.onload = function () {
            document.getElementById("checkCode").onclick = function() {
                this.src = "/text/captche?time=" + new Date().getTime();	
            }
        }
</script>

接下来就是通过点击超链接进行验证码的刷新

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>验证码刷新</title>
    <script>
        window.onload = function () {
            var img = document.getElementById("checkCode");
            var changeimg = document.getElementById("change_img");
            changeimg .onclick = function() {
                var date = new Date().getTime();
                img.src = "/text/captche?time=" + date;	
            }
        }
    </script>
</head>
<body>
<img id="checkCode" src="/text/captche" />	
<a id="change_img" href="#">看不清？</a>
</body>
</html>

还是一样我们简化一下

<script>
        window.onload = function () {
            document.getElementById("change_img").onclick = function() {
                document.getElementById("checkCode").src = "/text/captche?time=" + new Date().getTime();	
            }
        }
</script>