商品评分效果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.移出每个星星时 ...
随机推荐
- Pod管理的iOS项目修改工程名
声明:本文大部分内容来自于以下网址,其余的部分是自己尝试的总结和补充. http://www.jianshu.com/p/5f088acecf64 完整修改iOS工程名1 http://www.cnb ...
- 从零开始的全栈工程师——js篇2.5
数据类型与全局属性 js的本质就是处理数据 数据来自于后台的数据库所以变量就起到一个临时存储数据的这作用ECMAscirpt 制定了js的数据类型 一.数据类型 1.基本数据类型 基本数据类型就是简单 ...
- NGSL + NAWL 单词表 以及学习网站
https://quizlet.com/44769538/nawl-1-1-50-flash-cards/ NAWL 网站 NAWL 单词表 + NGSL 单词表 http://www.newgen ...
- ArcGIS API for Javascript 使用缓冲区结果做query查询出现“esri.config.defaults.io.proxyUrl 尚未进行设置”错误
1.前言 在研究ArcGIS API for JavaScript时会遇到这样的问题,比如我们在做缓冲区分析时,用分析的范围作为空间查询query的参数,在执行结果中总是会看到“esri.config ...
- centOS7虚拟机和本机ping通
1.配置centOS虚拟机网卡 先设置桥接模式 此处的address要和本机的vmware在同一个网段 2.重启centOS网卡 3.关闭本机和虚拟机防火墙,防止ping不通 centOS命令: fi ...
- 绿盟堡垒机云服务(vSAS-H)
绿盟堡垒机云服务(vSAS-H) 平台: linux 类型: 虚拟机镜像 软件包: basic software devops nsfocus security 堡垒机 服务优惠价: 按服务商许可协议 ...
- Dll注入:注册表注入
在系统中每一个进程加载User32.dll时,会受到DLL_PROCESS_ATTACH通知,当User32.dll对其进行处理时,会取得注册表键值HKEY_LOCAL_MACHINE\Softwar ...
- java Vamei快速教程10 接口的继承和抽象类
作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! 在实施接口中,我们利用interface语法,将interface从类定义中独立出 ...
- UVALive 3530 Martian Mining(贪心,dp)
分析: 对于网格grid[i][j]如果放向上的管道,那么grid[i][k], k>j 就只能放向上的管道了. 那么定义dp[i][j]表示第i行,最后一个放向左的管道是j的最大总矿量. j ...
- flex在众多手机浏览器上的兼容方案(亲测华为手机自带浏览器)
如果项目使用构建工具,可加autoprefixer来处理,[autoprefixer使用指南] 纯手写css兼容代码,需给每个使用的属性加上属性前缀 /*display: flex;写法*/ span ...