總結

1. 頂部搜尋框漸變JS
2. 秒殺商品倒計時JS
3. 輪播圖外掛的使用
4. 分類頁面的佈局

頂部搜尋的背景色漸變

1. 需求： 在滾動條滾動距離在輪播圖高度範圍內的時候實現頂部搜尋的背景色透明度漸變
   rgba(255,0,0,0)
   rgba(255,0,0,1)
   rgba的最後一個值透明度從0-1的變化
2. 思路： 計算當前的滾動條滾動到的距離的透明度的值
   1. 獲取當前滾動條的距離
   2. 獲取當前輪播圖的高度
   3. 計算透明度 = 距離/高度
   4. 計算好後把透明度值 設定背景色的rgba裡面把最後一個值改成計算的透明度

倒計時JS功能

1. 需求： 有一個未來的時間 還有當前的時間 使用未來的時間-當前的時間作為一個倒計時 把這個倒計時時間 設定到頁面中顯示 分別顯示時分秒 每隔一秒倒計時總時間要-- 頁面時時更新
2. 思路
   1. 獲取到未來的時間
   2. 獲取當前的時間
   3. 倒計時的總時間 = 使用未來時間-當前時間
   4. 定一個定時器(每隔1秒執行一次) 讓總時間每秒–
   5. 計算-- 完後的時間的 時 分 秒
   6. 把時分秒的十位和個位分別設定到每個span裡面

輪播圖JS效果 外掛的使用 ( swiper外掛)[https://www.swiper.com.cn

]

1. 下載swiper外掛
2. 引包 注意引入CSS和JS2個包
   1. 引入swiper.css
   2. 引入swiper.js
3. 寫一個輪播圖需要結構

Slide 1 Slide 2 Slide 3 注意一定要使用官網的類名因為有樣式的沒有類名就有樣式 4. 給輪播圖大容器設定樣式 限制輪播圖的寬高 .swiper-container { width: 600px; height: 300px; } 5. 新增一個JS程式碼去初始化輪播圖 傳入一些初始化的一些引數

swiper外掛的一些常見引數

1. 輪播圖的方向
   direction: ‘vertical’ 垂直
   direction: ‘horizontal’ 水平

2. 自動輪播圖
   autoplay:{
   delay: 3000,//輪播圖的延遲
   stopOnLastSlide: false,// 如果設定為true，當切換到最後一個slide時停止自動切換。（loop模式下無效）
   disableOnInteraction:true,//當用戶滑動的時候禁止自動輪播圖 不需要禁止就為false
   }

3. 是否開啟無縫輪播圖
   loop: true,//是否開啟無縫輪播圖 開啟無輪播圖 如果不開 刷回去倒退回去

4. 是否顯示小圓點
   pagination:{
   el: ‘.swiper-pagination’,//如果需要顯示小圓點就指定小圓點容器

   }

5. 是否要左右箭頭
   navigation: {
   nextEl: ‘.swiper-button-next’,
   prevEl: ‘.swiper-button-prev’,
   },//指定左右箭頭的容器

6. 是否要支援滾動條
   scrollbar: {
   el: ‘.swiper-scrollbar’,
   },//指定滾動條的容器

修改輪播圖的樣式

1. 如果需要修改圖片大小 直接選中你的圖片設定大小
2. 如果要修改小圓點的樣式

使用swiper完成jd主頁輪播圖效果

1. 引包 注意在我們的樣式前面引入swiper.css 在我們的js前面引入swiper.js
2. 寫結構

