1.案例——點擊button換照片

html部分

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>換照片</title>
</head>
<body>
	<button id="btn">點我</button>
	<br>
	<image src= 'images/a.jpg' id = 'a'></image>
	<script type="text/javascript" src="js/button.js"></script>
</body>
</html>

js部分

//1.獲取元素
var btn = document.getElementById('btn');
var image_a = document.getElementById('a') ;
//2.給按鈕註冊事件
var flag = 1;//當flag值是1的時候對應a.jpg,當flag值是2的時候對應b.jpg
btn.onclick = function(){
	//3.切換圖片
	if (flag == 1) {
	image_a.src = 'images/b.jpg';
	flag = 2;
}else{
	image_a.src = 'images/a.jpg';
	flag = 1;
}
}

實現效果

2.案例——點擊圖片顯示/隱藏，button上的字跟着變化

html部分

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>點擊切換</title>
	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
	<input type="button" id="btn" value="隱藏">
	<div id="box" ></div>
	<script type="text/javascript" src="js/box.js"></script>
</body>
</html>

css部分

#box{
	width: 500px;
	height: 300px;
	background-color: red;
}
.show{
	display: block;
}
.hidden{
	display: none;
}

js部分
（方法一寫法）

//方法一:
//1.獲取元素
var btn = document.getElementById('btn');
//2.給按鈕註冊事件
var flag = 1;
btn.onclick = function(){
	var box = document.getElementById('box');
	//3.控制div的顯示和隱藏
	box.className = 'hidden';
	//如何設置按鈕對應的屬性名字
	if (flag == 1) {
	btn.value = '顯示';
	flag = 2;
		box.className = 'hidden';
	}else{
		btn.value = '隱藏';
		box.className = 'show';
		flag = 1;
	}
}

（方法二寫法）

//方法二:
//this的幾種情況
//1.普通函數中的this ——》window
//2.構造函數中的this ——》是當前構造函數創建的對象
//3.方法中的this——》方法所屬的對象
//4.事件處理函數中的this——》事件源，誰調用的該事件this指向誰
//


//1.獲取元素
var btn = document.getElementById('btn');
//2.給按鈕註冊事件
var isShow = true;
btn.onclick = function(){
	var box = document.getElementById('box');
	//3.控制div的顯示和隱藏
	if (isShow) {
	box.className = 'hidden';
	this.value = '顯示';
	isShow = false;
	}else{
		box.className = 'show';

		this.value = '隱藏';
		isShow = true;
	}
}

實現效果

3.取消a標籤的默認行爲

a標籤的默認行爲未取消時

html部分

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>圖片放大</title>
</head>
<body>
	<a href="http://www.baidu.com" id="link">百度</a>
	
</body>
<script type="text/javascript" src="js/fangda.js"></script>
</html>

js部分

var btn = document.getElementById('link');
btn.onclick = function(){
	alert("被點擊了");
	//取消a標籤的默認行爲
	//return false;
}

實現效果

取消時

js部分

var btn = document.getElementById('link');
btn.onclick = function(){
	alert("被點擊了");
	//取消a標籤的默認行爲
	return false;
}

實現效果

4.點擊圖片放大

html部分

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>圖片放大</title>
	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
	<h2>美女書屋</h2>
	<div id="bookshop">
		<a href="images/1.jpg" title="一號">
			<img src="images/1-small.jpg" width = "100px">
		</a>
		<a href="images/2.jpg" title="二號">
			<img src="images/2-small.jpg" width = "100px">
		</a>
		<a href="images/3.jpg" title="三號">
			<img src="images/3-small.jpg" width = "100px">
		</a>
		<a href="images/4.jpg" title="四號">
			<img src="images/4-small.jpg" width = "100px">
		</a>
	</div>
	<div style="clear: both"></div>
	<img id="image" src="images/placeholder.png" alt="" width="450px" />
	<p id="des">選擇一個圖片</p>
	
</body>
<script type="text/javascript" src="js/fangda.js"></script>
</html>

css部分

body{
	font-family: "Helvetica","Arial",serif;
	color: #333;
	background-color: #ccc;
	margin: 1em 10%;
}
h1{
	color: #333;
	background-color: transparent;
}
a{
	color: #c60;
	background-color: transparent;
	font-weight: bold;
}

js部分

//1.獲取到所有的a標籤
var bookshop = document.getElementById('bookshop');
var links = bookshop.getElementsByTagName('a');
//2.給所有的a標籤註冊事件
for (var i = 0; i < links.length; i++) {
	//給所有的a標籤註冊事件
	var link = links[i];
	link.onclick = function(){
	//4.切換圖片
	//獲取佔位的大的img標籤
	var image = document.getElementById('image');
	//把img標籤的src屬性設置爲當前點擊的a標籤的href
	image.src = this.href;
	//5.設置a標籤的內容
		//獲取p標籤
		var des = document.getElementById('des');
		//當前點擊的a標籤的title屬性爲this.title
		//如何設置p標籤顯示的內容
		
		des.innerText = this.title;
	//3.取消a的默認行爲
	return false;
	}
}

補充知識
js中innerHTML與innerText的用法與區別：
實現效果
1、js中innerHTML的用法：

innerHTML可獲取或設置指定元素標籤內的 html內容，從該元素標籤的起始位置到終止位置的全部內容(包含html標籤)。

獲取元素的內容：element.innerHTML;

給元素設置內容：element.innerHTML =htmlString;

代碼示例爲：

<p id="test"><font color="#000">獲取段落p的 innerHTML</font></p>

執行：

document.getElementById("test").innerHTML

輸出內容爲:<font color="#000">獲取段落p的 innerHTML</font>
2、js中innerText的用法：

innerText可獲取或設置指定元素標籤內的文本值，從該元素標籤的起始位置到終止位置的全部文本內容(不包含html標籤)。

獲取元素的內容：element.innerText;
給元素設置內容：element.innerText = string;

代碼示例爲：

<p id="test"><font color="#000">獲取段落p的 innerHTML</font>測試測試</p>

執行：

document.getElementById("test").innerHTML

輸出內容爲: 獲取段落p的 innerHTML試測試

5.給文本框賦值

代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>設置文本框的值</title>
</head>
<body>
	<input type="text" ><br>
	<input type="text" ><br>
	<input type="text" ><br>
	<input type="text" ><br>
	<input type="text" ><br>
	<input type="text" ><br>
	<input type="text" ><br>
	<input type="text" ><br>
	<input id="btn" type="button" value="獲取文本框的值">

	<script type="text/javascript">
	//給所有的文本框賦值
		var inputs = document.getElementsByTagName('input');
		for (var i = 0; i < inputs.length-1; i++) {
			var input = inputs[i];
			if(input.type == 'text'){
				input.value = i;
			}
		}
		//2.當點擊按鈕的時候,獲取所有文本框的值
		var btn = document.getElementById('btn');
		btn.onclick = function(){
		var array = [];
			for(var i = 0; i<inputs.length-1;i++){
				var input = inputs[i];
				if(input.type == 'text'){
					array.push(input.value);
				}
			}
		console.log(array.join('|'));
		}
	</script>
</body>
</html>

實現效果：

6.檢測用戶名和密碼

檢測用戶名是否是3-6位，密碼是否是6-8位,如果不滿足要求高亮顯示文本框
html部分：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>檢測用戶名和密碼</title>
	<style type="text/css">
	.bg{
		background-color: yellow;
	}
</style>
</head>
<body>
	<input type="text" id="txtUserName" ><br>
	<input type="password" id='txtUserPassword'><br>
	<input type="button" value="登錄" id="btnLogin">
</body>
</html>

js部分：

<script type="text/javascript">
		//檢測用戶名是否是3-6位，密碼是否是6-8位,如果不滿足要求 高亮顯示文本框
		var btnLogin = document.getElementById('btnLogin');
		btnLogin.onclick = function(){
			var txtUserName = document.getElementById('txtUserName');
			var txtUserPassword = document.getElementById('txtUserPassword');
			//檢測用戶名3-6位
			if (txtUserName.value.length <3 || txtUserName.value.length>6) {
				txtUserName.className = 'bg';
				return;
			}else{
				txtUserName.className = '';

			}
			//檢測密碼是否是6-8位
			if (txtUserPassword.value.length<6 || txtUserPassword.value.length>8) {
				txtUserPassword.className = 'bg';
				return;

			}else{
				txtUserPassword.className = '';

			}
		}

	</script>

實現效果

7.設置下拉框，點擊按鈕隨機選中

html部分：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>設置下拉框選項</title>
</head>
<body>
	<input type="button" value="設置" id="btnSet">
	<select id = "selCities">
		<option value="1">北京</option>
		<option value="2">上海</option>
		<option value="3">廣州</option>
		<option value="4">深圳</option>
		<option value="5">武漢</option>

	</select>
</body>
</html>

js部分：

<script type="text/javascript">
		//1.給按鈕註冊事件
		var btn = document.getElementById('btnSet');
		btn.onclick = function(){
		//2.獲取下拉框中的所有option
		var sel = document.getElementById('selCities');
		var options = sel.getElementsByTagName('option');
		//3.隨機生成索引
		//Math.random()範圍[0,1)
		var randomIndex = parseInt(Math.random()*options.length);
		//4.根據索引獲取option 並讓option選中
		var option = options[randomIndex];
		option.selected = true;
		}
	</script>

8.搜索文本框

1.文本框被選中的時候文本框清空,並讓字體變爲黑色
2.當文本框失去焦點,如果文本框內容爲空則還原文本框裏的文字,並讓字體變爲灰色

html部分：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>文本框搜索</title>
	<style type="text/css">
	.gray{
		color: gray;
	}
	.black{
		color: black;
	}
</style>
</head>
<body>

	<input type="text" class="gray" value="請輸入搜索關鍵字" id="txtSearch">
	<input type="button" value="搜索" id="btnSearch">
</body>
</html>

js部分：

<script type="text/javascript">
		//1.文本框被選中的時候 文本框清空,並讓字體變爲黑色
		//2.當文本框失去焦點,如果文本框內容爲空則還原文本框裏的文字,並讓字體變爲灰色
		var textbtn = document.getElementById('txtSearch');
		//獲取焦點的事件focus
		txtSearch.onfocus = function(){
			if (this.value =="請輸入搜索關鍵字") {
				this.value = '';
				this.className = 'black';
			}
		}
		//2.~~
		txtSearch.onblur = function(){
			//文本框內容爲空
			if(this.value.length =='' ){
				this.value = "請輸入搜索關鍵字";
				this.className = 'gray';
			}
		}
	</script>

實現效果：

9.反選全選

1.全選
2.當點擊子的checkbox,如果所有的子的checkbox都被選中,讓父的checkbox也選中，如果有一個子的未被選中父的也取消選中

html部分：

<style type="text/css">
      * {
            padding: 0;
            margin: 0;
        }

        .wrap {
            width: 300px;
            margin: 100px auto 0;
        }

        table {
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid #c0c0c0;
            width: 300px;
        }

        th,
        td {
            border: 1px solid #d0d0d0;
            color: #404060;
            padding: 10px;
        }

        th {
            background-color: #09c;
            font: bold 16px "微軟雅黑";
            color: #fff;
        }

        td {
            font: 14px "微軟雅黑";
        }

        tbody tr {
            background-color: #f0f0f0;
        }

        tbody tr:hover {
            cursor: pointer;
            background-color: #fafafa;
        }
  </style>

</head>
<body>
  <div class="wrap">
      <table>
          <thead>
            <tr>
                <th>
                    <input type="checkbox" id="j_cbAll" />
                </th>
                <th>商品</th>
                <th>價錢</th>
            </tr>
          </thead>
          <tbody id="j_tb">
            <tr>
                <td>
                    <input type="checkbox" />
                </td>
                <td>iPhone8</td>
                <td>8000</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" />
                </td>
                <td>iPad Pro</td>
                <td>5000</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" />
                </td>
                <td>iPad Air</td>
                <td>2000</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" />
                </td>
                <td>Apple Watch</td>
                <td>2000</td>
            </tr>

          </tbody>
      </table>
      <input type="button" value="  反 選  " id="btn">
  </div>
  </body>
</html>

js部分

<script type="text/javascript">
    //1.全選
    //1.1獲取父checkbox 註冊點擊事件
    var j_cbAll = document.getElementById('j_cbAll');
    var j_tb = document.getElementById('j_tb');
    var inputs = j_tb.getElementsByTagName('input');
    j_cbAll.onclick = function(){

    //1.2找到所有的子checkbox 
    for(var i = 0;i < inputs.length;i++){
      var input = inputs[i];
      if (input.type == 'checkbox') {
    //讓這些checkbox的狀態跟父checkbox保持一致
    ////可以通過this找到事件源
        input.checked = this.checked;
      }
    }

    }
    //2.當點擊子的checkbox,如果所有的子的checkbox都被選中,讓父的checkbox也選中，如果有一個子的未被選中 父的也取消選中
    for(var i = 0;i < inputs.length;i++){//此處的循環是用於子的checkbox，註冊點擊事件
      var input = inputs[i];
      //判斷是否受checkbox
      if (input.type != 'checkbox') {
        continue;//結束當前循環 繼續下一次循環
      }
  
    //給子的checkbox註冊點擊事件
    input.onclick = function(){
      checkAllCheckBox();
    }

    //判斷父的checkbox的狀態，封裝成函數
    function checkAllCheckBox(){
      var isAllChecked = true;
      //判斷所有子的checkbox受否都被選中
        for(var i = 0;i<inputs.length;i++){
          var input = inputs[i];

          if(input.type !='checkbox'){
            continue;
          }
          //判斷所有的checkbox是否都被選中
          //假設所有的checkbox都被選中
          if(!input.checked){
            isAllChecked = false;
          }
        }
        //設置父的checkbox狀態
        j_cbAll.checked=isAllChecked; 
      }
    }

    //3.反選
    //3.1給反選按鈕註冊點擊事件
    var btn = document.getElementById('btn');
    btn.onclick = function(){
    //3.2找到所有的子的checkbox 讓其反選
      for(var i = 0;i<inputs.length;i++){
        var input = inputs[i];
        //判斷是否是checkbox
        if (input.type != 'checkbox'){
          continue;
        }
        //反選
        input.checked = !input.checked;
        //父的checkbox
        checkAllCheckBox();
      }
    }
  </script>

實現效果

10.隔行變色

html部分

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>隔行變色</title>
</head>
<body>
	<style type="text/css">

</style>
	<ul id="mv">
		<li>楊冪</li>
		<li>劉詩詩</li>
		<li>林允兒</li>
		<li>林依晨</li>
		<li>李冰冰</li>

	</ul>
</body>
</html>

js部分

<script type="text/javascript">
		var mv = document.getElementById('mv');
		mv.getElementsByTagName('li');
		//判斷是否有子節點
		if(mv.hasChildNodes()){
			for(var i = 0;i < mv.children.length;i++){
				var li = mv.children[i];
				if(i%2 == 0){
					li.style.backgroundColor = 'red';
				}else{
					li.style.backgroundColor = 'purple';
				}
				

				}
		}
		
	</script>

