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

相关文章

使用Redis快速实现共享Session登录的详细步骤

《使用Redis快速实现共享Session登录的详细步骤》在Web开发中,Session通常用于存储用户的会话信息,允许用户在多个页面之间保持登录状态,Redis是一个开源的高性能键值数据库,广泛用于... 目录前言实现原理:步骤:使用Redis实现共享Session登录1. 引入Redis依赖2. 配置R

SpringBoot实现RSA+AES自动接口解密的实战指南

《SpringBoot实现RSA+AES自动接口解密的实战指南》在当今数据泄露频发的网络环境中,接口安全已成为开发者不可忽视的核心议题,RSA+AES混合加密方案因其安全性高、性能优越而被广泛采用,本... 目录一、项目依赖与环境准备1.1 Maven依赖配置1.2 密钥生成与配置二、加密工具类实现2.1

在Java中实现线程之间的数据共享的几种方式总结

《在Java中实现线程之间的数据共享的几种方式总结》在Java中实现线程间数据共享是并发编程的核心需求,但需要谨慎处理同步问题以避免竞态条件,本文通过代码示例给大家介绍了几种主要实现方式及其最佳实践,... 目录1. 共享变量与同步机制2. 轻量级通信机制3. 线程安全容器4. 线程局部变量(ThreadL

python使用Akshare与Streamlit实现股票估值分析教程(图文代码)

《python使用Akshare与Streamlit实现股票估值分析教程(图文代码)》入职测试中的一道题,要求:从Akshare下载某一个股票近十年的财务报表包括,资产负债表,利润表,现金流量表,保存... 目录一、前言二、核心知识点梳理1、Akshare数据获取2、Pandas数据处理3、Matplotl

Django开发时如何避免频繁发送短信验证码(python图文代码)

《Django开发时如何避免频繁发送短信验证码(python图文代码)》Django开发时,为防止频繁发送验证码,后端需用Redis限制请求频率,结合管道技术提升效率,通过生产者消费者模式解耦业务逻辑... 目录避免频繁发送 验证码1. www.chinasem.cn避免频繁发送 验证码逻辑分析2. 避免频繁

分布式锁在Spring Boot应用中的实现过程

《分布式锁在SpringBoot应用中的实现过程》文章介绍在SpringBoot中通过自定义Lock注解、LockAspect切面和RedisLockUtils工具类实现分布式锁,确保多实例并发操作... 目录Lock注解LockASPect切面RedisLockUtils工具类总结在现代微服务架构中,分布

Java使用Thumbnailator库实现图片处理与压缩功能

《Java使用Thumbnailator库实现图片处理与压缩功能》Thumbnailator是高性能Java图像处理库,支持缩放、旋转、水印添加、裁剪及格式转换,提供易用API和性能优化,适合Web应... 目录1. 图片处理库Thumbnailator介绍2. 基本和指定大小图片缩放功能2.1 图片缩放的

精选20个好玩又实用的的Python实战项目(有图文代码)

《精选20个好玩又实用的的Python实战项目(有图文代码)》文章介绍了20个实用Python项目,涵盖游戏开发、工具应用、图像处理、机器学习等,使用Tkinter、PIL、OpenCV、Kivy等库... 目录① 猜字游戏② 闹钟③ 骰子模拟器④ 二维码⑤ 语言检测⑥ 加密和解密⑦ URL缩短⑧ 音乐播放

Spring Boot集成/输出/日志级别控制/持久化开发实践

《SpringBoot集成/输出/日志级别控制/持久化开发实践》SpringBoot默认集成Logback,支持灵活日志级别配置(INFO/DEBUG等),输出包含时间戳、级别、类名等信息,并可通过... 目录一、日志概述1.1、Spring Boot日志简介1.2、日志框架与默认配置1.3、日志的核心作用

Python使用Tenacity一行代码实现自动重试详解

《Python使用Tenacity一行代码实现自动重试详解》tenacity是一个专为Python设计的通用重试库,它的核心理念就是用简单、清晰的方式,为任何可能失败的操作添加重试能力,下面我们就来看... 目录一切始于一个简单的 API 调用Tenacity 入门:一行代码实现优雅重试精细控制:让重试按我