2021.8.11今日小結
阿新 • • 發佈：2021-08-11
今天使用JavaScript做了輪播圖，二級選單，定時器圖片切換動畫。
今天也算是把幾個基本的效果瞭解了，JavaScript的基本的語法，函式，物件也有了一定的瞭解了。後續還需要去練習來加深印象。
下面是輪播圖的java程式碼，其中引入了自定義的函式。
<script type="text/javascript"> window.onload = function(){ let imgList = document.getElementById("imgList"); let imgArr = document.getElementsByTagName("img"); // 設定ul的整體寬度 imgList.style.width = 820*imgArr.length+"px"; // 設定導航按鈕居中 let navDiv = document.getElementById("navDiv"); let outer = document.getElementById("outer"); navDiv.style.left = (outer.offsetWidth - navDiv.offsetWidth)/2 + "px"; // 預設顯示圖片的索引let index =0; // 獲取所有a let allA = document.getElementsByTagName("a"); // 設定預設選中效果 allA[index].style.backgroundColor = "black"; // 點選超連結切換圖片 for(let i=0;i<allA.length;i++){ // 為每個超連結都新增一個num屬性 allA[i].num = i; allA[i].onclick= function(){ //關閉自動切換的定時器 clearInterval(timer); // 獲取點選超連結的索引，並設定為index index = this.num; // 切換圖片 //imgList.style.left = -820*index+"px"; setA(); // 呼叫自定義的函式切換動畫 move(imgList, "left" , -820*index , 20 , function(){ // 重新開啟自動切換圖片 autoChange(); }); }; } // 自動切換圖片 autoChange(); // 建立一個方法來設定選中的a function setA(){ // 判定當前索引是否是最後一張圖片 if(index >= imgArr.length -1){ index =0; // 通過css將最後一張圖片換成第一張 imgList.style.left = 0; } for(let i=0;i<allA.length;i++){ allA[i].style.backgroundColor = ""; } allA[index].style.backgroundColor = "black"; }; // 定義一個自動切換的標識 var timer; // 建立一個函式來開啟自動切換圖片 function autoChange(){ // 開啟一個定時器 timer = setInterval(function(){ // 索引自增 index++; // 判定index的值 index %= imgArr.length; move(imgList, "left" , -820*index , 20 , function(){ setA(); }); },3000); }; }; </script>
下面是自定義的函式
/* * 可以用來獲取任意的樣式 */ function getStyle(obj, name) { return window.getComputedStyle && getComputedStyle(obj, null)[name] || obj.currentStyle[name]; } /* * 提取出一個函式，可以處理一些簡單的動畫效果 * 引數： * obj: 要執行動畫的元素 * attr: 執行動畫是要修改的屬性 * target: 執行動畫的目標位置 * speed: 執行動畫的速度 * callback: 回撥函式，這個函式將會在動畫執行完畢之後被呼叫 */ function move(obj, attr, target, speed, callback) { //開啟定時器前，關閉上一個 /* * 這裡我們的timer是一個全域性變數，所有的動畫執行時，都會共享同一個timer * 這樣將會導致我們執行box2的動畫時，會使box1的動畫也立即終止 * 所以我們定時器的標識不能作為全域性變數儲存，而應該儲存到要執行動畫的物件上 */ clearInterval(obj.timer); //獲取當前值，動畫執行的起始位置 var current = parseInt(getStyle(obj, attr)); //起始位置 大於 目標位置 speed為負 //起始位置 小於 目標位置 speed為正 if(current > target) { //此時speed應該是負數 speed = -speed; } //開啟一個定時器，用來移動box1 obj.timer = setInterval(function() { //獲取box1的left屬性值 var oldValue = parseInt(getStyle(obj, attr)); //修改值 var newValue = oldValue + speed; //如果newValue大於800 //如果向右移動，則newValue > target speed為正 //如果向左移動，則newValue < target speed為負 if(speed > 0 && newValue > target || speed < 0 && newValue < target) { newValue = target } //將其賦值給box1 obj.style[attr] = newValue + "px"; //當執行800px時，停止執行動畫 if(newValue == target) { clearInterval(obj.timer); //動畫執行完畢，呼叫回撥函式 callback && callback(); } }, 10); }
二級選單是利用類的操作來執行的
下面是自定義的函式
/* * 定義一個函式，專門用來為一個元素新增class屬性值 * 引數 * obj 要新增class屬性的元素 * cn 要新增的class的值 * */ function addClass(obj, cn) { //判斷obj中是否含有cn這個class if(!hasClass(obj, cn)) { obj.className += " " + cn; } } /* * 判斷一個物件中是否含有指定的class屬性 * 引數： * obj：要檢查的物件 * cn：要檢查class值 * 如果物件中具有該class則返回true，否則返回false */ function hasClass(obj, cn) { //檢查obj中是否與b2這個class //var reg = /\bb2\b/; var reg = new RegExp("\\b" + cn + "\\b"); return reg.test(obj.className); } /* * 刪除一個元素中的class */ function removeClass(obj, cn) { //建立一個正則表示式 var reg = new RegExp("\\b" + cn + "\\b"); //將class屬性中符合正則表示式的內容，替換為空串 obj.className = obj.className.replace(reg, ""); } /* * 切換一個元素的class屬性值 * 如果有，則刪除 * 如果沒有，則新增 */ function toggleClass(obj, cn) { //判斷obj中是否有cn if(hasClass(obj, cn)) { //如果有，則刪除 removeClass(obj, cn); } else { //如果沒有，則新增 addClass(obj, cn); } }
下面是二級選單的javascript程式碼
<script type="text/javascript"> window.onload = function(){ //獲取所有的class為menuSpan的元素 var menuSpan = document.querySelectorAll(".menuSpan"); //定義一個變數，來儲存當前開啟的選單 var openDiv = menuSpan[0].parentNode; //為span繫結單擊響應函式 for(var i=0 ; i<menuSpan.length ; i++){ menuSpan[i].onclick = function(){ //this代表我當前點選的span //獲取當前span的父元素 var parentDiv = this.parentNode; //切換選單的顯示狀態 toggleMenu(parentDiv); //判斷openDiv和parentDiv是否相同 if(openDiv != parentDiv && !hasClass(openDiv , "collapsed")){ //切換選單的顯示狀態 toggleMenu(openDiv); } //修改openDiv為當前開啟的選單 openDiv = parentDiv; }; } /* * 用來切換選單摺疊和顯示狀態 */ function toggleMenu(obj){ //在切換類之前，獲取元素的高度 var begin = obj.offsetHeight; //切換parentDiv的顯示 toggleClass(obj , "collapsed"); //在切換類之後獲取一個高度 var end = obj.offsetHeight; //動畫效果就是將高度從begin向end過渡 //將元素的高度重置為begin obj.style.height = begin + "px"; //執行動畫，從bengin向end過渡 move(obj,"height",end,10,function(){ //動畫執行完畢，內聯樣式已經沒有存在的意義了，刪除之 obj.style.height = ""; }); } }; </script>