實現效果

11.使用element.innerHTML動態創建元素

html部分

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>動態創建元素</title>
</head>
<body>
	<input type="button" value="按鈕" id="btn">
	<div id="box"></div>
	
</body>
</html>

js部分

<script type="text/javascript">
		var btn = document.getElementById('btn');
		var box = document.getElementById('box');
		btn.onclick = function(){
			box.innerHTML = 'hello <p>world</p>';
		}
	</script>

實現效果

12.使用document.createElement()創建元素

實現效果
點擊按鈕動態創建列表鼠標放上去高亮顯示
html部分：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>動態創建元素3</title>
</head>
<body>
	<input type="button" value="按鈕" id="btn">
	<div id="box">
	
	</div>
	</body>
</html>

js部分

<script type="text/javascript" src="common.js"></script>
	<script type="text/javascript">
		//點擊按鈕 動態創建列表 鼠標放上去高亮顯示
		var datas = ['西施','貂蟬','劉亦菲','芙蓉姐姐'];
		my$('btn').onclick = function(){
			//動態創建ul,內存中創建對象
			var ul = document.createElement('ul');
			//把ul放到頁面上
			my$('box').appendChild(ul);
			for (var i = 0;i<datas.length;i++){
				var data = datas[i];
				//在內存中動態創建li
				var li = document.createElement('li');
				//把li添加到DOM樹，並且會重新繪製
				ul.appendChild(li);
					//設置li中顯示的內容
				// li.innerText = data;//innerText有兼容性問題
				setInnerText(li,data);


				//開始處理高亮顯示

				//給li註冊事件
				li.onmouseover = liMouseOver;
				li.onmouseout = liMouseOut;
				}
			}
			//當鼠標經過li的時候執行
			function liMouseOver(){
				//鼠標經過高亮顯示
				this.style.backgroundColor = 'red';
			}
			function liMouseOut(){ 
				//鼠標離開高亮顯示
				this.style.backgroundColor = '';
				
			}
			//設置InnerText的兼容性問題
		function setInnerText(element,content){
		//判斷當前瀏覽器是否支持innerText(若當前瀏覽器支持innerText就用InnerText，不支持就用TextContent)
		if(typeof element.innerText =='string'){//若不是string的話就是undefined
			element.innerText = content;
		}else{
			element.textContent = content;
		}

	}
	</script>

common.js

function my$(id){
	return document.getElementById(id);
}
//處理瀏覽器兼容性
//獲取第一個子元素
function getfirstElementChild(element){
	var node,nodes = element.childNodes, i = 0;
	while(node = nodes[i++]){
		if(node.nodeType == 1){
			return node;
		}
	}
	return null;
}

//設置InnerText和TextContent的兼容性問題
function setInnerText(element,content){
//判斷當前瀏覽器是否支持innerText(若當前瀏覽器支持innerText就用InnerText，不支持就用TextContent)
if(typeof element.innerText =='string'){//若不是string的話就是undefined
	element.innerText = content;
	}else{
		element.textContent = content;
}

實現效果

13.動態創建刪除表格

html部分：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>動態創建表格</title>
	<style>
	#box table{
		border-collapse: collapse;
	}
</style>
</head>
<body>
	<div id="box">

	</div>
	</body>
</html>

js部分

<script src="common.js"></script>
	<script>
		var datas = [
		{name:'aa',subject:'語文', score:34},
		{name:'bb',subject:'數學', score:45},
		{name:'cc',subject:'英語', score:56},
		{name:'dd',subject:'政治', score:67},
		{name:'ee',subject:'歷史', score:67},
		{name:'ff',subject:'物理', score:78},

		];
		//表頭數據
		var headDatas = ['姓名','科目','成績','操作'];

		//1.創建table
		var table = document.createElement('table');

		my$('box').appendChild(table);//將table加入box中
		table.border = '1px';
		table.width = '400px';
		//2.創建表頭
		var thead = document.createElement('thead');
		table.appendChild(thead);

		var tr = document.createElement('tr');
		thead.appendChild(tr);
		tr.style.height = '40px';
		tr.style.backgroundColor='lightgray';
		//遍歷頭部數據,創建th
		for(var i=0;i<headDatas.length;i++){
			var th = document.createElement('th');
			tr.appendChild(th);
			setInnerText(th,headDatas[i]);//給th元素設置內容
		}

		//調用setInnerText,兼容性問題
		//3.創建數據行
		var tbody = document.createElement('tbody');
		table.appendChild(tbody);
		for(var i=0;i<datas.length;i++){
			//一個學生的成績
			var data = datas[i];
			tr = document.createElement('tr');
			tbody.appendChild(tr);

			
			//遍歷對象 創建列
			for(var key in data){
				var td = document.createElement('td');
				tr.appendChild(td);
				setInnerText(td,data[key]);
			}
			//生成刪除對應的列
			td = document.createElement('td');
			tr.appendChild(td);
			//刪除的超鏈接
			var link = document.createElement('a');
			td.appendChild(link);
			link.href = 'javascript:void(0)';
			setInnerText(link,'刪除');
			link.onclick = linkDelete;
		}
		   function linkDelete() {
      // removeChild()
      // 獲取父元素
      // 
      // 獲取要刪除的行
    		var tr = this.parentNode.parentNode;
    		tbody.removeChild(tr);
    		return false;
    }
	</script>

common.js

function my$(id) {
  return document.getElementById(id);
}

// 處理瀏覽器兼容性
// 獲取第一個子元素
function getFirstElementChild(element) {
    var node, nodes = element.childNodes, i = 0;
    while (node = nodes[i++]) {
        if (node.nodeType === 1) {
            return node;
        }
    }
    return null;
}

// 處理瀏覽器兼容性
// 獲取下一個兄弟元素
 function getNextElementSibling(element) {
    var el = element;
    while (el = el.nextSibling) {
      if (el.nodeType === 1) {
          return el;
      }
    }
    return null;
  }


// 處理innerText和textContent的兼容性問題
// 設置標籤之間的內容
function setInnerText(element, content) {
  // 判斷當前瀏覽器是否支持 innerText
  if (typeof element.innerText === 'string') {
    element.innerText = content;
  } else {
    element.textContent = content;
  }
}

實現效果

14.菜單欄點擊高亮顯示

html部分：

	<style>
        #menu ul li.current {
            background-color: burlywood;
        }

        #menu ul li a {
            text-decoration: none;
        }
    </style>
</head>
<body>
    <div id="menu">
        <ul>
            <li class="current"><a href="javascript:void(0)">首頁</a></li>
            <li><a href="javascript:undefined">播客</a></li>
            <li><a href="javascript:void(0)">博客</a></li>
            <li><a href="javascript:void(0)">相冊</a></li>
            <li><a href="javascript:void(0)">關於</a></li>
            <li><a href="javascript:void(0)">幫助</a></li>
        </ul>
       
    </div>
</body>
</html>

js部分

<script type="text/javascript" src="js/common.js"></script>
    <script type="text/javascript">
	//void是運算符
	//執行void後面的表達式 並始終返回undefined
	// var menu = document.getElementById('menu');
	var menu = my$('menu');
	//獲取menu中的ul(ul是第一個元素)
	var ul = getfirstElementChild(menu);
	for(var i = 0;i<ul.children.length;i++){
		var li = ul.children[i];//拿到每一個li
		//獲取li中的a標籤
		var link = getfirstElementChild(li);
		link.onclick =linkClick;//注意此處不要加小括號 因爲此時是把函數賦給onclick,而不是函數的調用
	}
	function linkClick(){
        //讓其他所有的li取消高亮顯示
		for(var i = 0;i<ul.children.length;i++){
			var li = ul.children[i];
            li.className = '';
		}
		//讓當前a標籤所在的li高亮顯示
		//this是當前點擊的a標籤對應的元素(this是事件源)
		this.parentNode.className = 'current';
		//取消後續內容的執行
		return false;
	}

    </script>

common.js部分

function my$(id){
	return document.getElementById(id);
}
//處理瀏覽器兼容性
//獲取第一個子元素
function getfirstElementChild(element){
	var node,nodes = element.childNodes, i = 0;
	while(node = nodes[i++]){
		if(node.nodeType == 1){
			return node;
		}
	}
	return null;
}

取消高亮顯示

15.選水果

html部分

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>選擇水果</title>
</head>
<body>
	<style type="text/css">
	select{
		width: 200px;
		height: 200px;
		background-color: #33cccc;
		font-size: 20px;
	}
</style>
	<select id="all" multiple="multiple">
		<option>蘋果</option>
		<option>橘子</option>
		<option>西瓜</option>
		<option>哈密瓜</option>
		<option>草莓</option>
		<option>榴蓮</option>

	</select>
	<input type="button" value=">>" id="btn1">
	<input type="button" value="<<" id="btn2">
	<input type="button" value=">" id="btn3">
	<input type="button" value="<" id="btn4">
	<select id="select" multiple="multiple"></select>
	</body>
</html>

js部分

<script type="text/javascript" src="common.js"></script>
	<script type="text/javascript">
		//1.全部選擇
		var select = document.getElementById('select');
		var btn1 = document.getElementById('btn1');
		var all = document.getElementById('all');
		btn1.onclick = function(){
			//獲取select下面的所有元素
			//若從上往下索引錯誤,children被移走之後 索引會重新排列
			//若從下往上索引-順序錯誤
			// var alls = document.getElementById('all');
			// for(var i = alls.children.length-1;i>=0;i--){
			// 	var all = alls.children[i];
			// 	select.appendChild(all)
			// }
			// 
			  
			//方法索引號爲0
			var len = all.children.length;
			for(var i = 0;i<len;i++){
				var option = all.children[0];
				select.appendChild(option);
			}
		}
		//全部左移
		var btn2 = document.getElementById('btn2');
			btn2.onclick = function(){
				var len = select.children.length;
				for(var i = 0;i<len;i++){
					var option = select.children[0];
					all.appendChild(option);

		}
			}
		//單個右移
		// var btn3 = document.getElementById('btn3');
		// btn3.onclick = function(){
		// 	var option = all.children[0];
		// 	select.appendChild(option);
		// }
		// //單個左移
		// var btn4 = document.getElementById('btn4');
		// btn4.onclick = function(){
		// 	var option = select.children[0];
		// 	all.appendChild(option);
		// }
		 
		 
		
		//左邊多選往右移
		var btn3 = document.getElementById('btn3');
		btn3.onclick = function(){
			//找到所有選中的option
			var array = [];//存儲選中的option
			var len = all.children.length;
			for(var i = 0;i<len;i++){
				var option = all.children[i];
				if(option.selected){
					array.push(option);
					//去掉option選中之後的效果
					option.selected = false;
				}
			}
			for(var i = 0;i<len;i++){
				var option = array[i];
				select.appendChild(option);
		}
	}
		//左邊多選往右移
		var btn4 = document.getElementById('btn4');
		btn4.onclick = function(){
			var array = [];
			for(var i = 0;i<select.children.length;i++){
				var option = select.children[i];
				if(option.selected){
					array.push(option);
					//去掉option選中之後的效果
					option.selected = false;
			}
	}
	for(var i = 0;i<select.children.length;i++){
				var option = array[i];
				all.appendChild(option);
		}
	}
	</script>

實現效果

16.圖片跟着鼠標飛

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>跟着鼠標飛</title>
</head>
<body>
	<img src="images/tianshi.gif" id="tianshi" alt="">
	<style type="text/css">
	#tianshi {
		position: absolute;
	}
	body{
		line-height: 1000px;
	}

</style>
<script type="text/javascript">
	var tianshi = document.getElementById('tianshi');
	document.onmousemove = function(e){
		 //處理兼容性問題
		e = e || window.event;
		//鼠標在可視區域的位置
		// tianshi.style.left = e.clientX-20 + 'px';
		// tianshi.style.top = e.clientY + 'px';

		tianshi.style.left = e.pageX-20 + 'px';
		tianshi.style.top = e.pageY + 'px';
//鼠標在頁面中的位置
	}
</script>
</body>
</html>

實現效果

17.文本框中只允許輸入數字，不能輸入字母

按退出鍵可進行撤銷

代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>輸入數字</title>
</head>
<body>
	<input type="text" name="" id="box">
	<script type="text/javascript">
		//學習鍵盤事件
		//keydown 鍵盤按下的時候
		//keyup 鍵盤彈起的時候
		//兩者區別  keydown的時候按鍵未錄入文本框  keyup時按鍵已錄入文本框
		var txt = document.getElementById('box');
		txt.onkeydown = function(e){
			//判斷按下的按鍵是否是數字
			//先做兼容性處理
			e = e||window.event;
			//e.keycode鍵盤碼 keycode的值在48-57是數字
			if((e.keyCode < 48 || e.keyCode>57 ) &&e.keyCode!==8){
				//非數字取消默認行爲
				// e.preventDefault();
				return false;
			}
		}
	</script>
</body>
</html>

實現效果

18.刪除提示（定時器）

代碼部分：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>刪除成功</title>
	<style type="text/css">
	body{
		margin: 0;
		padding: 0;
	}
	#tip{
		width: 150px;
		height: 30px;
		background-color: lightgray;
		opacity: 0.5;
		margin: 200px auto;
		padding-top: 5px;
		text-align: center;
		color: red;
		display: none;

	}
</style>

</head>
<body>
	<input type="button" id="btn" value="刪除">
	<div id="tip">刪除成功</div>
	<script type="text/javascript">
		//當頁面的所有元素創建完成之後執行，不需要等待外部文件下載完畢
	var btn = document.getElementById('btn');
	btn.onclick = function(){
		//進行刪除操作
		//顯示刪除成功的tip
		var tip = document.getElementById('tip');
		tip.style.display = 'block';
		setTimeout(function(){
			tip.style.display = 'none';
		},3000);
	}
</script>
</body>
</html>

實現效果

19.點擊盒子向右移動

獲取盒子當前的位置 offsetLeft offsetTop

代碼如下

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>簡單動畫</title>
	<style type="text/css">
	body{
		margin: 0;
	}
	#box{
		position: relative;
		background-color: red;
		width: 100px;
		height: 100px;
	}
</style>
</head>
<body>
	<input type="button" id="btn" value="移動">
	<div id="box"></div>
	<script type="text/javascript">
		//1.點擊按鈕讓盒子向右移動
		var btn = document.getElementById('btn');
		var box = document.getElementById('box');
		btn.onclick = function(){
			// box.style.left += 20 + 'px';//只能移動一次
			//如果標籤中的style沒有設置樣式屬性，我們獲取到的是空字符串
			//獲取盒子當前的位置 offsetLeft   offsetTop
			box.style.left = box.offsetLeft + 10 +'px';
		}
		//2.讓盒子不停的向右移動
	</script>
</body>
</html>

實現效果

20.盒子不停向右移動

代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>簡單動畫</title>
	<style type="text/css">
	body{
		margin: 0;
	}
	#box{
		position: relative;
		background-color: red;
		width: 100px;
		height: 100px;
	}
