當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

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

發布時間：2024/9/21 编程问答 32 豆豆

生活随笔收集整理的這篇文章主要介紹了 js 实现点击图片刷新验证码看不清换一张小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

第一種：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>

總結

以上是生活随笔為你收集整理的js 实现点击图片刷新验证码看不清换一张的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。