怎样用jquery生成带有倾斜角度的验证码


生成验证码,但是验证码里面每个字符都随机产生倾斜角度


封装一个对象来实现吧。配合css3实现。

var getVCode = {
    get: function(len, cbk) {
        var res = [];//包含随机字符的dom元素都在这里面
        for ( var i = 0; i < len; i++ ) {
            var char = this.randomChar();
            var wrapper = $("<span></span>");
            wrapper.text( char );
            res.push( wrapper );
        }
        if ( cbk ) {
            cbk( res );//如果有回调函数,执行回调函数
        } else {
            return res;//没有回调函数,则返回数组
        }
    },
    randomChar: function() {
        var char = String.fromCharCode( randomAsc() );//随机生成字符
        return char;
    },
    rotateChar: function( ele ) {
        ele.css("transform", "rotate(" + this.randomDeg() + "deg)");//给传入的元素设置随机倾斜角度
    },
    randomDeg: function() {
        return Math.round(Math.random*360);
    },
    randomAsc:function() {
        var number = "";
        //这里根据你的需求来写生成随机ascii码的代码
    }
}

调用get方法来操作:

new getVCode.get( 4, function( data ) {} );生成4个随机带倾斜的字符并用回调函数进行处理



相关阅读:
如何滑动页面,当元素出现在当前屏幕时,才执行动画
intell idea打开项目后卡住,界面一直白色,求拯救!
在前端工程化的趋势下,php还有必要去渲染视图层吗?
奇异的代码 之 PHP中的错误和异常
用ajax调取的图片url,图片是存在webroot/images/目录下,为什么图片不能及时加载?
kill命令如何一次杀死多个进程
求react 中使用fetch的demo
大类点击之后得到的列表用pagination 插件进行了ajax分页问题
关于正确理解javascript的同步,异步的执行,Event Loop事件循环,异步执行完如何通知主线程的demo
webpack 怎么引入semantic-ui?
Cordova做的APP里,希望点击按钮时的颜色变化更明显一些,以便更清楚地给用户提示,该怎么弄?
ipad调用UIActivityViewController时系统分享不能完全显示。
GitLab配置CAS认证,前端WEB正常. 但是做git clone等操作时报错如下
django 如何实现文章按时间归档啊
angularjs ng-bind的用法
为什么start = parseInt(spans[this.index].style.top);是undefined?
vue单页面能调到新的页面吗?
HTML 5输入框只能输入汉字、字母、数字、标点符号?正则如何写?
koa+mysql ,插入数据库数据成功,但是无法将数据返回给前台
laravel自带的users表不能被修改吗?



快速导航

Copyright © 2016 phpStudy |