</style>
</head>
<body>
	<input type="button" id="btn" value="移動">
	<input type="button" id="btn1" value="停止">

	<div id="box"></div>
	<script type="text/javascript">
		//1.點擊按鈕讓盒子向右移動
		var btn = document.getElementById('btn');
		

		var box = document.getElementById('box');
		btn.onclick = function(){
			// box.style.left += 20 + 'px';//只能移動一次
			//如果標籤中的style沒有設置樣式屬性，我們獲取到的是空字符串
			//獲取盒子當前的位置 offsetLeft   offsetTop
			// box.style.left = box.offsetLeft + 10 +'px';
		//2.讓盒子不停的向右移動(通過循環)
		// for(var i = 0;i< 100;i++){
		// 	box.style.left = box.offsetLeft + 1 +'px';//循環速度非常快 看不到循環過程
		// }
		//2.讓盒子不停的向右移動(通過設置定時器)
		var timerId = setInterval(function(){
			//判斷盒子當前位置 若到達500則停止定時器
			if(box.offsetLeft == 500){
				clearInterval(timerId);
				//退出函數
				return;
			}
			box.style.left = box.offsetLeft + 10 +'px';
		},50);
		}
	
	</script>
</body>
</html>

實現效果

21.倒計時

定時器的應用

代碼部分

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>倒計時</title>
</head>
<body>
	<style type="text/css">
	.time-item {
      width: 430px;
      height: 45px;
      margin: 0 auto;
      
    }
    
    .time-item strong {
        background: orange;
        color: #fff;
        line-height: 49px;
        font-size: 36px;
        font-family: Arial;
        padding: 0 10px;
        margin-right: 10px;
        border-radius: 5px;
        box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
    }
  
    .time-item > span {
        float: left;
        line-height: 49px;
        color: orange;
        font-size: 32px;
        margin: 0 10px;
        font-family: Arial, Helvetica, sans-serif;
    }
    .title {
      width: 280px;
      height: 50px;
      margin:200px auto 50px auto;
    }
</style>
	<h1 class="title">距離聖誕節,還有</h1>
	<div class="time-item">
		<span><span id="day">00</span>天</span>
		<strong><span id="hour">00</span>時</strong>
		<strong><span id="minute">00</span>分</strong>
		<strong><span id="second">00</span>秒</strong>
		

	</div>
	<script type="text/javascript" src="common.js"></script>
	<script type="text/javascript">
		var endDate = new Date('2019-12-25 00:00:00');
		//獲取span
		var spanDay = my$('day');
		var spanHour = my$('hour');
		var spanMinute = my$('minute');
		var spanSecond = my$('second');
		setInterval(countdown,1000);
		countdown();
	//寫個定時器 隔一秒執行一次
		function countdown(){
		var startDate = new Date();

			//計算兩個日期日期差
			//定義一個變量來接受
		var interval = getInterval(startDate,endDate);
		setInnerText(spanDay,interval.day);
		setInnerText(spanHour,interval.hour);
		setInnerText(spanMinute,interval.minute);
		setInnerText(spanSecond,interval.second);


		}
	</script>
</body>
</html>

common.js部分

function my$(id) {
  return document.getElementById(id);
}

// 處理瀏覽器兼容性
// 獲取第一個子元素
function getFirstElementChild(element) {
    var node, nodes = element.childNodes, i = 0;
    while (node = nodes[i++]) {
        if (node.nodeType === 1) {
            return node;
        }
    }
    return null;
}

// 處理瀏覽器兼容性
// 獲取下一個兄弟元素
 function getNextElementSibling(element) {
    var el = element;
    while (el = el.nextSibling) {
      if (el.nodeType === 1) {
          return el;
      }
    }
    return null;
  }


// 處理innerText和textContent的兼容性問題
// 設置標籤之間的內容
function setInnerText(element, content) {
  // 判斷當前瀏覽器是否支持 innerText
  if (typeof element.innerText === 'string') {
    element.innerText = content;
  } else {
    element.textContent = content;
  }
}



//處理註冊事件瀏覽器兼容性問題
function addEventListener(element,eventName,fn){
if(element.addEventListener){
	element.addEventListener(eventName,fn);
}else if(element.attachEvent){
	element.attachEvent('on' +eventName,fn);
}else{element['on' + eventName] = fn;
	}
}






//處理移除事件的兼容性處理
function removeEventListener(element,eventName,fn){
	if(element.removeEventListener){
		element.removeEventListener(eventName,fn);
	}else if(element.detachEvent){
		element.detachEvent('on'+ eventName,fn);
	}else{
		element['on' + eventName] = null;
	}
}
// 獲取頁面滾動距離的瀏覽器兼容性問題
// 獲取頁面滾動出去的距離
function getScroll() {
  var scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft;
  var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
  return {
    scrollLeft: scrollLeft,
    scrollTop: scrollTop
  }
}

// 獲取鼠標在頁面的位置，處理瀏覽器兼容性
function getPage(e) {
  var pageX = e.pageX || e.clientX + getScroll().scrollLeft;
  var pageY = e.pageY || e.clientY + getScroll().scrollTop;
  return {
    pageX: pageX,
    pageY: pageY
  }
}


//格式化日期對象，返回yyyy-MM-dd HH:mm:ss的形式
function formatDate(date) {
  // 判斷參數date是否是日期對象
  // instanceof  instance 實例(對象)   of 的
  // console.log(date instanceof Date);
  if (!(date instanceof Date)) {
    console.error('date不是日期對象')
    return;
  }

  var year = date.getFullYear(),
      month = date.getMonth() + 1,
      day = date.getDate(),
      hour = date.getHours(),
      minute = date.getMinutes(),
      second = date.getSeconds();

  month = month < 10 ? '0' + month : month;
  day = day < 10 ? '0' + day : day;
  hour = hour < 10 ? '0' + hour : hour;
  minute = minute < 10 ? '0' + minute : minute;
  second = second < 10 ? '0' + second : second;

  return year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second;
}

// 獲取兩個日期的時間差
function getInterval(start, end) {
  // 兩個日期對象，相差的毫秒數
  var interval = end - start;
  // 求 相差的天數/小時數/分鐘數/秒數
  var day, hour, minute, second;

  // 兩個日期對象，相差的秒數
  // interval = interval / 1000;
  interval /= 1000;

  day = Math.round(interval / 60 / 60 / 24);
  hour = Math.round(interval / 60 / 60 % 24);
  minute = Math.round(interval / 60 % 60);
  second = Math.round(interval % 60);

  return {
    day: day,
    hour: hour,
    minute: minute,
    second: second
  }
}

實現效果

22.拖拽窗口並關閉窗口

代碼顯示：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>拖拽界面</title>
	<style>
        * {
            margin: 0;
            padding: 0;
        }

        .nav {
            height: 30px;
            background: #036663;
            border-bottom: 1px solid #369;
            line-height: 30px;
            padding-left: 30px;
        }

        .nav a {
            color: #fff;
            text-align: center;
            font-size: 14px;
            text-decoration: none;

        }

        .d-box {
            width: 400px;
            height: 300px;
            border: 5px solid #eee;
            box-shadow: 2px 2px 2px 2px #666;
            position: absolute;
            top: 40%;
            left: 40%;
            background-color: white;

            /* 不讓文字被選中 */
            -webkit-user-select:none;
            -moz-user-select:none;
            -ms-user-select:none;
            user-select:none;
        }

        .hd {
            width: 100%;
            height: 25px;
            background-color: #7c9299;
            border-bottom: 1px solid #369;
            line-height: 25px;
            color: white;
            /*鼠標樣式(十字)*/
            cursor: move;
        }

        #box_close {
            float: right;
            /*鼠標變成小手*/
            cursor: pointer;
        }
    </style>
</head>
<body>
	<div class="nav">
		<a href="javascript:;" id="register">註冊信息</a>
	</div>
	<div class="d-box" id="d_box">
		<div class="hd" id="drop">註冊信息(可以拖拽)
			<span id="box_close">【關閉】</span>
		</div>
		<div class="bd"></div>
	</div>
	<script type="text/javascript" src="common.js"></script>
	<script type="text/javascript">
		var box = document.getElementById('d_box');
		var drop = document.getElementById('drop');
		drop.onmousedown = function(e){
			//處理兼容性問題
			e = e || window.event;
			//當鼠標按下的時候 求鼠標在盒子中的位置
			//鼠標在盒子中的位置 = 鼠標在頁面上的位置 - 盒子的位置
			var x = getPage(e).pageX-box.offsetLeft;
			var y = getPage(e).pageY-box.offsetTop;
			//鼠標在文檔中移動
			//事件對象e
			document.onmouseover = function(e){
				e = e || window.event;
				//當鼠標在頁面上移動的時候——》求盒子的座標
				//盒子的座標 = 鼠標在頁面中的位置-鼠標在盒子中的位置
				var boxX = getPage(e).pageX - x;
				var boxY = getPage(e).pageY - y;
				box.style.left = boxX + 'px';
				box.style.top = boxY + 'px';
			}
		}
		drop.onmouseup = function(){
			document.onmouseover = null;
		}
		//點擊關閉按鈕 隱藏盒子
		var box_close = document.getElementById('box_close');
		box_close.onclick = function(){
			box.style.display = 'none';
		}
	</script>
	
</body>
</html>

效果顯示

23.點擊彈出登錄窗口，拖拽窗口

代碼如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .login-header {
            width: 100%;
            text-align: center;
            height: 30px;
            font-size: 24px;
            line-height: 30px;
        }
        ul, li, ol, dl, dt, dd, div, p, span, h1, h2, h3, h4, h5, h6, a {
            padding: 0px;
            margin: 0px;
        }
        .login {
            width: 512px;
            height: 280px;
            position: absolute;
            border: #ebebeb solid 1px;
            
            left: 50%;
            right: 50%;
            background: #ffffff;
            box-shadow: 0px 0px 20px #ddd;
            z-index: 9999;
            margin-left: -256px;
            margin-top: 140px;
            display: none;
        }
        .login-title {
            width: 100%;
            margin: 10px 0px 0px 0px;
            text-align: center;
            line-height: 40px;
            height: 40px;
            font-size: 18px;
            position: relative;
            cursor: move;
            -moz-user-select:none;
            -webkit-user-select:none;/*webkit瀏覽器*/
            -ms-user-select:none;/*IE10*/
            -khtml-user-select:none;/*早期瀏覽器*/
            user-select:none;
        }
        .login-input-content {
            margin-top: 20px;
        }
        .login-button {
            width: 50%;
            margin: 30px auto 0px auto;
            line-height: 40px;
            font-size: 14px;
            border: #ebebeb 1px solid;
            text-align: center;
        }
        .login-bg {
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0px;
            left: 0px;
            background: #000000;
            filter: alpha(opacity=30);
            -moz-opacity: 0.3;
            -khtml-opacity: 0.3;
            opacity: 0.3;
            display: none;
        }
        a {
            text-decoration: none;
            color: #000000;
        }
        .login-button a {
            display: block;
        }
        .login-input input.list-input {
            float: left;
            line-height: 35px;
            height: 35px;
            width: 350px;
            border: #ebebeb 1px solid;
            text-indent: 5px;
        }
        .login-input {
            overflow: hidden;
            margin: 0px 0px 20px 0px;
        }
        .login-input label {
            float: left;
            width: 90px;
            padding-right: 10px;
            text-align: right;
            line-height: 35px;
            height: 35px;
            font-size: 14px;
        }
        .login-title span {
            position: absolute;
            font-size: 12px;
            right: -20px;
            top: -30px;
            background: #ffffff;
            border: #ebebeb solid 1px;
            width: 40px;
            height: 40px;
            border-radius: 20px;
        }
    </style>
</head> 
<body>
<div class="login-header"><a id="link" href="javascript:void(0);">點擊，彈出登錄框</a></div>
<div id="login" class="login" >
    <div id="title" class="login-title">登錄會員
        <span><a id="closeBtn" href="javascript:void(0);" class="close-login">關閉</a></span>
    </div>
    <div class="login-input-content">
        <div class="login-input">
            <label>用戶名：</label>
            <input type="text" placeholder="請輸入用戶名" name="info[username]" id="username" class="list-input">
        </div>
        <div class="login-input">
            <label>登錄密碼：</label>
            <input type="password" placeholder="請輸入登錄密碼" name="info[password]" id="password" class="list-input">
        </div>
    </div>
    <div id="loginBtn" class="login-button"><a href="javascript:void(0);" id="login-button-submit">登錄會員</a></div>
</div>
<!-- 遮蓋層 -->
<div id="bg" class="login-bg" ></div> 
	<script>
		//點擊按鈕 彈出登錄窗口
		var link = document.getElementById('link');
		link.onclick = function(){
			//顯示登錄框和遮蓋層
			var login = document.getElementById('login');
			var bg  =  document.getElementById('bg');

			login.style.display = 'block';
			bg.style.display = 'block';
			return false;
		}
		//點擊關閉按鈕 隱藏登錄界面
		var closeBtn = document.getElementById('closeBtn');
		closeBtn.onclick = function(){
			var login = document.getElementById('login');
			var bg  =  document.getElementById('bg');
			login.style.display = 'none';
			bg.style.display = 'none';
		}
		//遮蓋層的目的  突出顯示登錄窗口   蓋住其他位置不讓操作
		//2.拖拽功能實現
		var title = document.getElementById('title');
		var login = document.getElementById('login');
		//按下鼠標的時候
		title.onmousedown = function(e){
			e = e || window.event;
			//鼠標相對於盒子的位置 = 鼠標在頁面中的位置 - 盒子在頁面中的位置
			
			var x = e.pageX - login.offsetLeft;
			var y = e.pageY - login.offsetTop;

			//文檔移動的時候
			document.onmousemove = function(e){
				e = e || window.event;
				//盒子的位置 = 鼠標在頁面中的位置 - 鼠標在盒子中的位置
				var boxX = e.pageX - x;
				var boxY = e.pageY - y;

				login.style.left = boxX + 256 + 'px';
				login.style.top = boxY - 140 + 'px';

			}
			//鼠標鬆開的時候
			document.onmouseup = function(){
				document.onmousemove = null;
			}

		}
	</script>
</body>
</html>

實現效果

24.圖片放大鏡

代碼部分

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>放大鏡</title>
	<style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 350px;
            height: 350px;
            margin: 100px;
            border: 1px solid #ccc;
            position: relative;
        }

        .big {
            width: 400px;
            height: 400px;
            position: absolute;
            top: 0;
            left: 360px;
            border: 1px solid #ccc;
            overflow: hidden;
            display: none;
        }

        .big img {
            position: absolute;
        }

        .mask {
            width: 175px;
            height: 175px;
            background: rgba(255, 255, 0, 0.4);
            position: absolute;
            top: 0px;
            left: 0px;
            cursor: move;
            display: none;
        }

        .small {
            position: relative;
        }

    </style>
