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)文章
前端精度丟失問(wèn)題解決之后端Long類型到前端的處理策略
這篇文章主要介紹了前端精度丟失問(wèn)題解決之后端Long類型到前端的處理策略,在Web開(kāi)發(fā)中前后端數(shù)據(jù)類型不匹配尤其是Long類型數(shù)據(jù)到前端可能導(dǎo)致精度丟失,文章探討了此問(wèn)題并提供三種解決方法,需要的朋友可以參考下2024-09-09
JavaScript 井字棋人工智能實(shí)現(xiàn)代碼
JavaScript fights back in this artificial Tic Tac Toe game. Great script to have to entertain yourself and your visitors.2009-12-12
這篇文章主要介紹了ES6使用 const 聲明,本文給大家介紹的非常詳細(xì)對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-08-08
javascript的replace方法結(jié)合正則使用實(shí)例總結(jié)
這篇文章主要介紹了javascript的replace方法結(jié)合正則使用技巧,實(shí)例總結(jié)了replace方法配合正則表達(dá)式進(jìn)行變量、分組、字符等替換技巧,需要的朋友可以參考下2016-06-06
ES6標(biāo)準(zhǔn)新增了一種新的函數(shù)：Arrow Function（箭頭函數(shù)）。那么下面這篇文章主要給大家介紹了箭頭函數(shù)中this的相關(guān)資料，有需要的朋友可以參考借鑒，下面來(lái)一起看看吧。2017-02-02
這篇文章主要介紹了JS沙箱模式,結(jié)合實(shí)例形式分析了JS沙箱模式的原理與實(shí)現(xiàn)方法,需要的朋友可以參考下2017-09-09
這篇文章主要為大家介紹了GoJs基本使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04
bootstrap-table+treegrid實(shí)現(xiàn)樹(shù)形表格
這篇文章主要為大家詳細(xì)介紹了bootstrap-table+treegrid實(shí)現(xiàn)樹(shù)形表格，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-07-07
JS+CSS實(shí)現(xiàn)經(jīng)典的左側(cè)豎向滑動(dòng)菜單效果
這篇文章主要介紹了JS+CSS實(shí)現(xiàn)經(jīng)典的左側(cè)豎向滑動(dòng)菜單效果,涉及JavaScript響應(yīng)鼠標(biāo)事件動(dòng)態(tài)操作頁(yè)面元素的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09
js中如何獲取php變量呢？下面小編就為大家介紹一下吧！需要的朋友可以過(guò)來(lái)參考下2013-08-08