第一种: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 实现 点击图片刷新 验证码 看不清 换一张》对你有帮助,请点赞、收藏,并留下你的观点哦!