目錄

介紹

準備

目標

規定

思路

知識補充

解法參考

---

介紹

藍橋云課慶冬奧需要舉行一次抽獎活動，我們一起做一個頁面提供給云課冬奧抽獎活動使用。

準備

開始答題前，需要先打開本題的項目代碼文件夾，目錄結構如下：

├── css
│   └── style.css
├── effect.gif
├── index.html
└── js├── index.js└── jquery.js

其中：

• css/style.css?是樣式文件 。
• index.html?是主頁面。
• js/jquery.js?是 jQuery 文件。
• js/index.js?是需要補充的 js 文件。
• effect.gif?是最終實現的效果圖。

注意：打開環境后發現缺少項目代碼，請手動鍵入下述命令進行下載：

cd /home/project
wget https://labfile.oss.aliyuncs.com/courses/9791/05.zip && unzip 05.zip && rm 05.zip

在瀏覽器中預覽?index.html?頁面效果如下：

目標

找到?index.js?中?rolling?函數，使用?jQuery?或者?js?完善此函數，達到以下效果：

1.點擊開始后，以?class?為?li1?的元素為起點，黃色背景（.active?類）在獎項上順時針轉動。

2.當轉動停止后，將獲獎提示顯示到頁面的?id?為?award?元素中。獲獎提示必須包含獎項的名稱，該名稱需與題目提供的名稱完全一致。

3.轉動時間間隔和轉動停止條件已給出，請勿修改。

規定

• 轉動時間間隔和轉動停止條件已給出，請勿修改。
• 請嚴格按照考試步驟操作，切勿修改考試默認提供項目中的文件名稱、文件夾路徑等。
• 請勿修改項目中提供的?id、class、函數名等名稱，以免造成無法判題通過。
• 先自己做一下吧：傳送門

---

思路

這道題目主要需要使用到jQuery的知識點，使用jQuery來進行相關的操作，類名的添加以及刪除等，DOM中文字的獲取。類名的添加使用addClass，類名的刪除使用removeClass。兄弟節點的獲取使用siblings()方法。

知識補充

選擇器

Jquery中的后代選擇器：我們使用 $("#father p") 來選擇 id 名為 father 的 div 元素中的所有后代 p 元素。

子代選擇器：我們使用 "#father>p" 只選擇出 "id="father" 的子代 p 元素，即兒子節點，這就是它和后代選擇器的區別

兄弟選擇器：$(“M~N”);

相鄰選擇器：$(“M+N”); (選擇下一個兄弟節點 N)

屬性選擇器：

偽類選擇器：

綁定事件

綁定事件：jQuery對象.on(事件類型, 事件處理函數);

jQuery對象.bind(事件類型, 事件處理函數);

創建元素節點

$(“<標簽名>文本內容</標簽名>”);

$(“<標簽名 屬性=‘屬性值’>文本內容</標簽名>”);

 var div = $("<div style='width:50px; height:50px; background-color: #ddffbc'>嗨</div>"); // 創建帶有屬性的元素節點$("body").append(div); // 將創建的 div 元素放入 body 中

元素的插入
prepend()?與?prependTo()?是在元素子級的開頭插入元素。

// 在 A 元素的子級最前面的位置插入B
$(A).prepend(B);// 在 A 元素的子級最前面的位置插入B
$(B).prependTo(A);

append() 與 appendTo() 是在元素子級的尾部插入元素。

before() 與 insertBefore() 是在該元素的前面插入元素。

after() 與 insertAfter() 是在元素的后面插入元素。

empty 方法是用來清空指定元素的后代元素和內容的。

replaceWith 方法和 replaceAll 方法都可以用來把指定元素替換成其他元素，只是在使用格式上有些差別。

// 將 A 替換為 B
$(A).replaceWith(B);// 將 A 替換為 B
$(B).replaceAll(A);

元素的遍歷

$().each(function (index, element) {});

each?方法會接收一個匿名函數作為參數，函數中的?index?表示元素的索引號；而函數中的?element?表示當前元素。

attr?方法可以用來獲取指定元素的屬性值，也可以用來設置指定屬性的屬性值。

jQuery對象.attr("屬性名"); // 獲取屬性
jQuery對象.attr("屬性名", "屬性值"); // 修改屬性

removeAttr 方法可以刪除指定元素的某個屬性。

toggleClass 方法是用來切換類選擇器的。通過使用 toggleClass 讓 div 元素的 circle1 樣式在添加和移除之間切換，沒有 circle1 這個類就加上，有則移除。

val 方法用于獲取表單元素的值，也可以給表單元素設置值。

$().prev(); // 查找指定元素前向第一個元素
$().preAll(); // 查找指定元素前向所有元素
$().next(); // 查找指定元素的第一個后向兄弟元素
$().nextAll(); // 查找指定元素的所有后向兄弟元素
$().siblings();//查找所有兄弟元素
jQuery對象.children();//獲取元素的兒子節點
jQuery對象.find(selector);//查找到指定元素的所有后代元素
$().hasClass("類名");//用來判斷指定元素是否包含該類名的元素
$().eq(n);//使用 eq 方法可以實現下標過濾
$().is(selector);//使用 is 方法來判斷指定元素中是否有符合條件的存在
$().not(selector|function)//用 not 方法可以選擇不符合條件的元素。

解法參考

let num = 0;function rolling() {time++; // 轉動次數加1num++;if(num>8){num=1;}$(".li"+num).addClass('active').siblings().removeClass('active');clearTimeout(rollTime);rollTime = setTimeout(() => {window.requestAnimationFrame(rolling); // 進行遞歸動畫}, speed);// time > times 轉動停止if (time > times) {$("#award").text(`恭喜你抽到了${$(".li"+num).text()}`); clearInterval(rollTime);num = 0;time = 0;return;}
}

我們先聲明一個num賦值為0，用于來進行追蹤轉盤中轉到的元素，當開始進行轉動時，先將num增加，當num大于8時，說明轉了一圈，則給它賦值為1，回到起點。然后為對應的元素添加類，使用addClass來進行增加，其他的兄弟節點去除到該類，使用removeClass，兄弟節點的獲取直接調用siblings()方法。

當停止轉動時，使用text（）方法來獲取元素的文本。最后再將num重新賦值為0。

好啦，本文就到這里啦！