使用JavaScript DOM实现商品评分

最新推荐文章于 2024-10-06 10:25:19 发布

fiky999

最新推荐文章于 2024-10-06 10:25:19 发布

阅读量626

点赞数

分类专栏： JavaScript 文章标签： javascript function class html css div

本文链接：https://blog.csdn.net/fiky999/article/details/5677441

版权

JavaScript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

商品评分，即通过点击五角星给商品添加评分及评论，效果如下：

这里面用到了两个图片，star3.gif和star4.gif，其中star3.gif为灰色五角星star4.gif为红色五角星，原理是通过JavaScript的DOM对象模型控制两个五角星进行切换，然后通过鼠标点击、鼠标滑过、鼠标移出三种事件来控制，以实现评分的效果。

其html代码如下：

<html> <head> <title>商品评分</title> <mce:script type="text/javascript" src="script.js" mce_src="script.js"></mce:script> </head> <body> <div class="title"> <span class="title_icon"><img src="images/bullet2.gif" mce_src="images/bullet2.gif" alt="" title="" /></span>产品评论 </div> <div class="new_products"> <span><strong>选择评分：</strong>(您的个人评分将会影响商品的平均顾客评分)</span> <div id="divStars"></div> <form> <span><strong>评论标题：<br /></strong></span> <p><input type="text" class="comm_title_text" /></p> <span><strong>评论内容：</strong></span><br /> <p><textarea class="title_content">

JavaScript代码如下：

//简写获取节点byId function id(a) { return document.getElementById(a); } //简写获取节点byTagName function tag(a) { return document.getElementsByTagName(a); } //简写创建元素节点 function newTag(a) { return document.createElement(a); } //简写创建文本节点 function newText(a) { return document.createTextNode(a); } //---------------------------------------------------------------------- //创建一些全局变量 var divStars;//定义星星所在div var oGrayStar=Array(5);//创建star数组 //页面onload后要执行的 window.οnlοad=loadImg;//页面载入后创建5个灰色五角星 //创建灰色星星 function createGrayStar(i) { oGrayStar[i] = newTag("img"); oGrayStar[i].src="images/star3.gif"; oGrayStar[i].alt=(i+1)+"分"; oGrayStar[i].οnclick=function (){changeState(i,0)}; oGrayStar[i].οnmοuseοver=function (){changeState(i,1)}; oGrayStar[i].οnmοuseοut=function (){changeState(i,2)}; return oGrayStar[i]; } function abc(){alert("12345")} //创建五个灰色五角星 function loadImg() { divStars=id("divStars"); for(i=0;i<5;i++) { divStars.appendChild(createGrayStar(i)); } createComment(); } //当前索引值以前的星星变为红色星星 function changeToRedStar(i) { for(j=0;j<=i;j++) { oGrayStar[j].src="images/star4.gif"; } } //所有星星变为灰色星星 function changeToGrayStar() { for(j=0;j<5;j++) { oGrayStar[j].src="images/star3.gif"; } } var i1,j1,k1=null;//onclick为i，onmouseover为j,onmouseout为j //定义三种状态（点击、鼠标滑过、鼠标移出）时的索引变量，并创建事件函数 function changeState(index,tag) { if(tag==0) { i1=index; changeToRedStar(i1); replaceComment(i1); } else if(tag==1) { j1=index; changeToGrayStar(); changeToRedStar(j1); replaceComment(j1); } else if(tag==2) { k1=i1; changeToGrayStar(); changeToRedStar(k1); replaceComment(k1); } } //创建评论文字 var str=["不喜欢", "一般", "推荐", "喜欢", "非常喜欢"];//评论字符串 var oNewSpan;//新span容器 var oNewText;//当前文本节点 //创建带空格文本的span function createComment() { oNewSpan=newTag("span"); oNewText=newText(""); oNewSpan.appendChild(oNewText); divStars.appendChild(oNewSpan); } //替换新评论 function replaceComment(index) { if(index || index==0) { oNewText=newText(str[index]); } else { oNewText=newText(""); } oNewSpan.replaceChild(oNewText,oNewSpan.firstChild); }

这个商品评分是多次评分，如果想限制一次评分，只需要在基础上稍作修改即可，然后我们将该代码嵌入到页面并使用CSS进行修饰即可。