</head>
<body>
	<div class="box" id="box">
		<div class="small">
			<img src="images/small.webp" width="350px" alt="">
			<div class="mask"></div>
		</div>
		<div class="big">
			<img src="images/big.jpg" width="800px" alt="">
		</div>
	</div>
	<script type="text/javascript" src="common.js"></script>
	<script type="text/javascript">
		var box = document.getElementById('box');
		var smallBox = box.children[0];
		var bigBox = box.children[1];

		var smallImage = smallBox.children[0];
		var mask = smallBox.children[1];
		var bigImage = bigBox.children[0];

		//1.鼠標經過的時候顯示mask和big 當鼠標離開box時隱藏mask和big
		smallBox.onmouseover = function(){
			mask.style.display = 'block';
			bigBox.style.display = 'block';

		}
		box.onmouseout = function(){
			mask.style.display = 'none';
			bigBox.style.display = 'none';
		}
		//2.當鼠標在盒子中移動的時候 讓mask和鼠標一起移動
		box.onmousemove = function(e){
			e = e || window.event;
			//鼠標相對於mask的位置 = 鼠標在頁面的位置 - 盒子的位置
			var maskX = getPage(e).pageX - box.offsetLeft;
    		var maskY = getPage(e).pageY - box.offsetTop;
    		//鼠標的位置出現在mask的中心點

    		maskX = maskX - mask.offsetWidth/2;
    		maskY = maskY - mask.offsetHeight/2;

    		//此時mask是在box中移動。因此要將mask限制住
    		maskX = maskX < 0 ? 0 : maskX;
    		maskY = maskY < 0 ? 0 : maskY;

    		maskX = maskX > box.offsetWidth - mask.offsetWidth ? box.offsetWidth - mask.offsetWidth : maskX;
    		maskY = maskY >box.offsetHeight -  mask.offsetHeight ? box.offsetHeight -  mask.offsetHeight :maskY;

			mask.style.left = maskX  + 'px';
    		mask.style.top = maskY  + 'px';
			//3.當mask移動的時候 讓大圖移動(根據比例)
			//mask移動距離/mask最大能夠移動的距離 = 大圖片移動的距離/大圖片最大能移動的距離
			//mask最大能夠移動的距離
			var maskMax =  box.offsetWidth - mask.offsetWidth;
			//大圖片最大能移動的距離
			var bigImageMax = bigImage.offsetWidth - bigBox.offsetWidth;
			var bigImageX = maskX * bigImageMax/maskMax;
			var bigImageY = maskY *bigImageMax/maskMax;

			bigImage.style.left = -bigImageX + 'px';
			bigImage.style.top = -bigImageY + 'px';

		}
		

	</script>
	
</body>
</html>

實現效果

25.模擬滾動條

代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>模擬滾動條</title>
    <style>
        * {margin: 0;padding: 0;}
        .box {
            width: 300px;
            height: 500px;
            border: 1px solid red;
            margin: 100px;
            position: relative;

            overflow: hidden;

            /* 不讓文字被選中 */
            -webkit-user-select:none;
            -moz-user-select:none;
            -ms-user-select:none;
            user-select:none;
        }
        .content {
            padding: 5px 18px 5px 5px;
            position: absolute;
            top: 0;
            left: 0;

        }
        .scroll {
            width: 18px;
            height: 100%;
            position: absolute;
            top: 0;
            right: 0;
            background-color: #eee;
        }
        .bar {
            height: 100px;
            width: 100%;
            position: absolute;
            top: 0;
            left: 0;
            background-color: red;
            border-radius:  10px;
            cursor: pointer;
        }
    </style>
</head>
<body>
<div class="box" id="box">
    <div class="content" id="content">
       我是文字內容，我是文字內容，我是文字內容，
        我是文字內容，我是文字內容，我是文字內容，
        我是文字內容，我是文字內容，我是文字內容，
        我是文字內容，我是文字內容，我是文字內容，
        我是文字內容，我是文字內容，我是文字內容，
        我是文字內容，我是文字內容，我是文字內容，
        我是文字內容，我是文字內容，我是文字內容，
        我是文字內容，我是文字內容，我是文字內容，
        我是文字內容，我是文字內容，我是文字內容，
        我是文字內容，我是文字內容，我是文字內容，我是文字內容，我是文字內
        我是文字內容，我是文字內容，我是文字內容，
        我是文字內容，我是文字內容，我是文字內容，
        我是文字內容，我是文字內容，我是文字內容，
        我是文字內容，我是文字內容，我是文字內容，
        我是文字內容，我是文字內容，我是文字內容，我是文字內容，我是文字內
		我是文字內容，我是文字內容，我是文字內容，
        我是文字內容，我是文字內容，我是文字內容，
        我是文字內容，我是文字內容，我是文字內容，
        我是文字內容，我是文字內容，我是文字內容，
        我是文字內容，我是文字內容，我是文字內容，我是文字內容，我是文字內
		我是文字內容，我是文字內容，我是文字內容，
        我是文字內容，我是文字內容，我是文字內容，
        我是文字內容，我是文字內容，我是文字內容，
        我是文字內容，我是文字內容，我是文字內容，
        我是文字內容，我是文字內容，我是文字內容，我是文字內容，我是文字內
		我是文字內容，我是文字內容，我是文字內容，
        我是文字內容，我是文字內容，我是文字內容，
        我是文字內容，我是文字內容，我是文字內容，
        我是文字內容，我是文字內容，我是文字內容，
        我是文字內容，我是文字內容，我是文字內容，我是文字內容，我是文字內
        我是文字內容，我是文字內容，我是文字內容，
        我是文字內容，我是文字內容，我是文字內容，
        我是文字內容，我是文字內容，我是文字內容，
        我是文字內容，我是文字內容，我是文字內容，
        我是文字內容，我是文字內容，我是文字內容，我是文字內容，我是文字內

    </div>
    <div class="scroll" id="scroll">
        <div class="bar" id="bar"></div>
    </div>
</div>
<script src="common.js"></script>

	<script type="text/javascript">
	//1.根據內容的大小計算滾動條的高度
	var box = my$('box');
	var content = my$('content');
	var scroll = my$('scroll');
	var bar = my$('bar');
	//滾動條的高度/scroll的高度 = box的高度/內容的高度
	var barHeight = 0;
	if(content.scrollHeight > box.clientHeight){
		barHeight = box.clientHeight/content.scrollHeight*scroll.clientHeight;
	//注意 設置元素大小和位置時一定要帶單位
	
	}
	bar.style.height = barHeight + 'px';
	//2.讓滾動條能夠拖拽
	
	//先求bar在滾動條的位置 = 鼠標在頁面中的位置 - box的offsetTop距離
	bar.onmousedown = function(e){
		e = e || window.event;
		var y = getPage(e).pageY - bar.offsetTop - box.offsetTop;
		document.onmousemove = function(e){
			
		//當鼠標在頁面上移動的時候 求滾動條的位置
		
			//e = e || window.event;
			//求滾動條的位置
			var barY = getPage(e).pageY - y - box.offsetTop;
			//控制bar不能移除scroll
			barY = barY < 0 ? 0 : barY;
			barY = barY > scroll.clientHeight - bar.clientHeight ? scroll.clientHeight - bar.clientHeight : barY; 
			bar.style.top = barY + 'px';

			//3.當拖拽滾動條的時候 改變內容的位置
			//內容滾動的距離/內容最大能夠滾動的距離 = 滾動條滾動的距離/滾動條最大能夠滾動的距離
			//內容滾動的距離
			var contentMax = content.scrollHeight - box.clientHeight;
			//滾動條最大能夠滾動的距離
			var barMax = scroll.clientHeight - bar.clientHeight;
			var contentY = barY / barMax*contentMax;
			content.style.top = -contentY + 'px';

		}
	}
	document.onmouseup = function(){
		//移除鼠標移動的事件
		document.onmousemove = null;
	}
	
	</script>
	
</body>
</html>

實現效果

26.簡單動畫（改進）

20題存在問題：點擊button之後，滑塊開始運動，此時再點擊button滑塊速度會變化
原因在於再次點擊button後會再次啓動一個定時器
此處再進行升級改進，假設要控制不同的組件進行運動，因此要將函數進行封裝

代碼如下

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>簡單動畫</title>
	<style type="text/css">
	body{
		margin: 0;
	}
	#box{
		position: relative;
		background-color: red;
		width: 100px;
		height: 100px;
	}
</style>
</head>
<body>
	<input type="button" id="btn" value="移動400">
	<input type="button" id="btn1" value="移動800">
	

	<div id="box"></div>
	<script type="text/javascript" src="common.js"></script>
	<script type="text/javascript">

		//獲取按鈕
		var btn = document.getElementById('btn');
		var btn1 = document.getElementById('btn1');

		var box = document.getElementById('box');
		var timerId = null
		//註冊點擊事件
		btn.onclick = function(){
	
			animate(box,400);
		}
		btn1.onclick = function(){
			animate(box,800);
			
		}
		//封裝動畫的函數
		//不僅要控制box 可能需要任何一個物體 所以需要參數element
		//元素移動的位置  需要target
		function animate(element,target){
			//保證頁面只有一個定時器在執行動畫
			if (timerId) {
				clearInterval(timerId);
				timerId = null;
			}
			//定時器
			timerId = setInterval(function(){
				//步進  每次移動的距離
				var step = 10;
				//最終盒子停止的位置
				//盒子當前的位置
				var current = element.offsetLeft;
				if (current >= target) {
					//定時器停止
					clearInterval(timerId);
					//讓盒子到target的位置
					element.style.left = target + 'px';
					//退出函數
					return;
				}
				current += step;
    		    element.style.left = current + 'px';
				//0.1秒執行一次
			},30);
		}
	</script>
</body>
</html>

實現效果
改進點擊button時，同時幾個box同時開始運動
代碼加入



		btn.onclick = function(){
			animate(box,400);
			animate(box1,400);
			
		}
		btn1.onclick = function(){
			animate(box,800);
			animate(box1,800);

執行效果
問題
點擊一個button之後只有下面的box運動
原因在於
//在執行第二個函數的時候，相對應的前一個定時器會被銷燬
//所以想讓每一個元素維護自己開啓的定時器
需要將所有的timerID改爲element.timerID
完整代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>簡單動畫</title>
	<style type="text/css">
	body{
		margin: 0;
	}
	#box{
		position: relative;
		background-color: red;
		width: 100px;
		height: 100px;
	}
	#box1{
		position: relative;
		background-color: blue;
		width: 100px;
		height: 100px;
	}
</style>
</head>
<body>
	<input type="button" id="btn" value="移動400">
	<input type="button" id="btn1" value="移動800">
	

	<div id="box"></div>
	<div id="box1"></div>
	
	<script type="text/javascript" src="common.js"></script>
	<script type="text/javascript">

		//獲取按鈕
		var btn = document.getElementById('btn');
		var btn1 = document.getElementById('btn1');

		var box = document.getElementById('box');
		//var timerId = null
		//註冊點擊事件
		btn.onclick = function(){
			animate(box,400);
			animate(box1,400);
			//在執行第二個函數的時候，相對應的前一個定時器會被銷燬
			//所以想讓每一個元素維護自己開啓的定時器
			
		}
		btn1.onclick = function(){
			animate(box,800);
			animate(box1,800);
			
		}
		//封裝動畫的函數
		//不僅要控制box 可能需要任何一個物體 所以需要參數element
		//元素移動的位置  需要target
		function animate(element,target){
			//保證頁面只有一個定時器在執行動畫
			if (element.timerId) {
				clearInterval(element.timerId);
				timerId = null;
			}
			//定時器
			element.timerId = setInterval(function(){
				//步進  每次移動的距離
				var step = 10;
				//最終盒子停止的位置
				//盒子當前的位置
				var current = element.offsetLeft;
				//當從400到800時執行動畫
				//當從800到400時沒有動畫直接跳轉
				if(current > target){
					step = - Math.abs(step);
				}
				if(Math.abs(current - target) < Math.abs(step))
				{
					//定時器停止
					clearInterval(element.timerId);
					//讓盒子到target的位置
					element.style.left = target + 'px';
					//退出函數
					return;
				}
				current += step;
    		    element.style.left = current + 'px';
				//0.1秒執行一次
			},30);
		}
	</script>
</body>
</html>

執行效果如下：

27.輪播圖

代碼如下
html部分

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>輪播圖</title>
	<link rel="stylesheet" href="css/style.css" />
</head>
<body>

	<div class="all" id='box'>
    <div class="screen">
        <ul>
            <li><img src="images/wf1.jpg" width="500" height="200"/></li>
            <li><img src="images/wf2.jpg" width="500" height="200"/></li>
            <li><img src="images/wf3.jpg" width="500" height="200"/></li>
            <li><img src="images/wf4.jpg" width="500" height="200"/></li>
            <li><img src="images/wf5.jpg" width="500" height="200"/></li>
        </ul>
        <ol>
        	

        </ol>
    </div>
    <div id="arr" ><span id="left">&lt;</span><span id="right">&gt;</span></div>
</div>
<script src="js/common.js"></script>
<script src="js/animate.js"></script>
<script type="text/javascript" src="js/index.js"></script>


	
</body>
</html>

css部分

* {
           padding: 0;
            margin: 0;
            list-style: none;
            border: 0;
        }

        .all {
            width: 500px;
            height: 200px;
            padding: 7px;
            border: 1px solid #ccc;
            margin: 100px auto;
            position: relative;
        }

        .screen {
            width: 500px;
            height: 200px;
            overflow: hidden;
            position: relative;
        }

        .screen li {
            width: 500px;
            height: 200px;
            overflow: hidden;
            float: left;
        }

        .screen ul {
            position: absolute;
            left: 0;
            top: 0px;
            width: 3000px;
        }

        .all ol {
            position: absolute;
            right: 10px;
            bottom: 10px;
            line-height: 20px;
            text-align: center;
        }

        .all ol li {
            float: left;
            width: 20px;
            height: 20px;
            background: #fff;
            border: 1px solid #ccc;
            margin-left: 10px;
            cursor: pointer;
        }

        .all ol li.current {
            background: yellow;
        }

        #arr {
            display: none;
            z-index: 1000;

        }

        #arr span {
            width: 40px;
            height: 40px;
            position: absolute;
            left: 5px;
            top: 50%;
            margin-top: -20px;
            background: #000;
            cursor: pointer;
            line-height: 40px;
            text-align: center;
            font-weight: bold;
            font-family: '黑體';
            font-size: 30px;
            color: #fff;
            opacity: 0.3;
            border: 1px solid #fff;
        }

        #arr #right {
            right: 5px;
            left: auto;
        }

common.js

function my$(id) {
  return document.getElementById(id);
}

// 處理瀏覽器兼容性
// 獲取第一個子元素
function getFirstElementChild(element) {
    var node, nodes = element.childNodes, i = 0;
    while (node = nodes[i++]) {
        if (node.nodeType === 1) {
            return node;
        }
    }
    return null;
}

