商品评分效果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.移出每个星星时 ...
随机推荐
- erlang通讯解析浮点数的一些问题
这两天我弟弟遇到一个比较有意思的问题.他在前端协定数据协议的时候用到了float和double,所以他想问float和double在erlang后端中是如何解析的.我之前写协议也很少用到浮点数,所以也 ...
- Linux系统 Centos7/Centos6.8 yum命令在线安装 MySQL5.6
Linux系统 Centos7 yum命令在线安装 MySQL5.6 标签: centosmysqlyum 2015-11-18 17:21 707人阅读 评论(0) 收藏 举报 分类: Linux ...
- maven 搭建springMvc+mybatis
1.在resource文件夹下创建Configure.xml <?xml version="1.0" encoding="UTF-8"?> < ...
- iQuery stop()
jQuery stop() 方法 jQuery stop() 方法用于停止动画或效果,在它们完成之前. stop() 方法适用于所有 jQuery 效果函数,包括滑动.淡入淡出和自定义动画. 语法 $ ...
- Unicode字符集
Unicode字符集的出现是为了弥补ASCII码只能表示128个字符的限制.在实际应用中,如若我们想显示汉字或日文等等,显然使用ASCII是不可能的.Unicode占用了两个字节,即16位,能表示的字 ...
- django ORM 简单示例简绍
简单 models 操作 class Host(models.Model): nid = models.AutoField(primary_key=True) #Nid为主键 hostname = m ...
- System Center Configuration Manager 2016 域准备篇(Part2)
对于" 服务器角色",请选择" Active Directory域服务",当系统提示您添加Active Directory域服务所需的功能时,请选择" ...
- Java JDBC链接Oracle数据库
package com.test.test; import java.io.FileInputStream;import java.io.FileNotFoundException;import ja ...
- ABAP Netweaver和git的快捷方式
Netweaver Jerry的SAPGUI收藏夹管理工具:链接 git 我笔记本上有很多github仓库,每次切换仓库,我不想敲很长的cd命令.比如现在我需要手敲下面的命令进入一个Java仓库: c ...
- IOS @param view 需要获取层级结构的view
- (void)applicationDidBecomeActive:(UIApplication *)application { NSString *str = [self digView:self ...