記錄-js基礎練習題_ZenDei技術網路在線

這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助隔行換色（%）: window.onload = function() { var aLi = document.getElementsByTagName('li'); for(var i = 0; i < aLi.length; i++ ...

這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助

隔行換色（%）:

window.onload = function() {
    var aLi = document.getElementsByTagName('li');
    for(var i = 0; i < aLi.length; i++){
        if(i%2 == 1){
			aLi[i].style.background = '#bfa';
        }
    }
}
<ul>
    <li>aaa</li>
	<li>bbb</li>
	<li>ccc</li>
	<li>ddd</li>
</ul>

簡易計算器：

<script>
	window.onload = function(){
		var oNum1 = document.getElementById('num1');
        var oNum2 = document.getElementById('num2');
        var oBtn = document.getElementById('btn');
        var oSel = document.getElementById('sel');
        oBtn.onclick = function(){
            var iNum1 = parseInt(oNum1.value);
            var iNum2 = parseInt(oNum2.value);
            switch(oSel.value){
				case '+':
                	alert(iNum1+iNum2);
                break;
                case '-':
               		alert(iNum1-iNum2);
                break;
                case '*':
                	alert(iNum1*iNum2);
                break;
                case '/':
                	alert(iNum1/iNum2);
                break;
                default:
                	alert('你沒有合適的運算符！');
                break;
            }
        }
	}
</script>
<input type="text" id = "num1">
<select name="" id="sel">
	<option value="+">+</option>
	<option value="-">-</option>
	<option value="*">*</option>
	<option value="/">/</option>
</select>
<input type="text" id="num2">
<input type="button" value="計算" id="btn">

雙色球隨機數生成：

目標：生成一組（7個） 1-33之間的隨機不重覆的整數（1.生成一個1-33之間的整數。 2.生成7個–>迴圈長度不固定用while迴圈。 3.要求不重覆,補零操作）

<script>
    function rnd(m, n) {
    return m + parseInt(Math.random()*(n-m));
	}
	//數組去重
	function findInArr(num,arr) {
		for(var i = 0; i < arr.length; i++) {
            if(arr[i] == num){
                return true;
            }
        }
        return false;
    }
	function toDo(n){
        return n < 10 ? '0' + n : '' + n;
    }
	var arr = [];
	while(arr.length < 7) {
        //1-34包括1，不包括34
        var rNum = rnd(1,34);
        if(findInArr(rNum,arr) == false) {
            arr.push(toDo(rNum));
        }
    }
	document.write(arr);
</script>

滑鼠滑過div顯示隱藏：

<div id="box1"
   οnmοuseοver="document.getElementById('box1').style.width='200px';document.getElementById('box1').style.height='200px'"
     οnmοuseοut="document.getElementById('box1').style.width='100px';document.getElementById('box1').style.height='100px'">
</div>

條件判斷if：

點擊按鈕，如果div顯示，那麼隱藏它，如果div隱藏，那麼顯示它。

<input type="button" value="顯示隱藏" οnclick="showHide()">
<div id="box1"></div>
<script>
        function showHide() {
            var oDiv = document.getElementById('box1');
            if (oDiv.style.display == "block") {
                oDiv.style.display = "none";
            } else {
                oDiv.style.display = "block";
            }
        }
</script>

背景色換膚功能：

一個頁面兩個按鈕，一個div點擊不同的按鈕，背景色分別變成不同的顏色，字體大小也要改變。

<style>
        #box1 {
            width: 200px;
            height: 200px;
            background-color: #bfa;
        }
        .day{
            background: green;
            font-size: 10px;
        }
        .night{
            background: gray;
            font-size: 22px;
        }
</style>
<input type="button" value="白天" οnclick="showDay()">
<input type="button" value="夜晚" οnclick="showNight()">
<div id="box1">實現白天夜晚換膚功能</div>
<script>
        function showDay(){
            document.body.className="day";   
        }
        function showNight(){
            document.body.className="night";
        }
</script>

行為和結構的分離：

<script>
	window.onload = function(){
		//1.獲取元素
		var oBtn = document.getElementById('btn');
		//2.加事件
		oBtn.onclick = function(){
			alert();
		};
	};
</script>

全選功能的實現：

<script>
window.onload = function () {
	var oA = document.getElementById('all');
	var oBox = document.getElementById('box');
	//獲取一組元素
	var oInp = oBox.getElementsByTagName('input');
	oA.onclick = function () {
		for (var i = 0; i < oInp.length; i++) {
			oInp[i].checked = true;
		}
	};
};
</script>
<input type="button" value="全選" id="all">
<hr>
<div id="box">
	<input type="checkbox" name="">
	<input type="checkbox" name="">
	<input type="checkbox" name="">
	<input type="checkbox" name="">
</div>

操作元素類容和屬性的兩種方式：

①方式：

window.onload = function(){
	var oBtn = document.getElementById('btn');
	oBtn.style.background = 'red';
	//方式二能實現1實現不了的功能oBtn['style']['background'] = 'green';
    //var aaa = 'background';
    //oBtn.style[aaa] = 'green';能夠使用變數
}

②內容：

表單元素：oBtn.value
非表單元素：
前端學習
oP.innerHTML

反選功能實現：

window.onload = function() {
	var oR = document.getElementById('reverse');
	var oC = document.getElementById('C1');
	oR.onclick = function(){
		if(oC.checked == true){
            oC.checked = false;
		}else{
            oC.checked = true
        }
	}
} 
<input type = "button"  value="單個覆選框反選" id="reverse">
<input type="checkbox" name="" id="C1">
    //這樣寫太麻煩了，不夠簡潔。改變如下：

<script>
	window.onload = function() {
		var oR = document.getElementById('reverse');
		var oC = document.getElementById('C1');
		oR.onclick = function() {
			oC.checked = !oC.checked;
		}
	}
</script>
<input type="button" value="單個覆選框反選" id="reverse">
<input type="checkbox" name="" id="C1">

聯動選擇：

需求：點擊上面的全選，那麼下麵都選中，如果下麵全選中，那麼上面也選中，如果下麵有一個沒選中，那麼上面不選中。

<script>
    window.onload = function() {
		var oA = document.getElementById('all');
    	var oBox = document.getElementById('box');
    	var oInp = oBox.getElementsByTagName('input');
    	oA.onclick = function(){
            for(var i = 0; i < oInp.length; i++){
                oInp[i].checked = oA.checked;
            }
        };
    
    	for(var i = 0; i < oInp.length; i++){
			oInp[i].onclick = function() {
				var count = 0;
                for(var i = 0; i < oInp.length; i++){
                    if(oInp[i].checked){
                        count++;
                    }
                }
                if(count == oInp.length){
                    oA.checked = true;
                }else{
                    oA.checked = false;
                }
            }
        }
}
</script>
<input type="checkbox" name id="all">全選
<hr>
<div id="box">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
</div>
//為什麼必須加一個box

選項卡實現（排他思想）:

for迴圈是一瞬間完成的

<style>
	#box .on{
		background:#bfa;
	}
	#box div{
		width:300px;
		height:200px;
		border:1px solid red;
		display: none;
	}
