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/ ...
随机推荐
- Spring IOC 之Bean作用域
当你创建一个bean定义的时候,你创建了一份通过那种bean定义的bean的创建类的真正实力的处方.bean的定义是一个处方 的想法是很重要的的.因为这意味着,对于一个类你可以创建很多对象实例从一个单 ...
- solr中重跑索引
solr与.net系列课程(八)solr中重跑索引的注意事项 solr与.net系列课程(八)solr中重跑索引的注意事项 我们如果在项目中使用solr,那肯定就是把数据库中的数据跑进solr服务 ...
- ubuntu下使用openocd+jlink进行STM32开发调试
安装openocd就不用多说了,使用 apt-get install openocd 这个命令就可以做到. 对于使用stm32w系列的MCU,需要下载新的openocd-0.7及以上版本才能支持.0. ...
- SQL Server的链接服务器(MySQL、Oracle、Ms_sql、Access、SYBASE)
原文:SQL Server的链接服务器(MySQL.Oracle.Ms_sql.Access.SYBASE) 一.使用 Microsoft OLE DB Provider For ODBC 链接MyS ...
- 【MS SQL】通过执行计划来分析SQL性能
原文:[MS SQL]通过执行计划来分析SQL性能 如何知道一句SQL语句的执行效率呢,只知道下面3种: 1.通过SQL语句执行时磁盘的活动量(IO)信息来分析:SET STATISTICS IO O ...
- 通过SqlClr制作Sql自动化批量执行脚本
原文:通过SqlClr制作Sql自动化批量执行脚本 通过SqlClr制作Sql自动化批量执行脚本 在与同事一起做项目时,看到同事用sqlclr做批量执行脚本,感觉挺新奇的就上网搜集资料自己模仿跟做了个 ...
- 【转】删除修改Eclipse里的SVN账户
转自http://msongli.iteye.com/blog/1186648 引自: http://wanghongxu.iteye.com/blog/539806 http://jxdwuao.i ...
- 用RequireJS优化Wijmo Web页面
用RequireJS优化Wijmo Web页面 上周Wijmo 2014 V2版本刚刚发布(下载地址), 有网友下载后发现仅仅使用了40个Widgets的一小部分,还需要加载全部的jquery.wi ...
- 动态注册HttpModule
动态注册HttpModule 2014-06-05 08:58 by 汤姆大叔, 757 阅读, 4 评论, 收藏, 编辑 文章内容 通过前面的章节,我们知道HttpApplication在初始化的时 ...
- html+js+ashx+easyui+ado.net权限管理系统
分享一个html+js+ashx+easyui+ado.net权限管理系统 EasyUI.权限管理 这是个都快被搞烂了的组合,但是easyui的确好用,权限管理在项目中的确实用.一直以来博客园里也 ...