ONBS5326.JPG
來公司一年了，想想還是要把這一年遇到的問題總結(jié)一下。看看這一年自己都做了些什么，踩過哪些坑
- IE兼容
剛來的時候做頁面，在IE上排列出現(xiàn)錯亂，發(fā)現(xiàn)是css中l(wèi)i的選擇問題
li:first-child li:first-of-type 在ie上會失效
所以改成了li+li
相鄰兄弟選擇器（Adjacent sibling selector）可選擇緊接在另一元素后的元素，且二者有相同父元素。
-
溢出文字省略號顯示
做后臺系統(tǒng)的時候，表格里的標(biāo)題要做溢出用省略號顯示.table-info table .txt{ max-width: 281px; position: relative; /* display: block; */ word-break:keep-all;/* 不換行 */ white-space:nowrap;/* 不換行 */ overflow:hidden;/* 內(nèi)容超出寬度時隱藏超出部分的內(nèi)容*/ text-overflow:ellipsis;/* 當(dāng)對象內(nèi)文本溢出時顯示省略標(biāo)記(...) ；需與overflow:hidden;一起使用。*/ height; 20px; line-height: 20px; } <tr> <td width="6%">序</td> <td width="22%">標(biāo)題</td> <td width="9%">創(chuàng)建人</td> <td width="14%">創(chuàng)建時間</td> <td width="10%">分發(fā)狀態(tài)</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>未分發(fā)</td> </c:if> <c:if test="${news.issend ==1}"> <td>已分發(fā)</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> -
選擇分類與標(biāo)簽
image.png
用數(shù)組包對象的格式
image.png 時間戳轉(zhuǎn)換
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){
//獲取當(dāng)前頁碼
var current = api.getCurrent();
console.log(current);
//請求當(dāng)前頁要展示的數(shù)據(jù)
var url = ctx+'/news/getEvaluatePager';
$.post(url,{
newsId:id,
n: current,
s: 4
},function(data){
//將數(shù)據(jù)和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作為參數(shù)傳到接口里 data : {"url":url}, dataType: "json", success : function(data){ console.log(data); wx.config({ debug: false, // 開啟調(diào)試模式,調(diào)用的所有api的返回值會在客戶端alert出來， //若要查看傳入的參數(shù)，可以在pc端打開，參數(shù)信息會通過log打出，僅在pc端時才會打印。 appId: data.data.result.appId, timestamp: data.data.result.timestamp, nonceStr: data.data.result.nonceStr, signature: data.data.result.signature, jsApiList: [//需要調(diào)用的JS接口列表 'checkJsApi',//判斷當(dāng)前客戶端版本是否支持指定JS接口 'onMenuShareTimeline',//分享給好友 'onMenuShareAppMessage',//分享到朋友圈 'onMenuShareQQ',//分享到QQ 'onMenuShareWeibo',//分享到微博 'onMenuShareQZone'//分享到QQ空間 ] // 必填，需要使用的JS接口列表，所有JS接口列表見附錄2 }); }, error:function(data){ //alert("data"); } }); //分享寫在ready里 wx.ready(function () { wx.checkJsApi({ jsApiList: [ 'checkJsApi',//判斷當(dāng)前客戶端版本是否支持指定JS接口 'onMenuShareTimeline',//分享給好友 'onMenuShareAppMessage',//分享到朋友圈 'onMenuShareQQ',//分享到QQ 'onMenuShareWeibo',//分享到微博 'onMenuShareQZone'//分享到QQ空間 ] }); //分享朋友圈 wx.onMenuShareTimeline({ title: '那啥APP送紅包啦！', desc: '用那啥，輕輕松松找翻譯~', // 分享描述 link: base, // 分享鏈接，該鏈接域名或路徑必須與當(dāng)前頁面對應(yīng)的公眾號JS安全域名一致 imgUrl: path+'/oss/resources/images/share_logo.png',// 自定義圖標(biāo) trigger: function (res) { // 不要嘗試在trigger中使用ajax異步請求修改本次分享的內(nèi)容， //因為客戶端分享操作是一個同步操作，這時候使用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, // 分享鏈接，該鏈接域名或路徑必須與當(dāng)前頁面對應(yīng)的公眾號JS安全域名一致 imgUrl: path+'/oss/resources/images/share_logo.png', // 自定義圖標(biāo) type: 'link', // 分享類型,music、video或link，不填默認為link dataUrl: '', // 如果type是music或video，則要提供數(shù)據(jù)鏈接，默認為空 success: function () { // 用戶確認分享后執(zhí)行的回調(diào)函數(shù) //alert('shared success'); $('.mask').hide(); }, cancel: function () { // 用戶取消分享后執(zhí)行的回調(diào)函數(shù) //alert('shared cancle'); $('.mask').hide(); }, fail: function (res) { //alert(JSON.stringify(res)); $('.mask').hide(); } }); //分享到QQ wx.onMenuShareQQ({ title: '那啥APP送紅包啦！', desc: '用那啥，輕輕松松找翻譯~', // 分享描述 link: base, // 分享鏈接，該鏈接域名或路徑必須與當(dāng)前頁面對應(yīng)的公眾號JS安全域名一致 imgUrl: path+'/oss/resources/images/share_logo.png', // 自定義圖標(biāo) type: 'link', // 分享類型,music、video或link，不填默認為link dataUrl: '', // 如果type是music或video，則要提供數(shù)據(jù)鏈接，默認為空 success: function () { // 用戶確認分享后執(zhí)行的回調(diào)函數(shù) //alert('shared success'); $('.mask').hide(); }, cancel: function () { // 用戶取消分享后執(zhí)行的回調(diào)函數(shù) //alert('shared cancle'); $('.mask').hide(); }, fail: function (res) { //alert(JSON.stringify(res)); $('.mask').hide(); } }); //分享到騰訊微博 wx.onMenuShareWeibo({ title: '那啥APP送紅包啦！', desc: '用那啥，輕輕松松找翻譯~', // 分享描述 link: base, // 分享鏈接，該鏈接域名或路徑必須與當(dāng)前頁面對應(yīng)的公眾號JS安全域名一致 imgUrl: path+'/oss/resources/images/share_logo.png', // 自定義圖標(biāo) type: 'link', // 分享類型,music、video或link，不填默認為link dataUrl: '', // 如果type是music或video，則要提供數(shù)據(jù)鏈接，默認為空 success: function () { // 用戶確認分享后執(zhí)行的回調(diào)函數(shù) //alert('shared success'); $('.mask').hide(); }, cancel: function () { // 用戶取消分享后執(zhí)行的回調(diào)函數(shù) //alert('shared cancle'); $('.mask').hide(); }, fail: function (res) { //alert(JSON.stringify(res)); $('.mask').hide(); } }); //分享到QQ空間 wx.onMenuShareQZone({ title: '那啥APP送紅包啦！', desc: '用那啥，輕輕松松找翻譯~', // 分享描述 link: base, // 分享鏈接，該鏈接域名或路徑必須與當(dāng)前頁面對應(yīng)的公眾號JS安全域名一致 imgUrl: path+'/oss/resources/images/share_logo.png', // 自定義圖標(biāo) type: 'link', // 分享類型,music、video或link，不填默認為link dataUrl: '', // 如果type是music或video，則要提供數(shù)據(jù)鏈接，默認為空 success: function () { // 用戶確認分享后執(zhí)行的回調(diào)函數(shù) //alert('shared success'); $('.mask').hide(); }, cancel: function () { // 用戶取消分享后執(zhí)行的回調(diào)函數(shù) //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'); } })
`
-
驗證手機號函數(shù)
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; } } -
驗證驗證碼函數(shù)
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); } -
獲取地址欄參數(shù)
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; }
