今天我們來學習如何在網頁中添加五星評價功能。為了實現這個功能,我們需要使用 HTML 和 JavaScript 代碼。下面是 HTML 代碼:
<div id="stars"> <input type="radio" name="star" value="1" /> <input type="radio" name="star" value="2" /> <input type="radio" name="star" value="3" /> <input type="radio" name="star" value="4" /> <input type="radio" name="star" value="5" /> </div>
在這段代碼中,我們使用了一個 div 元素作為容器;在容器中,我們添加了五個 radio 輸入框,每個輸入框用來表示一個星級。
下面是 JavaScript 代碼,用來實現更改選項時的操作:
var stars = document.querySelectorAll('input[name="star"]'); for (var i = 0; i < stars.length; i++) { stars[i].addEventListener('change', function() { var rating = this.value; console.log('Rating: ' + rating); }); }
這段代碼首先獲取所有的星級選項(即 radio 輸入框),并為每一個選項添加一個 change 事件監聽器。當用戶選中某個選項時,該事件監聽器會被觸發,JavaScript 代碼會獲取所選項的值,并將其顯示在控制臺中。
這就是一個簡單的五星評價功能的實現方法。你可以根據需要,對這段代碼進行更改和擴展,以滿足自己的需求。