JS初級學習筆記（1）

原創
2018-08-23 11:45
爲了需要，近期開始學習JS相關知識，主要的方式是通過看視頻以及查閱相關手冊，並動手實踐，親手寫出每個小案例，以下是相關代碼（每個案例用分隔線隔開）。
<!DOCTYPE html>
<html>
	<head>
		<title>設置一個元素是否可見</title>
		<meta charset="utf-8">
	</head>
	<style type="text/css">
		.tips{width:370px;background:#CCC;display:none;}
	</style>
	<script type="text/javascript">
		//定義一個函數
		function show_or_hide()
		{
			//通過id來獲取一個元素
			var objl =document.getElementById("get_p");
			// 這種是行內樣式的寫法,形如：<p style="display:none;"></p>
			if(objl.style.display == 'block')
				objl.style.display = 'none';
			else
				objl.style.display = 'block';
		}
	</script>
	<body>
		<!-- 添加點擊事件 -->
		<input type="button" value="隱藏/顯示" onclick="show_or_hide()" title="可以點擊我一下">
		<p id="get_p" class="tips" >
			從前有座山，山上有座廟，廟裏有個帥哥寫代碼
		</p>
	</body>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
	<head>
		<title>鼠標移入移出事件</title>
		<meta charset="utf-8">
	</head>
	<style type="text/css">
		#get_input{background:yellow;}
	</style>
	<script type="text/javascript">
		function over_bg_color()
		{
			var obj = document.getElementById('get_input');
			// 這種是行內樣式的寫法,形如：<p style="background:red;"></p>
			obj.style.background='red';
		}
		function out_bg_color()
		{
			var obj = document.getElementById('get_input');
			obj.style.background='yellow';
		}
	</script>
	<body>
		<!-- 添加鼠標移入移出事件 -->
		<input id="get_input" type="button" value="隱藏/顯示"onmouseover="over_bg_color()" onmouseout="out_bg_color()" >
	</body>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
	<head>
		<title>二級菜單</title>
		<meta charset="utf-8">
		<style type="text/css">
			#nav{height:50px;background:red;margin:50px auto 0px;}
			a
			{
				float:left;width:250px;line-height:50px;
				text-align:center;color:#FFF;text-decoration:none;
			}
			#detailed
			{
				width:250px;height:200px;background:red;
				position:relative;border-top:2px solid yellow;
				display:none;left:0px;
			}
		</style>
		<script type="text/javascript">
			function show_detailed(index)
			{
				var obj = document.getElementById('detailed');
				// 設置元素可見
				obj.style.display='block';
				var move_left = 250*index-250;
				move_left = move_left+"px";//將結果轉換成字符串
				obj.style.left =move_left;
			}
			function hide_detailed()
			{
				var obj = document.getElementById('detailed');
				obj.style.display='none';
			}
		</script>
	</head>
	<body>
		<div id="nav">
			<!-- 這種直接在行內爲元素添加事件不美觀，可以寫在JS裏面 -->
			<a href="#" onmouseover="show_detailed(1)"onmouseout="hide_detailed()"> 首頁</a>
			<a href="#" onmouseover="show_detailed(2)"onmouseout="hide_detailed()">家電</a>
			<a href="#" onmouseover="show_detailed(3)"onmouseout="hide_detailed()">手機</a>
			<a href="#" onmouseover="show_detailed(4)"onmouseout="hide_detailed()">付款方式</a>
			<a href="#" onmouseover="show_detailed(5)"onmouseout="hide_detailed()">客服</a>
		</div>
		<div id="detailed">
			<a href="#">一</a>
			<a href="#">二</a>
			<a href="#">三</a>
			<a href="#">四</a>
		</div>
	</body>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
	<head>
		<title>改變物體外觀</title>
		<meta charset="utf-8">
		<style type="text/css">
			body{padding:200px;}
			#change_box{width:300px;height:300px;background:#CCC;}
		</style>
		<script type="text/javascript">
			function change_color(want_color)
			{
				var obj = document.getElementById('change_box');
				obj.style.background = want_color;
			}
			function change_size(width_size,height_size)
			{
				var obj = document.getElementById('change_box');
				obj.style.width = width_size+'px';
				obj.style.height = height_size+'px';
			}
		</script>
	</head>
	<body>
		<input type="button" value="變黃" onclick="change_color('yellow')">
		<input type="button" value="變綠" onclick="change_color('green')">
		<input type="button" value="變紅" onclick="change_color('red')">
		<input type="button" value="變大" onclick="change_size(500,600)">
		<input type="button" value="變小" onclick="change_size(100,200)">
		<div id="change_box"></div>
	</body>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
	<head>
		<title>JS爲元素添加事件</title>
		<meta >
		<meta charset="utf-8">
	</head>
	<body>
		<input id="btn1" type="button" value="按鈕" onclick="abc()" />
		<script type="text/javascript">
			// 下面這個獲取元素的代碼要寫在該目標 元素的下面
			// 因爲程序是從上到下執行的，不然的話會報錯
			var obtn = document.getElementById('btn1');
			function abc()
			{
				alert('這是一個彈窗');//可以是單引號，也可以是雙引號
			}
			//obtn.onclick=abc;//這種是直接在JS裏面爲元素添加事件的寫法
			//這裏函數不能加括號
		</script>
	</body>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
	<head>
		<title>全選反選按鈕</title>
		<meta charset="utf-8">
		<style type="text/css">
			body{padding:150px;background:#CCC;}
		</style>
	</head>
	<body>
		<input type="button" id="btn_all" value="全選"></input>
		<input type="button" id="btn_reversed" value="反選"></input>
		<input type="button" id="btn_no" value="都不選"></input>
		<div id="ware">
			<input type="checkbox" ></input><input type="checkbox" ></input>
			<input type="checkbox" ></input><input type="checkbox" ></input>
			<input type="checkbox" ></input><input type="checkbox" ></input>
		</div>
	</body>
	<script type="text/javascript">
		function choose_all()
		{
			var obj = document.getElementById('ware');
			//從一個目標元素中再獲取元素
			//下面是通過html元素名字來獲取，結果是數組
			var ch_b = obj.getElementsByTagName('input');
			for(var i=0; i <= ch_b.length; i++)
				//下面的語句類似於：<input type="checkbox" checked="true"></input>
				ch_b[i].checked = true;
		}
		function choose_no()
		{
			var obj = document.getElementById('ware');
			var ch_b = obj.getElementsByTagName('input');
			for(var i=0; i <= ch_b.length; i++)
				ch_b[i].checked = false;
		}
		function choose_reversed()
		{
			var obj = document.getElementById('ware');
			var ch_b = obj.getElementsByTagName('input');
			for(var i=0; i <= ch_b.length; i++)
				ch_b[i].checked = ( ch_b[i].checked == true )? false:true;
		}
		//我並沒有直接document.getElementById('');這樣獲取元素
		//按理說要先獲取元素，再來操作，不然是不行的，
		//我也不知道爲什麼我的這段代碼卻可以
		btn_all.onclick = choose_all;
		btn_no.onclick = choose_no;
		btn_reversed.onclick = choose_reversed;
	</script>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
	<head>
		<title>選項卡</title>
		<meta charset="utf-8">
		<style type="text/css">
			body{padding:150px;}
			#xuan_xiang_ka{width:208px;height:350px;}
			.title{height:50px;}
			.title input{height:50px;width:50px;float:left;border:1px solid #CCC;margin-left:2px;}
			.active{background:#5CB85C;}
			#content_box{background:yellow;}
			#content_box div{display:none;}/*設置子元素不可見*/
		</style>
	</head>
	<body>
		<div id="xuan_xiang_ka">
			<div class="title">
				<input class="active" type="button" value="新聞1"></input>
				<input type="button" value="新聞2"></input>
				<input type="button" value="新聞3"></input>
				<input type="button" value="新聞4"></input>
			</div>
			<div id="content_box" >
				<div style="display:block;">
					從前有座山1
				</div>
				<div>
					從前有座山2
				</div>
				<div>
					從前有座山3
				</div>
				<div>
					從前有座山4
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		var an_niu = document.getElementsByTagName('input');
		var temp =document.getElementById('content_box');
		var wen_zhang =temp.getElementsByTagName('div');
		for(var i=0; i < an_niu.length; i++)
		{
			an_niu[i].index = i;//爲每個按鈕添加序號
			an_niu[i].onclick = function ()
			{
				for(var j=0; j < an_niu.length; j++)
				{
					an_niu[j].className = '';//清除類
					wen_zhang[j].style.display = 'none';
				}
				this.className = 'active';//當前按鈕添加活動類
				wen_zhang[this.index].style.display ='block';//當前選項卡可見
				//思路：在點擊一個選項卡之前，把其他的選項卡都影藏，並清除類
				//之後再爲當前的選項卡添加屬性
			}
		}
	</script>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
    <head>
        <title>innerHTML練習</title>
        <meta charset="utf-8">
        <style type="text/css">
            body{padding:50px;}
            div{border:1px solid red;width:260px;height:200px;padding:20px;}
        </style>
    </head>
    <body>
        <input id="text1" type="text"></input>
        <input id="btn1" type="button" value="設置文字"></input>
        <div id="div1">
            從前有座山
        </div>
    </body>
    <script type="text/javascript">
            var btn1 = document.getElementById('btn1');
            var text1 = document.getElementById('text1');
            var div1 = document.getElementById('div1');
            btn1.onclick = function ()
            {
                // 讓div裏面的文字是text裏面的文字
                div1.innerHTML = text1.value;
            }
        </script>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
    <head>
        <title>月曆選項卡</title>
        <meta charset="utf-8">
        <style type="text/css">
            *{margin:0px;padding:0px;}
            .ware{background:yellow;padding:15px 0px 15px 15px;width:285px;margin:100px auto;overflow:hidden;}
            .month{overflow:hidden;}
            span{float:left;width:80px;line-height:80px;text-align:center;font-size:16px;color:#FFF;font-weight:bold; margin-right:15px;margin-bottom:15px; background:#999;}
            .tips{background:red;clear:both;width:240px;padding:15px;font-weight:bold;color:#FFF;}
            .active{background:#FFF;color:black;}
        </style>
    </head>
    <body>
        <div class="ware">
            <div class="month">
                <span class="active">1</span><span>2</span><span>3</span>
                <span>4</span><span>5</span><span>6</span>
                <span>7</span><span>8</span><span>9</span>
                <span>10</span><span>11</span><span>12</span>
            </div>
            <div id="setText" class="tips">
                
            </div>
        </div>
    </body>
    <script type="text/javascript">
        var obj_month = document.getElementsByTagName('span');
        var objTips = document.getElementById('setText');
        var arr =[
                '這個月有元旦',
                '我們一起過年吧',
                '這個月有38婦女節',
                '4月分有什麼節日呢？',
                '哈哈勞動節快到了',
                '可惜兒童節不屬於我們',
                '貌似有建黨節吧',
                '這個月有建軍節吧麼麼噠',
                '教師節到了，給老師一份祝福吧',
                '一起看閱兵式吧',
                '光棍節到了，有木有很傷心～',
                '聖誕節不是中國的～'
        ];
        // 默認顯示第一個月
        objTips.innerHTML = '<p>1月活動'+'</p>'+arr[0];


        for(var i=0; i < obj_month.length; i++)
        {
            obj_month[i].index = i;
            obj_month[i].onmousemove = function ()
            {
                for(var j=0; j < obj_month.length; j++)
                    obj_month[j].className = '';
                this.className = 'active';
                objTips.innerHTML = '<p>'+(this.index+1)+'月活動'+'</p>'+arr[this.index];
            }
        }
    </script>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
    <head>
        <title>數組遍歷</title>
        <meta charset="utf-8">
    </head>
    <body>
    </body>
    <script type="text/javascript">
        var colorS =['yellow','blue','green','pink','black'];
        for( var x in colorS)//x 是下標
        {
            alert(colorS[x]);
            //alert(x);
        }
    </script>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
    <head>
        <title>屬性用變量代替</title>
        <meta charset="utf-8">
        <style type="text/css">
            body{padding:400px; padding-top:200px;}
            #box{width:300px;height:300px;background:yellow;}
        </style>
    </head>
    <body>
        <div id="box"></div>
        <input type="button" value="點擊我一下下～" id="btn"></input>
    </body>
    <script type="text/javascript">
        var value = 'background';
        var oBtn = document.getElementById('btn');
        var oBox = document.getElementById('box');
        oBtn.onclick = function ()
        {
            oBox.style[value] = 'red';
            //等同於 oBox.style.background = 'red';
        }
    </script>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
    <head>
        <title>根據參數個數實現相應功能</title>
        <meta charset="utf-8">
    </head>
    <body>
        <div id="J_box" style="width:300px;height:240px;background:#CCC;margin:100px;"></div>
    </body>
    <script type="text/javascript">
        var oBox = document.getElementById('J_box');
        function css ()
        {
            if(arguments.length == 2)
                alert(arguments[0].style[arguments[1]]);
            if(arguments.length == 3)
                arguments[0].style[arguments[1]] = arguments[2];
        }
        css(oBox,'width','800px');
    </script>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
    <head>
        <title>獲取非行間樣式</title>
        <meta charset="utf-8">
        <style type="text/css">
            #J_box{width:300px;height:240px;background:#CCC;margin:100px;}
        </style>
    </head>
    <body>
        <div id="J_box"></div>
    </body> 
    <script type="text/javascript">
        var oBox = document.getElementById('J_box');

        if(oBox.currentStyle)
            alert(oBox.currentStyle.width);//IE
        else
            alert(getComputedStyle(oBox,false).width);//FF
        
        //採用變量的寫法 alert(getComputedStyle(oBox , false)['width']); 
    </script>
</html>
 <script type="text/javascript">
// 函數封裝
//     function getStyle(obj,name)
//     {
//         if( obj.currentStyle)
//             return obj.currentStyle[name];//obj.currentStyle.width;
//         else
//             return getComputedStyle(obj,false)[name];//getComputedStyle(obj,false).width;
//     }
 </script>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
    <head>
        <title>數組的基本操作</title>
        <meta charset="utf-8">
    </head>
    <body>
    </body> 
    <script type="text/javascript">
        var arr = [1,3,5,7,9,10];
        var add = [100,200,300,400,500];
        //arr.push(6);//尾部追加一個元素
        //arr.pop();//尾部刪除一個元素
        //arr.unshift('lijun');//頭部追加元素
        //arr.shift();//頭部刪除一個
        //arr.splice(3,2)//刪除元素  起點 長度   從0開始算
        //arr.splice(3,0);//從下標3開始，依次刪除0個元素
        //arr.splice(3,2,6,7);//從下標3開始，依次刪除2個，然後添加6,7元素
        //arr.concat(add);//兩個字符串連接，但是兩個數組並沒有變
        //alert(arr.join('***'));//記得加引號，相鄰數組元素間添加分隔符,不會真的改變數組

        /*var temp = ['aaa','xxx','dddd','ssss','eeee','bbbbb'];
        alert(temp.sort());*/   //數組排序，只能排字符串

        /*var temp =[6,7,45,8,6,10,7,8,45,1,14,89,39];
        alert(temp.sort(
            function(num1,num2)
            {
                return num1 - num2;
            }
            ));*/     //數組排序，排數字
        // 數組排序的時候要根據實際情況改動，例如傳遞的是li或者其他元素，
        // 要把最後在比較的是數值比較
        alert(arr);
    </script>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
    <head>
        <title>定時器的使用</title>
        <meta charset="utf-8">
    </head>
    <body>
        <input id="kai"  type="button" value="開啓"></input>
        <input id="guan" type="button" value="關閉"></input>
    </body> 
    <script type="text/javascript">
        //setInterval  間隔
        //setTimeout   延時
        var okai = document.getElementById('kai');
        var oguan = document.getElementById('guan');

        function say()
        {
            alert('您好~');
        }

        okai.onclick = function ()
        {
            temp = setInterval(say,2500);//函數只寫名字不加括號，變量也是全局的，不然等下下面不能關閉            
        }
        oguan.onclick = function()
        {
            clearInterval(temp);//這個被關閉的變量是全局的，不要定義成局部的。
        }
    </script>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
    <head>
        <title>數字時鐘，需要相關圖片輔助</title>
        <meta charset="utf-8">
        <style type="text/css">
            body{background:#555;}
            .timeBox{width:300px;margin:200px auto;}
            span{font-size: 50px;}
        </style>
    </head>
    <body>
        <div class="timeBox">
            <img src="./images/0.png"><img src="./images/0.png">
                <span>:</span>
            <img src="./images/0.png"><img src="./images/0.png">
                <span>:</span>
            <img src="./images/0.png"><img src="./images/0.png">
        </div>
    </body>
    <script type="text/javascript">
        function setNumberToStr(number)
        {
            // 把數字弄成兩位數的，並轉換成字符串
            if(number < 10)
                return '0' + number;
            else
                return '' + number;
        }
        // 獲取系統時間
        function realTime()
        {
            var oDate = new Date();
            var hour = oDate.getHours();//獲取小時
            var minute = oDate.getMinutes();//獲取分鐘
            var second = oDate.getSeconds();//獲取秒

            return setNumberToStr(hour) + setNumberToStr(minute) + setNumberToStr(second);
        }
        function setTime()
        {   
            var otime = document.getElementsByTagName('img');
            var howTime = realTime();//當前時間 轉換成字符串格式後存入數組

            for(var i=0; i < otime.length; i++)
                otime[i].src = './images/'+howTime[i]+'.png';
        }
        
        setTime();//這個是爲了解決刷新的時候全部顯示０的情況，也可以把一秒設置更小
        setInterval(setTime,1000);
        
    </script>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
    <head>
        <title>字符串查找、系統時間</title>
        <meta charset="utf-8">
    </head>
    <body>
    </body>
    <script type="text/javascript">
        
        var times = "我是一個大帥哥";
        alert(times.charAt(0));//用來查找字符串中某個座標中的內容
        // 不能是數組，只能是字符串
        var odate = new Date();
        //alert(odate.getFullYear());
        //alert(odate.getMonth()+1);//月份少1
        // alert(odate.getDate());//星期幾
        //alert(odate.getHours());//獲取小時
        //alert(odate.getMinutes());//獲取分鐘
        //alert(odate.getSeconds());//獲取秒
        //alert(odate.getDay());//週日是０
    </script>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
    <head>
        <title>孩子節點</title>
        <meta charset="utf-8">
        <script type="text/javascript">
            window.onload = function()
            {
                var oUl = document.getElementById('ul1');
                //alert(oUl.childNodes.length);//節點的個數，會包括文本節點。
                //for(var i=0; i < oUl.childNodes.length; i++)
                //alert(oUl.childNodes[i].nodeType);//節點的類型 文本節點->3  元素節點->1
                //alert(oUl.children.length);節點的個數，不包括文本節點。
                for(var i=0; i < oUl.children.length; i++)
                    oUl.children[i].style.background = 'red';
            }
        </script>
    </head>
    <body> 
        <ul id="ul1">
            <li></li>
            <li></li>
        </ul>
    </body>
</html>
<!-- 
    DOM節點
    childNodes children nodeType
    parentNode offsetParent
-->
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
    <head>
        <title>父節點</title>
        <meta charset="utf-8">
        <style type="text/css">
            body{padding-left:400px;padding-top:200px;}
            a{margin-left:100px;}
        </style>
        <script type="text/javascript">
            window.onload = function()
            {
                //var oUl = document.getElementById('ul1');
                //alert(oUl.children[i].parentNode);//錯誤的寫法//////////////////////////////
                //var oSoon = document.getElementById('soon');
                //alert(oSoon.parentNode);//獲取某個元素的父節點
                var oA = document.getElementsByTagName('a');
                for(var i=0; i < oA.length; i++)
                {
                    oA[i].onclick = function()
                    {
                        this.parentNode.style.display = 'none';
                        //a的父親就是li，讓li隱藏
                    }
                }
            }
        </script>
    </head>
    <body>
        <ul id="ul1">
            <li>從前有座山
                <a href="#">隱藏</a>
            </li>
            <li>山上有座廟
                <a href="#">隱藏</a>
            </li>
            <li>廟裏有個老和尚
                <a href="#">隱藏</a>
            </li>
            <li>老和尚對着小和尚說
                <a href="#">隱藏</a>
            </li>
            <li>我們這裏有座山
                <a href="#">隱藏</a>
            </li>
            <li>裏面有個老和尚
                <a href="#">隱藏</a>
            </li>
        </ul>
    </body>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
    <head>
        <title>父級元素</title>
        <meta charset="utf-8">
        <script type="text/javascript">
            window.onload = function()
            {
                // 通過html標籤來獲取元素，返回的是數組，
                //可以在後面加座標指定要獲取某個元素
                var demo1 = document.getElementsByTagName('ul');
                var demo2 = document.getElementsByTagName('li');
    
                alert(demo2[2].offsetParent);//父級元素（有定位屬性的父級元素）
            }
        </script>
    </head>
    <body> 
        <ul>
            <li>從前有座山</li>
            <li>山上有座廟</li>
            <li>廟裏有個老和尚</li>
            <li>老和尚對着小和尚說</li>
            <li>我們這裏有座山</li>
            <li>裏面有個老和尚</li>
        </ul>
    </body>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
    <head>
        <title>孩子節點</title>
        <meta charset="utf-8">
        <style type="text/css">

        </style>
        <script type="text/javascript">
            window.onload = function()
            {
                // 這是比較便捷的寫法，讓某些類擁有一些樣式
                // var oLi = document.getElementsByTagName('li');
                // for(var i=0; i < oLi.length; i++)
                //     if(oLi[i].className == 'bgRed')
                //         oLi[i].style.background = 'red';

                var oul = document.getElementsByTagName('ul')[0];
                for(var i=0; i < oul.childNodes.length; i++)
                    if(oul.childNodes[i].className == 'bgRed')
                        oul.childNodes[i].style.background = 'red';
            }
        </script>
    </head>
    <body>  
        <ul>
            <li class="bgRed">從前有座山</li>
            <li>山上有座廟</li>
            <li>廟裏有個老和尚</li>
            <li class="bgRed">老和尚對着小和尚說    </li>
            <li>我們這裏有座山</li>
            <li class="bgRed">裏面有個老和尚</li>
        </ul>
    </body>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
    <head>
        <title>代碼塊封裝思想</title>
        <meta charset="utf-8">
        <script type="text/javascript">
            function getByClass(oParent,oClass)
            {
                var oReturn = [];//存放結果
                // 獲取該元素下面的所有元素
                var oElem = oParent.getElementsByTagName('*');
                for(var i=0; i < oElem.length; i++)
                    if(oElem[i].className == oClass)
                        oReturn.push(oElem[i]);
                return oReturn;
            }
            window.onload = function()
            {
                var oul = document.getElementsByTagName('ul')[0];

                //0蒐集的結果都放在這裏
                var oChange = getByClass(oul,'bgRed');

                for(var i=0; i <oChange.length; i++)
                    oChange[i].style.background = 'red';
            }
        </script>
    </head>
    <body>  
        <ul>
            <li class="bgRed">從前有座山</li>
            <li>山上有座廟</li>
            <li>廟裏有個老和尚</li>
            <li class="bgRed">老和尚對着小和尚說    </li>
            <li>我們這裏有座山</li>
            <li class="bgRed">裏面有個老和尚</li>
        </ul>
    </body>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
    <head>
        <title>DOM 方式操作元素屬性</title>
        <meta charset="utf-8">
        <script type="text/javascript">
            window.onload = function()
            {
                var oa =document.getElementsByTagName('a')[0];
                // 獲取：getAttribute(名稱)
                // 設置：setAttribute(名稱，值)
                // 刪除： removeAttribute(名稱)
                oa.setAttribute('title','哈哈~');
            }
        </script>
    </head>
    <body>
        <a href="#">我很帥</a> 
    </body>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
    <head>
        <title>添加節點</title>
        <meta charset=" utf-8">
        <script type="text/javascript"> 
            window.onload = function()
            {
                var oBtn = document.getElementsByTagName('input')[1];
                var oTxt = document.getElementsByTagName('input')[0];
                var oUl = document.getElementsByTagName('ul')[0];
    
                oBtn.onclick = function()
                {
                    var oLi = document.createElement('li');//創建一個元素
                    var inBeforeLi = document.getElementsByTagName('li')[0];

                    if(inBeforeLi)
                        oUl.insertBefore(oLi,inBeforeLi)//在某個元素之前追加
                    else
                        oUl.appendChild(oLi);//末尾追加
                    oLi.innerHTML = oTxt.value;
                }
            }
        </script>
    </head>
    <body>
        <input type="text"></input>
        <input type="button" value="創建li"></input>
        <ul>
        </ul>
    </body>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
    <head>
        <title>刪除節點</title>
        <meta charset=" utf-8">
        <script type="text/javascript"> 
            window.onload = function()
            {
                var oA = document.getElementsByTagName('a');
                var oUl = document.getElementsByTagName('ul')[0];
                for(var i=0; i < oA.length; i++)
                    oA[i].onclick = function()
                    {
                        oUl.removeChild(this.parentNode);
                    }
            }
        </script>
    </head>
    <body>
        <ul>
            <li>111<a href="#">刪除</a></li>
            <li>222<a href="#">刪除</a></li>
            <li>333<a href="#">刪除</a></li>
            <li>444<a href="#">刪除</a></li>
            <li>555<a href="#">刪除</a></li>
            <li>666<a href="#">刪除</a></li>
            <li>777<a href="#">刪除</a></li>
        </ul>
    </body>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
    <head>
        <title>節點碎片</title>
        <meta charset=" utf-8">
        <script type="text/javascript"> 
            window.onload = function()
            {
                // 創建一個節點碎片
                var temp = document.createDocumentFragment();
                for(var i=0; i<25; i++)
                {
                    var oLi = document.createElement('li');
                    // 向節點碎片中添加孩子節點
                    temp.appendChild(oLi);
                }
                // 直接給要添加節點的元素添加 已經存在的碎片
                document.getElementsByTagName('ul')[0].appendChild(temp);
            }
        </script>
    </head>
    <body>
        <ul>
        </ul>
    </body>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
    <head>
        <title>表格基本屬性</title>
        <meta charset=" utf-8">
        <script type="text/javascript">
            window.onload = function()
            {
                var oTab = document.getElementsByTagName('table')[0];
                // alert(oTab.tBodies[0].rows[0].cells[1].innerHTML);

                var oldColor = '';//記錄原來的顏色
                // 表格隔行換色，鼠標移入換色，移出換回原來的顏色
                for(var i=0; i < oTab.tBodies[0].rows.length; i++)
                {
                    if( i % 2 )//奇偶行數
                        oTab.tBodies[0].rows[i].style.background = '#CCC';
                    else
                        oTab.tBodies[0].rows[i].style.background = '#555';

                    oTab.tBodies[0].rows[i].onmouseover = function()
                    {
                        oldColor = this.style.background;
                        this.style.background = 'green';
                    }
                    oTab.tBodies[0].rows[i].onmouseout = function()
                    {
                        this.style.background = oldColor;
                    }
                }
            }
        </script>
    </head>
    <body>
        <table border="1px" width="500px">
            <thead>
                <td>ID</td ><td>姓名</td><td>年齡</td>
            </thead>
            <tbody>
                <tr>
                    <td>1</td><td>李俊</td><td>18</td>
                </tr>
                <tr>
                    <td>2</td><td>李白</td><td>96</td>
                </tr>
                <tr>
                    <td>3</td><td>小明</td><td>17</td>
                </tr>
                <tr>
                    <td>4</td><td>李俊</td><td>18</td>
                </tr>
                <tr>
                    <td>5</td> <td>李白</td><td>96</td>
                </tr>
                <tr>
                    <td>6</td><td>小明</td><td>17</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
    <head>
        <title>表格自動增加行數</title>
        <meta charset=" utf-8">
        <script type="text/javascript">
            window.onload = function()
            {
                // 直接讀取某行某列的值
                // alert(oTab.tBodies[0].rows[0].cells[1].innerHTML);
                
                var oTab = document.getElementsByTagName('table')[0];
                var oname = document.getElementsByTagName('input')[0];
                var oage = document.getElementsByTagName('input')[1];
                var obtn = document.getElementsByTagName('input')[2];
                var id = oTab.tBodies[0].rows.length;

                obtn.onclick = function()
                {
                    // 創建1個行
                    var oTr = document.createElement('tr');
                    // 創建第1個列
                    var oTd_1 = document.createElement('td');
                    oTd_1.innerHTML = ++id;
                    // 添加到行裏面
                    oTr.appendChild(oTd_1);
                    //創建第2個列
                    var oTd_2 = document.createElement('td');
                    oTd_2.innerHTML = oname.value;
                    oTr.appendChild(oTd_2);
                    //創建第3個列
                    var oTd_3 = document.createElement('td');
                    oTd_3.innerHTML = oage.value;
                    oTr.appendChild(oTd_3);
                    // 添加一行行
                    oTab.appendChild(oTr);
                }
            }
        </script>
    </head>
    <body style="padding-left:400px;padding-top:100px;">
        姓名：<input type="text"></input>
        年齡：<input type="text"></input>
        <input type="button" value="添加"></input>
        <table border="1px" width="500px">
            <thead>
                <td>ID</td ><td>姓名</td><td>年齡</td>
            </thead>
            <tbody>
                <tr>
                    <td>1</td><td>李俊</td><td>18</td>
                </tr>
                <tr>
                    <td>2</td><td>李白</td><td>96</td>
                </tr>
                <tr>
                    <td>3</td><td>小明</td><td>17</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
    <head>
        <title>表格自動刪除單元格</title>
        <meta charset=" utf-8">
        <script type="text/javascript">
            window.onload = function()
            {
                var oTab = document.getElementsByTagName('table')[0];

                // 這個註釋是在爲表格添加行的時候，添加刪除操作單元格的時候的代碼
                // 貌似通過JS添加的單元格並不會有點擊事件
                // var oTd_4 = document.createElement('td');
                // oTd_4.innerHTML = '<a href="#">刪除</a>';
                // oTr.appendChild(oTd_4);
                // oTab.appendChild(oTr);

                var oA = oTab.getElementsByTagName('a');
                for(var i=0; i < oA.length; i++)
                {
                    oA[i].onclick = function()
                    {
                        oTab.tBodies[0].removeChild(this.parentNode.parentNode);
                    }
                }
            }
        </script>
    </head>
    <body style="padding-left:400px;padding-top:100px;">
        <table border="1px" width="500px">
            <thead>
                <td>ID</td ><td>姓名</td><td>年齡</td><td>編輯</td>
            </thead>
            <tbody>
                <tr>
                    <td>1</td><td>李俊</td><td>18</td><td><a href="#">刪除</a></td>
                </tr>
                <tr>
                    <td>2</td><td>李白</td><td>96</td><td><a href="#">刪除</a></td>
                </tr>
                <tr>
                    <td>3</td><td>小明</td><td>17</td><td><a href="#">刪除</a></td>
                </tr>
            </tbody>
        </table>
    </body>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
    <head>
        <title>表格搜索</title>
        <meta charset=" utf-8">
        <script type="text/javascript">
            window.onload = function()
            {
                var oTab = document.getElementsByTagName('table')[0];
                var obtn = document.getElementsByTagName('input')[1];
                var oname = document.getElementsByTagName('input')[0];
                
                obtn.onclick = function()
                {
                    for(var i=0; i< oTab.tBodies[0].rows.length; i++)
                    {
                        // 輸入要搜索的名字，必須完全一樣才能匹配
                        if(oname.value == oTab.tBodies[0].rows[i].cells[1].innerHTML)
                            oTab.tBodies[0].rows[i].style.background = 'yellow';
                        else
                            oTab.tBodies[0].rows[i].style.background = '';                        
                    }
                }
                //忽略大小寫搜索
                // obtn.onclick = function()
                // {
                //     for(var i=0; i< oTab.tBodies[0].rows.length; i++)
                //     {
                //         var sTxt = oname.value;
                //         var sTab = oTab.tBodies[0].rows[i].cells[1].innerHTML;
                //         if( sTxt.toLowerCase() == sTab.toLowerCase() )
                //             oTab.tBodies[0].rows[i].style.background = 'yellow';
                //         else
                //             oTab.tBodies[0].rows[i].style.background = '';                        
                //     }
                // }

                // 單個關鍵字模糊搜索
                // obtn.onclick = function()
                // {
                //     for(var i=0; i < oTab.tBodies[0].rows.length; i++)
                //     {
                //         var oTabName = oTab.tBodies[0].rows[i].cells[1].innerHTML;
                //         if( oTabName.search(oname.value) != -1)
                //             oTab.tBodies[0].rows[i].style.background = 'blue';
                //         else
                //             oTab.tBodies[0].rows[i].style.background = 'red';
                //     }
                // }

                // 多關鍵字模糊搜索
                // obtn.onclick = function()
                // {
                //     for(var i=0; i < oTab.tBodies[0].rows.length; i++)
                //     {
                //         var oTabName = oTab.tBodies[0].rows[i].cells[1].innerHTML;
                //         var arr = oname.value.split(' ');//用空格把字符串分割
                //         oTab.tBodies[0].rows[i].style.background = '';//不要寫在下面的if else中
                //         for(var j=0; j < arr.length; j++)
                //         {
                //             if( oTabName.search(arr[j]) != -1 )
                //                 oTab.tBodies[0].rows[i].style.background = 'blue';
                //         }    
                //     }
                // }
            }
        </script>
    </head>
    <body style="padding-left:400px;padding-top:100px;">
        姓名：<input type="text"></input>
        <input type="button" value="搜索"></input>
        <table border="1px" width="500px">
            <thead>
                <td>ID</td ><td>姓名</td><td>年齡</td>
            </thead>
            <tbody>
                <tr>
                    <td>1</td><td>李俊</td><td>18</td>
                </tr>
                <tr>
                    <td>2</td><td>李白</td><td>96</td>
                </tr>
                <tr>
                    <td>3</td><td>小明</td><td>17</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
    <head>
        <title>字符串查找</title>
        <meta charset=" utf-8">
        <script type="text/javascript">
            var str = 'asdfghjkl';
            alert(str.search('kl'));//查找這個k在字符串中的第幾個位置。7 沒有-1
        </script>
    </head>
    <body>
    </body>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
    <head>
        <title>添加孩子節點，會先刪除原來所在的位置</title>
        <meta charset=" utf-8">
        <style type="text/css">
            ul{background:yellow;margin-bottom:20px;}
        </style>
        <script type="text/javascript">
            window.onload = function()
            {
                var oBtn = document.getElementsByTagName('input')[0];
                var oUl1 = document.getElementsByTagName('ul')[0];
                var oUl2 = document.getElementsByTagName('ul')[1];

                oBtn.onclick = function()
                {
                    //var temp = oUl1.getElementsByTagName('li')[0];
                    var temp = oUl1.children[0];
                    oUl2.appendChild(temp);//這個是在一個元素添加孩子節點。
                    //oUl1.removeChild(temp);//這步驟可以省略，上面那個代碼會先刪除再添加。
                }
            }
        </script>
    </head>
    <body style="padding-left:400px;padding-top:100px;">
        <ul>
            <li>1</li><li>2</li><li>3</li>
            <li>4</li><li>5</li><li>6</li>
            <li>7</li><li>8</li><li>9</li>
        </ul>
        <ul></ul>
        <input type="button" value="移動"></input>
    </body>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
    <head>
        <title>列表排序</title>
        <meta charset=" utf-8">
        <style type="text/css">
            ul{background:yellow;margin-bottom:20px;}
        </style>
        <script type="text/javascript">
            window.onload = function()
            {
                var oBtn = document.getElementsByTagName('input')[0];
                var oLi = document.getElementsByTagName('ul')[0].children;
                var arr = [];
                oBtn.onclick = function()
                {
                    for(var i=0; i < oLi.length; i++)
                        arr[i] = oLi[i];
                    //alert(arr[0] === oLi[0]);
                    arr.sort(function(li1,li2){return parseInt(li1.innerHTML) - parseInt(li2.innerHTML);});

                    for(var i=0; i < arr.length; i++)
                        document.getElementsByTagName('ul')[0].appendChild(arr[i]);

                    // 原本以爲排序好後列表的長度是原來的兩倍
                    // 但是不是，估計是添加孩子節點的時候，就把原來的節點給刪除了。
                }
            }
        </script>
    </head>
    <body style="padding-left:400px;padding-top:100px;">
        <input type="button" value="排序"></input>
        <ul>
            <li>99</li>
            <li>48</li>
            <li>25</li>
            <li>97</li>
            <li>3</li>
            <li>38</li>
            <li>26</li>
            <li>49</li>
        </ul>
    </body>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
    <head>
        <title>表格排序</title>
        <meta charset=" utf-8">
        <script type="text/javascript">
            window.onload = function()
            {
                var oBtn = document.getElementsByTagName('input')[0];
                var oTab = document.getElementsByTagName('table')[0];
                oBtn.onclick = function ()
                {
                    var arr = [];
                    for(var i=0; i< oTab.tBodies[0].rows.length; i++)
                        arr[i] = oTab.tBodies[0].rows[i];//把表格的每行存入一個數組

                    arr.sort(function (tr1,tr2)
                        {return parseInt(tr1.cells[0].innerHTML) - parseInt(tr2.cells[0].innerHTML);});
                    for(var i=0; i < arr.length; i++)
                        oTab.tBodies[0].appendChild(arr[i]);//把排序好的數組添加的表格中
                }
            }
        </script>
    </head>
    <body style="padding-left:400px;padding-top:100px;">
        <input type="button" value="排序"></input>
        <table border="1px" width="500px">
            <thead>
                <td>ID</td><td>姓名</td><td>年齡</td>
            </thead>
            <tbody>
                <tr>
                    <td>1</td><td>李俊</td><td>18</td>
                </tr>
                <tr>
                    <td>7</td><td>張三</td><td>16</td>
                </tr>
                <tr>
                    <td>3</td><td>王五</td><td>25</td>
                </tr>
                <tr>
                    <td>6</td><td>馬雲</td><td>17</td>
                </tr>
                <tr>
                    <td>2</td><td>小三</td><td>9</td>
                </tr>
                <tr>
                    <td>5</td><td>小芳</td><td>36</td>
                </tr>
                <tr>
                    <td>4</td><td>君君</td><td>14</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
    <head>
        <title>定時器的使用</title>
        <meta charset=" utf-8">
        <style type="text/css">
            div{width:200px;height:150px;background:yellow;position:absolute;}
        }
        </style>
        <script type="text/javascript">
            window.onload = function()
            {
                function Move()
                {
                    document.getElementsByTagName('div')[0].style.left = 
                    document.getElementsByTagName('div')[0].offsetLeft + 10 + 'px';
                }
                setInterval(Move,30);
            }
        </script>
    </head>
    <body>
        <div></div>
    </body>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
    <head>
        <title>物體的運動</title>
        <meta charset=" utf-8">
        <style type="text/css">
            body{margin:0px;padding:0px;}
            div{width:200px;height:150px;background:yellow;position:absolute;}
        }
        </style>
        <script type="text/javascript">
            window.onload = function()
            {
                var timer = null;
                var oBtn = document.getElementsByTagName('input')[0];
                oBtn.onclick = function ()
                {
                    clearInterval(timer);//保證只有一個定時器被打開
                    timer = setInterval(Move,30);
                }
                function Move()
                {
                    var oDiv = document.getElementsByTagName('div')[0];
                    
                    if(oDiv.offsetLeft == 600)//這兩個語句不能調換順序，不然會有偏差
                        clearInterval(timer);
                    else
                        oDiv.style.left = oDiv.offsetLeft + 10 + 'px';
                        //現在是因爲有if，兩個語句只會執行一個，可以換順序
                }
                //在開始運動時，關閉已經存在的定時器
                //把運動和停止隔開（if else）
            } 
        </script>
    </head>
    <body>
        <input type="button" value="動起來~"></input>    
        <div></div>
    </body>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
    <head>
        <title>無縫滾動 -By小小俊</title>
        <meta charset="utf-8">
        <style type="text/css">
            *{margin:0px;padding:0px;}
            button{margin-top:180px;margin-left:400px;}
            div{margin:20px auto;width:730px;height:233px;
                position:relative;background:yellow;
                box-shadow: 20px 20px 3px #CCC;overflow:hidden;
                border:2px solid #CCC;border-radius:25px;
            }
            div ul{background:red;width:1480px;height:233px;position:absolute; }
            div ul li{float:left;list-style:none;margin-right:10px;}
        </style>
        <script type="text/javascript">
            var speed = 0;
            var timer = null;

            window.onload = function()
            {
                var leftBtn  = document.getElementsByTagName('button')[0];//左邊的按鈕
                var rightBtn = document.getElementsByTagName('button')[1];//右邊的按鈕
                var oUl = document.getElementsByTagName('ul')[0];//裝圖片的容器
                oUl.innerHTML = oUl.innerHTML + oUl.innerHTML;
                timer = setInterval(Move,30);//貌似點擊按鈕的時候這個定時器沒有被關閉，導致疊加
                leftBtn.onclick = function(){speed = -5;startMove();}
                rightBtn.onclick = function(){speed = 5;startMove();}
                oUl.onmouseover = function(){clearInterval(timer);}
                oUl.onmouseout = function(){timer = setInterval(Move,30);}
                function Move()
                {
                    oUl.style.left =  oUl.offsetLeft + speed + 'px';

                    if( oUl.offsetLeft < -740)//往左邊滾動的時候
                        oUl.style.left = '0px';
                    else
                        if( oUl.offsetLeft > 0)//往右邊滾動的時候
                            oUl.style.left = '-740px';
                }
                function startMove()
                {
                    clearInterval(timer);//避免定時器疊加
                    timer = setInterval(Move,30);
                }
            }
        </script>
    </head>
    <body>
        <button>點擊向左邊滾動、麼麼噠</button>
        <button style="margin-left:280px">點擊向右邊滾動、麼麼噠</button>
        <div>
            <ul>
                <li><img src="./1.jpg"></li>
                <li><img src="./2.jpg"></li>
                <li><img src="./3.jpg"></li>
                <li><img src="./4.jpg"></li>
            </ul>
        </div>    
    </body>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
    <head>
        <title>分享按鈕</title>
        <meta charset=" utf-8">
        <style type="text/css">
            div{width:150px;height:200px;position:absolute;background:yellow;left:-150px;}
            span{width:20px;height:60px;line-height:20px;position:absolute;right:-20px;
                top:70px;background:pink;}
        </style>
        <script type="text/javascript">
            var timer = null;var Speed = 0;var Target = 0;//定時器、速度、目標
            window.onload = function()
            {
                var oDiv = document.getElementsByTagName('div')[0];
                function move(target,speed)
                {

                    clearInterval(timer);
                    timer = setInterval(function(){
                        if(oDiv.offsetLeft == target)
                            clearInterval(timer);
                        else
                            oDiv.style.left = oDiv.offsetLeft + speed + 'px';
                    },30);
                }
                oDiv.onmouseover = function ()
                {
                    move(0,5);
                    // clearInterval(timer);
                    // timer = setInterval(function(){
                    //     if(oDiv.offsetLeft == 0)
                    //         clearInterval(timer);
                    //     else
                    //         oDiv.style.left = oDiv.offsetLeft + 5 + 'px';
                    // },30);
                }
                oDiv.onmouseout = function ()
                {
                    move(-150,-5);
                    // clearInterval(timer);
                    // timer = setInterval(function(){
                    //     if(oDiv.offsetLeft == -150)
                    //         clearInterval(timer);
                    //     else
                    //         oDiv.style.left = oDiv.offsetLeft - 5 + 'px';
                    // },30);
                }
            }
        </script>
    </head>
    <body>
        <div>
            <span>分享到</span>
        </div>
    </body>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
    <head>
        <title>淡入淡出</title>
        <meta charset="utf-8">
        <style type="text/css">
            div{filter:alpha(opacity:10);opacity:0.1;width:300px;height:300px;background:red;}
        </style>
        <script type="text/javascript">
            var timer = null;
            var alpha = 10;
            window.onload = function()
            {
                var oDiv = document.getElementsByTagName('div')[0];
                oDiv.onmouseover = function()
                {
                    move(100);
                }
                oDiv.onmouseout = function()
                {
                    move(10);
                }
                function move(target)
                {
                    clearInterval(timer);
                    timer = setInterval(function(){
                        if(alpha < target)
                            speed = 4;
                        else
                            speed = -4;
                    
                        if(alpha == target)
                            clearInterval(timer);
                        else
                            alpha += speed;
                        
                        oDiv.style.filter = 'alpha(opacity:'+alpha+')';
                        oDiv.style.opacity = alpha/100;
                    },30);
                }
            }
        </script>
    </head>
    <body>
        <div>
            <!-- <img src="./1.jpg"> -->
        </div>
    </body>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
    <head>
        <title>緩衝運動</title>
        <meta charset="utf-8">
        <style type="text/css">
            div{width:300px;height:300px;background:red;position:absolute;left:0px;}
            p{width:1px;height:500px;background:black;position:absolute;left:600px;}
        </style>
        <script type="text/javascript">
            window.onload = function()
            {
                var timer = null;
                var oDiv = document.getElementsByTagName('div')[0];
                oDiv.onclick = function()
                {
                    clearInterval(timer);
                    timer = setInterval(move,30);
                }
                function move()
                {
                    // 速度和距離成正比
                    var speed = (600 - oDiv.offsetLeft) / 50;
                    // 對速度進行取整，不然無法到達目的距離
                    speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                    oDiv.style.left = oDiv.offsetLeft + speed + 'px';
                    document.title = oDiv.offsetLeft+','+speed;
                }
            }
        </script>
    </head>
    <body>
        <div></div>
        <p></p>
    </body>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
    <head>
        <title>第一個孩子節點</title>
        <meta charset="utf-8"> 
        <script type="text/javascript">
            window.onload = function()
            {
                var oUl =document.getElementsByTagName('ul')[0];
                // 記得把如果調換順序 然後調試
                if(oUl.firstElementChild)
                    oUl.firstElementChild.style.background = 'red';
                else
                    oUl.firstChild.style.background = 'red';
            }
        </script>
    </head>
    <body>
        <ul>
            <li>從前有座山</li>
            <li>山上有座廟</li>
            <li>廟裏有個老和尚</li>
            <li>老和尚對着小和尚說    </li>
            <li>我們這裏有座山</li>
            <li>裏面有個老和尚</li>
        </ul>
    </body>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
    <head>
        <title>運動停止邊界問題</title>
        <meta charset="utf-8">
        <style type="text/css">
            body{margin:0;padding:0;}
            div{width:300px;height:300px;background:red;position:absolute;left:0px;}
            p{width:1px;height:500px;background:black;position:absolute;left:600px;}
        </style>
        <script type="text/javascript">
            window.onload = function()
            {
                var timer = null;
                var oDiv = document.getElementsByTagName('div')[0];
                oDiv.onclick = function()
                {
                    clearInterval(timer);
                    timer = setInterval(move,30);
                }
                function move()
                {
                    if(oDiv.offsetLeft < 600)
                        speed = 7;
                    else if(oDiv.offsetLeft > 600)
                        speed = -7;
                    else
                        speed = 0;
                    // 勻速運動解決不能到達終點問題，
                    // 因爲距離有可能不是速度的整數倍，
                    // 所以在快到的時候，就關閉定時器，然後直接把物體放在終點
                    // 緩衝運動不用考慮這個問題是因爲對速度進行取整，可以慢慢往前面蹭
                    if(Math.abs(600 - oDiv.offsetLeft) < 7)
                    {
                        clearInterval(timer);
                        oDiv.style.left = 600 + 'px';
                    }
                    else
                        oDiv.style.left = oDiv.offsetLeft + speed + 'px';
                }
            }
        </script>
    </head>
    <body>
        <div></div>
        <p></p>
    </body>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
    <head>
        <title>對聯效果</title>
        <meta charset="utf-8">
        <style type="text/css">
            body{height:5000px;}
            div{width:100px;height:150px;background:red;position:absolute;right:0px;bottom:0px;}
        </style>
        <script type="text/javascript">
            window.onscroll = function()
            {
                var oDiv = document.getElementsByTagName('div')[0];
                var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
                oDiv.style.top = (document.documentElement.clientHeight - oDiv.offsetHeight)/2 + scrollTop + 'px';
            }
        </script>
    </head>
    <body>
        <div></div>
    </body>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
    <head>
        <title>多物體運動(卡住現象)</title>
        <meta charset="utf-8">
        <style type="text/css">
            div{width:100px;height:50px;margin:10px 0;background:red;}
        </style>
        <script type="text/javascript">
            var timer = null;
            window.onload = function()
            {
                oDiv = document.getElementsByTagName('div');
                for(var i=0; i < oDiv.length; i++)
                {
                    oDiv[i].onmouseover = function()
                    {
                        move(this,500);
                    }
                    oDiv[i].onmouseout = function()
                    {
                        move(this,100);
                    }
                }
            }
            function move(obj,target)
            {
                clearInterval(timer);
                timer = setInterval(function(){
                    var speed = (target -obj.offsetWidth) / 5;

                    speed = speed > 0 ? Math.ceil(speed):Math.floor(speed);

                    if( obj.offsetWidth == target )
                        clearInterval(timer);
                    else
                        obj.style.width = obj.offsetWidth + speed + 'px';
                },30);
            }
        </script>
    </head>
    <body>
        <div></div>
        <div></div>
        <div></div>
    </body>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
    <head>
        <title>多物體運動(解決卡住現象)</title>
        <meta charset="utf-8">
        <style type="text/css">
            div{width:100px;height:50px;margin:10px 0;background:red;}
        </style>
        <script type="text/javascript">
            window.onload = function()
            {
                var oDiv = document.getElementsByTagName('div');
                for(var i=0; i < oDiv.length; i++)
                {
                    //每個物體自己開一個定時器
                    //JS手動給對象添加屬性
                    oDiv[i].timer = null;
                    oDiv[i].onmouseover = function()
                    {
                        move(this,500);
                    }
                    oDiv[i].onmouseout = function()
                    {
                        move(this,100);
                    }
                }
            }
            function move(obj,target)
            {
                clearInterval(obj.timer);
                obj.timer = setInterval(function(){
                    var speed = (target - obj.offsetWidth) / 5;
                    speed = speed > 0 ? Math.ceil(speed):Math.floor(speed);
                    if( obj.offsetWidth == target )
                        clearInterval(obj.timer);
                    else
                        obj.style.width = obj.offsetWidth + speed + 'px';
                },30);
            }
        </script>
    </head>
    <body>
        <input type="text"/>
        <div></div>
        <div></div>
        <div></div>
    </body>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
    <head>
        <title>多物體漸變(屬性不能公有)</title>
        <meta charset="utf-8">
        <style type="text/css">
            div{width:200px;height:200px;background:red;filter:alpha(opacity:30);opacity:0.3;float:left;margin:20px;}
        </style>
        <script type="text/javascript">
            window.onload = function()
            {
                //var timer = null;//這個變量不應該定義在changeColorLight函數裏面
                //var light = 30;//這個變量不應該定義在changeColorLight函數裏面
                //初始值應該和樣式表保持一致，不然會產生閃的效果

                var oDiv = document.getElementsByTagName('div');
                for(var i=0; i < oDiv.length; i++)
                {
                    oDiv[i].timer = null;//貌似這個語句可以不用寫
                    oDiv[i].light = 30;//這個不寫的話會有問題
                    oDiv[i].onmouseover = function()
                    {
                        changeColorLight(this,100);
                    }
                    oDiv[i].onmouseout = function()
                    {
                        changeColorLight(this,30);
                    }
                }
                function changeColorLight(obj,target)
                {
                    
                    //var timer = null;
                    //var light = 0;

                    clearInterval(obj.timer);
                    obj.timer = setInterval(function(){

                        var speed = (target - obj.light) / 10;
                        speed = speed > 0 ? Math.ceil(speed):Math.floor(speed);
    
                        if(obj.light == target)
                            clearInterval(obj.timer);
                        else
                        {
                            obj.light += speed;
                            obj.style.filter = 'alpha(opacity:'+obj.light+')';
                            obj.style.opacity = obj.light / 100;
                        }
                    },30);            
                }
            }
        </script>
    </head>
    <body>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </body>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
    <head>
        <title>offset問題</title>
        <meta charset="utf-8">
        <style type="text/css">
            div{width:200px;height:200px;background:yellow;float:left;margin:20px;border:1px solid red;}
        </style>
        <script type="text/javascript">
            setInterval(function(){
                //一開始有考慮到下面這個語句爲什麼不用寫在onload事件中
                var oDiv = document.getElementsByTagName('div')[0];
                //alert(oDiv.offsetWidth);
                //因爲width設置後，還要加上邊框，所以也就是+2-1
                //因此物體不是變窄，而是不斷的變寬
                oDiv.style.width = oDiv.offsetWidth -1 + 'px';
            },30);
        </script>
    </head>
    <body>
        <div></div>
    </body>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
    <head>
        <title>offset問題（修復）</title>
        <meta charset="utf-8">
        <style type="text/css">
            div{width:200px;height:200px;background:yellow;float:left;margin:20px;border:1px solid red;}
        </style>
        <script type="text/javascript">
            function getStyle(obj,name)
            {
                if( obj.currentStyle )
                    return obj.currentStyle[name];//obj.currentStyle.width
                else
                    return getComputedStyle(obj,false)[name];//getComputedStyle(obj,false).width 
            }
            setInterval(function(){
                var oDiv = document.getElementsByTagName('div')[0];
                //oDiv.style.width = oDiv.offsetWidth - 1 + 'px';
                oDiv.style.width = parseInt( getStyle(oDiv,'width') )  - 1 + 'px';
            },30);
        </script>
    </head>
    <body>
        <div></div>
    </body>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
    <head>
        <title>多物體運動框架（不能實現漸變）</title>
        <meta charset="utf-8">
        <style type="text/css">
            div{width:200px;height:200px;background:yellow;float:left;margin:20px;border:1px solid red;}
        </style>
        <script type="text/javascript">
            window.onload = function()
            {
                var oDiv = document.getElementsByTagName('div')[0];
                oDiv.onmouseover = function()
                {
                    startMove(oDiv,'fontSize',50);

                }
                oDiv.onmouseout = function()
                {
                    startMove(oDiv,'fontSize',12);
                }
            }
            function getStyle(obj,name)
            {
                if( obj.currentStyle )
                    return obj.currentStyle[name];//obj.currentStyle.width
                else
                    return getComputedStyle(obj,false)[name];//getComputedStyle(obj,false).width 
            }
            function startMove(obj,name,target)
            {
                clearInterval(obj.timer);
                obj.timer = setInterval(function(){

                    var speed = ( target - parseInt( getStyle(obj,name) ) ) / 10;
                    speed = speed > 0 ? Math.ceil(speed):Math.floor(speed);

                    if( parseInt( getStyle(obj,name) ) == target )
                        clearInterval( obj.timer );
                    else
                        obj.style[name] = parseInt( getStyle(obj,name) ) + speed + 'px';
                        ;
                },30);
            }
        </script>
    </head>
    <body>
        <div>從前有一座山</div>
    </body>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
    <head>
        <title>多物體運動框架（實現漸變）</title>
        <meta charset="utf-8">
        <style type="text/css">
            div{width:200px;height:200px;background:yellow;float:left;margin:20px;border:1px solid red;filter:alpha(opacity:30);opacity:0.3;}
        </style>
        <script type="text/javascript">
            window.onload = function()
            {
                var oDiv = document.getElementsByTagName('div')[0];
                oDiv.onmouseover = function()
                {
                    startMove(oDiv,'opacity',100);

                }
                oDiv.onmouseout = function()
                {
                    startMove(oDiv,'opacity',30);
                }
            }
            function getStyle(obj,name)
            {
                if( obj.currentStyle )
                    return obj.currentStyle[name];//obj.currentStyle.width
                else
                    return getComputedStyle(obj,false)[name];//getComputedStyle(obj,false).width 
            }
            function startMove(obj,name,target)
            {
                clearInterval(obj.timer);
                obj.timer = setInterval(function(){

                    if( name == 'opacity')
                        var status = parseFloat(getStyle(obj,name)) * 100;
                    else
                        var status = parseInt(getStyle(obj,name));

                    var speed = (target - status) / 6;
                    speed = speed > 0 ? Math.ceil(speed):Math.floor(speed);

                    if(status == target)
                        clearInterval(obj.timer);
                    else
                    {
                        if( name == 'opacity')
                        {
                            obj.style.filter = 'alpha(opacity:' + (status+speed) + ')';
                            obj.style.opacity = (status+speed) / 100;
                        }
                        else
                            obj.style[name] = status + speed + 'px';
                    }
                },30);
            }
        </script>
    </head>
    <body>
        <div>從前有一座山</div>
    </body>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
    <head>
        <title>浮點數誤差</title>
        <meta charset="utf-8">
        <script type="text/javascript">
            alert(0.07*100);
            alert(Math.round(0.07*100));//四捨五入
        </script>
    </head>
    <body>
        
    </body>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
    <head>
        <title>鏈式運動</title>
        <meta charset="utf-8">
        <style type="text/css">
            div{width:100px;height:100px;background:red;opacity: 0.3}
        </style>
        <script type="text/javascript">
            window.onload = function()
            {
                var oDiv = document.getElementsByTagName('div')[0];
                oDiv.onmouseover = function()
                {
                    startMove(oDiv,'width',800,
                    function(){startMove(oDiv,'height',600,
                        function(){startMove(oDiv,'opacity',100)});})
                }
                oDiv.onmouseout = function()
                {
                    startMove(oDiv,'opacity',30,
                    function(){startMove(oDiv,'height',100,
                        function(){startMove(oDiv,'width',100)});})
                }
            }
        </script>
    </head>
    <body>
        <div></div>
    </body>
    <script type="text/javascript">
            function getStyle(obj,name)
            {
                if( obj.currentStyle )
                    return obj.currentStyle[name];//obj.currentStyle.width
                else
                    return getComputedStyle(obj,false)[name];//getComputedStyle(obj,false).width 
            }
            function startMove(obj,name,target,fnEnd)
            {
                clearInterval(obj.timer);
                obj.timer = setInterval(function(){

                if( name == 'opacity')
                    var status = parseFloat(getStyle(obj,name)) * 100;
                else
                    var status = parseInt(getStyle(obj,name));

                var speed = (target - status) / 6;
                speed = speed > 0 ? Math.ceil(speed):Math.floor(speed);

                if(status == target)
                {
                    clearInterval(obj.timer); 
                    if(fnEnd)
                        fnEnd();
                }
                else
                {
                    if( name == 'opacity')
                    {
                        obj.style.filter = 'alpha(opacity:' + (status+speed) + ')';
                        obj.style.opacity = (status+speed) / 100;
                    }
                    else
                        obj.style[name] = status + speed + 'px';
                }
                 },30);
            }
    </script>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
    <head>
        <title>運動框架小問題（不能多個屬性同時運動）</title>
        <meta charset="utf-8">
        <style type="text/css">
            div{width:100px;height:100px;background:red;opacity: 0.3}
        </style>
        <script type="text/javascript">
            window.onload = function()
            {
                var oDiv = document.getElementsByTagName('div')[0];
                oDiv.onmouseover = function()
                {
                    startMove(oDiv,'width',800);
                    startMove(oDiv,'height',600);
                    // 寬高並不是同時改變，僅僅是你改變了高度
                }
            }
        </script>
    </head>
    <body>
        <div></div>
    </body>
    <script type="text/javascript">
            function getStyle(obj,name)
            {
                if( obj.currentStyle )
                    return obj.currentStyle[name];//obj.currentStyle.width
                else
                    return getComputedStyle(obj,false)[name];//getComputedStyle(obj,false).width 
            }
            function startMove(obj,name,target,fnEnd)
            {
                clearInterval(obj.timer);
                obj.timer = setInterval(function(){

                if( name == 'opacity')
                    var status = parseFloat(getStyle(obj,name)) * 100;
                else
                    var status = parseInt(getStyle(obj,name));

                var speed = (target - status) / 6;
                speed = speed > 0 ? Math.ceil(speed):Math.floor(speed);

                if(status == target)
                {
                    clearInterval(obj.timer); 
                    if(fnEnd)
                        fnEnd();
                }
                else
                {
                    if( name == 'opacity')
                    {
                        obj.style.filter = 'alpha(opacity:' + (status+speed) + ')';
                        obj.style.opacity = (status+speed) / 100;
                    }
                    else
                        obj.style[name] = status + speed + 'px';
                }
                 },30);
            }
    </script>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
    <head>
        <title>解決運動框架小問題（多個屬性同時運動）</title>
        <meta charset="utf-8">
        <style type="text/css">
            div{width:100px;height:100px;background:red;opacity: 0.3}
        </style>
        <script type="text/javascript">
            window.onload = function()
            {
                var oDiv = document.getElementsByTagName('div')[0];
                oDiv.onmouseover = function()
                {
                    startMove(oDiv,{'width':500,'height':600,'opacity':100});
                }
                oDiv.onmouseout = function()
                {
                    startMove(oDiv,{'width':100,'height':100,'opacity':30});
                }
            }
        </script>
    </head>
    <body>
        <div></div>
    </body>
    <script type="text/javascript">
            function getStyle(obj,name)
            {
                if( obj.currentStyle )
                    return obj.currentStyle[name];//obj.currentStyle.width
                else
                    return getComputedStyle(obj,false)[name];//getComputedStyle(obj,false).width 
            }
            function startMove(obj,json,fnEnd)
            {
                clearInterval(obj.timer);
                obj.timer = setInterval(temp,30);
                function temp()
                {
                    var isStop = true;
                    for(var index in json)
                    {
                        if( index == 'opacity')
                            var status = parseFloat(getStyle(obj,index)) * 100;
                        else
                            var status = parseInt(getStyle(obj,index));

                        if( status != json[index] )
                            isStop = false;

                        var speed = (json[index] - status) / 6;
                        speed = speed > 0 ? Math.ceil(speed):Math.floor(speed);

                        if( index == 'opacity')
                        {
                            obj.style.filter = 'alpha(opacity:' + (status+speed) + ')';
                            obj.style.opacity = (status+speed) / 100;
                        }
                        else
                            obj.style[index] = status + speed + 'px';
                    }
                    if( isStop )
                    {
                        clearInterval(obj.timer);
                        if(fnEnd)
                            fnEnd();
                    }
                 }
            }
    </script>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
    <head>
        <title>留言板案例</title>
        <meta charset="utf-8">
        <style type="text/css">
            *{margin:0;padding:0;}
            ul{width:500px;min-height:50px;list-style:none;margin:50px auto;border:1px solid #CCC;overflow:hidden;}
            ul li{border-bottom:1px #DDD dashed;padding:5px;overflow:hidden;opacity:0;}
        </style>
        <script type="text/javascript">
            window.onload = function()
            {
                var oTxt = document.getElementsByTagName('textarea')[0];
                var oBtn = document.getElementsByTagName('input')[0];
                var oUl  = document.getElementsByTagName('ul')[0];

                oBtn.onclick = function()
                {
                    var oLi = document.createElement('li');
                    oLi.innerHTML = oTxt.value;
                    oTxt.value = '';

                    if( oUl.children.length > 0 )
                        oUl.insertBefore(oLi,oUl.children[0]);
                    else
                        oUl.appendChild(oLi);

                    var oHeight = oLi.offsetHeight;
                    oLi.style.height = 0;
                    startMove(oLi,{'height':oHeight},function(){
                        startMove(oLi,{'opacity':100});
                        }
                    );
                }
            }
        </script>
    </head>
    <body>
        <textarea></textarea>
        <input type="button" value="發佈">
        <ul></ul>
    </body>
    <script type="text/javascript">
            function getStyle(obj,name)
            {
                if( obj.currentStyle )
                    return obj.currentStyle[name];//obj.currentStyle.width
                else
                    return getComputedStyle(obj,false)[name];//getComputedStyle(obj,false).width 
            }
            function startMove(obj,json,fnEnd)
            {
                clearInterval(obj.timer);
                obj.timer = setInterval(temp ,30);
                function temp()
                {
                    var isStop = true;
                    for(var index in json)
                    {
                        if( index == 'opacity')
                            var status = parseFloat(getStyle(obj,index)) * 100;
                        else
                            var status = parseInt(getStyle(obj,index));

                        if( status != json[index] )
                            isStop = false;

                        var speed = (json[index] - status) / 5;
                        speed = speed > 0 ? Math.ceil(speed):Math.floor(speed);

                        if( index == 'opacity')
                        {
                            obj.style.filter = 'alpha(opacity:' + (status+speed) + ')';
                            obj.style.opacity = (status+speed) / 100;
                        }
                        else
                            obj.style[index] = status + speed + 'px';
                    }
                    if( isStop )
                    {
                        clearInterval(obj.timer);
                        if(fnEnd)
                            fnEnd();
                    }
                 }
            }
    </script>
</html>
<!-- *************************************************************************************-->
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.