// 處理瀏覽器兼容性
// 獲取下一個兄弟元素
 function getNextElementSibling(element) {
    var el = element;
    while (el = el.nextSibling) {
      if (el.nodeType === 1) {
          return el;
      }
    }
    return null;
  }


// 處理innerText和textContent的兼容性問題
// 設置標籤之間的內容
function setInnerText(element, content) {
  // 判斷當前瀏覽器是否支持 innerText
  if (typeof element.innerText === 'string') {
    element.innerText = content;
  } else {
    element.textContent = content;
  }
}



//處理註冊事件瀏覽器兼容性問題
function addEventListener(element,eventName,fn){
if(element.addEventListener){
	element.addEventListener(eventName,fn);
}else if(element.attachEvent){
	element.attachEvent('on' +eventName,fn);
}else{element['on' + eventName] = fn;
	}
}






//處理移除事件的兼容性處理
function removeEventListener(element,eventName,fn){
	if(element.removeEventListener){
		element.removeEventListener(eventName,fn);
	}else if(element.detachEvent){
		element.detachEvent('on'+ eventName,fn);
	}else{
		element['on' + eventName] = null;
	}
}
// 獲取頁面滾動距離的瀏覽器兼容性問題
// 獲取頁面滾動出去的距離
function getScroll() {
  var scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft;
  var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
  return {
    scrollLeft: scrollLeft,
    scrollTop: scrollTop
  }
}

// 獲取鼠標在頁面的位置，處理瀏覽器兼容性
function getPage(e) {
  var pageX = e.pageX || e.clientX + getScroll().scrollLeft;
  var pageY = e.pageY || e.clientY + getScroll().scrollTop;
  return {
    pageX: pageX,
    pageY: pageY
  }
}


//格式化日期對象，返回yyyy-MM-dd HH:mm:ss的形式
function formatDate(date) {
  // 判斷參數date是否是日期對象
  // instanceof  instance 實例(對象)   of 的
  // console.log(date instanceof Date);
  if (!(date instanceof Date)) {
    console.error('date不是日期對象')
    return;
  }

  var year = date.getFullYear(),
      month = date.getMonth() + 1,
      day = date.getDate(),
      hour = date.getHours(),
      minute = date.getMinutes(),
      second = date.getSeconds();

  month = month < 10 ? '0' + month : month;
  day = day < 10 ? '0' + day : day;
  hour = hour < 10 ? '0' + hour : hour;
  minute = minute < 10 ? '0' + minute : minute;
  second = second < 10 ? '0' + second : second;

  return year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second;
}

// 獲取兩個日期的時間差
function getInterval(start, end) {
  // 兩個日期對象，相差的毫秒數
  var interval = end - start;
  // 求 相差的天數/小時數/分鐘數/秒數
  var day, hour, minute, second;

  // 兩個日期對象，相差的秒數
  // interval = interval / 1000;
  interval /= 1000;

  day = Math.round(interval / 60 / 60 / 24);
  hour = Math.round(interval / 60 / 60 % 24);
  minute = Math.round(interval / 60 % 60);
  second = Math.round(interval % 60);

  return {
    day: day,
    hour: hour,
    minute: minute,
    second: second
  }
}

animate.js

//功能：讓某個元素實現動畫
function animate(element, target) {
    //清除上一次創建的定時器
    if(element.timerId) {
        clearInterval(element.timerId);
    }
    //每次改變的值
    var step = 10;
    //開啓定時器
    element.timerId = setInterval(function () {
        //獲取當前的位置
        var current = element.offsetLeft;
        //當前位置 <  目標位置  + step
        //當前位置 > 目標位置   -step
        if(current > target) {
            step = - Math.abs(step);
        }
        if(Math.abs(current - target) < Math.abs(step)) {
            //清除定期器，切換到目標位置
            clearInterval(element.timerId);
            element.style.left = target + "px";
           return;
        }
         current += step;
        element.style.left = current + "px";
    }, 10);
}

index.js

//獲取元素
	var box = my$('box');
	var screen = box.children[0];
	var ul = screen.children[0];
	var ol = screen.children[1];
	var imgWidth = screen.offsetWidth;
	//箭頭
	var arr = my$('arr');
	var arrLeft = my$('left');
	var arrRight = my$('right');
	//1.動態生成序號(在ol中動態生成li)
	//獲取到頁面上有多少張圖片
	var count = ul.children.length;
	for(var i = 0;i<count;i++){
		var li = document.createElement('li');
		ol.appendChild(li);
		setInnerText(li,i+1);

		//2.點擊序號(給序號設置點擊事件) 動畫的方式 切換圖片
		li.onclick = liClick;
		//爲什麼寫成這樣而不寫成li.onclick = function(){}
		//在循環函數中,若循環一次則會存儲一次匿名函數,循環十次會存十個匿名函數,會浪費內存,因此只要定義一個命名函數即可
		//注意:不能在命名函數後面加上(),因爲加之後就變成函數的調用
		//如果用匿名函數，每觸發事件，都會調用不同的函數，而設置了命名函數，每觸發事件，只用調用所命名的那個函數，減少訪問服務器的次數
			//讓當前li記錄索引
		//設置標籤的自定義屬性
		li.setAttribute('index',i);
	}
	function liClick(){
	//處理序號高亮不變的問題
		//2.1 取消其它li高亮顯示,讓當前li高亮顯示
		for (var i = 0;i<ol.children.length;i++){
			var li = ol.children[i];
			li.className = '';

		}
		//讓當前高亮顯示
		this.className = 'current';
		//2.2點擊序號, 動畫的方式切換到當前點擊的圖片的位置
		//var imgWidth = screen.offsetWidth;
		//獲取自定義屬性(獲取圖片索引)
		var liIndex = parseInt(this.getAttribute('index'));
		animate(ul,-liIndex*imgWidth);
		//全局變量index和li中的index保持一致
		index = liIndex;
	}

	//讓序號1高亮顯示(li)
	ol.children[0].className = 'current';

	//3.鼠標放到盒子上顯示箭頭
	box.onmouseenter = function(){
		arr.style.display = 'block';
		//清除定時器
		clearInterval(timerId);
	}
	box.onmouseleave = function(){
		arr.style.display = 'none';
		//重新開啓定時器
		timerId = setInterval(function(){
			arrRight.click();
		},2000);
	}
	//4.實現上一張和下一張的功能
	//4.1先寫下一張
	var index = 0;//第一張圖片的索引
	arrRight.onclick = function(){
		//判斷是否是克隆的第一張圖片
		//若是需修改ul座標 顯示真正的第一張
		if(index == count){
			ul.style.left = '0px';
			index = 0;
		}
		//總共有5張圖片,但是還有一張克隆的圖片 所克隆的圖片的索引是5
		//如果是最後一張,不能index++
		//4 < 5
		index++;
		if(index < count){
		//animate(ul,-index*imgWidth);
		//獲取圖片對應的序號,讓序號點擊
			ol.children[index].click();
		}else{
			//以動畫的方式移動到克隆的第一張圖片
			animate(ul,-index*imgWidth);
			//取消所有序號的高亮顯示讓第一個序號高亮
		for (var i = 0;i<ol.children.length;i++){
			var li = ol.children[i];
			li.className = '';
		}
		ol.children[0].className = 'current';
		}
	}
	//4.2點擊上一張
	arrLeft.onclick = function(){
		//如果當前是第一張圖片, 此時要偷偷的切換到最後一張圖片的位置(即克隆的第一張圖片)
		if(index == 0){

			index = count;
			ul.style.left = -index*imgWidth + 'px';
		}
		index--;
		ol.children[index].click();
		//if(index > 0){
		//index--;
		//animate(ul,-index*imgWidth);
		//ol.children[index].click();
		//}
	}
	//無縫滾動
	//獲取ul中的第一個li
	var firstLi = ul.children[0];
	//克隆li cloneNode()  複製節點
	//參數 true 複製節點中的內容
	//     false 只是複製當前節點 不是複製裏面的內容
	var cloneLi = firstLi.cloneNode(true);
	ul.appendChild(cloneLi);
	
	//5.自動切換圖片
	var timerId = setInterval(function(){
		arrRight.click();
	},2000);

實現效果
不點擊時自動跳轉
鼠標在box內顯示左右箭頭

28.回到頂部

html部分

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>回到頂部</title>
	<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
	<div id="wrap">
      <div id="top" class="header" data-reactid=".0.0">
          <div class="wrapper clearfix" data-reactid=".0.0.0"><a class="logo" href="/p/index.html" data-reactid=".0.0.0.0"></a>
              <div class="search-box" data-reactid=".0.0.0.1"><input type="text" value="" data-reactid=".0.0.0.1.0">
                      <div class="search-btn" data-reactid=".0.0.0.1.1"></div>
                      <div class="hot-words" data-reactid=".0.0.0.1.2"><a data-reactid=".0.0.0.1.2.$0">趣味測試</a><a data-reactid=".0.0.0.1.2.$1">魁拔</a><a data-reactid=".0.0.0.1.2.$2">迪麗熱巴</a>
                          <a
                              data-reactid=".0.0.0.1.2.$3">吳亦凡</a><a data-reactid=".0.0.0.1.2.$4">鹿晗</a></div>
                  </div>
                  <div class="user-wrapper" data-reactid=".0.0.0.2">
                      <div class="login-wrap" data-reactid=".0.0.0.2.0"><a class="btn-login" href="javascript:void(0)" data-reactid=".0.0.0.2.0.0">登錄</a></div>
                  </div>
                  <div class="links" data-reactid=".0.0.0.3">
                      <div class="slide-down-container admin-links" data-reactid=".0.0.0.3.1">
                          <div class="title" data-reactid=".0.0.0.3.1.0"><span data-reactid=".0.0.0.3.1.0.0"></span><span class="title-span" data-reactid=".0.0.0.3.1.0.1">部落管理</span>
                              <i
                                  class="slide-down-icon" data-reactid=".0.0.0.3.1.0.2"></i>
                          </div>
                          <ul class="slide-down-content" data-reactid=".0.0.0.3.1.1">
                              <li data-reactid=".0.0.0.3.1.1.$=10"><a target="_blank" href="/buluoadmin/home.html" data-reactid=".0.0.0.3.1.1.$=10.0">運營平臺</a></li>
                              <li
                                  data-reactid=".0.0.0.3.1.1.$=11"><a target="_blank" href="/apply.html" data-reactid=".0.0.0.3.1.1.$=11.0">創建部落</a></li>
                          </ul>
                      </div>
                      <div class="slide-down-container help-links" data-reactid=".0.0.0.3.2">
                          <div class="title" data-reactid=".0.0.0.3.2.0"><span data-reactid=".0.0.0.3.2.0.0"></span><span class="title-span" data-reactid=".0.0.0.3.2.0.1">幫助</span>
                              <i
                                  class="slide-down-icon" data-reactid=".0.0.0.3.2.0.2"></i>
                          </div>
                          <ul class="slide-down-content" data-reactid=".0.0.0.3.2.1">
                              <li data-reactid=".0.0.0.3.2.1.$=10"><a target="_blank" href="/tribe.html" data-reactid=".0.0.0.3.2.1.$=10.0">部落簡介</a></li>
                              <li data-reactid=".0.0.0.3.2.1.$=11"><a target="_blank" href="http://kf.qq.com/product/buluo.html" data-reactid=".0.0.0.3.2.1.$=11.0">幫助中心</a></li>
                          </ul>
                      </div>
                  </div>
              </div>
          </div>

      <div class="cls" id="content">
          <img src="images/content.png" width="100%">
      </div>
      http://buluo.qq.com/p/detail.html?bid=17266&pid=9498777-1455945612&from=grp_sub_obj
  </div>
    <div class="to-top" id="totop"></div>
	<script type="text/javascript" src="js/common.js"></script>
	<script type="text/javascript" src="js/index.js"></script>
</body>
</html>

css部分

* {
    margin: 0;
    padding: 0;
}
html {
    width: 100%;
    font-family: "Microsoft YaHei",-apple-system-font,"Helvetica Neue",Helvetica,STHeiTi,sans-serif;

}
.header {
    position: fixed;
    z-index: 20;
    left: 0;
    top: 0;
    height: 90px;
    width: 100%;
    background-color: #fff;
    transition: height .3s;
}

.header.fixed {
    height: 50px;
    box-shadow: 0 0 1px 0 rgba(0,0,0,.3),0 0 6px 2px rgba(0,0,0,.15);
}
.wrapper {
    width: 970px;
    margin: 0 auto;
}
.clearfix:after {
    display: table;
    clear: both;
    content: "";
}

