JS点击图片后显示验证码 如何实现？

JavaScript010

JS点击图片后显示验证码 如何实现？,第1张

最简单的方法你把图一的显示验证码也弄成一个图片，比如叫code.png，上面你的代码就能换成

<img src="code.png" onclick="this.src ={$maccms.path_tpl}picture/captcha.png"

你说的估计是验证码输入看不清另换一张。这个功能前面的js其实很简单，难的是怎么生成这个验证码图片。

通常使用java、php等脚本语言在后台动态生成一张图片，图上的文本是随机的。脚本语言会把这个生成图片的功能放在一个可以访问的路径中去，并设置这个路径的类型为图片。

在html页面中，则只是一个图片，<img  src="生成验证码.action"/>，关键是怎么做到点击图片另换一张。因为每次都是动态生成图片，可以认为每次访问这个路径得到的图片都是不一样的，所以可以在点击图片的时候重新加载这个路径，比如这样：

<img src="生成验证码.action" onclick="this.src='生成验证码.action'"/>

但这样的话其实是有问题的，因为浏览器会缓存访问过的路径，如果每次访问的路径都是一样的，实际上就直接返回了本地缓存的图片，达不到另换一张的目的了。所以要保证每次访问的路径是不一样的。这个其实也不难：

<img src="生成验证码.action" onclick="this.src='生成验证码.action?time='+new Date()"/>

这样的话，因为日期是不会重复的，所以每次都会调用一次路径，返回随机的验证码。图片的src变了，图片也会变成最新生成的验证码。