</style>
<script>
	window.onload = function(){
		var oBox = document.getElementById('box');
		var oBtn = oBox.getElementsByTagName('input');
		var oDiv = oBox.getElementsByTagName('div');
		for(var i = 0; i < oBtn.length; i++){
            oBtn[i].index = i;
            oBtn[i].onclick = function(){
                for(var i = 0; i < oBtn.length; i++){
					oBtn[i].className = '';
                    oDiv[i].style.display = 'none';
                }
                this.className = 'on';
                oDiv[this.index].style.display = 'block';
            }
        }
	}
</script>
<div id = "box">
	<input type="button" value="體育" class="on">
	<input type="button" value="娛樂">
	<input type="button" value="新聞">
	<div style="display='block'">***獲得100米第一</div>
	<div>段奕巨集真帥！</div>
	<div>美國懂王昨日於白宮遭**</div>
</div>

簡易定時器：

<script>
    window.onload = function() {
		var oTime = document.getElementById('time');
    	var oStart = document.getElementById('start');
    	var oStop = document.getElementById('stop');
    	var timer = null;
    	function toDo(n){
            return n < 10 ? '0' + n : n;
        }
    	oStart.onclick = function() {
            var s = 0;
            clearInterval(timer);
			timer = setInterval(function(){
                s++;
                oTime.value = toDo(parseInt(s / 60)) + ':' + toDo( s % 60);
            },50);	
        };
    	oStop.onclick = function() {
			clearInterval(timer);
        }
	};
</script>
<input type = "text" value="00:00" id = "time">
<input type = "button" value="開始" id="start">
<input type = "button" value = "停止" id = "stop">

文字時鐘：

