В последнее время я работал над приложением Rating, и в начале у меня были некоторые трудности, к счастью, сообщество разработчиков велико, поэтому я собрал некоторые решения и завершил свой проект. Я решил создать похожий и простой пример и поделиться своим подходом к его созданию.
Для моей модели я использовал несколько приложений, связанных с Google Play, и вы можете проверить их в любое время.

Для начала нам нужно импортировать шрифт awesome из cdnjs Cloudflare, который мы позже будем использовать для значков звезд.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

Для разработки панели навигации и содержимого внутри нее, включая список приложений в контейнере, следующий HTML-код и код CSS должны выглядеть следующим образом.

<nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">Apps</a></li> <li><a href="#">Downloads</a></li> </ul> </nav> </div> <!--App list rating design--> <div class="app-list"> <ul> <li> <img src="https://i.ibb.co/q1Lcz6b/badlandbrowl.png" alt="appIcon" height="60" width="60"> <a href="https://play.google.com/store/apps/details?id=com.frogmind.badlandbrawl&hl=en">Badland Browl</a> <figcaption><i>Sling your Clones onto the battlefield! Master your timing and...</i></figcaption> <div class="rating"> <span style=" color: #FDE16D;" class="fa fa-star"></span> <span style=" color: #FDE16D;" class="fa fa-star "></span> <span style=" color: #FDE16D;" class="fa fa-star "></span> <span style=" color: #FDE16D;" class="fa fa-star"></span> <span style=" color: #FDE16D;" class="fa fa-star"></span> </div>
/*Container of apps and menus*/ .container{ background: rgb(87, 87, 87); width: 80em; height: 40em; border: 1px solid black; margin: 5em auto; } /*Navigation bar and search bar*/ .navbar{ height: 3.5em; background: rgb(59, 59, 59); } input[placeholder="search app"]{ float: right; outline: none; margin: 1em 1.5em; height: 1.5em; } a img[alt=menuIcon]{ margin:0.4em 1em; } nav a{ text-decoration: none; font-size: 25px; font-family: 'Lato', sans-serif; color: rgb(2, 218, 218); }

И добавив другие игры в список, следующий код должен выглядеть примерно так:

Чтобы настроить анимацию и получить эффект рейтинга от одной звезды, перемещающейся слева направо, не пропуская цвет от одной звезды к другой, мы добавим «content: '\2605'» в код звездного рейтинга в следующий код CSS:

.rating > .fa:hover, .rating > .fa:hover ~ .fa{ text-shadow: 0 0 9px rgba(238, 255, 0, 0.788); color: #FDE16D; content: '\2605'; /* Full star in UTF-8 */ position: relative; left: 0; } .fa.rated::before{ /* the :hover should come first */ content: '\2605'; color: #FDE16D; font-size: 40px; }

С помощью следующего кода мы получим эффект

С реализованными эффектами осталось одно - поставить код, который будет уходить из рейтинга, а не заставлять его исчезать после выхода мышки из звездного диапазона. Мы будем использовать код с «циклом for», чтобы установить ограничение на количество звездочек, и оператором «if else», когда мы наводим указатель мыши на одну или несколько звездочек, цвет который мы нажимаем, остается и меняет его на желтый, а когда мы понижаем его, он возвращается к исходному белому цвету.
Код будет реализован в последней игре, которую вы сможете оценить на ручке, которую я поставлю на дно.

var count; function starmark(item){ count=item.id[0]; sessionStorage.starRating = count; var subid= item.id.substring(1); for(var i=0;i<5;i++) { if(i<count){ document.getElementById((i+1)+subid).style.color="#FDE16D"; } else{ document.getElementById((i+1)+subid).style.color="white"; } } }

Когда все сделано, конечный продукт должен выглядеть примерно так.

Спасибо, что нашли время, чтобы ознакомиться с моей статьей, я искренне надеюсь, что вы смогли чему-то научиться и получили удовольствие от ее чтения. 🙂

Если вы хотите узнать больше о приложениях для рейтинга звезд и о том, как их сделать, вот несколько похожих статей и проектов, которые вы можете проверить.

Простой звездный рейтинг WebSchools
Простой метод Javascript для звездного рейтинга
Создание рейтингового приложения на основе звезд с помощью Vanila JS

Первоначально опубликовано на dev.to.