1.文字两端居中
text-align:justify;
text-justify:distribute-all-lines;/*ie6-8*/
text-align-last:justify;/* ie9*/
-moz-text-align-last:justify;/*ff*/
-webkit-text-align-last:justify;/*chrome 20+*/
2.多个异步请求的执行顺序
点击页面上一个按钮发送两个ajax请求时,这两个异步请求会同时发送,至于执行的快与慢,要看响应的数据量的大小及后台逻辑的复杂程度
当一个异步请求发送时,浏览器不会处于锁死、等待的状态,从一个异步请求发送到获取响应结果的期间,浏览器还可以进行其它的操作。这就意味着多个异步请求的执行时并行的
所以要想使其按一定顺序执行,解决方案:参考
- Ajax2()方法的执行放到Ajax1()的success回调函数的最后一行。
- Ajax1()的异步请求方法中,增加一个回调函数 :complete : Ajax2
3.限制字数
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
4.获取验证码(正校考)
获取接口并计时:
页面
<div class="check">
<label>验证码</label>
<input type="text" placeholder="请输入验证码" id="code">
<span class="get_code" onclick="sms_send()" id="getCode" style="display:none;">发送验证码</span>
</div>
<p class="msg"></p>
JS
// 点击获取验证码
var InterValObj; //timer变量,控制时间
var count = 60; //间隔函数,1秒执行
var curCount;//当前剩余秒数
var sms_code = ""; //验证码
var codeLength = 4;//验证码长度
function sms_send(){
$(".msg").empty(); //先将提示文字清空
curCount = count;
var phone = $(".g_phone #tel").val();//手机号码
var reg = /^1[34578]\d{9}$/;
if (phone == "") {
$(".msg").text("请填写手机号");
} else if (!reg.test(phone)){
$(".msg").text("请填写正确的手机号码!");
}else{
for (var i = 0; i < codeLength; i++) {
sms_code += parseInt(Math.random() * 9).toString();
}
$.ajax({
type: 'POST',
url: "/index/login/sms_code",
dataType: 'json',
data: {
sms_code: sms_code,
phone: phone
},
error: function () {
$(".msg").text('发送失败,请稍后重试!');
},
success: function (data) {
if (data.ret== 200) {
$(".g_phone #getCode").css("cursor", "default");
$(".g_phone #getCode").removeAttr("onclick");
$(".g_phone #getCode").hide();
$(".g_phone #time").show().text(curCount + "秒");
InterValObj = window.setInterval(SetRemainTime, 1000); //启动计时器,1秒执行一次
} else {
$(".msg").text(data.msg);
}
}
})
}
}
function SetRemainTime() {
if (curCount == 0) {
window.clearInterval(InterValObj);//停止计时器
$(".g_phone #getCode").show();
$(".g_phone #time").hide();
$(".g_phone #getCode").css("cursor", "pointer");//启用按钮
$(".g_phone #getCode").attr("onclick", "sms_send()");
$(".g_phone #getCode").text("重新发送");
sms_code="";
}
else {
curCount--;
$(".g_phone #getCode").hide();
$(".g_phone #time").show().text(curCount + "秒");
}
}
5.调用微信接口上传图片
①页面中</body>前引入以下两个JS,用途是连接微信授权获取token,只有这样才能有权限上传图片
<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script src="http://zxk.xuanxuepai.com/weixin/index.php"></script>
②加入以下JS方法,只需要修改①②③三个注释的地方即可
function img_upload() { //①方法名称随意,需要上传图片的时候onclick这个方法就行了
wx.chooseImage({
count: 1,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success: function (res) {
var localIds = res.localIds[0];
wx.uploadImage({
localId: localIds,
isShowProgressTips: 1,
success: function (res) {
var serverId = res.serverId;
$.ajax({
type: 'POST',
url: "", //②此处写上传接口
dataType: 'json',
data: {
media_id: serverId
},
error: function () {
layer.msg('网络错误,请稍后再试!');
},
success: function (data) {
if (data.ret == 200) {
//③成功后的回调,data,data里返回了用户刚刚上传的图片的地址
} else {
layer.msg(data.msg);
}
}
})
}
});
}
});
}
6.刷新页面
- 异步请求成功后延时跳转页面
window.setTimeout('window.location.href="/index/index/index";',2000) - 页面的刷新
setTimeout("parent.location.reload();",2000);
window.location.reload()
7.layui相关问题
- 表单按第几个排序
$(document).ready(function () { $('.dataTables-example').dataTable({ "aaSorting": [ 6,"desc" ] }); });
- 页数
要放在页面渲染完成后$(document).ready(function () { $(".dataTables-example").dataTable(); });
8.em rem的单位问题
em要将body的font-size设为62.5%
rem要将html的font-size设为62.5%
测得字体直接/10即可