<script>
    window.onload = function() {
		var oP = document.getElementById('p1');
    	var timer = null;
    	function toDo(n) {
			return n < 10 ? '0' + n : n;
        }
    	function time() {
            var arr = ['日', '一', '二', '三', '四', '五','六'];
            var oDate = new Date();
            var year = oDate.getFullYear();
            var month = oDate.getMonth() + 1;
            var date = oDate.getDate();
            var w = oDate.getDay();
            var h = oDate.getHours();
            var m = oDate.getMinutes();
            var s = oDate.getSeconds();
            oP.innerHTML = year + '年' + month + '月' + date + '日' +toDo(h) +':' + toDo(m) + ':' + toDo(s) + '星期' + arr[w]; 
        }
    	time();//不需要等一秒鐘再執行函數
    	clearInterval(timer);//定時器先關閉再執行
    	timer = setInterval(time,1000);    	
	}
</script>
<p id="p1">2020年8月20日15：56：30星期四</p>

延遲廣告：

圖片2s後顯示，2s後消失，當滑鼠移入圖片時，不消失，移出後2s消失。

定時器裡面可以套定時器

<script>
	window.onload = function() {
		var oImg = document.getElementById('pic');
        var timer = null;
        var timer2 = null;
        clearTimeout(timer);
        timer = setTimeout(function(){
        	oImg.style.display = 'block';
        	clearTimeout(timer2);
        	timer2 = setTimeout(function(){
        		oImg.style.display = 'none';
        	},2000);
        },2000);    
        oImg.onmouseover= function(){
        	clearTimeout(timer2);
        };
        oImg.onmouseout = function(){
        	timer2 = setTimeout(function(){
        		oImg.style.display = 'none';
        	},2000);
        };
	};
</script>
<img src="../image/1.jpg" id="pic">

自定義屬性：

<script>
	window.onload = function(){
		var oBtn = document.getElementById('btn');
		oBtn.abc = 0; //自定義屬性
		oBtn.onclick = function(){
			alert(this.abc);
		}
	};
</script>
<input type="button" value="aaa" id="btn">

輪播圖（重點）：

<style>
	#box .on{
		background: #bfa;
	}
	#box div{
		width: 300px;
		height: 200px;
		border: 1px solid red;
        display: none;
	}
</style>
<script>
	window.onload = function() {
		var oBox = document.getElementById('box');
		var oPrev = document.getElementById('prev');
		var oNext = document.getElementById('next');
		var oBtn = oBox.getElementsByTagName('input');
		var oDiv = oBox.getElementsByTagName('div');
		var iNow = 0;
		for(var i = 0; i < oBtn.length; i++){
			oBtn[i].index = i;
			oBtn[i].onclick = function(){
				iNow = this.index;
				for(var i = 0; i < oBtn.length; i++){
					oBtn[i].className='';
					oDiv[i].style.display='none';
				}
				this.className='on'; //this=oBtn[iNow]
				oDiv[this.index].style.display='block';
			};
		}
		//下一個播放
		oNext.onclick = function(){
			for(var i = 0; i < oBtn.length; i++){
				oBtn[i].className='';
				oDiv[i].style.display='none';
			}
			iNow++;
			if(iNow == oBtn.length){iNow = 0;}
			oBtn[iNow].className='on';
			oDiv[iNow].style.display='block';
		};
		//上一個播放
		oPrev.onclick = function(){
			for(var i = 0; i < oBtn.length; i++){
				oBtn[i].className='';
				oDiv[i].style.display='none';
			}
			iNow--;
			if(iNow == -1){iNow = oBtn.length - 1;}
			oBtn[iNow].className='on';
			oDiv[iNow].style.display='block';
		};		
	};
</script>
<div id="box">
	<a href="javascript:;" id="prev"><-</a>
    <input type="button" value="aaa" class="on">
    <input type="button" value="bbb">
    <input type="button" value="ccc">
    <a href="javascript:;" id="next">-></a>
    <div style="display:block">aaa</div>
    <div>bbb</div>
    <div>ccc</div>
</div>

簡化代碼（封裝）+ 實現自動播放功能如下：

