先上个效果图
1.
在head之间加入
<head>
<script type="text/javascript" charset="utf-8" src="//g.alicdn.com/sd/ncpc/nc.js?t=2015052012"></script>
</head>
2.
在jsp页面想要显示滑动条处加入
<div id="your-dom-id" class="nc-container"></div>
<!--No-Captcha渲染的位置,其中 class 中必须包含 nc-container-->
3.
在body下加入javascript。
注意!!!!一定要在body下方加,否则滑动条很可能显示不出来。
<script type="text/javascript" >
var nc_token = ["CF_APP_1", (new Date()).getTime(), Math.random()].join(':');
var NC_Opt =
{
renderTo: "#your-dom-id",
appkey: "CF_APP_1",
scene: "register",
token: nc_token,
customWidth: 250,
trans:{"key1":"code0"},
elementID: ["usernameID"],
is_Opt: 0,
language: "cn",
isEnabled: true,
timeout: 3000,
times:5,
apimap: {
// 'analyze': '//a.com/nocaptcha/analyze.jsonp',
// 'get_captcha': '//b.com/get_captcha/ver3',
// 'get_captcha': '//pin3.aliyun.com/get_captcha/ver3'
// 'get_img': '//c.com/get_img',
// 'checkcode': '//d.com/captcha/checkcode.jsonp',
// 'umid_Url': '//e.com/security/umscript/3.2.1/um.js',
// 'uab_Url': '//aeu.alicdn.com/js/uac/909.js',
// 'umid_serUrl': 'https://g.com/service/um.json'
},
callback: function call(data) {
window.console && console.log(nc_token);
window.console && console.log(data.csessionid);
window.console && console.log(data.sig);
//在这里写滑动成功以后,可以做的事件,下面是我写的成功之后可以注册的语句,可以改成自己需要的
/* var uname=checkName();
var pwd=checkpwd();
var apwd=checkapwd();
if(uname&&pwd&&apwd){
document.getElementById("regist").disabled="";
return true;
}
else{
alert("答应我先填完资料ok?");
window.location.reload();
return false;
}*/
}
};
var nc = new noCaptcha(NC_Opt);
nc.upLang('cn', {
_startTEXT: "请按住滑块,拖动到最右边",
_yesTEXT: "验证通过",
_error300: "哎呀,出错了,点击<a href=\"javascript:__nc.reset()\">刷新</a>再来一次",
_errorNetwork: "网络不给力,请<a href=\"javascript:__nc.reset()\">点击刷新</a>",
});
</script>
完事!