js 实现点击图片刷新验证码看不清换一张-蒲公英云

js 实现点击图片刷新验证码看不清换一张

梦里梦外; 2023-10-04 17:16 67阅读 0赞

第一种：js和html语句分离

注意：checkcode.java代码在上一篇验证码文章中

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>切换二维码</title>
<script type="text/javascript">
window.onload=function(){
    //获取img标签的对象
    img=document.getElementById("exchangecode");
    img.onclick=function(){
        //加时间戳,避免浏览器缓存
        var date=new Date().getTime()
        img.src="/responseproject/checkcode?"+date;
    }
     //获取a标签的对象
    ec=document.getElementById("ecode");
    ec.onclick=function(){
        //加时间戳
        var date=new Date().getTime()
         img.src="/responseproject/checkcode?"+date;
    }
}
</script>
</head>
<body>
<img id="exchangecode" src="/responseproject/checkcode">   
<a id="ecode" href="#">看不清？换一张图片</a>
</body>
</html>

第二种：第一种的省略版（不跳转页面）

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>切换二维码</title>
<script type="text/javascript">
  function jump() {
    imge=document.getElementById("exchangecode");
    var time=new Date().getTime();
    imge.src="/responseproject/checkcode?"+time;
}
</script>
</head>
<body>
<img id="exchangecode" src="/responseproject/checkcode" onclick="jump();">   
<a id="ecode" href="#" onclick="jump();">看不清？换一张图片</a>
</body>
</html>

第三种：在href上改进，其实是跳转页面

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>切换二维码</title>
<script type="text/javascript">
  function jump() {
    imge=document.getElementById("exchangecode");
    var time=new Date().getTime();
    imge.src="/responseproject/checkcode?"+time;
}
</script>
</head>
<body>
<img id="exchangecode" src="/responseproject/checkcode" onclick="jump();">   
<a id="ecode" href="javascript:jump();" >看不清？换一张图片</a>  
</body>
</html>