原生js滑动星星打分_淘宝星星打分_动态星星评分.rar资源-CSDN下载

共4个文件

gif：2个

html：1个

db：1个

版权申诉

js代码

CSS3

html5

128 浏览量 2024-11-23 13:45:58 上传评论收藏 3KB RAR 举报

原生JavaScript实现的滑动星星打分功能是一种基于Web前端技术的用户交互组件。在淘宝等电商平台上，这种滑动星星打分应用尤为常见，用户可以通过滑动鼠标或触摸屏幕来选择打分，这一过程既直观又方便。该功能通常涉及到HTML、CSS和JavaScript三种技术，HTML负责结构的构建，CSS进行样式的设计与排版，而JavaScript则赋予了星星动态交互的能力。在实现过程中，开发者首先需要通过HTML定义星星评分的容器和星星元素，然后利用CSS对星星进行样式设计，使其看起来美观且具有指示作用。使用JavaScript编写逻辑代码，实现星星的动态效果和分值的实时计算。具体来说，JavaScript中的逻辑可以包括以下几点：监听用户的鼠标滑动事件或触摸事件，然后根据用户滑动的位置动态改变星星的高亮状态，表示选中了几颗星。可以设置一个初始值，允许用户在未滑动前预览默认评分。在用户滑动后，根据最终停留的位置计算出实际评分，并将其反馈给服务器或存储到本地，以便后续使用。动态星星评分组件的实现，不仅仅在于星星的显示，还包括对分数的精确计算和反馈机制。例如，星星通常分为不同的等级，每一颗星对应一个分数区间，用户滑动选择后，组件需要能够准确地返回用户选定的具体分数或分数段。此外，为了提升用户体验，开发者可能还会添加一些额外的功能，比如评分后显示平均评分、评分提示文字等。在前端开发中，通过使用原生JavaScript实现滑动星星打分不仅能够锻炼开发者的编程能力，也能够加深对Web技术的理解。相较于使用jQuery、Vue.js、React.js等框架或库，原生JavaScript开发的组件能够减少外部依赖，提高页面的加载速度和运行效率。此外，它还能使开发者更加深入地了解DOM操作、事件处理等基础知识点。对于星星图片资源的处理，通常需要将星星分为两组图片：一组是未选中状态的星星，另一组是选中状态的星星。通过CSS的伪类或JavaScript来动态切换这两组图片的显示状态，实现星星高亮和未高亮的视觉效果。图片的命名和组织也需遵循一定的规范，以方便管理和替换。原生JavaScript实现的滑动星星打分是一个综合性的前端项目，它不仅要求开发者具备良好的JavaScript编程能力，还需要具备CSS样式设计能力和HTML结构规划能力。此外，开发者还需要关注性能优化、用户体验等方面的问题，以确保最终的效果既美观又实用。

资源推荐

资源详情

资源评论

收起资源包目录

原生js滑动星星打分_淘宝星星打分_动态星星评分.rar （4个子文件）

images

star-hover.gif 321B

Thumbs.db 4KB

star.gif 314B

demo.html 3KB

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>星星打分</title> <style type="text/css"> *{margin:0;padding:0;list-style-type:none;} a,img{border:0;} body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";} /* starWrapper */ .starWrapper{border:1px solid #FFCC00;padding:5px;width:110px;height:12px;overflow:hidden;margin:30px auto 0 auto;} .starWrapper img{cursor:pointer;float:left;margin:0 2px 0 0;display:inline;} </style> <script type="text/javascript"> function rate(obj,oEvent){ var imgSrc = 'images/star.gif'; var imgSrc_2 = 'images/star-hover.gif'; if(obj.rateFlag) return; var e = oEvent || window.event; var target = e.target || e.srcElement; var imgArray = obj.getElementsByTagName("img"); for(var i=0;i<imgArray.length;i++){ imgArray[i]._num = i; imgArray[i].onclick=function(){ if(obj.rateFlag) return; obj.rateFlag=true; alert(this._num+1); }; } if(target.tagName=="IMG"){ for(var j=0;j<imgArray.length;j++){ if(j<=target._num){ imgArray[j].src=imgSrc_2; }else{ imgArray[j].src=imgSrc; } } }else{ for(var k=0;k<imgArray.length;k++){ imgArray[k].src=imgSrc; } } } </script> <body> <p class="starWrapper" onmouseover="rate(this,event)"> <img src="images/star.gif" title="很差" /> <img src="images/star.gif" title="一般" /> <img src="images/star.gif" title="不错" /> <img src="images/star.gif" title="好评" /> <img src="images/star.gif" title="赞一个" /> </p> <p class="starWrapper" onmouseover="rate(this,event)"> <img src="images/star.gif" title="很差" /> <img src="images/star.gif" title="一般" /> <img src="images/star.gif" title="不错" /> <img src="images/star.gif" title="好评" /> <img src="images/star.gif" title="赞一个" /> </p> <p class="starWrapper" onmouseover="rate(this,event)"> <img src="images/star.gif" title="很差" /> <img src="images/star.gif" title="一般" /> <img src="images/star.gif" title="不错" /> <img src="images/star.gif" title="好评" /> <img src="images/star.gif" title="赞一个" /> </p> <p class="starWrapper" onmouseover="rate(this,event)"> <img src="images/star.gif" title="很差" /> <img src="images/star.gif" title="一般" /> <img src="images/star.gif" title="不错" /> <img src="images/star.gif" title="好评" /> <img src="images/star.gif" title="赞一个" /> </p> </body> </html>

评论收藏

内容反馈

版权申诉