1. 程式人生 > >常用操作DOM的方法及物件封裝

常用操作DOM的方法及物件封裝

1、使用Javascript打印出1-10000之間的所有對稱數(例如 121 1331等)【掌握】
程式碼:
function print(start,end) {
	if (start>end) {
		return [];
	}
	var res=[];
	for(var i=start;i<end;i++){
		var len=i.toString().length;
		if (i.toString()===i.toString().split('').reverse().join('')&&len>1) {
			res.push(i); 
		}
	}
	return res;
}
2、寫一個traverse函式,輸出所有頁面寬度和高度大於50畫素的節點。【掌握】
function traverse(){
	var arr=[...document.querySelector('body *')];
	return arr.filter(function(node){
		return node.offsetWidth>50&&node.offsetHeight>50;
	});
}
3、js物件的深度克隆程式碼實現【掌握】
function deepClone(obj){
	var newObj=obj instanceof Array?[]:{};
	for (var attr in obj) {
		if (obj.hasOwnProperty(attr)) {//防止複製原型鏈上的屬性
			newObj[attr]=typeof obj[attr]=='object'?deepClone(obj[attr]):obj[attr];
		}
	}
	return newObj;
}
4、編寫一個JavaScript函式,實時顯示當前時間,格式“年-月-日 時:分:秒”。【掌握】
程式碼:
(function curTime(){
	setInterval(function(){
		let time=new Date();
		let [year,month,day,hour,minute,second]=[time.getFullYear(),time.getMonth()+1,time.getDate(),time.getHours(),time.getMinutes(),time.getSeconds()];
		var cur=year+'-'+month+'-'+day+' '+hour+':'+minute+":"+second;
		console.log(cur);
	},1000);
})();
5、js操作和獲取cookie【掌握】
程式碼:
function setCookie(name,value,expires,path,domain,secure) {
    var cookieText=encodeURIComponent(name)+'='+encodeURIComponent(value);
    if (expires instanceof Date) {
        cookieText+=';expires='+expires;
    }
    if (path) {
        cookieText+=';path='+path;
    }
    if (domain) {
        cookieText+=';domain='+domain;
    }
    if (secure) {
        cookieText+=';secure';
    }
    document.cookie=cookieText;
}
// 獲取cookie
function getCookie(name) {
    var cookieName=encodeURIComponent(name)+'=';
    var cookieStart=document.cookie.indexOf(cookieName);
    var cookieValue=null;
    if (cookieStart>-1) {
        var cookieEnd=document.cookie.indexOf(';',cookieStart);
        if (cookieEnd==-1) {
            cookieEnd=document.cookie.length;
        }
        cookieValue=decodeURIComponent(document.cookie.substring(cookieStart+cookieName.length,cookieEnd));
    }
    return cookieValue;
}
// 刪除cookie
function unsetCookie(name) {
    document.cookie=name+'=;expires='+new Date(0);
}
6、寫一個通用的事件監聽器函式【掌握】
程式碼:
obj.eventFunc={
	addEvent(element,type,handler){
        if(element.addEventListener){
            element.addEventListener(type,handler,false);
        }else if(element.attachEvent){
            element[type+handler]=function(e){
                handler.call(element,window.event);
            };
			//不用匿名函式是為了便於移除事件
            element.attachEvent("on"+type, element[type+handler]);
        }
    },
    removeEvent(element,type,handler){
        if(element.removeEventListener){
            element.removeEventListener(type,handler,false);
        }else if(element.detachEvent){
            element.detachEvent("on"+type,element[type+handler]);
            element[type+handler]=null;
        }
    },
    getEvent(e){
        return e||window.event;
    }, 
    getTarget(e){
        e=this.getEvent(e);
        var target=e.target||e.srcElement;
        if(target.nodeType==3){//如果是Safari下的文字節點
            target = target.parentNode;
        }
        return target;
    },
    getCharCode(e){
        e=this.getEvent(e);
        if(typeof e.charCode=="number"){
			return e.charCode;
		}else{
			return e.keyCode;
		}   
    }, 
    preventDefault(e){
        e=this.getEvent(e);
        if(e.preventDefault){
			e.preventDefault();
		}else{
			e.returnValue = false;
		}
	}, 
    stopPropagation(e){
        e=this.getEvent(e);
        if(e.stopPropagation){
			e.stopPropagation();
		}else{
			e.cancelBubble = true;
		}    
    },
}
7、用javascript實現使用者登入驗證的程式碼。【掌握】
//檢查物件checkObject
var checkObject=function(){
	var tipP=document.createElement("p");
	tipP.appendChild(document.createTextNode("密碼錯誤"));
	var tipU=document.createElement("p");
	tipU.appendChild(document.createTextNode("使用者名稱錯誤"));
 
	function addErrorTip(node,type){
		node.className='error';
		if(type=='username'){
			node.parentNode.appendChild(tipU);  
		}else if(type == 'password'){
			node.parentNode.appendChild(tipP);
		}
	}
	function removeErrorTip(node,type){
		node.className='';                
		if(type==='username'){                    
			node.parentNode.removeChild(tipU);  
		}else if(type==='password'){
			node.parentNode.removeChild(tipP);
		}
	}
	function isValidName(name){
		if(name){
			return true;
		}else{
			return false;
		}
	}
	function isValidPassword(password){
		var lenIsEnough=password.length>6; //密碼長度大於6
		var hasDigital=/{\d}+/.test(password); //密碼包含數字
		var hasCharater=/{\w}+/.test(password); //密碼包含其它字元         
		return lenIsEnough&&hasDigital&&hasCharater;
	}
	return {
		addErrorTip:addErrorTip,
		removeErrorTip:removeErrorTip,
		isValidName:isValidName,
		isValidPassword:isValidPassword
	};
};
//建立一個檢查物件的例項checkObj    
var checkObj=checkObject();
var form=document.forms['login-form'];
var username=form['username'];   //name是關鍵字
var password=form['password']; 
       