.header .logo {
    float: left;
    margin: 0;
    width: 180px;
    margin-top: 21px;
    height: 34px;
    background-image: url(http://s.url.cn/qqun/xiaoqu/buluo/p/js/images/big_logo.a9bf2527b09314270250235300104630.png);
    background-repeat: no-repeat;
    transition: all .3s;
}
a {
    text-decoration: none;
    color: #000;
    background-color: transparent;
}
.header .search-box {
    float: left;
    margin-left: 25px;
    height: 30px;
    margin-top: 24px;
    transition: margin .3s;
}
.header .user-wrapper {
    margin-top: 32px;
}
.header .user-wrapper {
    float: right;
    transition: margin .3s;
}
.header .links {
    margin-top: 32px;
}
.slide-down-container {
    font-size: 12px;
    position: relative;
    z-index: 100;
    float: left;
    margin-right: 20px;
}
.slide-down-container .title {
    position: relative;
    cursor: pointer;
    padding-bottom: 10px;
}
.header .slide-down-container.help-links .slide-down-content {
    left: -32px;
}
.slide-down-container .slide-down-content {
    position: absolute;
    font-size: 12px;
    display: none;
    top: 20px;
    width: 88px;
    padding: 10px 0;
    margin-top: 7px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background-color: #fff;
    border: 1px solid #dbdadf;
    box-shadow: 0 2px 6px 2px rgba(0,0,0,.17);
}
ul {
    list-style: none;
}
.header .search-box input {
    float: left;
    padding: 0;
    height: 28px;
    line-height: 28px;
    width: 340px;
    border: 1px solid #dfdfdf;
    border-radius: 2px;
    border-right: 0;
    padding-left: 10px;
    font-size: 14px;
}
.header .search-box div.search-btn {
    float: left;
    height: 30px;
    width: 64px;

    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAMAAAAolt3jAAAAM1BMVEUAAAD///////////////////////////////////////////////////////////////+3leKCAAAAEXRSTlMA/qkqH/KX4uEFmYxNSH9tY+SUvpEAAABVSURBVAjXZY1ZDoAwCEQZti5a9f6nNaUxBn0/k8cEICL1iupKi2GY2AhTA0sThkXfwTFm+IwCCRXUGUALbcCnzbs9XYY+fxcbBeoFxa/wl/3vR/bzBrf8Ab4Yi5q3AAAAAElFTkSuQmCC) center no-repeat #2786e4;
    cursor: pointer;
}
.header .search-box .hot-words {
    clear: left;
    transition: opacity .3s;
    padding-top: 10px;
    font-size: 12px;
}
.header .search-box .hot-words a {
    margin-right: 18px;
    cursor: pointer;
    color: #868686;
}
.slide-down-container .title .title-span {
    max-width: 100px;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.slide-down-container .title span {
    position: relative;
    vertical-align: middle;
}
.slide-down-container .title {
    position: relative;
    cursor: pointer;
    padding-bottom: 10px;
}
.slide-down-container {
    font-size: 12px;
    position: relative;
    z-index: 100;
    float: left;
    margin-right: 20px;
}
body {
    background: #ecebf0 url(http://s.url.cn/qqun/xiaoqu/buluo/p/js/images/bg.019aa429f71b955278687d76ea4c0951.jpg) no-repeat center center fixed;
}
.slide-down-container .title .slide-down-icon {
    display: inline-block;
    margin-left: 5px;
    margin-top: 1px;
    width: 5px;
    height: 5px;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAGCAYAAAAVMmT4AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3FpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDowNTNmYWU4Mi01YzUwLWM5NDctYjFiNC0yNjBkNDNkZTNiMzgiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RDkzRjNDQUQ0MUEyMTFFNTg5OUNDM0EzRkU2MjVBMjgiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RDkzRjNDQUM0MUEyMTFFNTg5OUNDM0EzRkU2MjVBMjgiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjA1M2ZhZTgyLTVjNTAtYzk0Ny1iMWI0LTI2MGQ0M2RlM2IzOCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDowNTNmYWU4Mi01YzUwLWM5NDctYjFiNC0yNjBkNDNkZTNiMzgiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7rM0xpAAAAlElEQVR42mJkYGAIBuIbpaWlVxlwgO7ubjUgpc4MJH4AcdCxY8e+WFtbv8CiUBtIBQDxESagifeBjKVA7A6UMEdTaACkfIF4JVDdLSaQIJDxGEgtAmI7oAJbqEIzkAFAvARqIAMz0GqwKUD6C9Apt4BMbyANciPI+kVAhc9gNjEhWwuUeAOk5oEMAeL5QD6KHwACDACYkDOP6HW2qAAAAABJRU5ErkJggg==) center no-repeat;
    vertical-align: middle;
}
.login-wrap {
    font-size: 12px;
    margin-left: 4px;
}
.login-wrap .btn-login {
    display: inline-block;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    line-height: 18px;
    height: 18px;
}
.header .links {
    margin-top: 32px;
}
.header .links, .header .user-wrapper {
    float: right;
    transition: margin .3s;
}

#wrap {
    width: 100%;
}
.cls {
    width: 70%;
    margin: 100px auto 0px auto;
}
.header.fixed .hot-words {
    opacity: 0;
    -ms-filter: "alpha(Opacity=0)";
    pointer-events: none;
}
.header.fixed .links, .header.fixed .user-wrapper {
    margin-top: 15px;
}
.header.fixed .logo {
    background-image: url(http://s.url.cn/qqun/xiaoqu/buluo/p/js/images/small_logo.e402407a1c2d949e81207e68ff99b556.png);
    width: 165px;
    height: 30px;
    margin-top: 10px;
}
.header.fixed .search-box {
    margin-top: 10px;
}

 .to-top {
    width: 50px;
    height: 50px;
    background-image: url(http://s.url.cn/qqun/xiaoqu/buluo/p/js/images/to_top.6a40e92f2a02f3945477ff9937f5cb20.png);
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 50px 50px;
    cursor: pointer;
    display: none;
     position: fixed;
     bottom: 150px;
     left: 86%;
}

index.js部分

//獲取元素
var Bodytop = my$('top');
//回到頂部的按鈕
var totop = my$('totop');
//當拖動滾動條的時候執行
window.onscroll = function(){
	//1.當拖動滾動條的時候,當內容滾動出去10px的時候. 
	//改變top的高度並且顯示回到頂部的按鈕
	//調用common.js中的getScroll()函數來獲取滾動出去的距離
	var scrollTop = getScroll().scrollTop;
	if(scrollTop > 10){
		//改變top
		Bodytop.className = 'header fixed';
		//顯示回到頂部
		totop.style.display = 'block';
	}else{
		//改變top
		Bodytop.className = 'header';
		//顯示回到頂部
		totop.style.display = 'none';

	}
	//如何獲得滾動的距離
	// document.body.scrollTop 
}
	//2.當點擊回到頂部按鈕的時候,動畫的方式回到最上面,使得滾動距離爲0
	var timerId = null;
	totop.onclick = function(){
		if(timerId){
			clearInterval(timerId);
			timerId = null;
		}
		timerId = setInterval(function(){
			//步進
			var step = 5;
			//目標位置
			var target = 0;
			//獲取當前位置
			var current = getScroll().scrollTop;
			if(current>target){
				step = -Math.abs(step);
			}
			//判斷當前是否到達目標位置
			if(Math.abs(current-target)<=Math.abs(step)){
				clearInterval(timerId);
				document.body.scrollTop = target;//已默認單位爲像素
				document.documentElement.scrollTop = target;
				return;
			}
			current+=step;
			document.body.scrollTop = target;//已默認單位爲像素
			document.documentElement.scrollTop = target;
		},30);
	}

common.js部分

function my$(id) {
  return document.getElementById(id);
}

// 處理瀏覽器兼容性
// 獲取第一個子元素
function getFirstElementChild(element) {
    var node, nodes = element.childNodes, i = 0;
    while (node = nodes[i++]) {
        if (node.nodeType === 1) {
            return node;
        }
    }
    return null;
}

// 處理瀏覽器兼容性
// 獲取下一個兄弟元素
 function getNextElementSibling(element) {
    var el = element;
    while (el = el.nextSibling) {
      if (el.nodeType === 1) {
          return el;
      }
    }
    return null;
  }


// 處理innerText和textContent的兼容性問題
// 設置標籤之間的內容
function setInnerText(element, content) {
  // 判斷當前瀏覽器是否支持 innerText
  if (typeof element.innerText === 'string') {
    element.innerText = content;
  } else {
    element.textContent = content;
  }
}

// 處理註冊事件的兼容性問題
// eventName, 不帶on，  click  mouseover  mouseout
function addEventListener(element, eventName, fn) {
  // 判斷當前瀏覽器是否支持addEventListener 方法
  if (element.addEventListener) {
    element.addEventListener(eventName, fn);  // 第三個參數 默認是false
  } else if (element.attachEvent) {
    element.attachEvent('on' + eventName, fn);
  } else {
    // 相當於 element.onclick = fn;
    element['on' + eventName] = fn;
  }
}

// 處理移除事件的兼容性處理
function removeEventListener(element, eventName, fn) {
  if (element.removeEventListener) {
    element.removeEventListener(eventName, fn);
  } else if (element.detachEvent) {
    element.detachEvent('on' + eventName, fn);
  } else {
    element['on' + eventName] = null;
  }
}

// 獲取頁面滾動距離的瀏覽器兼容性問題
// 獲取頁面滾動出去的距離
function getScroll() {
  var scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft;
  var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
  return {
    scrollLeft: scrollLeft,
    scrollTop: scrollTop
  }
}

// 獲取鼠標在頁面的位置，處理瀏覽器兼容性
function getPage(e) {
  var pageX = e.pageX || e.clientX + getScroll().scrollLeft;
  var pageY = e.pageY || e.clientY + getScroll().scrollTop;
  return {
    pageX: pageX,
    pageY: pageY
  }
}


//格式化日期對象，返回yyyy-MM-dd HH:mm:ss的形式
function formatDate(date) {
  // 判斷參數date是否是日期對象
  // instanceof  instance 實例(對象)   of 的
  // console.log(date instanceof Date);
  if (!(date instanceof Date)) {
    console.error('date不是日期對象')
    return;
  }

  var year = date.getFullYear(),
      month = date.getMonth() + 1,
      day = date.getDate(),
      hour = date.getHours(),
      minute = date.getMinutes(),
      second = date.getSeconds();

  month = month < 10 ? '0' + month : month;
  day = day < 10 ? '0' + day : day;
  hour = hour < 10 ? '0' + hour : hour;
  minute = minute < 10 ? '0' + minute : minute;
  second = second < 10 ? '0' + second : second;

  return year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second;
}

// 獲取兩個日期的時間差
function getInterval(start, end) {
  // 兩個日期對象，相差的毫秒數
  var interval = end - start;
  // 求 相差的天數/小時數/分鐘數/秒數
  var day, hour, minute, second;

  // 兩個日期對象，相差的秒數
  // interval = interval / 1000;
  interval /= 1000;

  day = Math.round(interval / 60 / 60 / 24);
  hour = Math.round(interval / 60 / 60 % 24);
  minute = Math.round(interval / 60 % 60);
  second = Math.round(interval % 60);

  return {
    day: day,
    hour: hour,
    minute: minute,
    second: second
  }
}

實現效果

29.迷你微信聊天案例

html部分

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
	<div id="container">
		<div class="header">
			<span style="float: right;">20:30</span> 
			<span style="float: left;">小澤老師</span> 
		</div>

		<ul class="content"></ul>

		<div class="footer">
			<div class="icon"> 
				<img src="images/1.png" alt="" id="icon"> 
			</div>
			<input id="text" type="text" placeholder="說點什麼吧..."> 
			<span id="btn">發送</span> 
		</div>
	</div>
	<script type="text/javascript" src="js/index.js"></script>
	
</body>
</html>

css部分

* {
			margin: 0;
			padding: 0;
			list-style: none;
			font-family: '微軟雅黑'
		}

		#container {
			width: 450px;
			height: 600px;
			background: #eee;
			margin: 10px auto 0;
			position: relative;
			box-shadow: 0px 0px 16px #999;
		}

		.header {
			background: #000;
			height: 34px;
			color: #fff;
			height: 40px;
			line-height: 40px;
			font-size: 20px;
			padding: 0 10px;
		}

		.footer {
			width: 430px;
			height: 40px;
			background: #999;
			position: absolute;
			bottom: 0;
			padding: 10px;
		}

		.footer input {
			width: 300px;
			height: 38px;
			outline: none;
			font-size: 16px;
			text-indent: 10px;
			position: absolute;
			border-radius: 6px;
			right: 80px;
		}

		.footer span {
			display: inline-block;
			width: 62px;
			height: 38px;
			background: #ccc;
			font-weight: 900;
			line-height: 38px;
			cursor: pointer;
			text-align: center;
			position: absolute;
			right: 10px;
			top: 14px;
			border-radius: 6px;
		}

		.footer span:hover {
			color: #777;
			background: #ddd;
		}

		.icon {
			display: inline-block;
			background: red;
			width: 50px;
			height: 50px;
			border-radius: 30px;
			position: absolute;
			bottom: 3px;
			left: 10px;
			cursor: pointer;
			overflow: hidden;
		}

		img {
			width: 60px;
			height: 60px;
			border-radius: 8px;
		}

		.content {
			font-size: 20px;
			width: 435px;
			height: 662px;
			overflow: auto;
			padding: 5px;
		}

		.content li {
			margin-top: 10px;
			padding-left: 10px;
			width: 412px;
			display: block;
			clear: both;
			overflow: hidden;
		}

		.content li img {
			float: left;
		}

		.content li span {
			background: #7cfc00;
			padding: 10px;
			border-radius: 10px;
			float: left;
			margin: 6px 10px 0 10px;
			max-width: 310px;
			border: 1px solid #ccc;
			box-shadow: 0 0 3px #ccc;
		}

		.content li img.imgleft {
			float: left;
		}

		.content li img.imgright {
			float: right;
		}

		.content li span.spanleft {
			float: left;
			background: #fff;
		}

		.content li span.spanright {
			float: right;
			background: #7cfc00;
		}

js部分

//1.點擊圖片實現用戶切換功能
//獲取圖片
//1.1默認兩個用戶,通過點擊來回切換
var img = document.getElementById('icon');
var arr = ["images/1.png","images/2.png"];
var flag = 0;
img.onclick = function(){
	if (flag == 0) {
		img.src = arr[1];
		flag = 1;
	}else if(flag ==1 ){
		img.src = arr[0];
		flag = 0;
	}
}

//2.點擊發送按鈕,把用戶的聊天內容展示在聊天區域
//註冊點擊事件
var btn = document.getElementById('btn');
var num = -1;//統計聊天記錄
btn.onclick = function(){
	//判斷用戶內容是否爲空
	var text = document.getElementById('text').value;
	if(text == ''){
		alert('請輸入聊天內容');
	}else{
	//把內容添加到區域內
		var content = document.getElementsByTagName('ul')[0];
		content.innerHTML += "<li><img src='"+arr[flag]+"' /><span>"+text+"</span></li>"

	}
	var imgs = content.getElementsByTagName('img');
	var span = content.getElementsByTagName('span');
	num++;
	//判斷當前聊天的用戶
	if(flag == 0){
		imgs[num].className = 'imgleft';
		span[num].className = 'spanleft';
	}else{
		imgs[num].className = 'imgright';
		span[num].className = 'spanright';
	}

document.getElementById('text').value = '';
}
//text.value = '';
//2.1點擊發送按鈕,把聊天內容展示在聊天區域
//2.2設定聊天區域內不同的位置顯示

實現效果

30.隨機生成小色塊

html部分

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>隨機生成方塊</title>
	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
	<div id="container"></div>
	<script src="js/tools.js"></script>
	<script src="js/box.js"></script>
	<script src="js/main.js"></script>
	<script>
		//console.log(tools.getRandom(1,10));
		//var parent = document.getElementById('container');
	//	var box1 = new Box(parent);
		//隨機生成方塊的座標
		//box1.random();
	</script>
</body>
</html>

css部分：

#container{
	width: 800px;
	height: 600px;
	background-color: lightgray;
	position: relative;
}

box.js部分

function Box(parent,options){
	options = options || {};
	//表示  如果對方傳過來是options對象,直接返回該對象,
	//如果沒有返回該對象,此時變量的值是undefined,若是undefined,返回的布爾類型
	//是false,會返回空對象(防止對象出問題)
	
	
	//方塊所具備的屬性
	this.backgroundColor = options.backgroundColor || 'red';
	this.width = options.width || 20;
	this.height = options.height || 20;
	this.x = options.x || 0;
	this.y = options.y || 0;
	//創建對應的div
	this.div = document.createElement('div');//將div設置屬性,那麼div就可以在init方法中被調用
	parent.appendChild(this.div);
	this.parent = parent;
	//設置div的樣式
	this.init();
}
	//初始化div的樣式
Box.prototype.init = function(){
	var div = this.div;
	div.style.backgroundColor = this.backgroundColor;
	div.style.height = this.height +'px';
	div.style.width = this.width +'px';
	div.style.left = this.x + 'px';
	div.style.top = this.y + 'px';

	//脫離文檔流
	div.style.position = 'absolute';


}

//讓box能夠生成隨機方塊的位置
Box.prototype.random = function(){
	//父容器的寬度/方塊的寬度,就能知道能放多少方塊
	var x = Tools.getRandom(0,this.parent.offsetWidth/this.width - 1)*this.width;
	var y = Tools.getRandom(0,this.parent.offsetHeight/this.height - 1)*this.height;

	this.div.style.left = x + 'px';
	this.div.style.top = y + 'px';

	
}

