弹出层，验证码，省市地区选择，国际电话区号选择等插件的使用

一.layer的弹出层，有bug，或许是跟当前的JS冲突，所以，使用了zdialog.js

　　参考链接：http://www.jq22.com/jquery-info18718

　　引入三个文件，分别是，jquery.js，zdialog.js，zdialog.css

　　其中，具体的样式，可以在zdialog.css里进行修改。不过，他的css写的其实挺漂亮了。

　　比如，他们的提示框，从上到下有三部分，分别是：标题，内容，确定。

　　我直接修改，标题的样式为display:none；就更加简化了这个提示框。

二.验证码。使用了canvas来绘制验证码。

　　参考链接是 https://www.17sucai.com/pins/28988.html

　　使用canvas绘图的时候，如果绘制的图片超出了div，会显示不全，并会造成无法对比。

　　可以在JS里设置图片的位置。具体代码如下

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        *{
            margin:0;
            padding: 0;
            box-sizing: border-box;
        }
        html{
            width: 100%;
            height: 100%;
            font-size: 16px;
        }
        body{
            width: 100%;
            height: 100%;
            -moz-user-select: none; /*火狐*/ /*禁止用户在页面选择文字*/
            -webkit-user-select: none; /*webkit浏览器*/
            -ms-user-select: none; /*IE10*/
            -khtml-user-select: none; /*早期浏览器*/
            user-select: none;
        }
        .code{
            width: 400px;
            margin:0 auto;
        }
        .input-val{
            width: 295px;
            background: #ffffff;
            height: 2.8rem;
            padding: 0 2%;
            border-radius: 5px;
            border: none;
            border: 1px solid rgba(0,0,0,.2);
            font-size: 1.0625rem;
        }
        #canvas{
            float:right;
            display: inline-block;
            border:1px solid #ccc;
            border-radius: 5px;
            cursor: pointer;
        }
        .btn{
            width: 100px;
            height: 40px;
            background: #f1f1f1;
            border: 1px solid #ccc;
            border-radius: 5px;
            margin: 20px auto 0;
            display: block;
            font-size: 1.2rem;
            color: #e22e1c;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="code">
        <input type="text" value="" placeholder="请输入验证码（不区分大小写）" class="input-val" />
        <canvas id="canvas" width="100" height="43"></canvas>
        <button class="btn">提交</button>
    </div>
 
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
    $(function(){
        var show_num = [];
        draw(show_num);
 
        $("#canvas").on('click',function(){
            draw(show_num);
        })
        $(".btn").on('click',function(){
            var val = $(".input-val").val().toLowerCase();
            var num = show_num.join("");
            if(val==''){
                alert('请输入验证码！');
            }else if(val == num){
                alert('提交成功！');
                $(".input-val").val('');
                draw(show_num);
 
            }else{
                alert('验证码错误！请重新输入！');
                $(".input-val").val('');
                draw(show_num);
            }
        })
    })
 
    function draw(show_num) {
        var canvas_width=$('#canvas').width();
        var canvas_height=$('#canvas').height();
        var canvas = document.getElementById("canvas");//获取到canvas的对象，演员
        var context = canvas.getContext("2d");//获取到canvas画图的环境，演员表演的舞台
        canvas.width = canvas_width;
        canvas.height = canvas_height;
        var sCode = "A,B,C,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0";
        var aCode = sCode.split(",");
        var aLength = aCode.length;//获取到数组的长度
         
        for (var i = 0; i <= 3; i++) {
            var j = Math.floor(Math.random() * aLength);//获取到随机的索引值
            var deg = Math.random() * 30 * Math.PI / 180;//产生0~30之间的随机弧度
            var txt = aCode[j];//得到随机的一个内容
            show_num[i] = txt.toLowerCase();
            var x = 10 + i * 20;//文字在canvas上的x坐标
            var y = 20 + Math.random() * 8;//文字在canvas上的y坐标
            context.font = "bold 23px 微软雅黑";<br><br>　　　　　　　            context.translate(x, y);
            context.rotate(deg);
 
            context.fillStyle = randomColor();
            context.fillText(txt, 0, 0);
 
            context.rotate(-deg);
            context.translate(-x, -y);
        }
        for (var i = 0; i <= 5; i++) { //验证码上显示线条
            context.strokeStyle = randomColor();
            context.beginPath();
            context.moveTo(Math.random() * canvas_width, Math.random() * canvas_height);
            context.lineTo(Math.random() * canvas_width, Math.random() * canvas_height);
            context.stroke();
        }
        for (var i = 0; i <= 30; i++) { //验证码上显示小点
            context.strokeStyle = randomColor();
            context.beginPath();
            var x = Math.random() * canvas_width;
            var y = Math.random() * canvas_height;
            context.moveTo(x, y);
            context.lineTo(x + 1, y + 1);
            context.stroke();
        }
    }
 
    function randomColor() {//得到随机的颜色值
        var r = Math.floor(Math.random() * 256);
        var g = Math.floor(Math.random() * 256);
        var b = Math.floor(Math.random() * 256);
        return "rgb(" + r + "," + g + "," + b + ")";
    }
</script>
 
     
</body>
</html>

　　　　　　// 替换开始---兼容手机端字体大小

　　　　 var clientWidth = document.documentElement.clientWidth;

　　　　if(clientWidth<=750){

　　　　 var a=30*clientWidth/750

　　　　 var b=40*clientWidth/750

　　　　 } else{

　　　　 a=30,b=40

　　　　 }

　　　　 var x = (a + i * a);//文字在canvas上的x坐标

　　　　 var y = b + Math.random() * 10;//文字在canvas上的y坐标

　　　　 context.font = "bold 0.5rem 微软雅黑";

　　　　 // 替换结束

三.城市联动选择使用 mobileselect.js

　　参考地址：http://www.jq22.com/jquery-info14679

　　git地址：https://github.com/onlyhom/mobileSelect.js

　　1.地区数据也很重要，网上需要找，居然有人卖这些。擦！

　　2.由于是底层是使用layer弹窗的，已经有一层遮罩了，导致底层的白色部分，缓慢的变暗。这很难受。

　　　　在mobileselect.css里修改过渡效果，主要是对z-index的过渡引起的。他默认是0.4s

.mobileSelect {
  position: relative;
  z-index: 0;
  opacity: 0;
  visibility: hidden;
  /* 以下两个为修改后的 */
  -webkit-transition: opacity 0s, z-index 0s;
  transition: opacity 0s, z-index 0s;
}

　　3.遇到，无法联动选择的问题。原因是什么呢？原来是rem.js 让mobileselect.js失效了。为什么呢？为什么。rem这种响应式的js会影响到这些东西呢？我草？

　　解决方法如下：把mobileselect.css里的单位，全部改成rem单位。

　　美中不足的是，初始加载的时候，地区的都是对的，屏幕变化的时候，地区的排列就会错位。不过，禁止用户缩放屏幕就好了。哈哈。

　　同时自己写了一个rem.js ,如下

$(document).ready(
    size()
)
// 窗口变化的时候，也运行重置函数
$(window).resize(function(){
    size()
}
)



// 根字体大小的，重置函数
function size(){
    var now=$(window).width()
    if(now>750){
        $('html').css("font-size",100+'px')
    }else{
        var font=(now/7.5)
        console.log(font)
           $('html').css("font-size",font+'px')
    }
        
}

　　4.input的placeholder颜色默认灰色。选择完地区以后，要改变填入内颜色。

 1 var mbs=new MobileSelect({
 2                     trigger: '#triggercity',
 3                     title: '地区选择',
 4                     position: [pIndex, cIndex, 0], //初始化定位 打开时默认选中的哪个 如果不填默认为0
 5                     wheels: [
 6                                 {data:CityData}
 7                             ],
 8                     transitionEnd:function(indexArr, data){
 9                         console.log(data);
10                         console.log(1111);
11                         
12                         // console.log(this)
13                     },
14                     // 选择完成以后，修改颜色
15                     callback:function(indexArr, data){
16                             $("#triggercity").css('color', '#000');
17                     }
18                 });

View Code

4.国际电话区号选择

　　intl-tel-input

　　参考地址：http://www.jq22.com/jquery-info12917

　　git地址：直接在git搜就行了。不过说一下，这个插件有中文文档说明。可以百度，也可以自己翻译。

-------------------------------------------------------------------------------------------------------------------------------------------------------------------