1. 程式人生 > >點選圖片,圖片src重新載入(用於圖片驗證碼)

點選圖片,圖片src重新載入(用於圖片驗證碼)

效果圖:


後臺給的連結直接插入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>