<script>
	window.onload = function() {
		var oBox = document.getElementById('box');
		var oPrev = document.getElementById('prev');
		var oNext = document.getElementById('next');
		var oBtn = oBox.getElementsByTagName('input');
		var oDiv = oBox.getElementsByTagName('div');
		var iNow = 0;
    	var timer = null;
    	function tab(){
            for(var i = 0; i < oBtn.length; i++){
				oBtn[i].className='';
				oDiv[i].style.display='none';
			}			
			oBtn[iNow].className='on';
			oDiv[iNow].style.display='block';
        }
		for(var i = 0; i < oBtn.length; i++){
			oBtn[i].index = i;
			oBtn[i].onclick = function(){
				iNow = this.index;
				tab();
			};
		}
		//下一個播放
    	function fnNext(){
            iNow++;
			if(iNow == oBtn.length){iNow = 0;}
            tab();
        }
		oNext.onclick = fnNext;
		//上一個播放
		oPrev.onclick = function(){			
            iNow--;
			if(iNow == -1){iNow = oBtn.length - 1;}
            tab();
		};
    	//自動播放
    	clearInterval(timer);
    	timer = setInterval(function(){
            fnNext();
        },1000);
    	oBox.onmouseover = function(){
			clearInterval(timer);
        };
    	oBox.onmouseout = function(){
            clearInterval(timer);
          	timer = setInterval(function(){
                fnNext();
            },1000);  
        };
	};
</script>

理解立即執行函數：

var a = 12;
alert((a)); //2層括弧不影響結果
var show = function(){};
show(); //(show)()
;(function(){})();  //防止別人的代碼影響自己的

(function(){
	var a = b = 10;
})();
console.log(a); //undefined
console.log(b); //10

簡易發佈留言：

<script>
	window.onload = function(){
		var oTxt=document.getElementById('txt');
        var oBtn=document.getElementById('btn');
        var oUl=document.getElementById('ul1');
        oBtn.onclick = function(){
			var oLi = document.createElement('li');
            oLi.innerHTML=oTxt.value;
            //oUl.insertBefore(oLi,oUl.children[0]);
            //如果父級下麵沒有元素，那麼向後插入，有，則向前插入。相容IE
            if(oUl.children.length == 0){
            	oUl.appendChild(oLi);
            }else{
            	oUl.insertBefore(oLi,oUl.children[0]);
            }
            oTxt.value = '';
		};
	};
</script>
<input type="text" id="txt">
<input type="button" value="發佈" id="btn">
<ul id="ul1"></ul>

上移下移功能實現：

<script>
	window.onload = function(){
		var oUl = document.getElementById('ul1');
		var aPrev = oUl.getElementsByClassName('prev');
		//上移
		for(var i = 0; i < aPrev.length; i++){
			aPrev[i].onclick = function(){
				var obj = this.parentNode;
				if(obj == oUl.children[0]){
					alert('到頭了');
					return;
				}
				
				var oPrev = obj.previousElementSibling || obj.previousSibling;
				oUl.insertBefore(obj,oPrev);
			};
		}
		//下移
		var aNext = oUl.getElementsByClassName('next');
		for(var i = 0; i < aNext.length; i++){
			aNext[i].onclick = function(){
				var obj = this.parentNode;
				if(obj == oUl.children[oUl.children.length-1]){
					alert('到底了');
					return;
				}
				
				var oNext = obj.nextElementSibling || obj.nextSibling;
				var oNext2 = oNext.nextElementSibling || oNext.nextSibling;
				oUl.insertBefore(obj,oNext2);
			};
		}
	};
</script>
<ul id="ul1">
	<li><span>0.床前明月光</span>
		<a href="javascript:;" class="prev">上移</a>
		<a href="javascript:;" class="next">下移</a></li>
	<li><span>1.疑是地上霜</span>
		<a href="javascript:;" class="prev">上移</a>
		<a href="javascript:;" class="next">下移</a></li>
	<li><span>2.舉頭望明月</span>
		<a href="javascript:;" class="prev">上移</a>
		<a href="javascript:;" class="next">下移</a></li>
	<li><span>3.低頭思故鄉</span>
		<a href="javascript:;" class="prev">上移</a>
		<a href="javascript:;" class="next">下移</a></li>	
</ul>

右下角懸浮框功能實現：
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-SwhN8Ctu-1598018747062)(C:\Users\Hrj201305042\AppData\Roaming\Typora\typora-user-images\image-20200821143137668.png)]

//物體實際占的距離
window.onload = function(){
	var oDiv = document.getElementById('div1');
	alert(oDiv.offsetHeight);
};
//關於滾動的距離
body{height:3000px;}
#btn{position:fixed; left:10px; top:200px;}
window.onscroll = function(){
	var oBtn = document.getElementById('btn');
	oBtn.onclick = function(){
		var sT = document.documentElement.scrollTop || document.body.scrollTop;
		alert(sT);
	};
};
//可視區的高度
window.onload = function(){
	var oBtn = document.getElementById('btn');
	oBtn.onclick = function(){
		alert(document.documentElement.clientHeight);	
	};
};

