<script>
window.onload=function(){
//----------选中的星星会多出一个属性:isClick="true" 藉此来获取评分----------
//获取所有 "星星" 集合
var tds=document.getElementsByTagName("td");
var startIndex=0;
for(var i=0;i<tds.length;i++){
//设置评分分数和索引
for(var j=0;j<tds.length;j++){
tds[j].setAttribute("score",j+1); //代表的评分分数改这里(默认是1-5分)
tds[j].setAttribute("index",j);
}
//设置onmouseover事件
tds[i].onmouseover=function(){
for(var j=0;j<tds.length;j++){
tds[j].innerHTML="★"; //样式改这里
if(this==tds[j]){
break;
}
}
};
//设置onmouseout事件
tds[i].onmouseout=function(){
for(var j=startIndex+1;j<tds.length;j++){
tds[j].innerHTML="☆"; //样式改这里
}
};
//设置单击事件
tds[i].onclick=function(){
for(var j=0;j<tds.length;j++){
tds[j].removeAttribute("isClicked");
}
this.setAttribute("isClicked","true");
//记录选中星星索引
startIndex=parseInt(this.getAttribute("index"));
};
}
//-----------------------------------------------OVER---------------------------------------------
};
</script> <table summary='评分'>
<tr>
<td>☆</td>
<td>☆</td>
<td>☆</td>
<td>☆</td>
<td>☆</td>
</tr>

代码不难就不解释了,可直接拿过去用。按照注释可以很快修改样式。  原定是这样的:

代码预览不会弄,提供源代码下载:网页评分代码下载 密码:u0v2 。若是链接失效请联系我,我会尽快处理。

 

商品评分效果JavaScript的更多相关文章

  1. 淘宝商品放大镜效果-JavaScript

    效果图 HTML代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

  2. [JavaScript] js 迅雷评分效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"         "http://www ...

  3. JS五星级评分效果(类似与淘宝打分效果)

    今天晚上研究下 五星级评分效果,类似于淘宝后台评分效果,如下图所示: 思路: 当鼠标移到一颗星的时候 判断当前的索引 当前及当前的索引前面的星星亮起来 每当移到任何一颗星星时候 下面跟随提示 mous ...

  4. jQuery动态星级评分效果实现方法

    本文实例讲述了jQuery动态星级评分效果实现方法.分享给大家供大家参考.具体如下: 这里的jQuery星级评分代码,是大家都很喜欢的功能,目前广泛应用,本星级评分加入了动画效果,注意,如果要真正实现 ...

  5. css 实现评分效果

    css实现评分效果,其实是css sprites (css精灵)的延伸应用,效果的实现主要是由  background-position 属性移动图片位置.之前看到有前辈写过关于这方面的内容,在理解上 ...

  6. vue实现简单评分效果

  7. 纯css实现星级评分效果

    效果 效果图如下,纯css实现超酷炫的星级评分动画效果 ​ 实现思路 5个类型为radio的input,label标签修改样式背景图为星星 label标签给每个星星鼠标停留时加注名字 点击星星有放大旋 ...

  8. 原生JS结合cookie实现商品评分组件

    开发思路如下: 1.利用JS直接操作DOM的方式开发商品评分组件,主要实现功能有:显示评价评分的样式以及将用户操作后对应的数据返回到主页面 2.主页面引入商品评分组件的js文件并根据规定格式的数据,生 ...

  9. 原生JavaScript实现评分效果

    一.实现原理: 1.要设置一个“大总管变量”,用于记录点击时的星星下标,只声明不赋值. 2.移入每个星星时,先把所有的星星恢复到默认状态:再把当前星星及在它之前的星星设为选中状态. 3.移出每个星星时 ...

随机推荐

  1. 电脑没有声音,显示“未插入耳机或扬声器”,检测不到Realtek高清晰音频管理器

    2018-7-16,电脑彻夜未关,早上发现已经死机了.关机重启之后,就发现没有声音了,提示“未插入耳机或扬声器”,并且检测不到Realtek高清晰音频管理器,只能检查到显卡音频输出.首先,音箱在其他电 ...

  2. 解决WinSCP连接虚拟机

    其实虚拟机你也可以将它形象化,认为它就是一台电脑,只是这个电脑在你的内存中,所以,一般电脑所具有的的功能虚拟机一样拥有,它也可以当成一台独立的个体哦. 针对很多使用WinSCP连接不上虚拟机的问题,这 ...

  3. a标签常用跳转

    1.a标签跳转qq <a href="http://wpa.qq.com/msgrd?v=3&uin=123456789&site=qq&menu=yes&qu ...

  4. MATLAB之数据处理+公式拟合

    MATLAB之数据处理+公式拟合 前言:由试验得到一组数据,对该组数据进行处理,作图分析,分析各变量的关系,期望得到拟合公式. 试验数据背景 本次试验有三个自变量:V.M.G,因变量为F,每组试验重复 ...

  5. mysql数据库字段类型的选择原则

    原文链接:http://blog.csdn.net/u013412790/article/details/51615407 数据库类型的选择对数据库的性能影响很大 1 . 数据类型会影响存储空间的开销 ...

  6. 【迷你微信】基于MINA、Hibernate、Spring、Protobuf的即时聊天系统:6.技术简介之Protobuf

    欢迎阅读我的开源项目<迷你微信>服务器与<迷你微信>客户端 protocolbuffer(以下简称Protobuf)是google 的一种数据交换的格式,它独立于语言,独立于平 ...

  7. 360、IE等浏览器对bootstrap的影响

    笔者开发的web程序部署上线后发现,bootstrap的菜单不显示,开发时候用chrome没有发现问题,在360浏览器上跑,发现360默认的是兼容模式,切换到极速模式就能够显示菜单了. 但是这样的用户 ...

  8. HDU5200 数据离线处理

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5200 ,数据离线处理. 这是BestCoder Round #36的C题,比赛时自己用线段树做,姿势不 ...

  9. WMAppPRHeader.xml文件的作用

    对于很多开发者来说直接通过Visual Studio 2010生成的XAP文件和上传至App Hub通过Windows Phone Marketplace Technical Certificatio ...

  10. IOS 获取文本焦点 主动召唤出键盘(becomeFirstResponder) and 失去焦点(退下键盘)

    主动召唤出键盘 - (void)viewDidAppear:(BOOL)animated { // 3.主动召唤出键盘 [self.nameField becomeFirstResponder]; / ...