图片验证码的展示与变换
博客专区 > 忆诺 的博客 > 博客详情
图片验证码的展示与变换
忆诺 发表于12个月前
图片验证码的展示与变换
  • 发表于 12个月前
  • 阅读 12
  • 收藏 0
  • 点赞 0
  • 评论 0

身为前端的我,一直搞不明白图片验证码是怎么做的,之前做的时候都是给后台留个占位图,然后让后台去实现这个功能的。自从开始施行前后端分离开发后才知道其实获取站展示验证码并没有想象中的那么高大上~~~

先看代码~~~

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>验证码</title>
</head>
<body>
<img src="/yzm" onclick="change(this)" alt="点击更换验证码" title="点击更换验证码">

<script type="text/javascript">
function change(img){
	img.src="/yzm?"+Math.random();
}
</script>
</body>
</html>

就是这么简单,只需把后台给你的接口url作为img的src即可。原理很简单,每次点击图片利用随机数作为参数来改变url,这样就可以实现每次点击更改url,从而实现验证码的切换。

共有 人打赏支持
粉丝 4
博文 5
码字总数 1941
×
忆诺
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: