原生Javascript實(shí)現(xiàn)五角星評分
更新時間:2022年09月01日 11:26:08 作者:Shay_Liu
這篇文章主要為大家詳細(xì)介紹了原生Javascript實(shí)現(xiàn)五角星評分,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
利用原生Javascript實(shí)現(xiàn)五角星評分,可以打半分.話不多說先上代碼。
html部分
<div class="setStarRate"> <div class="star"> <span id="star"> <li> <a href="javascript:void(0)" οnclick="rateStar(1)"></a> <a href="javascript:void(0)" οnclick="rateStar(2)"></a> </li> <li> <a href="javascript:void(0)" οnclick="rateStar(3)"></a> <a href="javascript:void(0)" οnclick="rateStar(4)"></a> </li> <li> <a href="javascript:void(0)" οnclick="rateStar(5)"></a> <a href="javascript:void(0)" οnclick="rateStar(6)"></a> </li> <li> <a href="javascript:void(0)" οnclick="rateStar(7)"></a> <a href="javascript:void(0)" οnclick="rateStar(8)"></a> </li> <li> <a href="javascript:void(0)" οnclick="rateStar(9)"></a> <a href="javascript:void(0)" οnclick= "rateStar(10)"></a> </li> </span> </div> <div class="grade"> <span id="getStarRate">0.0</span> </div> </div>
CSS部分:
<style> ? ? .grade span { ? ? ? ? margin-left: 15px; ? ? ? ? line-height: 30px; ? ? } ? ? ? span { ? ? ? ? width: 50%; ? ? ? ? height: 70%; ? ? ? ? padding: 0; ? ? ? ? margin: 0 25%; ? ? } ? ? ? span li { ? ? ? ? width: 20px; ? ? ? ? height: 20px; ? ? ? ? display: inline-block; ? ? ? ? background: url("") no-repeat;//這里輸入灰色狀態(tài)星星的圖片鏈接 ? ? } ? ? ? span li a { ? ? ? ? height: 20px; ? ? ? ? width: 10px; ? ? ? ? display: inline-block; ? ? ? ? display: block; ? ? ? ? float: left; ? ? } </style>
js部分
function rateStar(index) { ? ?var star = document.getElementById('star'); ? ?var items = star.getElementsByTagName("li"); ? ? ? index = parseInt(index) - 1; //因?yàn)橐粋€星星由2個a標(biāo)簽組成的,所以減掉1 ? ? ? ? var tem = -1; ? ? ? ? ?//遍歷所有的li標(biāo)簽 ? ? ? ? ? ?for (var i = 0; i < items.length; i++) { ? ? ? ? ? ? if (index > i * 2) { //當(dāng)index大于i*2的時候,就填充i個數(shù)量的滿格星星 ? ? ? ? ? ? items[i].style.background = "url() no-repeat"; ? ? ? ? ? ?? items[i].style.backgroundSize = "100% 100%"; ? ? ? ? ? ? ?} else { ? ? ? ? ? ? ?if (tem == -1) { ? ? ? ? ? ? ? ? ? ? ?tem = i; ? ? ? ? ? ? ? ? ? ?} ? ? ? ? ? ? ? ? ? ?items[i].style.background = "url() no-repeat"; //填充灰色狀態(tài)的星星 ? ? ? ? ? ? ? ? ? ?items[i].style.backgroundSize = "100% 100%"; ? ? ? ? ? ? ? } ? ? ? ?} ? ? ? ? //判斷index是否等于偶數(shù) ? ? ? ? ? ?if (index == parseInt(tem) * 2) { ? ? ? ? ? //當(dāng)前l(fā)i元素的背景設(shè)置成半格星星狀態(tài) ? ? ? ? ?items[tem].style.background = "url() no-repeat"; ? ? ? ? ?items[tem].style.backgroundSize = "100% 100%"; ? ? ? ??} ? ? document.getElementById('getStarRate').innerHTML = (parseInt(index) + 1) * 0.5; },
運(yùn)行結(jié)果:
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
CocosCreator如何實(shí)現(xiàn)劃過的位置顯示紋理
這篇文章主要介紹了CocosCreator紋理shader的一些知識,想了解shader的同學(xué),一定要看下,并且親自動手實(shí)踐2021-04-04BootStrap daterangepicker 雙日歷控件
這篇文章主要介紹了BootStrap daterangepicker 雙日歷控件,代碼簡單易懂,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2017-06-06tablesorter.js表格排序使用方法(支持中文排序)
這篇文章主要為大家詳細(xì)介紹了tablesorter.js表格排序使用方法,支持中文排序,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-02-02JavaScript 中級筆記 第五章 面向?qū)ο蟮幕A(chǔ)
對象是JavaScript的基礎(chǔ)。從最基本的層次上說,對象是一系列屬性的集合。2009-09-09