form.addEventListener('submit',function(e){                
	if(!checkObj.isValidName(username.value)) {
		checkObj.addErrorTip(username,'username');
		e.preventDefault();     
	}
	if(!checkObj.isValidPassword(password.value)) {
		checkObj.addErrorTip(password,'password');                              
		e.preventDefault();
	}
}, false);

form.addEventListener('reset',function(){
	checkObj.removeErrorTip(username,'username');
	checkObj.removeErrorTip(password,'password');
},false);
	 
username.addEventListener('blur',function() {
	if (!checkObj.isValidName(username.value)) {
		checkObj.addErrorTip(username,'username');
	}
}, false);

username.addEventListener('focus',function() {
	checkObj.removeErrorTip(username,'username');
}, false);

password.addEventListener('blur',function() {
	if (!checkObj.isValidPassword(password.value)) {
		checkObj.addErrorTip(password,'password');
	}
}, false);

password.addEventListener('focus',function(event) {
	checkObj.removeErrorTip(password,'password');
}, false);
8、我們在進行元件開發的時候,經常會需要用到大量顏色。有兩種方法。方法1:預先定義好大量的顏色;方法2:自定義函式,採用隨機生成顏色的方式。請採用方法2實現隨機顏色汲取。
程式碼:
function getColor(){
	var hex=(Math.random()*0xffffff).toString(16);
	return '#'+hex.split('.')[0];
}
9、編寫一個JavaScript函式,輸入指定型別的選擇器
(僅需支援id,class,tagName三種簡單CSS選擇器,無需相容組合選擇器)
可以返回匹配的DOM節點陣列,需考慮瀏覽器相容性和效能。
var query = function(selector){
	var str=selector.match(/^(\.|#)?(\w+)$/);
	var res=[];
	if (str) {
		switch(str[1]) {
			case '.':
				res=[...document.getElementsByClassName(str[2])];
				break;
			case '#':
				res.push(document.getElementById(str[2]));
				break;
			default:
				res=[...document.getElementsByTagName(str[2])];
		}
	}
	return res;
}