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

JavaScript016

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变了,图片也会变成最新生成的验证码。