点击图片，图片src重新加载（用于图片验证码）

最新推荐文章于 2024-06-25 10:29:28 发布

辣姐什么鬼

最新推荐文章于 2024-06-25 10:29:28 发布

阅读量3w

点赞数 4

分类专栏： web前端文章标签： web前端

本文链接：https://blog.csdn.net/liona_koukou/article/details/74391977

版权

web前端专栏收录该内容

174 篇文章 6 订阅

订阅专栏

效果图：

后台给的链接直接插入html中img的src里，点击图片重新加载这个src因为src的内容一直不变，比如都是

src="http://www.xxx.com/xxx/get?tockenId=QWERTYUISDFGHJEW"

如果刷新页面这个链接返回的图片会改变，为了做到点击图片只重载这个src而整个页面不刷新，采用的方法是

document.getElementById("img").src="http://www.xxx.com/xxx/get?tockenId=QWERTYUISDFGHJEW?"+Math.random();

在后面加上Math.random()

完整代码如下：

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title>测试页</title>
      <style>
         #img{cursor:pointer;}
      </style>
   </head>
<body>
<img onclick="changeCode();" src="http://www.xxx.com/xxx/get?tockenId=QWERTYUISDFGHJEW" id="img"/>
<script>
   function changeCode(){
      document.getElementById("img").src="http://www.wubapai.com/verifycode/get?tockenId=QWERTYUISDFGHJEW?"+Math.random();
   }
</script>
</body>
</html>