<script>  //視窗縮小onresize
	window.onresize = window.onload=window.onscroll=
    function(){
		if(window.navigator.userAgent.indexOf('MSIE 6.0')!=-1){
			var oDiv = document.getElementById('div1');
			var sT = document.documentElement.scrollTop	|| document.body.scrollTop;
        	var cH = document.documentElement.clientHeight;
        	var oH = oDiv.offsetHeight;
        	oDiv.style.top = sT + cH + oH +'px';
        }	
	};
</script>
<div id="div1"></div>

json和數組的區別：

json中每個元素是以字元串作為下標，數組則是以數字作為下標。json使用for in迴圈，數組一般使用for迴圈。

var json = {"name":"leo", "age":18};  var arr=["leo",18];

json是種數據格式，和JavaScript沒有直接聯繫，js原生提供了部分json操作方法，是js數據交互最通用的數據格式之一

json和字元串互轉：

①字元串轉json：name=leo&age=18 => {“name”: “leo”, “age” : 18}

<script>	
	function url2json(str){
		var arr = str.split('&');
		var json = {};
		for(var i = 0; i < arr.length; i++){
			//[user = leo age = 18 class = javas]
			//arr[i].split('=')[0]  user
			//arr[i].split('=')[1]  leo
			//json['user'] = leo
			json[arr[i].split('=')[0]] = arr[i].split('=')[1];
		}
		return json
	}
	var str = 'user=leo&age=18&class=javas';
	console.log(url2json(str));
</script>

②json轉字元串{“name”: “leo” , “age” : 18} => name=leo&age=18

function json2url(json){
	var arr = [];
	for(var name in json){
		//name user
		//json[name] leo
		arr.push(name + '=' + json[name]);
		['name=leo', 'age=18']
	}
	return arr.join('&');
}
var json = {user:"leo", age:18, class:"javas"};
alert(json2url(json));

文字輸入框提示實現：

#box{position:relative;}
#box span{color:#ccc;position:absolute;left:6px;top:2px;}
<script>
	window.onload = function(){
		var oS = document.getElementById('s1');
		var oTxt = document.getElementById('txt');
		oTxt.onfocus = function(){
			oS.style.display = 'none';
		};
        oTxt.onblur = function(){
			if(oTxt.value == ''){
				oS.style.display = 'block';
			}
		};
		oS.onclick = function(){
			//oS.style.display = 'none';
			oTxt.focus();
		};
	};
</script>
<div id="box">
	<span id="s1">請輸入內容</span>
	<input type="text" id="txt">
</div>

事件對象：

<script>
	window.onload = function(){
		var oBtn = document.getElementById('btn');
		oBtn.onclick = function(ev){
			var oEvent = ev||event;
			console.log(oEvent);
		};
	};
</script>
<input type="button" value="點擊" id="btn">

事件冒泡：

document.onclick = function(){alert('document');};
<div id="div1" onclick="alert('div1')">
	<input type="button" value="按鈕" onclick="alert('input')">
</div> //點擊按鈕，從里往外傳，input->div1->document.
       //(父級沒有事件也往上傳)如果input的上級div不添加事件 input-> document
       
//取消冒泡：1標準：oEvent.stopPropagation&&oEvent.stopPropagation();
		2.IE: oEvent.cancelBubble&&(oEvent.cancelBubble=true);

//綁定事件：FF chrome
 oBtn.addEventListener('click',aaa,false);
//IE6-8 沒有捕獲階段，只有冒泡
oBtn.attachEvent('onclick', aaa;

獲取滑鼠點擊位置：

document.onclick = function(){
    //chrome , IE
	alert('left:' + event.clientX+',top:'+event.clientY);
};

div跟隨滑鼠移動：

滑鼠移動，div跟隨滑鼠移動

實現：1.獲取滑鼠位置 2.賦值給div的left和top樣式

#div1{width:200px;height:200px;background:#bfa;position:absolute;}
<script>	
	window.onload = function(){
		var oDiv = document.getElementById('div1');
		document.onmousemove = function(ev){
			var oEvent = ev || event;
			console.log('ev.clientX:' + oEvent.clientX + 'ev.clientY:' + oEvent.clientY);
			oDiv.style.left = oEvent.clientX + 'px';
			oDiv.style.top = oEvent.cilentY + 'px';
		};
	};
</script>
<div id="div1"></div>

記錄-js基礎練習題