點選圖片,圖片src重新載入(用於圖片驗證碼)
阿新 • • 發佈:2019-02-19
效果圖:
後臺給的連結直接插入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>