js實(shí)現(xiàn)星星打分效果
更新時(shí)間：2020年07月05日 14:12:56 作者：DniNgL
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)星星打分效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了js實(shí)現(xiàn)星星打分的具體代碼，供大家參考，具體內(nèi)容如下
最終效果如下
html部分
<div class="container">小主的評(píng)價(jià)：</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>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
今天遇到一個(gè)問(wèn)題: 我通過(guò) ajax 取回另一個(gè)頁(yè)面的 Html 。但這些 HTML 我不想直接輸出，想通過(guò) getElementsByName 處理后再輸出相應(yīng)的內(nèi)容。用原生的 javascript怎樣可以處理呢？2010-07-07
js eval木馬代碼,以后再分析吧...2007-03-03
bootstrap-table獲取表格數(shù)據(jù)的多種方式
這篇文章主要介紹了bootstrap-table獲取表格數(shù)據(jù)的多種方式,bootstrap-table獲取值得兩種方式,一種是通過(guò)data獲取,一種是通過(guò)url獲取,需要的朋友可以參考下2023-10-10
這篇文章主要為大家介紹了設(shè)置BFC功能及使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
下面小編就為大家?guī)?lái)一篇原生js封裝運(yùn)動(dòng)框架的示例講解。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-10-10
JavaScript實(shí)現(xiàn)MIPS乘法模擬的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)MIPS乘法模擬的方法,實(shí)例分析了JavaScript實(shí)現(xiàn)MIPS乘法模擬的運(yùn)算技巧,需要的朋友可以參考下2015-04-04
10行代碼實(shí)現(xiàn)微信小程序滑動(dòng)tab切換
這篇文章主要為大家詳細(xì)介紹了10行代碼實(shí)現(xiàn)微信小程序滑動(dòng)tab切換效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-12-12
javascript?Echart可視化學(xué)習(xí)
這篇文章主要為大家介紹了Echart可視化學(xué)習(xí)的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2022-01-01
javascript函數(shù)報(bào)Uncaught?ReferenceError:?XXX?is?not?define
本文主要介紹了javascript函數(shù)報(bào)Uncaught?ReferenceError:?XXX?is?not?defined，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
這篇文章主要介紹了一文幫你理解PReact10.5.13源碼,代碼簡(jiǎn)單易懂，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-04-04