快捷導(dǎo)航

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)文章

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