ONBS5326.JPG
来公司一年了，想想还是要把这一年遇到的问题总结一下。看看这一年自己都做了些什么，踩过哪些坑
- IE兼容
刚来的时候做页面，在IE上排列出现错乱，发现是css中li的选择问题
li:first-child li:first-of-type 在ie上会失效
所以改成了li+li
相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。
-
溢出文字省略号显示
做后台系统的时候，表格里的标题要做溢出用省略号显示.table-info table .txt{ max-width: 281px; position: relative; /* display: block; */ word-break:keep-all;/* 不换行 */ white-space:nowrap;/* 不换行 */ overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容*/ text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/ height; 20px; line-height: 20px; }序 标题 创建人 创建时间 分发状态 最后操作时间 最后操作人 操作 ${key.count} ${news.title} ${news.name} 未分发 已分发 ${news.modifyName} 编辑 | 删除 -
选择分类与标签
image.png
用数组包对象的格式
image.png 时间戳转换
var date = new Date(obj.news.createTime);-
时间格式与判断今天、昨天、更早
var year = date.getFullYear(); var month= date.getMonth()+1; var day= date.getDate(); var hour= date.getHours(); var minute= date.getMinutes(); var nowDate = new Date(); var nowYear = nowDate.getFullYear(); var nowMonth= nowDate.getMonth()+1; var nowDay= nowDate.getDate(); var dates; if(year == nowYear && month == nowMonth && day == nowDay){ dates = '今天'+hour+":"+minute; }else if(year == nowYear && month == nowMonth && nowDay-day == 1){ dates = '昨天'; }else{ dates = year+'-'+month+'-'+day; } 分页
pagination
//评论分页
$('#pagination').pagination({
pageCount:data.data.result.totalpage,
totalData:data.data.result.total,
showData:4,
coping:false,
isHide:true,
prevContent:'◀',
nextContent:'▶',
callback:function(api){
//获取当前页码
var current = api.getCurrent();
console.log(current);
//请求当前页要展示的数据
var url = ctx+'/news/getEvaluatePager';
$.post(url,{
newsId:id,
n: current,
s: 4
},function(data){
//将数据和HTML拼接并添加到页面渲染
$('.judge-list ul').empty();
$.each(data.data.result.datas, function(i, obj){
var date = new Date(obj.createTime);
var year = date.getFullYear();
var month= date.getMonth()+1;
var day= date.getDate();
var hour= date.getHours();
var minute= date.getMinutes();
var nowDate = new Date();
var nowYear = nowDate.getFullYear();
var nowMonth= nowDate.getMonth()+1;
var nowDay= nowDate.getDate();
var dates;
if(year == nowYear && month == nowMonth && day == nowDay){
dates = '今天'+hour+":"+minute;
}else if(year == nowYear && month == nowMonth && nowDay-day == 1){
dates = '昨天';
}else{
dates = year+'-'+month+'-'+day;
}
var oDiv = ''+
'
'+
''+
''+
''+obj.name+''+
''+dates+''+
'
'+
''+obj.content+'
'+
''+
' ';
$(oDiv).appendTo($('.judge-list ul'));
})
},'json');
}
});
-
微信分享
//wechat //初始化 var url=location.href; //alert(url); url = encodeURIComponent(url); //alert(url); var path=location.href.split('/oss')[0]; //alert(path); $.ajax({ url : "/oss/share/getWxConfig", type : "get", //将编码的url作为参数传到接口里 data : {"url":url}, dataType: "json", success : function(data){ console.log(data); wx.config({ debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来， //若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。 appId: data.data.result.appId, timestamp: data.data.result.timestamp, nonceStr: data.data.result.nonceStr, signature: data.data.result.signature, jsApiList: [//需要调用的JS接口列表 'checkJsApi',//判断当前客户端版本是否支持指定JS接口 'onMenuShareTimeline',//分享给好友 'onMenuShareAppMessage',//分享到朋友圈 'onMenuShareQQ',//分享到QQ 'onMenuShareWeibo',//分享到微博 'onMenuShareQZone'//分享到QQ空间 ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2 }); }, error:function(data){ //alert("data"); } }); //分享写在ready里 wx.ready(function () { wx.checkJsApi({ jsApiList: [ 'checkJsApi',//判断当前客户端版本是否支持指定JS接口 'onMenuShareTimeline',//分享给好友 'onMenuShareAppMessage',//分享到朋友圈 'onMenuShareQQ',//分享到QQ 'onMenuShareWeibo',//分享到微博 'onMenuShareQZone'//分享到QQ空间 ] }); //分享朋友圈 wx.onMenuShareTimeline({ title: '那啥APP送红包啦！', desc: '用那啥，轻轻松松找翻译~', // 分享描述 link: base, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 imgUrl: path+'/oss/resources/images/share_logo.png',// 自定义图标 trigger: function (res) { // 不要尝试在trigger中使用ajax异步请求修改本次分享的内容， //因为客户端分享操作是一个同步操作，这时候使用ajax的回包会还没有返回. //alert('click shared'); }, success: function (res) { //alert('shared success'); //some thing you should do $('.mask').hide(); }, cancel: function (res) { //alert('shared cancle'); $('.mask').hide(); }, fail: function (res) { //alert(JSON.stringify(res)); $('.mask').hide(); } }); //分享给好友 wx.onMenuShareAppMessage({ title: '那啥app派红包啦！', desc: '用那啥，轻轻松松找翻译~', // 分享描述 link: base, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 imgUrl: path+'/oss/resources/images/share_logo.png', // 自定义图标 type: 'link', // 分享类型,music、video或link，不填默认为link dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空 success: function () { // 用户确认分享后执行的回调函数 //alert('shared success'); $('.mask').hide(); }, cancel: function () { // 用户取消分享后执行的回调函数 //alert('shared cancle'); $('.mask').hide(); }, fail: function (res) { //alert(JSON.stringify(res)); $('.mask').hide(); } }); //分享到QQ wx.onMenuShareQQ({ title: '那啥APP送红包啦！', desc: '用那啥，轻轻松松找翻译~', // 分享描述 link: base, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 imgUrl: path+'/oss/resources/images/share_logo.png', // 自定义图标 type: 'link', // 分享类型,music、video或link，不填默认为link dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空 success: function () { // 用户确认分享后执行的回调函数 //alert('shared success'); $('.mask').hide(); }, cancel: function () { // 用户取消分享后执行的回调函数 //alert('shared cancle'); $('.mask').hide(); }, fail: function (res) { //alert(JSON.stringify(res)); $('.mask').hide(); } }); //分享到腾讯微博 wx.onMenuShareWeibo({ title: '那啥APP送红包啦！', desc: '用那啥，轻轻松松找翻译~', // 分享描述 link: base, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 imgUrl: path+'/oss/resources/images/share_logo.png', // 自定义图标 type: 'link', // 分享类型,music、video或link，不填默认为link dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空 success: function () { // 用户确认分享后执行的回调函数 //alert('shared success'); $('.mask').hide(); }, cancel: function () { // 用户取消分享后执行的回调函数 //alert('shared cancle'); $('.mask').hide(); }, fail: function (res) { //alert(JSON.stringify(res)); $('.mask').hide(); } }); //分享到QQ空间 wx.onMenuShareQZone({ title: '那啥APP送红包啦！', desc: '用那啥，轻轻松松找翻译~', // 分享描述 link: base, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 imgUrl: path+'/oss/resources/images/share_logo.png', // 自定义图标 type: 'link', // 分享类型,music、video或link，不填默认为link dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空 success: function () { // 用户确认分享后执行的回调函数 //alert('shared success'); $('.mask').hide(); }, cancel: function () { // 用户取消分享后执行的回调函数 //alert('shared cancle'); $('.mask').hide(); }, fail: function (res) { //alert(JSON.stringify(res)); $('.mask').hide(); } }); }); wx.error(function (res) { alert(res.errMsg); }); -
页面视频播放自动全屏问题
var oVideo = '
';
//
$('.video').append(oVideo);
//按钮控制视屏播放暂停
$('.content').on('click','.icon_play',function(){
if ($(this).hasClass('pause')) {
$(this).siblings('video').trigger("play");
$(this).removeClass('pause');
$(this).addClass('play');
$(this).hide();
$(this).siblings('video')[0].controls='true';
}
else {
$(this).siblings('video').trigger("pause");
$(this).removeClass('play');
$(this).addClass('pause');
}
})
`
-
验证手机号函数
function regExpTel(){ var phoneCall = $('#phoneCall').val(); var telTest = /^1[3|4|5|7|8|9][0-9]\d{8}$/; if(!phoneCall.replace(/^\s*/,"")){ tip("手机号码不能为空") telState = 0; return; } if(!telTest.test(phoneCall)){ tip("请输入正确的手机号码"); telState = 0; return; }else{ telState = 1; } } -
验证验证码函数
function regExpCode(){ var phoneCode = $("#phoneCode").val(); if(!phoneCode.replace(/^\s*/,"")){ tip("验证码不能为空"); codeState = 0; return; }else{ codeState = 1; } } -
倒计时
function countDown(){ // 60秒倒计时 var i = 59; var timer = setInterval(function(){ if(i < 0){ clearInterval(timer); $(".code").text("获取验证码").bind("click",getMsgCode); }else{ $(".code").text(i+"s"); i--; } },1000); } -
获取地址栏参数
function GetQueryString(name){ var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)"); var r = window.location.search.substr(1).match(reg); if(r!=null)return unescape(r[2]); return null; }