php+js实现极验拖动验证码-tncode

先上图:

IHS[P1G9D1PB1DA)W$Z3C}H

演示地址:http://aso.39gs.com/tncode/index.html

相信在淘宝,斗鱼这些大网站都见到过这样的验证码了,拖动验证码比传统在移动端有更好的化验,减少用户的输入。

极验验证码:第三方收费拖动验证码,斗鱼,熊猫直播等很多网站都使用了这家的验证码。

这种通过第三方来实现的方式对一个程序来说,总觉得很不好。于是我就想做用php+js来做一个同样的功能,名字就叫tncode吧,39验证码,哈哈!

实现的主要技术:

1、php抠图

2、js canvas画图

3、破解干扰

代码下载

地址一:https://github.com/binwind8/tncode

地址二:http://aso.39gs.com/tncode/tncode.rar


有网友反馈本地安装无法显示图片,可能是网友本地环境打开错误日志报告,处理方法:

一、把tncode.php中error_reporting(7) 改在 error_reporting(0); 

二、如果上面方法没用,请按以下操作:

1、请打开php错误报告,在TnCode.class.php添加 ,error_reporting(7) ;

2、把然后把TnCode.class.php中header('Content-Type: image/png'); 注释

3、在浏览器中打开 http://xxxx/xxxx/tncode.php,会显示出错误报告

请把报告留言给我,谢谢!


  • 3
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
实现el-tab-pane拖拽排序的步骤如下: 1. 安装sortablejs和@vue/composition-api ``` npm install sortablejs @vue/composition-api --save ``` 2. 在Vue组件中导入Sortable和reactive ```javascript import Sortable from 'sortablejs'; import { reactive } from '@vue/composition-api'; ``` 3. 创建一个响应式对象来存储tab列表 ```javascript const tabs = reactive({ list: [ { label: 'Tab 1', content: 'Content of Tab 1' }, { label: 'Tab 2', content: 'Content of Tab 2' }, { label: 'Tab 3', content: 'Content of Tab 3' } ] }); ``` 4. 在页面中使用el-tabs和el-tab-pane组件来展示tab列表,并使用v-for指令循环展示tab列表 ```html <el-tabs v-model="activeTab"> <el-tab-pane v-for="(tab, index) in tabs.list" :key="index" :label="tab.label"> {{ tab.content }} </el-tab-pane> </el-tabs> ``` 5. 在mounted钩子函数中使用Sortable创建可拖拽的tab列表,并监听其排序事件 ```javascript mounted() { let el = this.$el.querySelector('.el-tabs__nav-wrap'); new Sortable(el, { animation: 150, onEnd: (evt) => { let fromIndex = evt.oldIndex; let toIndex = evt.newIndex; tabs.list.splice(toIndex, 0, tabs.list.splice(fromIndex, 1)[0]); } }); } ``` 6. 完成后,你就可以在页面上看到一个可拖拽排序的tab列表了。 完整代码如下: ```html <template> <el-tabs v-model="activeTab"> <el-tab-pane v-for="(tab, index) in tabs.list" :key="index" :label="tab.label"> {{ tab.content }} </el-tab-pane> </el-tabs> </template> <script> import Sortable from 'sortablejs'; import { reactive } from '@vue/composition-api'; export default { name: 'SortableTabs', setup() { const tabs = reactive({ list: [ { label: 'Tab 1', content: 'Content of Tab 1' }, { label: 'Tab 2', content: 'Content of Tab 2' }, { label: 'Tab 3', content: 'Content of Tab 3' } ] }); return { tabs }; }, mounted() { let el = this.$el.querySelector('.el-tabs__nav-wrap'); new Sortable(el, { animation: 150, onEnd: (evt) => { let fromIndex = evt.oldIndex; let toIndex = evt.newIndex; this.tabs.list.splice(toIndex, 0, this.tabs.list.splice(fromIndex, 1)[0]); } }); } }; </script> ```
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值