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/ ...
随机推荐
- leetcode第39题--Combination Sum II
题目: Given a collection of candidate numbers (C) and a target number (T), find all unique combination ...
- Asp.Net Identity 深度解析 之 注册登录的扩展
关于权限每个系统都有自己的解决方案,今天我们来讨论一下微软的权限框架Asp.Net Identity ,介绍如下 http://www.asp.net/identity 这里不在赘余. 很多人认为 ...
- VS2010新建Web网站与新建Web应用程序的区别
在Visual Studio 2010中,除了可以使用“创建Web应用程序”的方式来构建自己的Web项目之外,还可以通过创建“Web网站”的方式来构建Web项其中,Web网站的创建方法:打开Visua ...
- mysql 基础之CURD
原文:mysql 基础之CURD 增删改查基本语法学习 增: insert Insert 3问: 1: 插入哪张表? 2: 插入哪几列? 3: 这几列分别插入什么值? Insert into Tabl ...
- Extension+NVelocity
VS Extension+NVelocity系列(二)——让VS支持 NVelocity的智能提示(上) 一.基础概念 应该庆幸的是,VS的插件是靠着MEF实现而不是MAF,这让你所做的工作减轻了 ...
- EF的四种开发模式
EF提供了四种开发模式,具体如下:(转载)Code First(New DataBase) :在代码中定义类和映射关系并通过model生成数据库,使用迁移技术更新数据库.Code First(Exis ...
- Javascript中布尔运算符的高级应用
对象检测语句:var W3CDOM = document.getElementsByTagName && document.createElement 为了执行运算符&& ...
- AngularJS 3
AngularJS 源码分析3 本文接着上一篇讲 上一篇地址 回顾 上次说到了rootScope里的$watch方法中的解析监控表达式,即而引出了对parse的分析,今天我们接着这里继续挖代码. $w ...
- Windows Forms框架编程
<Windows Forms框架编程>节选 第九章 设计模式与原则 软件设计模式(Design pattern)是一套被反复使用的代码设计经验总结.使用设计模式是为了可重用代码.让代码 ...
- [RM 状态机详解4] RMNode状态机详解
摘要 RMNode状态机是ResourceManager的四个状态机(RMApp,RMAppAttempt,RMContainer,RMNode)中最简单的一个,状态机如图1所示.RMNode是Res ...