JavaScript-交互效果
返回頂部
效果：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> h1{height: 200px;} .btns{ position: fixed; right: 100px; bottom: 50px; width: 60px; text-align: center; cursor: pointer; display: none; } #closebtn{ border: #c2c2c2 solid 1px; margin: 0; font: 15px/2em "宋體",Serif; } #topbtn{ background: #dddddd; height: 60px; font: 24px/60px Arial; } </style> </head> <body> <h1>多復制幾行，需要滾動條！！！</h1> <h1>多復制幾行，需要滾動條！！！</h1> <h1>多復制幾行，需要滾動條！！！</h1> <h1>多復制幾行，需要滾動條！！！</h1> <h1>多復制幾行，需要滾動條！！！</h1> <h1>多復制幾行，需要滾動條！！！</h1> <h1>多復制幾行，需要滾動條！！！</h1> <h1>多復制幾行，需要滾動條！！！</h1> <h1>多復制幾行，需要滾動條！！！</h1> <h1>多復制幾行，需要滾動條！！！</h1> <h1>多復制幾行，需要滾動條！！！</h1> <h1>多復制幾行，需要滾動條！！！</h1> <h1>多復制幾行，需要滾動條！！！</h1> <h1>多復制幾行，需要滾動條！！！</h1> <h1>多復制幾行，需要滾動條！！！</h1> <h1>多復制幾行，需要滾動條！！！</h1> <h1>多復制幾行，需要滾動條！！！</h1> <h1>多復制幾行，需要滾動條！！！</h1> <h1>多復制幾行，需要滾動條！！！</h1> <h1>多復制幾行，需要滾動條！！！</h1> <h1>多復制幾行，需要滾動條！！！</h1> <h1>多復制幾行，需要滾動條！！！</h1> <div class="btns"> <p id="closebtn">X關閉</p> <div id="topbtn">Top</div> </div> <script> //點擊top回到頂部 topbtn.onclick=function () { //利用定時器制作動畫效果 var timer=setInterval(function () { var y=window.scrollY- 50; //當滾動到頂部就清除定時器 if (y<=0){ clearInterval(timer); } window.scroll(0,y); },50); } //點擊關閉隱藏 closebtn.onclick=function () { this.parentNode.style.display="none"; } //當滾動條滑動到一定程度時顯示top按鈕 window.onscroll=function () { if (scrollY>=200){ topbtn.parentNode.style.display="block"; }else { topbtn.parentNode.style.display="none"; } } </script> </body> </html>
正則表達式
概念
正則表達式：是一種字符串中查找、替換、拆分、數據匹配的模式。
正則表達式的定義
1.字面量方式（常用）：
var reg=/正則表達式規則/修飾符;
2.實例化方式:
var reg=new RegExp("正則表達式","修飾符");
3.修飾符：
- i 不區分大小寫
- m 多行匹配，如果在一行找不到就繼續找下一行直到結束
- g 全局匹配，找到一個繼續找下一個
4.正則表達式的使用
1）正則表達式對象方法：
正則表達式.test(字符串) //測試字符串中是否能找到正則表達式匹配結果，返回真或假
正則表達式.exec(字符串) // 匹配出字符串和正則表達式的子字符串
2）字符串對象方法：
字符串.match(正則表達式) //匹配字符串
字符串.replace(正則表達式,""**) // 替換匹配到的字符
字符串.split(正則表達式) //將正則表達式匹配到的字符作為拆分間隔符
案例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> /** * 正則表達式：是一種字符串中查找、替換、拆分、數據匹配的模式 * 正則表達式的定義： * 1.字面量方式（常用）： * var reg=/正則表達式規則/修飾符; * * 2.實例化方式: * var reg=new RegExp("正則表達式","修飾符"); * * 3.修飾符： * i 不區分大小寫 * m 多行匹配，如果在一行找不到就繼續找下一行直到結束 * g 全局匹配，找到一個繼續找下一個 * * 4.正則表達式的使用： * 1）正則表達式對象方法： * 正則表達式.test(字符串) //測試字符串中是否能找到正則表達式匹配結果，返回真或假 * 正則表達式.exec(字符串) // 匹配出字符串和正則表達式的子字符串 * 2）字符串對象方法： * 字符串.match(正則表達式) //匹配字符串 * 字符串.replace(正則表達式,""**) // 替換匹配到的字符 * 字符串.split(正則表達式) //將正則表達式匹配到的字符作為拆分間隔符 */ var str="姓名：張三，年齡：90，電話：13900000000，愛好：打籃球。姓名：李四，電話：15912341234"; //字面量方式 var reg=/[0-9]{11}/g; console.log(str.match(reg)); //實例化方式 var reg1=new RegExp("[0-9]{11}","g"); //對象方法 console.log(reg.test(str));//test console.log(reg.exec(str));//exec console.log(str.match(reg1));//匹配字符串 console.log(str.replace(reg,"***"));//字符串替換 console.log(str.split(reg));//以XX作為間隔拆分 </script> </body> </html>
正則表達式的編寫
正則表達式的編寫：三段式：字符+數量+匹配模式
1.匹配字符
- [0-9] 匹配到括號中出現的所有字符(0123456789)
- [a-z] 小寫字母
- [A-Z] 大寫字母
- [A-z] 不區分大小寫
- \d 匹配數字，相當於[0-9]
- \D 匹配非數字，除數字以外的所有字符
- \w 匹配單詞字符，相當於[0-9A-z]
- \W 匹配非單詞字符
- \t 匹配table鍵（縮進符）
- \r 匹配回車符
- \n 匹配換行符
- . 匹配除換行以外的所有字符
- ^ 字符串開始
- $ 字符串結束
2.數量
- * 前面匹配的字符出現0次或多次
- + 前面匹配的字符出現1次或多次
- {n} 字符出現n次
- {n,m} n<=數量<=m
- {n,} n次以上
3.匹配模式
- 貪婪模式：默認
- 飢餓模式：盡可能匹配少的
案例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> /* 正則表達式的編寫： 三段式：字符+數量+匹配模式 1.匹配字符 [0-9] 匹配到括號中出現的所有字符(0123456789) [a-z] 小寫字母 [A-Z] 大寫字母 [A-z] 不區分大小寫 \d 匹配數字，相當於[0-9] \D 匹配非數字，除數字以外的所有字符 \w 匹配單詞字符，相當於[0-9A-z] \W 匹配非單詞字符 \t 匹配table鍵（縮進符） \r 匹配回車符 \n 匹配換行符 . 匹配除換行以外的所有字符 ^ 字符串開始 $ 字符串結束 2.數量 * 前面匹配的字符出現0次或多次 + 前面匹配的字符出現1次或多次 {n} 字符出現n次 {n,m} n<=數量<=m {n,} n次以上 3.匹配模式 貪婪模式：默認 飢餓模式：盡可能匹配少的 */ var reg=/\D+/g; var str="張三：Hello World ！！！ 123"; console.log(str.match(reg)); </script> </body> </html>
注冊表單驗證
效果：
代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> span{ font-size: 12px; margin-left: 10px; } .red{color: #f00;} .green{color: #0a0;} </style> </head> <body> <form action="login.php" method="post" id="myform"> <p>賬號：<input type="text" name="username" id="username" placeholder="請輸入用戶名" />
<span id="usernameinfo" ></span></p> <p>手機：<input type="number" name="phone" id="phone" placeholder="請輸入手機號"/></p> <p>密碼：<input type="password" name="pad" id="pad" placeholder="請輸入密碼"/></p> <p>驗證碼：<input type="text" name="captcha" id="captcha" placeholder="請輸入驗證碼"/></p> <P><button type="submit">注冊</button></P> </form> <script> /** * 失去焦點時做客戶端驗證，驗證用戶名，密碼，手機號，驗證碼是否符合格式要求 * 用戶名;2字以上，12字以下 * 手機號11位數字,1開頭 * 密碼：6個字以上，16個字以下，由字母數字下划線組成 * 驗證碼6位 */ //定義一個全局狀態對象，用於保存驗證狀態 var checkstate={username:0,phone:0,pad:0,captcha:0}; //用戶名驗證 username.onblur=function () { var reg=/^\w{2,12}$/;//正則表達式 if (reg.test(this.value)){ this.style.border="2px solid #0a0"; usernameinfo.innerHTML="恭喜你，用戶名可用！" usernameinfo.className="green"; checkstate.username=1;//通過用戶名驗證時，將狀態修改為1，表示已通過 }else{ this.style.border="2px solid #f00"; usernameinfo.innerHTML="用戶名不合法！" usernameinfo.className="red"; checkstate.username=0;//未通過驗證，將狀態修改為0 } } //手機號驗證 phone.onblur=function () { var reg=/^1[356789]\d{9}$/; if (reg.test(this.value)){ this.style.border="2px solid #0a0"; checkstate.phone=1; }else{ this.style.border="2px solid #f00"; checkstate.phone=0; } } //密碼驗證 pad.onblur=function () { var reg=/^[A-z0-9_]{6,16}$/; if (reg.test(this.value)){ this.style.border="2px solid #0a0"; checkstate.pad=1; }else{ this.style.border="2px solid #f00"; checkstate.pad=0; } } //驗證碼 captcha.onblur=function () { var reg=/^\d{6}$/; if (reg.test(this.value)){ this.style.border="2px solid #0a0"; checkstate.captcha=1; }else{ this.style.border="2px solid #f00"; checkstate.captcha=0; } } //提交按鈕，再次驗證所有表單信息是否合法 myform.onsubmit=function () { //遍歷checkstate狀態信息 var flag=true; for (var i in checkstate){ if (checkstate[i]===0){ var obj = document.getElementById(i); obj.style.border="2px solid #f00"; // alert("不能提交，有輸入未通過驗證！"); flag=false; } } return flag; } </script> </body> </html>
Tab滑動菜單效果
效果：
代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .btns a{ background: #dddddd; padding: 4px 6px; border-radius: 6px; text-decoration: none; color: #333333; } .btns>a:hover,.btns a.on{ background: red; color: #ffffff; } .box{padding-top: 10px} .box>div{ width: 400px; height: 200px; display: none; } #box1{background: red; display: block;} #box2{background: #00A7EA;} #box3{background: #00aa00;} </style> </head> <body> <div class="btns"> <a href="#" class="on">企業文化</a> <a href="#">團隊介紹</a> <a href="#">大事記</a> </div> <div class="box"> <div id="box1">content</div> <div id="box2">content</div> <div id="box3">content</div> </div> <script> //選項卡效果：移動到按鈕上顯示對應的盒子，切換按鈕樣式 //1.移動到按鈕上 var btns = document.querySelectorAll(".btns a"); var box = document.querySelectorAll(".box div"); for (var i=0;i<btns.length;i++){ //批量綁定事件 btns[i].onmouseover=function () { //清除所有樣式 for (var j=0;j<btns.length;j++){ btns[j].className=""; } //給自己加樣式 this.className="on"; //隱藏所有盒子 for (var k=0;k<box.length;k++){ box[k].style.display="none"; } //顯示當前按鈕對應的盒子 box[this.id].style.display="block"; } //綁定事件后，在標簽上加屬性，保存下標 btns[i].id=i; } </script> </body> </html>
圖片輪播動畫的制作BannerFocus
效果圖:
代碼1（簡單）:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .banner{ width: 1000px; height: 400px; margin: 0 auto; position: relative; } #imgs>img{ width: 1000px; height:400px; display: none; } #imgs>img:first-child{ display: block; } #btns{ position: absolute; top: 350px; width: 100%; text-align: center; } #btns>a{ display: inline-block;/*行內塊*/ background: #c2c2c2; border-radius: 100%; width: 16px; height:16px; text-indent: -9999px;/*字符縮進，把文字移走隱藏*/ } #btns>a.on{background: red;} </style> </head> <body> <div class="banner"> <div id="imgs"> <img src="images/01.jpg" alt=""> <img src="images/02.jpg" alt=""> <img src="images/03.jpg" alt=""> <img src="images/04.jpg" alt=""> </div> <div id="btns"> <a href="#" class="on">0</a> <a href="#">1</a> <a href="#">2</a> <a href="#">3</a> </div> </div> <script> /* 輪播圖： 1.移動到某個按鈕時，顯示對應的圖 2.讓四個圖3秒定時滾動 */ var a = btns.children;//得到所有的元素 var img=imgs.children;//得到所有圖片 //批量綁定事件 for (var i=0;i<a.length;i++){ //為每一個按鈕綁定事件 a[i].onmouseover=function () { show(this.innerText); } } var i=1;//從1開始定時切換，刷新頁面時就是0 setInterval(function () { show(i%a.length);//通過整除取余讓四個圖不斷切換 i++; },1000); //函數封裝 function show(n) { //去除所有按鈕的樣式on for (var j=0;j<a.length;j++){ a[j].className=""; } //給當前鼠標移動到的位置添加樣式on a[n].className="on"; //隱藏所有圖 for (var k=0;k<img.length;k++){ img[k].style.display="none"; } //顯示當前按鈕對應的圖 img[n].style.display="block"; } </script> </body> </html>
代碼1（難）:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> ul { margin: 0; padding: 0; list-style: none; } .banner { width: 1000px; height: 400px; margin: 0 auto; overflow: hidden; position: relative; } #imgs > li { float: left; } #btns { position: absolute; top: 350px; width: 100%; text-align: center; } #btns > a { display: inline-block; background: #c2c2c2; width: 16px; height: 16px; border-radius: 100%; margin: 0 4px; text-indent: -9999px; } #btns > a.on { background: red; } </style> </head> <body> <div class="banner"> <ul id="imgs"> <li><img src="images/01.jpg" alt=""></li> <li><img src="images/02.jpg" alt=""></li> <li><img src="images/03.jpg" alt=""></li> <li><img src="images/04.jpg" alt=""></li> </ul> </div> <script> var img = imgs.children; //根據圖片的數量自動生成對應的按鈕 var html = "<div id='btns'>"; for (var i = 0; i < img.length; i++) { if (i == 0) { html += "<a href='#' class='on'>" + i + "</a>"; } else { html += "<a href='#'>" + i + "</a>"; } } html += "</div>"; document.querySelector(".banner").innerHTML += html; //把第一個圖片復制一份成為最后一張圖 imgs.innerHTML+=imgs.children[0].outerHTML;//把第一個圖添加到最后一個位置 imgs.style.width=imgs.children.length*1000+"px";//根據子元素的個數自動設置寬度 //獲取所有的按鈕 var btn = document.getElementById("btns").children; var timer1, timer2; //批量綁定事件 for (var i = 0; i < btn.length; i++) { btn[i].onmouseover = function () { show(this.index); clearInterval(timer2);//移動到按鈕上時，應該讓自動播放停下來 } //移開時讓其繼續播放 btn[i].onmouseout = function () { scrollIndex = this.index + 1; //移上去時將下標改成當前按鈕 autoplay();//函數調用 } btn[i].index = i;//為每一個按鈕設置一個索引，通過與圖片建立聯系 } //使用定時器實現自動播放 var scrollIndex = 1; function autoplay() { timer2 = setInterval(function () { show(scrollIndex % btn.length);//利用整除取余實現輪流播放 scrollIndex++; }, 2000); } autoplay();//函數調用 //函數封裝，實現滾動 function show(n) { clearInterval(timer1);// //清除所有樣式 for (var j = 0; j < btn.length; j++) { btn[j].className = ""; } btn[n].className = "on";//把當前的設置為on //根據索引計算出要向左移的像素值 // imgs.style.marginLeft=-(this.index*1000)+"px"; var i = 0; timer1 = setInterval(function () { if (i >= 1000) { clearInterval(timer1); } if (n>0){ var start=-(btn[n].index-1); }else { var start=-(btn.index-1); } imgs.style.marginLeft = (start * 1000 - i) + "px"; i += 50; }, 20); } </script> </body> </html>
作業
1. 完成上課演示的三個交互效果
2. 制作一個二級下拉菜單（移到頂級菜單時顯示子菜單）
3. 制作一個企業網站，練習HTML和CSS，要做界面交互效果
基礎版：只做回到頂部交互
挑戰版：完成所有交互效果，如：輪播圖、選項卡、回到頂部等