兔小巢图形滑块验证实例DEMO
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web 前端接入示例</title>
<!-- 验证码程序依赖(必须)。请勿修改以下程序依赖，如使用本地缓存，或通过其他手段规避加载，会影响程序的正常使用。 -->
<script src="https://ssl.captcha.qq.com/TCaptcha.js"></script>
<!--按钮样式-->
<style type="text/css">
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body{
.buttons {
margin: 10%;
text-align: center;
}
}
.btn-hover {
width: 200px;
font-size: 16px;
font-weight: 600;
color: #fff;
cursor: pointer;
margin: 20px;
height: 55px;
text-align:center;
border: none;
background-size: 300% 100%;
border-radius: 50px;
moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.btn-hover:hover {
background-position: 100% 0;
moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.btn-hover:focus {
outline: none;
}
.btn-hover.color-4 {
background-image: linear-gradient(to right, #fc6076, #ff9a44, #ef9d43, #e75516);
box-shadow: 0 4px 15px 0 rgba(252, 104, 110, 0.75);
}
</style>
</head>
<body>
<!--点击此元素会自动激活验证码, 此例使用的button元素, 也可以使用div、span等-->
<!--id : (不可变) 元素的 ID, 值必须是 "TencentCaptcha"-->
<!--data-appid : (必须) 验证码CaptchaAppId, 从腾讯云的验证码控制台中获取, 验证码控制台页面内【图形验证】>【验证列表】进行查看 。如果未新建验证，请根据业务需求选择适合的验证渠道、验证场景进行新建-->
<!--data-cbfn : (必须) 回调函数名, 函数名要与 data-cbfn 相同-->
<!--data-biz-state :(可选) 业务自定义透传参数, 会在回调函数内获取到 （res.bizState）-->
<div class="buttons">
<button class="btn-hover color-4" id="TencentCaptcha" data-appid="请输入" data-cbfn="callbackName" data-biz-state="data-biz-state" type="button">图形验证码测试</button>
</button>
</div>
</body>
<script>
// 回调函数需要放在全局对象window下
window.callbackName = function (res) {
// 返回结果
// ret Int 验证结果，0：验证成功。2：用户主动关闭验证码。
// ticket String 验证成功的票据，当且仅当 ret = 0 时 ticket 有值。
// CaptchaAppId String 验证码应用ID。
// bizState Any 自定义透传参数。
// randstr String 本次验证的随机串，请求后台接口时需带上。
console.log("callback:", res);
// res（用户主动关闭验证码）= {ret: 2, ticket: null}
// res（验证成功） = {ret: 0, ticket: "String", randstr: "String"}
if (res.ret === 0) {
// 复制结果至剪切板
let str = `【randstr】->【${res.randstr}】 【ticket】->【${res.ticket}】`
let ipt = document.createElement("input");
ipt.value = str;
document.body.appendChild(ipt);
ipt.select();
document.execCommand("Copy");
document.body.removeChild(ipt);
window.location.href="http://www.foxihaohao.top/";
}
}
</script>
</html>本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2021-10-31，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
