基礎方法封裝匯總
隨機數生產
function randomNum(alls, now) {
var arr = []
var Newarr = []
for (var i = 1; i <= alls; i++) {
arr.push(i);
}
for (var i = 0; i < now; i++) {
Newarr.push(arr.splice(Math.floor(Math.random() * arr.length), 1))
}
return Newarr;
}
randomNum(49,7)快速排序
function quickSort(arr) {
if (arr.length <= 1) { //有可能為0
return arr;
}
var num = Math.floor(arr.length / 2) //向下取整，找到中間數
var numV = arr.splice(num, 1); //找到基準點的數值
var left = []; //存小於基准點的值
var right = []; //存大於基準點的值
for (var i = 0; i < arr.length; i++) {
if (arr[i] < numV) {
left.push(arr[i]);
}
else {
right.push(arr[i]);
}
}
//以上一次操作，下面再利用遞歸原理
return quickSort(left).concat([numV], quickSort(right));
//左邊.concat(基准數,右邊)
}
alert( quickSort([30,12,5,6,9,18,57,2]) )事件綁定
function on(obj, evt, fn) {
if (obj.addEventListener) {
obj.addEventListener(evt, fn, false)
}
else {
obj.attachEvent('on' + evt, function () {
fn.call(obj);
})
}
}
on(document, 'click', fn1)元素拖拽
function drag(obj) {
var cw = document.documentElement.clientWidth;
var ch = document.documentElement.clientHeight;
obj.onmousedown = function (e) {
var e = e || event;
var disW = e.clientX - this.offsetLeft;
var disH = e.clientY - this.offsetTop;
//解決IE文字選中後移動問題：
if (obj.setCapture) {
obj.setCapture();
}
document.onmousemove = function (e) {
var e = e || event;
var cw_w = e.clientX - disW;
var ch_h = e.clientY - disH
if (cw_w < 0) {
cw_w = 0
}
else if (ch_h < 0) {
ch_h = 0
}
else if (cw_w > cw - obj.offsetWidth) {
cw_w = cw - obj.offsetWidth
}
else if (ch_h > ch - obj.offsetHeight) {
ch_h = ch - obj.offsetHeight
}
obj.style.left = cw_w + 'px'
obj.style.top = ch_h + 'px'
}
document.onmouseup = function () {
document.onmousemove = null;
//解決IE8抬起鼠標，釋放全局捕獲 releaseCapture();
if (obj.releaseCapture) {
obj.releaseCapture()
}
}
return false; //down事件觸發時陰止默認行為；
}
}獲取className
function getClassName(parent, tagName, className) {
var aEls = parent.getElementsByTagName(tagName)
var arr = []
for (var i = 0; i < aEls.length; i++) {
var aClassName = aEls[i].className.split(' '); //当前classname拆分成数组
for (var j = 0; j < aClassName.length; j++) {
if (aClassName[j] == className) { //如果第j个class == classname
arr.push(aEls[i]) //则把当前第i个class push进来
break; //如果class='box box'相同名字，找到一个跳出for
}
}
}
return arr;
}
getClassName(document, 'li', 'box');增加class方法
function addClass(obj, className) {
if (obj.className == '') { //原本无
obj.className = className;
}
else { //原本有
var arrClassName = obj.className.split(' ');
var _index = arrIndexOf(arrClassName, className);
if (_index == - 1) { //不存在
obj.className += ' ' + className;
}
}
}
//判斷一個數組裏是否存在元素
function arrIndexOf(arr, v) {
for (var i = 0; i < arr.length; i++) {
if (arr[i] == v) {
return i; //当前重複的值出现位置
}
}
return - 1;
}
addClass(box, 'box111');刪除class方法
function removeClass(obj, className) {
if (obj.className != '') { //如果有class
var arrClassName = obj.className.split(' ');
console.log(arrClassName);
var _index = arrIndexOf(arrClassName, className);
if (_index != - 1) { //如果有需要移除的class
arrClassName.splice(_index, 1); //删除数组裏需要移除的
obj.className = arrClassName.join(' ');//再把處理完的數組class給obj
}
}
}
//判斷一個數組裏是否存在元素
function arrIndexOf(arr, v) {
for (var i = 0; i < arr.length; i++) {
if (arr[i] == v) {
return i; //当前重複的值出现位置
}
}
return - 1;
}
removeClass(box, 'box3')選中文字方法
function selectText() {
if (document.selection) { //IE
return document.selection.createRange().text;//字符串
}
else {
return window.getSelection().toString(); //getSelection()對象，需轉成字符串
}
}阻止冒泡
function (ev) {
ev = ev || event
if(ev.stopPropagation){
ev.stopPropagation();
}
else{
ev.cancelBubble = true;
}
}阻止默認事件
function (ev) {
ev = ev || event
if (ev.preventDefault) {
ev.preventDefault();
}
else {
ev.returnValue = false;
return false;
}
}判斷IE
var ie = !-[1,] //IE9已修復
//推薦
if(!window.VBArray){
alert('Not IE')
}
else{
alert('IE')
}getStyle,startMove方法
function startMove(obj,json,endFn){clearInterval(obj.timer);obj.timer=setInterval(function(){var bBtn=true;for(var attr in json){var iCur=0;if(attr=="opacity"){if(Math.round(parseFloat(getStyle(obj,attr))*100)==0){iCur=Math.round(parseFloat(getStyle(obj,attr))*100)}else{iCur=Math.round(parseFloat(getStyle(obj,attr))*100)||100}}else{iCur=parseInt(getStyle(obj,attr))||0}var iSpeed=(json[attr]-iCur)/8;iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);if(iCur!=json[attr]){bBtn=false}if(attr=="opacity"){obj.style.filter="alpha(opacity="+(iCur+iSpeed)+")";obj.style.opacity=(iCur+iSpeed)/100}else{obj.style[attr]=iCur+iSpeed+"px"}}if(bBtn){clearInterval(obj.timer);if(endFn){endFn.call(obj)}}},30)}function getStyle(obj,attr){if(obj.currentStyle){return obj.currentStyle[attr]}else{return getComputedStyle(obj,false)[attr]}};
getStyle(obj,'left') //top,opacity,zIndex,width,height....帶px
startMove(img,{left:30;top:100}，fn)//left:30;top:100同時進行
startMove(img,{left:30},function(){ startMove(img,{top:100}) },fn) //分步執行Ajax封裝
function ajax(url,fnSucc,fnFaild){var oAjax=null;if(window.XMLHttpRequest){oAjax=new XMLHttpRequest()}else{oAjax=new ActiveXObject("Microsoft.XMLHTTP")}oAjax.open("GET",url,true);oAjax.send();oAjax.onreadystatechange=function(){if(oAjax.readyState==4){if(oAjax.status==200){fnSucc(oAjax.responseText)}else{if(fnFaild){fnFaild()}}}}};
ajax('date.js',function(){alert('成功')},function(){alert('失敗')})兼容獲取class對象
function getByClass(oParent, sClass) {
var aEle = oParent.getElementsByTagName('*');
var result = [] //最后返回数组
var re = new RegExp('\\b' + sClass + '\\b', 'i');//正则对象
for (var i = 0; i < aEle.length; i++) {
if (re.test(aEle[i].className)) {
result.push(aEle[i])
}
}
return result;
}
var box = getByClass(document, 'box')連續觸發兼容寫法
if(ie){
this.inp.onpropertychange = function(){}
}
else{
this.inp.oninput = function(){}
}doMove前後上下移動
function doMove(obj, attr, dir, target) { //obj,屬性[left，top]，速度[每次時間移動多長],目標點
dir = parseInt(getStyle(obj, attr)) < target ? dir : - dir
clearInterval(obj.timer)
obj.timer = setInterval(function () {
var speed = parseInt(getStyle(obj, attr)) + dir
if (speed > target && dir > 0 || speed < target && dir < 0) {
speed = target
}
obj.style[attr] = speed + 'px'
if (speed == target) {
clearInterval(obj.timer)
}
}, 30)
}
doMove(obj,'left',30,10) //移動obj的left到10px的位置,速度為每30ms移動30px
doMove(obj,'left',40,500) //移動obj的left到500px位置，速度為每30ms移動40px
//如果當前left從小到大，則為往前，反之為往後；WebkitTransitionEnd webkitAnimationEnd方法封装
function addEnd(obj, fn)
{
obj.addEventListener('WebkitTransitionEnd', fn, false);
obj.addEventListener('transitionend', fn, false);
}
function removeEnd(obj, fn)
{
obj.removeEventListener('WebkitTransitionEnd', fn, false);
obj.removeEventListener('transitionend', fn, false);
}
//同理還有
function addEnd(obj, fn) {
obj.addEventListener('webkitAnimationEnd', fn, false);
obj.addEventListener('animationend', fn, false);
}
//end函數如觸發transition行為，即改變width/height/opacity....，則須先removeEnd(obj,fn)
addEnd(obj,end)
function end(){
removeEnd(obj,end)
//do something...
}直角三角形已知斜邊及角度，求另兩邊，方法封裝
function toLT(iR, iDeg) { //斜边[圆弧半径]，角度
return {
l: Math.round(Math.sin(iDeg / 180 * Math.PI) * iR),
t: Math.round(Math.cos(iDeg / 180 * Math.PI) * iR)
}
}
//如已知半徑iR = -150 ; 角度依次增加 var _RH = toLT(-150,90/4*i)
left = _RH.l;top = _RH.t獲取元素到屏幕的距離 直當於jq的offset()
function getPos(obj){
var pos = {left: 0, top:0};
while (obj) {
pos.left +=obj.offsetLeft;
pos.top +=obj.offsetTop;
obj = obj.offsetParent
}
return pos;
}抖動
function shake(obj, attr, endfn) {
if (obj.door) {
return
}
obj.door = 1;
var pos = parseInt(css(obj,attr));
var arr = []; //20 -20 18 -18
var num = 0;
for (var i = 20; i > 0; i -= 2) {
arr.push(i, - i);
}
arr.push(0);
clearTimeout(obj.shake)
obj.shake = setInterval(function () {
obj.style[attr] = pos + arr[num] + 'px'
num++
if (num == arr.length) {
clearInterval(obj.shake)
endfn && endfn()
obj.door = 0;
}
}, 50)
}