拖动式验证码系列（二、进阶示例）
验证码
admin 发布于：2018-12-13 21:52:10
阅读：loading
本篇文章所讲的进阶示例只为简单的实现在一个页面中构造多个验证码的示例效果（也就是说在一个页面中生成多个验证码的调用），其实实现（主要是我们是拿来使用）起来比较简单，从官网的说明文档中可以找到另外的一些实现，在登录后的快速接入--定制接入--构造函数中可以看到共有3中构造函数方式的使用，非常简单，这些东西自己必须要亲自去了解一下，由于前文中的hello实现使用的是元素绑定的方式，故我首先使用第二种构造函数的方式实现，比较简单，代码参考如下：
<!DOCTYPE html>
<html>
<head>
<title>欢迎来到陈冬冬(雪地里走)的学习天地 | 经验分享整理平台 | 陈冬冬|接入腾讯验证码多实例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="keywords" content="陈冬冬,雪地里走,陈冬冬"/>
<meta name="author" content="陈冬冬,雪地里走,陈冬冬"/>
<meta name="description" content="陈冬冬,雪地里走,陈冬冬"/>
<style type="text/css">
.boxCode{
width: 300px;margin: 10px auto;height: 100px;
}
button {
margin-right: 5px;
}
</style>
<script type="text/javascript" src="https://ssl.captcha.qq.com/TCaptcha.js"></script>
<script type="text/javascript">
window.onload = function(){
var oneElement = document.getElementById("oneTencentCaptcha");
new TencentCaptcha(oneElement);
var twoElement = document.getElementById("twoTencentCaptcha");
new TencentCaptcha(twoElement);
var threeElement = document.getElementById("threeTencentCaptcha");
new TencentCaptcha(threeElement);
}
function testCallback1(res){
alert("验证码返回1：" + (res.ret === 0 ? "通过" : "不通过"));
}
function testCallback2(res){
alert("验证码返回2：" + (res.ret === 0 ? "通过" : "不通过"));
}
function testCallback3(res){
alert("验证码返回3：" + (res.ret === 0 ? "通过" : "不通过"));
}
</script>
</head>
<body>
<div class="boxCode">
<h3>验证码接入之多实例</h3>
<button id="oneTencentCaptcha" data-appid="2057623068" data-cbfn="testCallback1">弹出验证码1</button>
<button id="twoTencentCaptcha" data-appid="2057623068" data-cbfn="testCallback2">弹出验证码2</button>
<button id="threeTencentCaptcha" data-appid="2057623068" data-cbfn="testCallback3">弹出验证码3</button>
</div>
</body>
</html>
“/demo/authCode/continue.html”
1、修改了一下多实例，区分了滑动验证码、VTT验证码，可以在同一个页面弹出不同实例，对应的代码没有更改，可直接 在示例页面查看iframe页面的源码进行查看。
2、在本地验证过程中出现了几个安全问题，可在这里查看对应的解释，地址如下：
https://007.qq.com/help.html?ADTAG=index.head
点赞
