商品评分效果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.移出每个星星时 ...
随机推荐
- Ecshop如何解决Deprecated: preg_replace()报错
今天安装Ecshop后,运行出现各种问题,其中 Deprecated: preg_replace() 之类的报错最多,下面贴出解决方案: 错误原因: preg_replace() 函数中用到的修饰符 ...
- 构建第一个Spring Boot2.0应用之Controller(三)
Controller控制器主要是接收浏览器请求.下面说一说@Controller注解和@RestController的区别: (1)@Controller类中的方法可以直接通过返回String跳转到j ...
- jqGrid中multiselect: true 操作checkbox
在jqGrid中设置multiselect: true可以实现全选的操作,但怎么设置被选中的checkbox里面的值呢,做法如下:jQuery("#listTable").jqGr ...
- xp_delete_files不起作用解决方法
xp_delete_file用来删除数据库的备份文件和维护计划文本报告.示例: ,N'D:\Backup\Diff',N'bak',N'2019-05-29T10:03:41' 第一个参数表示文件类型 ...
- Vultr VPS建站攻略 – 一键安装LNMP无面板高性能WEB环境
在"Vultr VPS建站攻略 - 一键安装宝塔面板架设LNMP/LAMP Web环境"文章中,VULTR中文网分享到我们常用的可视化面板宝塔面板安装在VULTR VPS主机中建站 ...
- jQuery_2_常规选择器-高级选择器
高级选择器 层次选择器 1. 后代选择器 $("#d1 p") 获取追溯到的多个DOM对象 (无论儿子还是孙子都是后代) 2. 子选择器 $("# ...
- UVA 340 Master-Mind Hints 猜密码游戏(水)
题意: 给一串密码(第一行),接着再给你很多行猜测,针对每行猜测,输出两个数字,分表代表:同一列上匹配的个数,不同列上匹配的个数.注:匹配指的是一次,一旦配对,不能再与其他配对. 思路: 每接受一行猜 ...
- linux 命令——40 wc (转)
Linux系统中的wc(Word Count)命令的功能为统计指定文件中的字节数.字数.行数,并将统计结果显示输出. 1.命令格式: wc [选项]文件... 2.命令功能: 统计指定文件中的字节数. ...
- 初见微服务之RESTful API
1. REST名称由来 REST全称为Representational State Transfer,即表述性状态转移,最早由Roy Feilding博士在世纪之交(2000年)提出,喜欢追根溯源的朋 ...
- 解决 Unable to convert MySQL date/time value to System.DateTime
C#读取MySql时,如果存在字段类型为date/datetime时的可能会出现以下问题“Unable to convert MySQL date/time value to System.DateT ...