商品评分效果JavaScript
<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的更多相关文章
- 淘宝商品放大镜效果-JavaScript
效果图 HTML代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
- [JavaScript] js 迅雷评分效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...
- JS五星级评分效果(类似与淘宝打分效果)
今天晚上研究下 五星级评分效果,类似于淘宝后台评分效果,如下图所示: 思路: 当鼠标移到一颗星的时候 判断当前的索引 当前及当前的索引前面的星星亮起来 每当移到任何一颗星星时候 下面跟随提示 mous ...
- jQuery动态星级评分效果实现方法
本文实例讲述了jQuery动态星级评分效果实现方法.分享给大家供大家参考.具体如下: 这里的jQuery星级评分代码,是大家都很喜欢的功能,目前广泛应用,本星级评分加入了动画效果,注意,如果要真正实现 ...
- css 实现评分效果
css实现评分效果,其实是css sprites (css精灵)的延伸应用,效果的实现主要是由 background-position 属性移动图片位置.之前看到有前辈写过关于这方面的内容,在理解上 ...
- vue实现简单评分效果
- 纯css实现星级评分效果
效果 效果图如下,纯css实现超酷炫的星级评分动画效果 实现思路 5个类型为radio的input,label标签修改样式背景图为星星 label标签给每个星星鼠标停留时加注名字 点击星星有放大旋 ...
- 原生JS结合cookie实现商品评分组件
开发思路如下: 1.利用JS直接操作DOM的方式开发商品评分组件,主要实现功能有:显示评价评分的样式以及将用户操作后对应的数据返回到主页面 2.主页面引入商品评分组件的js文件并根据规定格式的数据,生 ...
- 原生JavaScript实现评分效果
一.实现原理: 1.要设置一个“大总管变量”,用于记录点击时的星星下标,只声明不赋值. 2.移入每个星星时,先把所有的星星恢复到默认状态:再把当前星星及在它之前的星星设为选中状态. 3.移出每个星星时 ...
随机推荐
- C 碎片二 数据类型
一.概述 C 语言包含的数据类型如下图所示: 二.各种数据类型介绍 2.1 整型 整形包括短整型.整形和长整形. 2.1.1 短整形 short a=1; 2.1.2 整形 一般占4个字节(32位), ...
- android读写SD卡封装的类
参考了网上的一些资源代码,FileUtils.java: package com.example.test; import java.io.BufferedInputStream; import ja ...
- java中的递归思想及应用
递归就是自己调自己,最需要注意的就是结束条件,否则可能就是死循环,导致内存溢出 public T a(Object x,Object y) { if(条件true) { a(x1,y1); } els ...
- Spring之Quartz定时任务和Cron表达式详解
1.定时业务逻辑类 public class ExpireJobTask { /** Logger */ private static final Logger logger = LoggerFact ...
- 添加SAP_ALL权限
更新usr04,ust04,usrbf2这三张表 REPORT ZTESTCREATEUSER. data: l_USR04 LIKE USR04 , l_UST04 LIKE UST04 , l_P ...
- MFC-[转]基于MFC的ActiveX控件开发
作者:lidan | 出处:博客园 | 2012/3/13 16:10:34 | 阅读22次 ActiveX 控件是基于组件对象模型 (COM) 的可重用软件组件,广泛应用于桌面及Web应用中.在VC ...
- Bootstrap 历练实例 - 折叠(Collapse)插件事件
事件 下表列出了折叠(Collapse)插件中要用到的事件.这些事件可在函数中当钩子使用. 事件 描述 实例 show.bs.collapse 在调用 show 方法后触发该事件. $('#ident ...
- Java - Java 中的三种 ClassLoader
1.虚拟机类加载器(称为“bootstrap class loader”),它本身没有父类加载器,它负责加载虚拟机的内置类,由于它是用C.C++写的,所以Java无法拿到其class文件,返回的都是空 ...
- python基础 字典排序
stus = [ {"name":"zhang","age":18}, {"name":"lisi" ...
- 二十四、MySQL ALTER命令
MySQL ALTER命令 当我们需要修改数据表名或者修改数据表字段时,就需要使用到MySQL ALTER命令. 开始本章教程前让我们先创建一张表,表名为:testalter_tbl. root@ho ...