验证码显示不完整,4个验证码只显示三个
 <div class="left siteFormImgWrap">
                <span id="grzxcode" class="mycode"></span>
</div>
 <script type="text/javascript">
            var inp = document.getElementById('M551F2siteFormValidateCode');
            var code = document.getElementById('grzxcode');
            var c = new KinerCode({
                len : 4,//需要产生的验证码长度
                //              chars: ["1+2","3+15","6*8","8/4","22-15"],//问题模式:指定产生验证码的词典,若不给或数组长度为0则试用默认字典
                chars : [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 0, 'a', 'b', 'c', 'd',
                        'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o',
                        'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z',
                        'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K',
                        'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V',
                        'W', 'X', 'Y', 'Z' ],//经典模式:指定产生验证码的词典,若不给或数组长度为0则试用默认字典
                question : false,//若给定词典为算数题,则此项必须选择true,程序将自动计算出结果进行校验【若选择此项,则可不配置len属性】,若选择经典模式,必须选择false
                copy : false,//是否允许复制产生的验证码
                bgColor : "",//背景颜色[与背景图任选其一设置]
                bgImg : "bg.jpg",//若选择背景图片,则背景颜色失效
                randomBg : false,//若选true则采用随机背景颜色,此时设置的bgImg和bgColor将失效
                inputArea : inp,//输入验证码的input对象绑定【 HTMLInputElement 】
                codeArea : code,//验证码放置的区域【HTMLDivElement 】
                click2refresh : true,//是否点击验证码刷新验证码
                false2refresh : true,//在填错验证码后是否刷新验证码
                validateEven : "blur",//触发验证的方法名,如click,blur等
                validateFn : function(result, code) {//验证回调函数
                    if (result) {
                        alert('验证成功');
                    } else {

                        if (this.opt.question) {
                            alert('验证失败:' + code.answer);
                        } else {
                            alert('验证失败:' + code.strCode);
                            alert('验证失败:' + code.arrCode);
                        }
                    }
                }
            });
        </script>

3个回答

图片说明
用f12查看发现最后一个在这里

产生的验证码的字母之间间隔太大,调整一下样式就可以解决这个问题

qq_30709109
qq_30709109 回复当作看不见: 你好,我刚刚改变了一下样式出来了,谢谢你哦。
3 年多之前 回复
qq_30709109
qq_30709109 回复当作看不见: css我用了,为了方便看,我写在回复你,麻烦帮我看一看,谢谢。
3 年多之前 回复
qq_29594393
当作看不见 回复qq_30709109: 也许你没有导入对应的css文件,如果没有对应的话,可以手动添加css样式,例如调整letter-space 等来让验证码正确显示
3 年多之前 回复
qq_30709109
qq_30709109 验证码之间的间隔是js文件里面自适应的。
3 年多之前 回复
     <style>
        body{
            background: url("images/bg.png");
            background-position: center;
            background-size: cover;
        }
        legend{
            color:#FDFDFD;
        }
        fieldset{
            padding: 20px;
            background: #666666;
            border-radius: 10px;
            margin-top: 20px;
        }
        input{
            display: inline-block;
            height: 40px;
            background: #222222;
            vertical-align: middle;
            border: none;
            border-radius: 10px;
            border-bottom: #DDDDDD solid 2px;
            box-shadow: 0 1px 1px #FFFFFF;
            -webkit-box-shadow: 0 1px 1px #FFFFFF;
            color: #EEEEEE;
            padding-left: 10px;
        }
        .mycode{
            display: inline-block;
            width: 80px;
            height: 40px;
            vertical-align: middle;
        }
    </style>

我只用了

 .mycode{
            display: inline-block;
            width: 80px;
            height: 40px;
            vertical-align: middle;
        }

因为其他的用不到

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