main.js

//生成10個方塊 並隨機生成顏色
var container = document.getElementById('container');

//數組存儲創建的方塊
var array = [];
for(var i = 0;i<10;i++){
	var r = Tools.getRandom(0,255);
	var g = Tools.getRandom(0,255);
	var b = Tools.getRandom(0,255);


	var box = new Box(container,{
		backgroundColor:'rgb('+r+','+g+','+ b +')'
	});
	//把創建好的方塊添加到數組中
	array.push(box);
}

//設置隨機位置,開啓定時器
setInterval(randomBox,500);
//頁面加載完成,先設置隨機位置
randomBox();
function randomBox(){
		//隨機生成方塊的座標
	for(var i = 0;i<array.length;i++)	{
		var box = array[i];
		box.random();
	}
}

box.js

var Tools = {
  getRandom: function (min, max) {
    return Math.floor(Math.random() * (max - min + 1)) +  min;
  }
}

實現效果：

####31.使用閉包改字體
閉包：在一個作用域中訪問另一個作用域的變量
代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>改字體</title>
</head>
<body>
	字體這麼大
	<button id="btn1">按鈕1</button>
	<button id="btn2">按鈕2</button>
	<button id="btn3">按鈕3</button>
<script type="text/javascript">
	var btn1 = document.getElementById('btn1');
	var btn2 = document.getElementById('btn2');
	var btn3 = document.getElementById('btn3');
//創建一個函數
function makeFun(size){
	return function(){
		document.body.style.fontSize = size+'px';
	}
}
btn1.onclick = makeFun(12);
btn2.onclick = makeFun(16);
btn3.onclick = makeFun(18);

</script>
</body>
</html>

效果如下：

33.使用正則表達式進行表單驗證

代碼如下

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>正則表達式</title>
</head>
<body>
	QQ號：<input type="text" id="txtQQ"><span></span><br>
    郵箱：<input type="text" id="txtEMail"><span></span><br>
    手機：<input type="text" id="txtPhone"><span></span><br>
    生日：<input type="text" id="txtBirthday"><span></span><br>
    姓名：<input type="text" id="txtName"><span></span><br>
	<script type="text/javascript">
		//驗證郵編  ^[1-9]\d{5}$      ——100010
		//驗證電話號碼  ^[1-9]\d{10}$
		//驗證日期    ^\d{4}-d{1,2}-d{1,2}$   ——2103-2-3
		//驗證郵箱      \w+@\w+(\.\w+)     ——[email protected]     ——\w表示任意多數字字母下劃線;()表示可以出現多次
		//									
		

		//驗證QQ
		addCheck('txtQQ',/^\d{5,12}$/,'請輸入正確的QQ格式');
		//驗證郵箱
		addCheck('txtEMail',/^\w+@\W+(\>\W+)+$/);
		 // 3 手機號
      addCheck('txtPhone', /^[1-9]\d{10}$/, '請輸入正確的手機號碼格式');
      // 4 驗證日期
      addCheck('txtBirthday', /^\d{4}-\d{1,2}-\d{1,2}$/, '請輸入正確的日期格式')
      // 5 驗證姓名
      addCheck('txtName', /^[\u4e00-\u9fa5]{2,4}$/, '請輸入2-4個漢字')

		//將文本框的驗證封裝成一個函數
		//第一個參數是元素的ID
		//第二個參數是正則表達式對象RegExp
		//第三個參數是提示的文本
		function addCheck(elementID,reg,tip){
			var element = document.getElementById(elementID);
			element.onblur = function(){
			var span = this.nextElementSibling;//下一個兄弟元素
					if (!reg.test(this.value)) {
					//若不匹配 文本框後面的span中給出相應的提示
					span.innerText = tip;
					span.style.color = 'red';
				}else{
					span.innerText = '';
					span.style.color = '';
				}
			}
		}
	</script>
</body>
</html>

jQuery學習

1.點擊按鈕，改變p標籤內容

<!DOCTYPE html>
<html lang="en" class="">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<script type="text/javascript" src="jquery-1.12.2.js"></script>
	<input type="button" value="設置內容" id="btn">
	<p>1</p>
	<p>12</p>
	<p>134</p>
	<p>154</p>
	<script type="text/javascript">
		//頁面加載事件
	$(function(){
		//獲取點擊按鈕
		$('#btn').click(function(){
			//獲取所有的p標籤
			$('p').text('我們都是P標籤');
		});
	});
	</script>
</body>
</html>

效果顯示

2.下拉菜單

代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>下拉菜單</title>
	<script type="text/javascript" src="jquery-1.12.2.js"></script>
</head>
<body>
<div class="wrap">
	<ul>
		<li>
			<a href="javascript:void(0);">帥哥</a>
			<ul>
				<li>
					<a href="javascript:void(0)">魏大勳</a>
					<a href="javascript:void(0)">王大陸</a>
					<a href="javascript:void(0)">陳偉霆</a>
				</li>
				<li></li>
				<li></li>

			</ul>
		</li>
		<li>
			<a href="javascript:void(0);">美女</a>
			<ul>
				<li>
					<a href="javascript:void(0)">謝娜</a>
					<a href="javascript:void(0)">吳昕</a>
					<a href="javascript:void(0)">歐陽娜娜</a>
				</li>
				<li></li>
				<li></li>

			</ul>
		</li>
		<li>
			<a href="javascript:void(0);">實力派</a>
			<ul>
				<li>
					<a href="javascript:void(0)">陳寶國</a>
					<a href="javascript:void(0)">陳道明</a>
					<a href="javascript:void(0)">宋丹丹</a>
				</li>
				<li></li>
				<li></li>

			</ul>
		</li>
	</ul>
</div>
<style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        .wrap {
            width: 330px;
            height: 30px;
            margin: 100px auto 0;
            padding-left: 10px;
            background-image: url(images/bg.jpg);
        }

        .wrap li{
            background-image: url(images/libg.jpg);
        }

        .wrap > ul > li {
            float: left;
            margin-right: 10px;
            position: relative;
        }

        .wrap a {
            display: block;
            height: 30px;
            width: 100px;
            text-decoration: none;
            color: #000;
            line-height: 30px;
            text-align: center;
        }

        .wrap li ul {
            position: absolute;
            top: 30px;
            display: none;
        }

    </style>
<script type="text/javascript">
	//頁面加載
	$(function(){
		//鼠標放在ul下的a元素上出現ul下面的三個li
		$('.wrap>ul>li').mouseover(function(){
			$(this).children('ul').show();
		});
		$('.wrap>ul>li').mouseout(function(){
			$(this).children('ul').hide();
		});
	});
</script>	
</body>
</html>

顯示效果

3.精品服裝展示

代碼如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            font-size: 12px;
        }

        ul {
            list-style: none;
        }

        a {
            text-decoration: none;
        }

        .wrapper {
            width: 298px;
            height: 248px;
            margin: 100px auto 0;
            border: 1px solid pink;
            overflow: hidden;
        }

        #left, #center, #right {
            float: left;
        }

        #left li, #right li {
            background: url(images/lili.jpg) repeat-x;
        }

        #left li a, #right li a {
            display: block;
            width: 48px;
            height: 27px;
            border-bottom: 1px solid pink;
            line-height: 27px;
            text-align: center;
            color: black;
        }

        #left li a:hover, #right li a:hover {
            background-image: url(images/abg.gif);
        }

        #center {
            border-left: 1px solid pink;
            border-right: 1px solid pink;
        }
    </style>
    <script src="jquery-1.12.2.js"></script>
    
</head>
<body>
<div class="wrapper">
    <ul id="left">
        <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>
        <li><a href="#">女褲</a></li>
        <li><a href="#">羽絨服</a></li>
        <li><a href="#">牛仔褲</a></li>
    </ul>
    <ul id="center">
        <li><a href="#"><img src="images/女靴.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/雪地靴.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/冬裙.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/呢大衣.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/毛衣.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/棉服.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/女褲.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/羽絨服.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/牛仔褲.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/女包.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/男包.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/登山鞋.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/皮帶.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/圍巾.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/皮衣.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/男毛衣.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/男棉服.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/男靴.jpg" width="200" height="250"/></a></li>
    </ul>
    <ul id="right">
        <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>
        <li><a href="#">男毛衣</a></li>
        <li><a href="#">男棉服</a></li>
        <li><a href="#">男靴</a></li>
    </ul>




    <p></p>
    <span></span>
    <span></span>
    <p></p>
    <span></span>
</div>
<script>
    $(function(){
        $('#left>li').mouseover(function(){
            var index = $(this).index();
            $('#center>li:eq('+index+')').show();
            $('#center>li:eq('+index+')').siblings('li').hide();//當前元素的所有兄弟元素

        });
        $('#right>li').mouseover(function(){
            var index = $(this).index()+9;
            $('#center>li:eq('+index+')').show();
            $('#center>li:eq('+index+')').siblings('li').hide();//當前元素的所有兄弟元素

        });
    });    
    </script>
</body>
</html>

顯示效果

4.突出顯示

代碼如下

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        body {
            background: #000;
        }

        .wrap {
            margin: 100px auto 0;
            width: 630px;
            height: 394px;
            padding: 10px 0 0 10px;
            background: #000;
            overflow: hidden;
            border: 1px solid #fff;
        }

        .wrap li {
            float: left;
            margin: 0 10px 10px 0;

        }

        .wrap img {
            display: block;
            border: 0;
        }
    </style>
    <script src="jquery-1.12.2.js"></script>
    <script>
        $(function () {
        	$(".wrap>ul>li").mouseover(function(){
        		
        		$(this).siblings("li").css("opacity",0.5);
        		$(this).css("opacity",1)
        	});
        	$(".wrap").mouseout(function(){
        		//.find針對當前的元素裏面找以下其他的元素
        		$(this).find("li").css("opacity",1)
        	});
      });
    </script>
</head>
<body>
<div class="wrap">
    <ul>
        <li><a href="#"><img src="images/01.jpg" alt=""/></a></li>
        <li><a href="#"><img src="images/02.jpg" alt=""/></a></li>
        <li><a href="#"><img src="images/03.jpg" alt=""/></a></li>
        <li><a href="#"><img src="images/04.jpg" alt=""/></a></li>
        <li><a href="#"><img src="images/05.jpg" alt=""/></a></li>
        <li><a href="#"><img src="images/06.jpg" alt=""/></a></li>
    </ul>
</div>
</body>
</html>

效果顯示

5.手風琴案例

代碼顯示

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        ul {
            list-style: none
        }

        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 1150px;
            height: 400px;
            margin: 50px auto;
            border: 1px solid red;
            overflow: hidden;
        }

        div li {
            width: 240px;
            height: 400px;
            float: left;
        }

        div ul {
            width: 1300px;
        }


    </style>
    <script src="jquery-1.12.2.js"></script>
    <script>
    	$(function(){
    		$('#box>ul>li').mouseover(function(){
    			//將當前li的所有兄弟元素li的寬度設置一下
    			$(this).siblings('li').css("width","100px");
    			$(this).css('width','800px');
    		});
    		$('#box>ul>li').mouseout(function(){
    			//將當前li的所有兄弟元素li的寬度設置一下
    			$(this).siblings('li').css("width","240px");
    			$(this).css('width','240px');
    		});
    	});
    </script>
</head>
<body>
<div id="box">
    <ul>
        <li><img src="images/1.jpg"/></li>
        <li><img src="images/2.jpg"/></li>
        <li><img src="images/3.jpg"/></li>
        <li><img src="images/4.jpg"/></li>
        <li><img src="images/5.jpg"/></li>
    </ul>
</div>
</body>
</html>

效果顯示

5.開關燈案例

代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>開關燈</title>
</head>
<body>
	<style type="text/css">
	.cls{
		background-color: black;
	}
</style>
	<script type="text/javascript" src="jquery-1.12.2.js"></script>
	<input id="btn" type="button" value="開關燈" />
	<script type="text/javascript">
		$(function(){
			$('#btn').click(function(){
				//判斷當前是否是應用類樣式
				if ($('body').hasClass('cls')) {
					//有應用該樣式
					$('body').removeClass('cls');
				}else{
					$('body').addClass('cls');

				}
			})
		})

	</script>
</body>
</html>

簡便方法寫

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>開關燈</title>
</head>
<body>
	<style type="text/css">
	.cls{
		background-color: black;
	}
</style>
	<script type="text/javascript" src="jquery-1.12.2.js"></script>
	<input id="btn" type="button" value="開關燈" />
	<script type="text/javascript">
	
		//換一種方法:toggleClass()——切換樣式
		$(function(){
			$('#btn').click(function(){
				$('body').toggleClass('cls');
			})
		})
	</script>
</body>
</html>

實現效果

6.產品切換案例

代碼如下

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        ul {
            list-style: none;
        }
        .wrapper {
            width: 1000px;
            height: 475px;
            margin: 0 auto;
            margin-top: 100px;
        }

        .tab {
            border: 1px solid #ddd;
            border-bottom: 0;
            height: 36px;
            width: 320px;
        }

        .tab li {
            position: relative;
            float: left;
            width: 80px;
            height: 34px;
            line-height: 34px;
            text-align: center;
            cursor: pointer;
            border-top: 4px solid #fff;
        }

        .tab span {
            position: absolute;
            right: 0;
            top: 10px;
            background: #ddd;
            width: 1px;
            height: 14px;
            overflow: hidden;
        }

        .products {
            width: 1002px;
            border: 1px solid #ddd;
            height: 476px;
        }

        .products .main {
            float: left;
            display: none;
        }

        .products .main.selected {
            display: block;
        }

        .tab li.active {
            border-color: red;
            border-bottom: 0;
        }

    </style>
    <script src="jquery-1.12.2.js"></script>
    <script>
        $(function () {
            //獲取ul中的所有的li,調用鼠標進入的事件
            $('.tab>li').mouseover(function(){
                //移除當前的li的所有兄弟元素li的類樣式
               $(this).siblings('li').removeClass('active');
                //讓當前li添加類樣式
                $(this).addClass('active');
                //獲取當前的li的索引
                var index = $(this).index();
                //獲取div中對應的索引的這個div,讓這個div的所有的兄弟元素div全部移除selected類樣式,讓當前對應的div(索引對應)應用selected類樣式
                $('.products>div:eq('+index+')').siblings('div').removeClass('selected');
                //當前對應的div添加類樣式
                $('.products>div:eq('+index+')').addClass('selected')
            });
        });
    </script>
