<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
td
{
width:50px;
height:50px;
border:1px solid #808080;
cursor:pointer;
}
</style>
<script type="text/javascript">
window.onload=function()
{
var tds = document.getElementsByTagName("td"); for(var i=0;i<tds.length;i++)
{ tds[i].onmouseenter = OnMouseEnter;
tds[i].onmouseleave = OnMouseLeave;
tds[i].onclick = OnClick; }
}
//判断是否被点击,是 就保存黄色;不是 就变为白色
var isClick = false; //鼠标点击td保留背景色
function OnClick()
{
if (!isClick)
{
OnMouseEnter;
isClick = true;
}
} //鼠标停留td背景色变黄
function OnMouseEnter()
{
var previous = this.previousElementSibling;
this.style.backgroundColor = "yellow";
while (previous)
{
previous.style.backgroundColor = "yellow";
previous = previous.previousElementSibling;
} }
//鼠标移开td背景色变白
function OnMouseLeave()
{
if (!isClick)
{
var previous = this.previousElementSibling;
this.style.backgroundColor = "white";
while (previous) {
previous.style.backgroundColor = "white";
previous = previous.previousElementSibling;
}
}
} </script>
</head>
<body>
<div style="text-align:center;">
<table style="margin:0 auto;">
<thead>
评分后不可更改
</thead>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
</table>
</div>
</body>
</html>

鼠标点击后可保留颜色。

页面效果如下:

JS实现星级评分的更多相关文章

  1. js实现星级评分效果(非常规5个li代码)

    1. 前言 此方案受到JS单行写一个评级组件启发,自己写了一个简单Demo. 功能有正常滑动,动态显示实心星星个数:当点击确认,则保持当前的实心星星个数:再移动时未点击,则离开后还是保持之前的状态. ...

  2. js 实现星级评分

    最近的项目中有一个星级评分的需求,  自己就写了一下, 由于可能一个页面要用到多个,就采用了面向对象的写法. 用到的png图片也放到这里.    js要用到jquery. css: .sr-star{ ...

  3. js实现星级评分之方法一

    利用一个星级评分的小案例,来逐步封装js星级评分插件. 从最基础的js知识,通过一个小的demo,逐步学习js的面向对象知识. 从浅到深,逐步递进. 图片素材 <!DOCTYPE html> ...

  4. 原生JS实现-星级评分系统

    今天我又写了个很酷的实例:星级评分系统(可自定义星星个数.显示信息) sufuStar.star();使用默认值5个星星,默认信息 var msg = [........]; sufuStar.sta ...

  5. js css 点亮 星级评分

    利用css 和 js 实现星级评分 <!DOCTYPE html> <html lang="en"> <head> <meta chars ...

  6. 原生javascript星级评分

    写个最简单的原生js的星级评分: <div id="rank" class="pingfen"> <ul> <li>< ...

  7. js星级评分点击星级评论打分效果

    html代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...

  8. js星级评分点击星级评论打分效果--收藏--转载

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. javascript星级评分(多个)

    JS打多个类型星级评分: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http: ...

随机推荐

  1. mongdb3.0用户验证问题

    1.  用户验证方式更改: Mongodb2.6的默认用户验证方式是:MONGODB-CR Mongodb3.0的默认用户验证方式是:SCRAM-SHA-1 因为新的验证方式在spring和java中 ...

  2. Java compiler level does not match the version of the installed Java project facet. springmvc1 和 Target runtime Apache Tomcat v7.0 is not defined.

    Java compiler level does not match the version of the installed Java project facet.springmvc1 : Targ ...

  3. smartgit document merge

    'Normal' Merge In case of a normal merge, a merge commit with at least two parent commits (i.e., the ...

  4. JAVA 理解封装的概念,private私有的,public公有的

    封装就是把不想或者不该告诉别人的东西隐藏起来,把可以告诉别人的公开. 做法:修改属性的访问权限来限制对属性的访问,并为每一个属性创建一对取值和赋值的方法,用于对这些属性的访问 通过封装,可以在给属性赋 ...

  5. JAVA 数组排序

    一.数组升序排序 实例: import java.util.Arrays; //导入数组处理 public class Test{ public static void main(String[] a ...

  6. 新找到的一款字体 fantasque-sans-mono

    http://www.ipreferjim.com/2015/03/your-ides-font-matters-fantasque-sans-mono/

  7. *(volatile unsigned long *) 语法

    #define GPJ2CON (*(volatile unsigned long *) 0xE0200280) 开始对于上面的语法不太理解,但通过拆分,我们可以看的更明白: 1.(unsigned ...

  8. tomcat7 内存溢出 java.lang.OutOfMemoryError: Java heap space

    在{tomcat7_home}bin/catalina.sh最上面添加: JAVA_OPTS="-server -Xms800m -Xmx800m -XX:PermSize=128M -XX ...

  9. NLog文章系列——如何配置NLog(转)

    NLog使用方法 作者:Jaros?aw Kowalski <> 翻译:CrazyCoder(由衷感谢他的热心!!) 原文:http://www.nlog-project.org/conf ...

  10. C++学习49 对二进制文件的读写操作

    二进制文件不是以ASCII代码存放数据的,它将内存中数据存储形式不加转换地传送到磁盘文件,因此它又称为内存数据的映像文件.因为文件中的信息不是字符数据,而是字节中的二进制形式的信息,因此它又称为字节文 ...