3. 設定樣式 slide { img { width: 100%; } /* 修改小圓點樣式 */ .swiper-pagination-bullet { background-color: transparent; opacity: 1; border: 1px solid #fff; width: 8px; height: 8px; box-sizing: border-box; } .swiper-pagination-bullet-active { background-color: #fff; } } 4. 初始化jd的輪播圖 var mySwiper = new Swiper('#slide .swiper-container', { direction: 'horizontal', // 垂直切換選項 autoplay: { delay: 1000, //輪播圖的延遲 stopOnLastSlide: false, // 如果設定為true，當切換到最後一個slide時停止自動切換。（loop模式下無效） disableOnInteraction: false //當用戶滑動的時候禁止自動輪播圖 不需要禁止就為false }, loop: true, // 是否開啟無縫輪播圖 開啟無輪播圖 如果不開 刷回去倒退回去 // 如果需要分頁器 pagination: { el: '.swiper-pagination', } });

京東分類頁面佈局

1. 京東分類頁面是全屏的 水平和垂直都沒有滾動條 （注意）
2. 要顯示更多內容 使用滑動來實現 （注意）
   左側選單有滑動
   右側商品列表也有滑動
   滑動都是垂直方向

實現分類頁面的全屏佈局

1. 給頭部 固定高度 位置固定定位在頂部
2. 給底部 固定高度 位置固定定位在底部
3. 給html和body設定高度100%
4. 給body設定padding-top 和 padding-bottom 讓main往中間擠
5. 給main設定height:100% 就和body的高度一致
6. 給main裡面的category-left 和 category-right 設定高度100%

使用swiper的滑動效果來實現分類左右側滑動功能

1. 使用swiper官方demo裡面的內容滾動
2. 使用方式
   1. 引包引入swiper.css 和 js
   2. 寫結構

• 內容
• 內容
• 內容
• 內容

3. 寫樣式 html, body { position: relative; height: 100%; } /.swiper-container滑動父容器 容器的高度和body一樣高 高度是固定的/ .swiper-container { width: 100%; height: 100%; } /滑動的子容器 他的的高度是自適應由內容撐開 預設之前支援輪播圖寫了100%的高度需要設定height:auto去覆蓋100%的高度/ .swiper-slide { height: auto; } 4. 一定要給html body設定高度100% 要給.swiper-container大容器設定高度100% 5. 設定子元素高度 auto 由內容撐開 保證子元素高度比父元素高 當子元素比父元素高的時候才有必要做滑動 因為swiper實現輪播圖設定了高度100%把他還原成auto 6. 初始化swiper var swiper = new Swiper('.swiper-container', { direction: 'vertical',//方向垂直 slidesPerView: 'auto',//支援多張圖 freeMode: true,//支援回彈 scrollbar: { el: '.swiper-scrollbar', }, mousewheel: true,//支援滑鼠滾輪 });

總結

移動端的JS

1. 使用HTML新的方式操作JS dom之類的操作
2. 新增事件addEventListener
3. 獲取元素querySelector querySelectorAll
4. 頂部搜尋背景色漸變
   1. 當頭部在輪播圖高度範圍內進行滾動的時候進行透明度漸變 0 - 1漸變
   2. 漸變值 使用滾動距離 / 輪播圖的高度
   3. 新增滾動條滾動事件獲取距離
   4. 獲取輪播圖高度
   5. 計算透明度值
   6. 把透明度值設定到頭部上
5. 倒計時效果
   1. 有一個總倒計時時間 分別顯示時分秒 每隔1秒 總時間-- 更新頁面
   2. 總時間 後臺獲取的（使用前端模擬了一下總時間）
      new Date(‘指定時間’) 獲取到一個指定的時間(未來時間)
      new Date(); 獲取當前時間
      總時間 = 未來時間 - 當前時間
      預設會隱式轉換 提前轉好使用getTime() 轉成具體的毫秒數 1970.1.1:0:00:00 - 當前的時間的毫秒數
   3. 計算時分秒
      1. 時 總時間 / 3600 1小時3600秒 3600 / 3600 == 1小時 7200 / 3600 = 2小時
      2. 分 總時間 % 3600 / 60 1分鐘60秒 有多少個60秒有多少分鐘 但是可能超過60分鐘超過1小時 把小時部分去掉 % 3600 去掉小時部分
      3. 秒 總時間 % 60 1分鐘 60秒 只要小於1分鐘都算秒數 40 % 60 == 40 130 % 60 = 10
   4. 分別把時分秒十位個位顯示到頁面
      1. 十位 總數 / 10 10/10 == 1 90 / 10 == 9 有幾個10 十位就是幾
      2. 個位 總數 % 10 除不盡10的部分就是個位 15 % 10 == 5
   5. 如果時間到了根據業務去處理
6. 輪播圖效果
   1. 輪播圖的原理 讓父元素進行水平(垂直)位移 新增過渡 慢慢移動 輪播圖前後都要看到多加2張圖片 第一張是最後一張 最後一張是第一張
   2. swiper輪播圖外掛的使用
      1. 引包 CSS JS
      2. 寫結構

     <div class="swiper-container">

3. 修改樣式 4. 初始化 呼叫Swiper建構函式建立例項 就是初始化 // 4. 呼叫JS的初始化函式初始化swiper var mySwiper = new Swiper('.swiper-container', { direction: 'horizontal', // 垂直切換選項 loop: true, // 迴圈模式選項 會自動在輪播圖所有圖片容器的最前面和最後面多放一張 第一張就是最後一張 最後一張就是第一張 //初始化自動輪播圖 引數也是一個物件 autoplay: { delay: 3000, //間隔時間 stopOnLastSlide: false, //在最後一張是否要停止 如果開啟loop模式無效 disableOnInteraction: false, // 是否要當(互動的時候)滑動的時候禁用自動輪播圖 }, // 如果需要分頁器 pagination: { el: '.swiper-pagination', }, // 如果需要前進後退按鈕 // navigation: { // nextEl: '.swiper-button-next', // prevEl: '.swiper-button-prev', // },

         // 如果需要滾動條
         // scrollbar: {
         //     el: '.swiper-scrollbar',
         // },
     })

3. 如果要修改箭頭樣式 小圓點 檢測元素改變類名對應裡面的樣式
4. 分類頁面佈局
   1. 上中下 頭部 和 底部一樣使用公共樣式
   2. 中間 左邊固定 右邊自適應 flex佈局
   3. 中間要居中 給body設定padding讓內容擠到中間 給body設定100vh高度 中間100%只有整個高度-頭-底部高度
5. 滑動外掛的原理
   1. 有一個父容器
   2. 有一個子容器
   3. 子容器比父容器高(一定要比父容器才有必要滑動)
   4. 子容器在父容器裡面進行位移
6. swiper滑動外掛 使用方式
   1. 步驟和之前使用輪播圖一樣
   2. 修改樣式
      swiper-container容器高度要固定 100%從父元素繼承下來
      子元素的樣式swiper-slide 的高度 改成auto
   3. 初始化
      // 初始化分類左側的滾動
      new Swiper(’.category-left .swiper-container’, {
      //滑動方向
      direction: ‘vertical’,
      // 控制多屏滑動 內容滾動的原理就是多屏滾動
      slidesPerView: ‘auto’,
      // 支援滑鼠拖動 滑動只有手機上才能滑動
      mousewheelControl: true,
      // 利用慣性自動滾動 鬆手後自動到頂部或者到底部
      freeMode: true,
      //防止文字模糊
      roundLengths: true
      });
      初始化需要指定一個引數
      核心就是 // 控制多屏滑動 內容滾動的原理就是多屏滾動
      slidesPerView: ‘auto’,
   4. swiper外掛的原理 多了中間層
      以爺爺swiper-container作為容器
      swiper-wrapper作為父容器
      swiper-slide作為子容器
      因為要相容輪播圖 使用輪播圖的結構
      間接通過父容器動了子容器在父容器裡面也跟著動的