</head>
<body>
<div class="wrapper">
    <ul class="tab">
        <li class="tab-item active">國際大牌<span>◆</span></li>
        <li class="tab-item">國妝名牌<span>◆</span></li>
        <li class="tab-item">清潔用品<span>◆</span></li>
        <li class="tab-item">男士精品</li>
    </ul>
    <div class="products">
        <div class="main selected">
            <a href="###"><img src="imgs/guojidapai.jpg" alt=""/></a>
        </div>
        <div class="main">
            <a href="###"><img src="imgs/guozhuangmingpin.jpg" alt=""/></a>
        </div>
        <div class="main">
            <a href="###"><img src="imgs/qingjieyongpin.jpg" alt=""/></a>
        </div>
        <div class="main">
            <a href="###"><img src="imgs/nanshijingpin.jpg" alt=""/></a>
        </div>
    </div>
</div>

</body>
</html>

實現效果

7.鏈式編程案例1

獲取列表中的每個li,當鼠標進入之後,當前的li有高亮顯示,點擊得時候可以讓當前被點擊的li字體變大，字體顏色改變，字體也改變

代碼如下：

  <!DOCTYPE html>
  <html lang="en">
  <head>
  	<meta charset="UTF-8">
  	<title>鏈式編程</title>
  </head>
  <body>
  	<script type="text/javascript" src="jquery-1.12.2.js"></script>
  	<ul id="uu">
  		<li>11</li>
  		<li>22</li>
  		<li>33</li>
  		<li>44</li>
  		<li>55</li>
  		<li>66</li>

  	</ul>
  	<script type="text/javascript">
  		//獲取列表中的每個li,當鼠標進入之後,當前的li有高亮顯示,點擊得時候可以讓當前被點擊的li字體變大 字體顏色改變 字體也改變
  		$(function(){
  			$('#uu>li').mouseover(function(){
  				//$(this).css{("font-size",'20px'),('font-fanily',''),('color','red')};
  				$(this).css('backgroundColor','red').siblings('li').css('backgroundColor','');
  			});
  			$('#uu>li').click(function(){
  				$(this).css('fontSize','50px').css('color','green');
  			});
  		});
  	</script>
  </body>
  </html>

實現效果

8.鏈式編程案例2

實現效果
點擊按鈕,改變按鈕的value值,鼠標進入按鈕中,按鈕的寬高改變
鼠標離開的時候,按鈕背景的顏色綠色
- 代碼如下

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>鏈式編程2</title>
</head>
<body>
	<script type="text/javascript" src="jquery-1.12.2.js"></script>
	<input type="button" value="顯示效果" id="btn">
	<script type="text/javascript">

		//實現效果
		//點擊按鈕,改變按鈕的value值,鼠標進入按鈕中,按鈕的寬 高改變
		//鼠標離開的時候,按鈕背景的顏色綠色
		$(function(){
			$('#btn').click(function(){
				$(this).val('改變了');

				});
			$('#btn').mouseover(function(){
				$(this).css({'width':'150px','height':'50px'});
			});

			$('#btn').mouseout(function(){
				$(this).css('backgroundColor','green');
			});
		});
	</script>
</body>
</html>

實現效果

9.獲取兄弟元素案例

實現功能：
鼠標經過的時候,背景顏色爲紅色
點擊的時候,當前元素之前的所有元素均爲黃色,後面的所有元素爲綠色

代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        ul {
            list-style-type: none;
            width: 200px;
            position: absolute;
            left: 500px;
        }

        ul li {
            margin-top: 10px;
            cursor: pointer;
            text-align: center;
            font-size: 20px;
        }
        .red{
        	background-color: red;
        }
        .yellow{
        	background-color: yellow;
        }
        .green{
        	background-color: green;
        }
    </style>
    <script src="jquery-1.12.2.js"></script>
    <script>
    	//鼠標經過的時候,背景顏色爲紅色
    	//點擊的時候,當前元素之前的所有元素均爲黃色,後面的所有元素爲綠色
    	

        //獲取ul中所有的li,有鼠標進入事件,鼠標離開事件,點擊事件
        	$(function(){
            //獲取ul->li
        		$('ul>li').mouseover(function(){
        			$(this).addClass('red');
        		}).mouseout(function(){
        			$(this).removeClass('red');
        		}).click(function(){
        			$(this).prevAll('li').addClass('yellow');
        			$(this).nextAll('li').addClass('green');
        		});

      




                //當前元素前面的所有兄弟元素背景顏色爲黃色
                //$(this).prevAll().css("backgroundColor","yellow");
                //當前元素後面的所有兄弟元素背景顏色爲藍色
                //$(this).nextAll().css("backgroundColor","blue");

                //鏈式編程代碼
                //斷鏈:對象調用方法,返回的不是當前的對象,再調用方法,調用不了,
                //解決斷鏈--->恢復到斷鏈之前的一個效果--修復斷鏈
                //.end()方法恢復到斷鏈之前的效果
        	});
    </script>
</head>
<body>
<ul>
    <li>青島啤酒（TsingTao）</li>
    <li>瓦倫丁（Wurenbacher）</li>
    <li>雪花（SNOW）</li>
    <li>奧丁格教士（Franziskaner）</li>
    <li>科羅娜喜力柏龍（Paulaner）</li>
    <li>嘉士伯Kaiserdom</li>
    <li>羅斯福（Rochefort）</li>
    <li>粉象（Delirium）</li>
    <li>愛士堡（Eichbaum）</li>
    <li>哈爾濱牌藍帶</li>
</ul>

</body>
</html>

實現效果

10.動畫案例

點擊按鈕，然後圖中圖片每一秒消失一張，全部隱藏後，再以一秒的頻率出現

代碼如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 400px;
        }
        img{
            width:90px ;
            height:90px;
            vertical-align: top;
        }

    </style>
    <script src="jquery-1.12.2.js"></script>

    <script>
    $(function(){
        $('#btn1').click(function(){
            //獲取最後一張圖片然後隱藏
            $('div>img').last('img').hide(1000,function(){
                //arguments.callee相當於遞歸(直接調用當前方法)
                $(this).prev().hide(800,arguments.callee);
            });
        });
        $('#btn2').click(function(){
            //獲取最後一張圖片然後隱藏
            $('div>img').first('img').show(1000,function(){
                //arguments.callee相當於遞歸(直接調用當前方法)
                $(this).next().show(800,arguments.callee);
            });
        });
    });
       

    </script>
    
</head>
<body>
<input type="button" value="隱藏動畫" id="btn1"/>
<input type="button" value="顯示動畫" id="btn2"/>
<div>
    <img src="images/1.jpg"/>
    <img src="images/2.jpg"/>
    <img src="images/3.jpg"/>
    <img src="images/4.jpg"/>
</div>
</body>
</html>

11.全選和反選案例

代碼如下

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .wrap {
            width: 300px;
            margin: 100px auto 0;
        }

        table {
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid #c0c0c0;
        }

        th,
        td {
            border: 1px solid #d0d0d0;
            color: #404060;
            padding: 10px;
        }

        th {
            background-color: #09c;
            font: bold 16px "微軟雅黑";
            color: #fff;
        }

        td {
            font: 14px "微軟雅黑";
        }

        tbody tr {
            background-color: #f0f0f0;
        }

        tbody tr:hover {
            cursor: pointer;
            background-color: #fafafa;
        }
    </style>
    <script src="jquery-1.12.2.js"></script>
    <script>
        //        $(function () {
        //            //爲全選的複選框添加點擊的方法
        //            $("#j_cbAll").click(function () {
        //                //當前的複選框選中
        //                //結果:true或者false
        //                var checked=$("#j_cbAll").prop("checked");
        //                $("#j_tb").find(":checkbox").prop("checked",checked);
        //            });
        //            //爲tbody中所有的checkbox添加點擊的方法
        //            $("#j_tb").find(":checkbox").click(function () {
        //                //獲取所有的checkbox的個數
        //                var checkboxLength=$("#j_tb").find(":checkbox").length;
        //                //獲取所有選中的checkbox的個數
        //                var checkedLength=$("#j_tb").find(":checked").length;
        //                //判斷個數是否相等
        //                if(checkboxLength==checkedLength){
        //                    $("#j_cbAll").prop("checked",true);
        //                }else{
        //                    $("#j_cbAll").prop("checked",false);
        //                }
        //            });
        //
        //        });
    </script>
    <script>
        $(function () {
            //全選的複選框註冊點擊的事件
            $('#j_cbAll').click(function(){

            
                //獲取該複選框的選中狀態,爲下面所有的複選框的選中狀態設置
                var checked = $(this).prop('checked') ;
                //獲取所有的複選框
           		$('#j_tb').find(':checkbox').prop('checked',checked);
           		});
            //獲取所有的複選框
            $('#j_tb').click(function(){
            //獲取所有選中的複選框的個數
            	var length1 = $(this).find(':checkbox').length;
            	var length2 = $(this).find(':checked').length;
            	if (length1 == length2) {
            		$('#j_cbAll').prop('checked',true);
            	}else{
            		$('#j_cbAll').prop('checked',false);

            	}
            })
              
             
             
                //對比個數是否相同,如果相同則全選,否則反選
            
        });  
    </script>
</head>

<body>
<div class="wrap">
    <table>
        <thead>
        <tr>
            <th>
                <input type="checkbox" id="j_cbAll" />
            </th>
            <th>課程名稱</th>
            <th>所屬學院</th>
        </tr>
        </thead>
        <tbody id="j_tb">
        <tr>
            <td>
                <input type="checkbox" />
            </td>
            <td>JavaScript</td>
            <td>前端與移動開發學院</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" />
            </td>
            <td>css</td>
            <td>前端與移動開發學院</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" />
            </td>
            <td>html</td>
            <td>前端與移動開發學院</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" />
            </td>
            <td>jQuery</td>
            <td>前端與移動開發學院</td>
        </tr>
        <!--<tr>
            <td><input type="checkbox"/></td>
            <td>HTML5</td>
            <td>前端與移動開發學院</td>
        </tr>
        <tr>
            <td><input type="checkbox"/></td>
            <td>CSS3</td>
            <td>前端與移動開發學院</td>
        </tr>-->
        </tbody>
    </table>
</div>
</body>

</html>

12.固定導航欄案例

代碼如下

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>防騰訊固定導航欄</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        .main {
            width: 1000px;
            margin: 0 auto;
        }
        /*.top {
            height: 171px;
        }
        .nav {
            height: 86px;
        }*/
    </style>
    <script src="jquery-1.12.2.js"></script>
    <script>
  		$(function(){
  			//滾動條事件是在瀏覽器中,因此頂級對象爲window
  			$(window).scroll(function(){
  				//判斷向上捲曲出去的距離是否大於或等於應用類樣式top的div高度
  				if ($('.top').height() <= $(document).scrollTop()) {
  					$('.nav').css('position','fixed').css('top',0);
  					$('.main').css('marginTop',$('.nav').height());
  				}else{
  					$('.nav').css('position','static');//static表示還原爲原來未脫標時的狀態
  					$('.main').css('marginTop',0);
  				}
  			})
  		})
    </script>
</head>

<body>
<div class="top">
    <img src="images/top.png" />
</div>
<div class="nav">
    <img src="images/nav.png" />
</div>
<div class="main">
    <img src="images/main.png" />
</div>
</body>

</html>

13.按鍵改變背景顏色

按下不同鍵盤上的按鍵, div對應不同的顏色

代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>按鍵改變顏色</title>
</head>
<body>
	<style type="text/css">
	div{
		widows: 200px;
		height: 100px;
		background-color: pink;
	}
</style>
	<div id="dv"></div>
	<script type="text/javascript" src="jquery-1.12.2.js"></script>
	<script type="text/javascript">
		$(function(){

			$(document).keydown(function (e){
				var code = e.keyCode;
				switch(code){
					case 65:$('#dv').css('backgroundColor','red');
					break;
					case 66:$('#dv').css('backgroundColor','orange');
					break;
					case 67:$('#dv').css('backgroundColor','yellow');
					break;
					case 68:$('#dv').css('backgroundColor','green');
					break;
					case 69:$('#dv').css('backgroundColor','blue');
					break;
					case 70:$('#dv').css('backgroundColor','pink');
					break;
					break;
					case 70:$('#dv').css('backgroundColor','purple');
					break;
				}
			})
		})
	</script>

	
</body>
</html>

依次按下a b c d e f 之後

14.事件冒泡

什麼是事件冒泡：
在元素中有元素，這些元素具有相同的事件，一旦最裏面的事件被觸發，外面的元素自然也被觸發
例如：元素A中含有元素B，A和B都有點擊事件，當B的點擊事件被觸發之後，A的點擊事件也隨之被觸發

如下所示

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>取消事件冒泡</title>
	<style type="text/css">
	#dv1{
		width: 300px;
		height: 300px;
		background-color: red;
	}
		#dv2{
		width: 250px;
		height: 250px;
		background-color: green;
	}

	#dv3{
		width: 200px;
		height: 200px;
		background-color: blue;
	}

</style>
</head>
<body>
	<div id="dv1">
		<div id="dv2">
			<div id="dv3"></div>
		</div>
	</div>
	<script type="text/javascript" src="jquery-1.12.2.js"></script>
	<script type="text/javascript">
		$('#dv1').click(function(){
			alert('d1被點擊');
		})
		$('#dv2').click(function(){
			alert('d2被點擊');
		})
		$('#dv3').click(function(){
			alert('d3被點擊');
		})
	</script>
</body>
</html>

如何取消事件冒泡
在每個事件最後加上 return false即可
或者e.stoPropagation();

return false——還可以取消瀏覽器的默認事件

15.五角星評分案例

這個案例雖然代碼只有幾行,但是邏輯超級好
效果如淘寶評價

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>五角星評分案例</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .comment {
            font-size: 40px;
            color: yellow;
        }

        .comment li {
            float: left;

        }

        ul {
            list-style: none;
        }
    </style>
    <script src="jquery-1.12.2.js"></script>

    <script>
//        $(function () {
//            //獲取所有的li綁定鼠標進入和鼠標離開和點擊事件
//            $(".comment>li").mouseover(function () {
//                $(this).text("★").prevAll("li").text("★").end().nextAll("li").text("☆");
//            }).mouseout(function () {
//                $(this).text("☆").prevAll("li").text("☆");
//                //獲取屬性index爲10的這個li和這個li前面所有的li
//                $(".comment>li[index=10]").text("★").prevAll("li").text("★");
//
//            }).click(function () {
//                $(this).attr("index","10").siblings("li").removeAttr("index");
//            });
//        });
    //</script>
    <script>
    $(function(){
        $('.comment>li').mouseover(function(){
            $(this).text('★');
            $(this).prevAll('li').text('★');
        });
        $('.comment>li').mouseout(function(){
            //尋找li
            $('.comment').find('li').text('☆');
        //    $(this).prevAll('li').text('☆');
        //    如果裏面有index元素
            $('.comment>li[index=1]').text('★').prevAll("li").text("★");
        });
        $('.comment>li').click(function(){
            $(this).attr('index','1').siblings('li').removeAttr('index');
        });
    });
      
    
    </script>
    }
</head>

<body>
<ul class="comment">
    <li>☆</li>
    <li>☆</li>
    <li>☆</li>
    <li>☆</li>
    <li>☆</li>
</ul>
</body>

</html>

實現效果

JavaScript小案例程序保存（完整代碼+效果展示）