1.layer的弹出层,有bug,或许是跟当前的JS冲突,所以,使用了zdialog.js
参考链接:http://www.jq22.com/jquery-info18718
引入三个文件,分别是,jquery.js,zdialog.js,zdialog.css
其中,具体的样式,可以在zdialog.css里进行修改。不过,他的css写的其实挺漂亮了。
比如,他们的提示框,从上到下有三部分,分别是:标题,内容,确定。
我直接修改,标题的样式为display:none;就更加简化了这个提示框。
2.验证码。使用了canvas来绘制验证码。
参考链接是 https://www.17sucai.com/pins/28988.html
使用canvas绘图的时候,如果绘制的图片超出了div,会显示不全,并会造成无法对比。
可以在JS里设置图片的位置。具体代码如下
<!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 微软雅黑";
// 替换开始---让canvas支持rem兼容手机端字体大小
// var clientWidth = document.documentElement.clientWidth;
// var a=30*clientWidth/750
// var b=40*clientWidth/750
// var x = (a + i * a);//文字在canvas上的x坐标
// var y = b + Math.random() * 8;//文字在canvas上的y坐标
// context.font = "bold 0.5rem 微软雅黑";
// 替换结束
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>
3.城市联动选择使用 mobileselect.js
参考地址:http://www.jq22.com/jquery-info14679
git地址:https://github.com/onlyhom/mobileSelect.js
这个会遇到,无法联动选择的问题。原因是什么呢
地区数据也很重要,网上需要找,居然有人卖这些。擦!
原来是rem.js 让mobileselect.js失效了。为什么呢?为什么。rem这种响应式的js会影响到这些东西呢?我草?
解决方法如下:把mobileselect.css里的单位,全部改成rem单位。
美中不足的是,初始加载的时候,地区的都是对的,屏幕变化的时候,地区的排列就会错位。不过,禁止用户缩放屏幕就好了。哈哈。
同时自己写了一个rem.js ,如下
// 我当前的站点,使用的是,750px的设计稿,并且,默认根字体,设置为100PX // 确保引用 viewport标签以后,增加这些代码。 // 然后吧mobileselect里的PX,按照我当前的设置,都除以100,变成rem // 根据你自己的rem,具体除多少,要根据你自己的来 // 加载的时候,运行重置函数 $(document).ready( size() ) // 窗口变化的时候,也运行重置函数
$(window).resize(function(){
size()
}
)
// 根字体大小的,重置函数 function size(){ var now=$(window).width() var font=(now/7.5) console.log(font) $(‘html‘).css( "font-size",font+‘px‘) }
4.国际电话区号选择
intl-tel-input
参考地址:http://www.jq22.com/jquery-info12917
git地址:直接在git搜就行了。不过说一下,这个插件有中文文档说明。可以百度,也可以自己翻译。
-------------------------------------------------------------------------------------------------------------------------------------------------------------------
原文地址:https://www.cnblogs.com/cn-oldboy/p/12630179.html