评论星级 php,JS实现评价星级

这次给大家带来JS实现评价星级，JS实现评价星级的注意事项有哪些，下面就是实战案例，一起来看一下。

虽然简单，还是有几个注意的地方：

1. 未点击时的hover效果，星星会随鼠标移动亮起来喔。

2. 点击后关闭hover效果。

3. 点击同一颗星星，星星可以随时换色。

具体代码展示：

.stars{

white-space: nowrap;

text-align: center;

margin-top: 20px;

margin-bottom: 20px;

}

.stars li{

display: inline-block;

color:#ADADAD;

font-size: 40px;

}

$(function() {

//为星星设置hover效果

varisClicked =false;

varbeforeClickedIndex = -1;

varclickNum = 0;//点击同一颗星次数

$('li').hover(

function() {

if(!isClicked) {

$(this).css('color','#F0AD4E');

varindex = $(this).index();

for(vari = 0; i <= index; i++) {

$('li:nth-child('+ i +')').css('color','#F0AD4E');

}

function() {

if(!isClicked) {

$('li').css('color','#ADADAD');

}

);

//星星点击事件

$('li').click(function() {

$('li').css('color','#ADADAD');

isClicked =true;

varindex = $(this).index();

for(vari = 1; i <= index+1; i++) {

$('li:nth-child('+ i +')').css('color','#F0AD4E');

}

if(index == beforeClickedIndex) {//两次点击同一颗星星该星星颜色变化

clickNum++;

if(clickNum % 2 == 1) {

$('li:nth-child('+ (index + 1) +')').css('color','#ADADAD');

}else{

$('li:nth-child('+ (index + 1) +')').css('color','#F0AD4E');

}

}else{

clickNum = 0;

beforeClickedIndex = index;

}

});

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

评论星级 php,JS实现评价星级相关推荐

SpringMVC中通过@ResponseBody返回对象，Js中调用@ResponseBody返回值，统计剩余评论字数的js，@RequestParam默认值，@PathVariable的用法
1.SpringMVC中通过@ResponseBody返回对象,作为JQuery中的ajax返回值 package com.kuman.cartoon.controller; import java. ...
vue实现一个星级打分效果_Vue实现星级评价效果
我们把星级评价单独做成一个Star组件,抽离出来,其中父组件中引入(传入的是评分的值) 初始Star.vue {{ score }} export default { name: 'Star', pr ...
vue实现一个星级打分效果_Vue实现星级评价效果实例详解
我们把星级评价单独做成一个Star组件,抽离出来,其中父组件中引入(传入的是评分的值) 初始Star.vue {{ score }} export default { name: 'Star', pr ...
java实现星级评分功能_JavaScript实现星级评分
JavaScript星级评分 *{margin:0;padding:0;} .wrapper{height:20px;padding:5px;width:130px;margin:100px auto ...
php mysql 星级评分_jQuery+PHP实现星级评分效果
码农公社 210.net.cn 210= 1024 10月24日一个重要的节日--码农(程序员)节 jQuery+PHP实现星级评分效果,评分功能比较常用,例如商城平台就会有个评分功能,本实例就 ...
html css星级评分,纯css实现星级评分效果
效果效果图如下星级评分实现思路: 5个类型为radio的input,abel标签修改样式背景图为星星 label标签给每个星星鼠标停留时加注名字点击星星有放大旋转的动画 dom结构用form ...
王垠对 JS 的评价
如果你不知道王垠(垠神)是谁,可以先搜一下. <给Java说句公道话> 很多JavaScript程序员也盲目地鄙视Java,而其实JavaScript比Python和Ruby还要差.不但具 ...
php mysql 星级评分_jQuery+PHP实现星级评分
本例实现的效果: 过渡动画显示评分操作. 及时更新平均得分和用户所评的分数. 后台限制用户重复评分操作,并在前端及时显示. XHTML HTML结构分为用于显示灰星星div#big_rate.亮星星d ...
对微软的敌视何时休？从一篇语言评论文章对C#的评价说起
看到一篇公众号文章<2020年什么编程语言最受欢迎,待遇最高?>,其中对C#的描述如下: 点击阅读原文,看到这是一篇翻译文章:https://codinginfinite.com/top- ...

评论星级 php,JS实现评价星级

评论星级 php,JS实现评价星级相关推荐

最新文章

热门文章