1.cookie的封装
//定义cookie function setCookie(key,val,options){ options = options || {}; var path = options.path?";path="+options.path:""; if(options.expires){ var d = new Date(); d.setDate(d.getDate()+options.expires); var exp = ";espires"+d; } else { var exp = ""; } document.cookie = key + "=" + val + path + exp; } //删除cookie function removeCookie(key,options){ options = options || {}; options.expires = -1; setCookie(key,null,options); } //获取cookie function getCookie(key){ var date = document.cookie; var arr = date.split(";"); for(var i = 0;i < arr.length;i++){ if(arr[i].split("=")[0] === key){ return arr[i].split("=")[1]; } } return ""; }2.ajax 的封装
//Get function ajaxGet(url,callback,data){ data = data || {}; var str = ""; for(var i in data){ str += `${i}=${data[i]}&`; } var d = new Date(); url = url + "?" + str + "(这里可以随意添加字符串，只要符合js的命名规则就行)" + d.getTime(); var xhr = new XMLHttpRequest(); xhr.open("get",url,true); xhr.onreadystatechange = function(){ xhr.readyState; if(xhr.readyState == 4 && xhr.status == 200){ callback(xhr.responseText); } xhr.send(); } } //Post function ajaxPost(url,callback,data){ data = data || {}; var str = ""; for(var i in data){ str += `${i}=${data[i]}&`; } var xhr = new XMLHttpRequest(); xhr.open("post",url,true); xhr.onstatechange = function(){ xhr.readyState; if(xhr.readyState == 4 && xhr.status == 200){ callback(xhr.responseText); } } xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); xhr.send(str); }3.json封装
function json(url,callback,data){ data = data || {}; var str = ""; for(var i in data){ str += `${i}=${data[i]}&`; } url = url + "?" + str.slice(0,str.length-1); var script = document.creatElement("script"); script.src = url; document.body.appendChild("script"); window[data[data.columnName]] = function(res){ callback(res); } }4.动画函数的封装
function animate(dom,cssObj,duration,callback){ var interval = 20; var nowObj = {}; for(var i in cssObj){ nowObj[i] = parseInt(getStyle(dom,1)); } var allCount = duration / interval; var count = 0; var timer = setinterval(function(){ count++; for(var i in cssObj){ var distance = cssObj[i] - nowObj[i]; var step = distance / allCount; if(i.toLowerCase() === "opacity"){ dom.style[i] = nowObj[i] + count*step; } else { dom.style[i] = nowObj[i] + count*step + 'px'; } } if(count >= allcount){ clearinterva(timer); if(callback){ callback(); } } },interval); function getStyle(dom,cssProp){ if(window.getComputedStyle){ return window.getComputedStyle(dom)[cssProp]; } else { return dom.currentStyle[cssProp]; } } }