前端实现点选验证 （在ie8以下实现，ie8以上不一定兼容）

function ClickVerify(options) {
    this.id = options.id || "clickMark"; //可设置生成的点选验证id
    this.imgUrl = options.imgUrl; //点选图片
    this.num = options.num; //点选字总数
    this.success = options.success; //点选结束回调
    this.initDom = options.initDom; //点选初始化插入的dom
    this.textDom = options.textDom; //点选初始化插入的文体的dom
    this.text = options.text; //点选初始化的文字

    this.markIcon = options.markIcon || '这里写默认图标（可从后端接受或者自己查找）';
}

ClickVerify.prototype = {
    markNum: 1,
    infos: [],
    offsetX: 0,
    offsetY: 0,
    container: null,
    img: null,
    refreshIcon: '', //刷新图标链接（这里功能没做）
    refreshIconDisable: true, //是否显示刷新图标 （这里功能没做）
    init: function () {
        this.markNum = 1;
        this.infos = [];
        this.offsetX = 0;
        this.offsetY = 0;
        this.container = null;
        this.img = null;
        this.container = document.createElement("div");
        this.img = new Image();
        this.container.id = this.id;
        var that = this;
        var parentDom = this.initDom || document.body;
        this.img.src = this.imgUrl;
        this.img.style.verticalAlign = "middle";
        this.container.style.display = "inline-block";
        this.container.style.position = "relative";
        this.container.appendChild(this.img);
        this.textDom.innerHTML = this.text + ' （请按照文字顺序进行点选）';
        parentDom.appendChild(this.container);
        this.container.onclick = function (e) {
            if (that.markNum > that.num) {
                return false;
            }
            e = e || window.event;
            
            //得到当前点击的相对于initDom的位置 这里是兼容ie6-8的，搞版本不一定好用
            that.offsetX = e.offsetX - 15;
            that.offsetY = e.offsetY - 15;
            
            //以下为mark设置样式以及样式图片位置等，可自行根据图片大小进行设置
            var mark = document.createElement("div");
            var markImg = new Image()
            markImg.src = that.markIcon;
            markImg.style.width = '30px';
            markImg.style.height = '30px';
            markImg.style.position = 'absolute';
            markImg.style.top = '50%';
            markImg.style.left = '50%';
            markImg.style.marginTop = '-15px'
            markImg.style.marginLeft = '-15px'
            markImg.style.zIndex = '-1';
            mark.style.color = "#fff";
            mark.style.textAlign = "center";
            mark.style.lineHeight = "24px";
            mark.style.width = "30px";
            mark.style.height = "30px";
            mark.style.position = "absolute";
            mark.style.top = that.offsetY + "px";
            mark.style.left = that.offsetX + "px";
            mark.style.fontSize = 12 + "px";
            mark.style.zIndex = '99999';
            mark.style.cursor = 'default'
            mark.innerText = that.markNum;
            mark.background = "url('" + that.markIcon + "') no-repeat 100% 100%"
            mark.appendChild(markImg)
            this.appendChild(mark);
            //保存每次点击的坐标以及排序 最后返回给后端进行验证判断
            that.infos.push({
                order: that.markNum,
                x: that.offsetX.toFixed(0),
                y: that.offsetY.toFixed(0)
            });
            if (that.markNum === that.num) {
                typeof that.success === "function" && that.success(that.getResultInfo());
            }
            that.markNum++;
        };
    },
    //这里是重置方法，如果使用destroy === true 那么将只会删除内部当前所有标记 无需重新获取远程图片 ，如果为 false 则 图片 和 文字都将删除 需要重新获取远程图片
    reset: function (destroy) {
        this.infos = [];
        this.markNum = 1;
        if (!destroy) {
            this.textDom.innerText = '';
            this.initDom.innerHTML = '';
        } else {
            this.container.innerHTML = '';
            this.container.appendChild(this.img)
        }
    },
    //获得本次的infos 每次点击的信息
    getResultInfo: function () {
        return this.infos;
    }
};