js實現(xiàn)星星打分效果
更新時間：2020年07月05日 14:12:56 作者：DniNgL
這篇文章主要為大家詳細介紹了js實現(xiàn)星星打分效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了js實現(xiàn)星星打分的具體代碼，供大家參考，具體內(nèi)容如下
最終效果如下
html部分
<div class="container">小主的評價：</div> <span></span>
css樣式
<style>
.star {
font-size: 20px;
color: gold;
cursor: pointer;
}
.container {
display: inline-block;
text-align: center;
}
</style>
js部分
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(function () {
let count = 5
let score = 3
for (let i = 0; i < count; i++) {
let star = $("<i/>").addClass("iconfont").addClass("star")
if (i < score) star.addClass("icon-xingxing")
else star.addClass("icon-xingxing1")
$(".container").append(star)
}
$(".star").mouseenter(function () {
let index = $(this).index()
$(".star").each(function (i) {
if (i <= index)
$(this).addClass("icon-xingxing").removeClass("icon-xingxing1")
else
$(this).addClass("icon-xingxing1").removeClass("icon-xingxing")
})
})
$(".star").mouseleave(function () {
$(".star").each(function (i) {
if (i < score)
$(this).addClass("icon-xingxing").removeClass("icon-xingxing1")
else
$(this).addClass("icon-xingxing1").removeClass("icon-xingxing")
})
})
$(".star").click(function () {
score = $(this).index() + 1
$("span").html(`${score}分`)
})
$("span").html(`${score}分`)
})
</script>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
今天遇到一個問題: 我通過 ajax 取回另一個頁面的 Html 。但這些 HTML 我不想直接輸出，想通過 getElementsByName 處理后再輸出相應(yīng)的內(nèi)容。用原生的 javascript怎樣可以處理呢？2010-07-07
js eval木馬代碼,以后再分析吧...2007-03-03
bootstrap-table獲取表格數(shù)據(jù)的多種方式
這篇文章主要介紹了bootstrap-table獲取表格數(shù)據(jù)的多種方式,bootstrap-table獲取值得兩種方式,一種是通過data獲取,一種是通過url獲取,需要的朋友可以參考下2023-10-10
這篇文章主要為大家介紹了設(shè)置BFC功能及使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-03-03
下面小編就為大家?guī)硪黄鷍s封裝運動框架的示例講解。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
這篇文章主要介紹了JavaScript實現(xiàn)MIPS乘法模擬的方法,實例分析了JavaScript實現(xiàn)MIPS乘法模擬的運算技巧,需要的朋友可以參考下2015-04-04
這篇文章主要為大家詳細介紹了10行代碼實現(xiàn)微信小程序滑動tab切換效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-12-12
javascript?Echart可視化學(xué)習(xí)
這篇文章主要為大家介紹了Echart可視化學(xué)習(xí)的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-01-01
javascript函數(shù)報Uncaught?ReferenceError:?XXX?is?not?define
本文主要介紹了javascript函數(shù)報Uncaught?ReferenceError:?XXX?is?not?defined，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
這篇文章主要介紹了一文幫你理解PReact10.5.13源碼,代碼簡單易懂，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-04-04