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; } <tr> <td width="6%">序</td> <td width="22%">标题</td> <td width="9%">创建人</td> <td width="14%">创建时间</td> <td width="10%">分发状态</td> <td width="14%">最后操作时间</td> <td width="9%">最后操作人</td> <td width="16%" class="last-td">操作</td> </tr> <c:forEach items="${news.datas}" varStatus="key" var="news"> <tr> <td>${key.count}</td> <td class="txt">${news.title}</td> <td>${news.name}</td> <td><Date:date value="${news.time}"></Date:date></td> <c:if test="${news.issend ==0}"> <td>未分发</td> </c:if> <c:if test="${news.issend ==1}"> <td>已分发</td> </c:if> <td><Date:date value="${news.modifyTime}"></Date:date></td> <td>${news.modifyName}</td> <td class="last-td"> <input type="hidden" value="${news.id}" class="news_id"> <a href="javascript:;" class="edit">编辑</a> <span>|</span> <a href="javascript:;" class="delete">删除</a> </td> </tr> -
选择分类与标签
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
<link rel="stylesheet" href="${rc.contextPath}/resources/nasha/css/pagination.css">
<script src="${rc.contextPath}/resources/nasha/js/jquery.pagination.js" charset="utf-8"></script>
//评论分页
$('#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 = '<li class="clear" id="'+obj.id+'">'+
'<img src="'+ctx+'/resources/nasha/images/ren.png" alt="">'+
'<div>'+
'<p class="clear">'+
'<span class="name">'+obj.name+'</span>'+
'<span class="time">'+dates+'</span>'+
'</p>'+
'<p>'+obj.content+'</p>'+
'</div>'+
'</li>';
$(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 id="myVideo" x5-playsinline="" playsinline="" webkit-playsinline="" preload="auto" src="'+datas.videoUrl+'" poster="'+datas.videoUrl+'?vframe/jpg/offset/0"></video><img src="../images/icon_home_play@3x.png" alt="" class="icon_play pause">'; // <video src="" controls="" poster="" preload="auto"></video> $('.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; }
