java星级评价代码_JS实现星级评分

2023-10-13 10:10

本文主要是介绍java星级评价代码_JS实现星级评分,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

朋友给我一份星级评价的html代码,说不能实现多行星级评价,让我帮忙看一下。

帮朋友修改的,怕到时候自己也用到了,先把代码贴这里。

/p>

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

星级评分系统

body,div,ul,li,p{margin:0;padding:0;}

body{color:#666;font:12px/1.5 Arial;}

ul{list-style-type:none;}

.star{position:relative;width:600px;margin:10px auto;}

.star ul,.star span{float:left;display:inline;height:19px;line-height:19px;}

.star ul{margin:0 10px;}

.star li{float:left;width:24px;cursor:pointer;text-indent:-9999px;background:url(star.png) no-repeat;}

.star strong{color:#f60;padding-left:10px;}

.star li.on{background-position:0 -28px;}

function neo(id){ //这里id

var oStar = document.getElementById(id);

var aLi = oStar.getElementsByTagName("li");

var oUl = oStar.getElementsByTagName("ul")[0];

var oP = oStar.getElementsByTagName("p")[0];

var i = iScore = iStar = 0;

for (i = 1; i <= aLi.length; i++){

aLi[i - 1].index = i;

//点击后进行评分处理

aLi[i - 1].onclick = function (){

fnPoint(this.index);

//计算浮动层位置

oP.style.left = oUl.offsetLeft + this.index * this.offsetWidth - 104 + "px";

//匹配浮动层文字内容

oP.innerHTML = "" + this.index + " 分";

}

}

//评分处理

function fnPoint(iArg){

//分数赋值

iScore = iArg || iStar;

for (i = 0; i < aLi.length; i++) aLi[i].className = i < iScore ? "on" : "";

}

};

物流速度

  • 1
  • 2
  • 3
  • 4
  • 5

服务态度

  • 1
  • 2
  • 3
  • 4
  • 5

发货速度

  • 1
  • 2
  • 3
  • 4
  • 5

其实用的就是网上的一些办法,然后稍微修改了下。仅供参考。

实现效果:

b670c15bb56c

这篇关于java星级评价代码_JS实现星级评分的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/202482

相关文章

Spring IOC的三种实现方式详解

《SpringIOC的三种实现方式详解》:本文主要介绍SpringIOC的三种实现方式,在Spring框架中,IOC通过依赖注入来实现,而依赖注入主要有三种实现方式,构造器注入、Setter注入... 目录1. 构造器注入(Cons编程tructor Injection)2. Setter注入(Setter

Android kotlin语言实现删除文件的解决方案

《Androidkotlin语言实现删除文件的解决方案》:本文主要介绍Androidkotlin语言实现删除文件的解决方案,在项目开发过程中,尤其是需要跨平台协作的项目,那么删除用户指定的文件的... 目录一、前言二、适用环境三、模板内容1.权限申请2.Activity中的模板一、前言在项目开发过程中,尤

Java function函数式接口的使用方法与实例

《Javafunction函数式接口的使用方法与实例》:本文主要介绍Javafunction函数式接口的使用方法与实例,函数式接口如一支未完成的诗篇,用Lambda表达式作韵脚,将代码的机械美感... 目录引言-当代码遇见诗性一、函数式接口的生物学解构1.1 函数式接口的基因密码1.2 六大核心接口的形态学

Spring IOC控制反转的实现解析

《SpringIOC控制反转的实现解析》:本文主要介绍SpringIOC控制反转的实现,IOC是Spring的核心思想之一,它通过将对象的创建、依赖注入和生命周期管理交给容器来实现解耦,使开发者... 目录1. IOC的基本概念1.1 什么是IOC1.2 IOC与DI的关系2. IOC的设计目标3. IOC

Python实现文件下载、Cookie以及重定向的方法代码

《Python实现文件下载、Cookie以及重定向的方法代码》本文主要介绍了如何使用Python的requests模块进行网络请求操作,涵盖了从文件下载、Cookie处理到重定向与历史请求等多个方面,... 目录前言一、下载网络文件(一)基本步骤(二)分段下载大文件(三)常见问题二、requests模块处理

Spring Boot统一异常拦截实践指南(最新推荐)

《SpringBoot统一异常拦截实践指南(最新推荐)》本文介绍了SpringBoot中统一异常处理的重要性及实现方案,包括使用`@ControllerAdvice`和`@ExceptionHand... 目录Spring Boot统一异常拦截实践指南一、为什么需要统一异常处理二、核心实现方案1. 基础组件

java中的HashSet与 == 和 equals的区别示例解析

《java中的HashSet与==和equals的区别示例解析》HashSet是Java中基于哈希表实现的集合类,特点包括:元素唯一、无序和可包含null,本文给大家介绍java中的HashSe... 目录什么是HashSetHashSet 的主要特点是HashSet 的常用方法hasSet存储为啥是无序的

IDEA运行spring项目时,控制台未出现的解决方案

《IDEA运行spring项目时,控制台未出现的解决方案》文章总结了在使用IDEA运行代码时,控制台未出现的问题和解决方案,问题可能是由于点击图标或重启IDEA后控制台仍未显示,解决方案提供了解决方法... 目录问题分析解决方案总结问题js使用IDEA,点击运行按钮,运行结束,但控制台未出现http://

解决Spring运行时报错:Consider defining a bean of type ‘xxx.xxx.xxx.Xxx‘ in your configuration

《解决Spring运行时报错:Considerdefiningabeanoftype‘xxx.xxx.xxx.Xxx‘inyourconfiguration》该文章主要讲述了在使用S... 目录问题分析解决方案总结问题Description:Parameter 0 of constructor in x

解决IDEA使用springBoot创建项目,lombok标注实体类后编译无报错,但是运行时报错问题

《解决IDEA使用springBoot创建项目,lombok标注实体类后编译无报错,但是运行时报错问题》文章详细描述了在使用lombok的@Data注解标注实体类时遇到编译无误但运行时报错的问题,分析... 目录问题分析问题解决方案步骤一步骤二步骤三总结问题使用lombok注解@Data标注实体类,编译时