JavaScript星级评分
事件onmouseover
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>JavaScript星级评分</title>
<style type="text/css">
*{margin:0;padding:0;}
.wrapper{height:20px;padding:5px;width:130px;margin:100px auto 10px;}
tr,td{font-size:66px;color:#000000;background:#ffffff;}
</style>
<script type="text/javascript">
function ArrayIndexOf(arr, element) {
for (var i = 0; i < arr.length; i++) {
if (arr[i] == element) {
return i;
}
}
return -1;
}
function GetTds() {
var tbl = document.getElementById("tblMain");
var tds = tbl.getElementsByTagName("td");
return tds;
}
function InitEvent() {
var tds=GetTds();
for (var i = 0; i < tds.length; i++) {
var td = tds[i];
td.onmouseover = TdOnclick;
td.style.cursor = "pointer"; }
}
function TdOnclick() {
var tds = GetTds();
var index = ArrayIndexOf(tds, this);
for (var i = 0; i <=index; i++) {
var td = tds[i];
td.innerHTML = "★";
}
for (var j = index + 1; j < tds.length; j++) {
var td = tds[j];
td.innerHTML = "☆";
}
} </script>
</head>
<body onload="InitEvent()" class="wrapper">
<table id="tblMain">
<tr><td>☆</td><td>☆</td><td>☆</td><td>☆</td><td>☆</td></tr>
</table>
</body>
</html>
JavaScript星级评分的更多相关文章
- javascript星级评分（多个）
JS打多个类型星级评分: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http: ...
- JavaScript星级评分，仿百度，增强版
JavaScript星级评分,仿百度,增强版 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" & ...
- 原生javascript星级评分
写个最简单的原生js的星级评分: <div id="rank" class="pingfen"> <ul> <li>< ...
- js星级评分点击星级评论打分效果
html代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...
- js星级评分点击星级评论打分效果--收藏--转载
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js实现星级评分效果（非常规5个li代码）
1. 前言 此方案受到JS单行写一个评级组件启发,自己写了一个简单Demo. 功能有正常滑动,动态显示实心星星个数:当点击确认,则保持当前的实心星星个数:再移动时未点击,则离开后还是保持之前的状态. ...
- jQuery动态星级评分效果实现方法
本文实例讲述了jQuery动态星级评分效果实现方法.分享给大家供大家参考.具体如下: 这里的jQuery星级评分代码,是大家都很喜欢的功能,目前广泛应用,本星级评分加入了动画效果,注意,如果要真正实现 ...
- js css 点亮 星级评分
利用css 和 js 实现星级评分 <!DOCTYPE html> <html lang="en"> <head> <meta chars ...
- 数组练习：各种数组方法的使用&&事件练习：封装兼容性添加、删除事件的函数&&星级评分系统
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- Linux下防火墙设置
Linux下开启/关闭防火墙命令 1) 永久性生效,重启后不会复原 开启:chkconfigiptables on 关闭:chkconfigiptables off 2) 即时生效,重启后复原 开启 ...
- leetcode第23题--Swap Nodes in Pairs
Problem: Given a linked list, swap every two adjacent nodes and return its head. For example,Given 1 ...
- WPF随手小记之二 ——改变DataGrid样式
大部分时候我们并不需要手动改变DataGrid的样式,因为用默认的其实也看得过去,而且在DataGrid中的数据也远比外观重要. 但总有时候,我们需要做点必要的UI修改来使DataGrid更美观. 一 ...
- PhotoShop基本工具 -- 移动工具
艺术或学习的东西吧, 爱好 比学编程还难 PS版本号 : PhotoShop CS6 1. 移动工具 (1) 工具栏和属性栏 工具栏 和 属性栏 : 左側的是工具栏, 每选中一个工具, 在菜单条的 ...
- Redmine（Ruby）配置经验
Redmine(Ruby)配置经验记录在配置Redmine邮件同步过程中遇到的各种问题与解决方法 1. 如何安装Redminehttp://www.redmine.org/projects/redmi ...
- SWAT—Samba WEB管理工具
本文试验环境是RHEL5.2+samba-swat-3.0.28.Server的IP是192.168.120.241. 1. swat介绍 SWAT:The Samba WEB Administr ...
- openGL线s的绘制
/** * 缓冲区工具类 */ public class BufferUtil { /** * 将浮点数组转换成字节缓冲区 */ public static ByteBuffer arr2ByteBu ...
- 路由模块router实现step1
hashchange事件 参考:http://www.cnblogs.com/rubylouvre/archive/2012/10/24/2730599.html 需要解决的问题: 1.IE6/7及兼 ...
- Java泛型学习笔记--Java泛型和C#泛型比较学习（一）
总结Java的泛型前,先简单的介绍下C#的泛型,通过对比,比较学习Java泛型的目的和设计意图.C#泛型是C#语言2.0和通用语言运行时(CLR)同时支持的一个特性(这一点是导致C#泛型和Java泛型 ...
- Xcode开发和调试总结
Xcode是iOS开发主要的工具.IDE.关于Xcode的细枝末节,可以参考苹果的官方文档或者众多的说明.此文档主要涉及常用开发和调试注意事项,参考版本为Xcode 5.1.1. 目标设置: 在此,我 ...