HTML5星評分代碼是一種在網頁中添加星級評價功能的實現方法。實現方式基于HTML5語言,通過一組CSS樣式和JavaScript腳本,創建出一個可交互的星級評價系統。
<div class="stars"> <input type="radio" name="star" class="star-1" id="star-1" /> <label class="star-1" for="star-1"></label> <input type="radio" name="star" class="star-2" id="star-2" /> <label class="star-2" for="star-2"></label> <input type="radio" name="star" class="star-3" id="star-3" /> <label class="star-3" for="star-3"></label> <input type="radio" name="star" class="star-4" id="star-4" /> <label class="star-4" for="star-4"></label> <input type="radio" name="star" class="star-5" id="star-5" /> <label class="star-5" for="star-5"></label> </div>
上面的代碼顯示了一個包含5個星的評分系統。每個星星都是通過一個radio input和一個label標簽實現的。為了使星星能夠顯示出來,還需要通過CSS樣式設定星星的大小、顏色和樣式。
.stars { display: inline-block; } input[type="radio"] { display: none; } label.star { float: right; padding: 10px; font-size: 36px; color: #444; } input[type="radio"]:checked + label.star:before { content: '\2605'; color: #FD4; }
上面的代碼包含了3個CSS樣式。第一個樣式使星級評分系統在網頁上能夠水平排列。第二個樣式將radio input隱藏。第三個樣式實現了星星的樣式和交互效果。當用戶選中一個星級時,星星會變為黃色,并加上一個實心的五角星符號。