JS实现星级评分
<!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实现星级评分的更多相关文章
- js实现星级评分效果(非常规5个li代码)
1. 前言 此方案受到JS单行写一个评级组件启发,自己写了一个简单Demo. 功能有正常滑动,动态显示实心星星个数:当点击确认,则保持当前的实心星星个数:再移动时未点击,则离开后还是保持之前的状态. ...
- js 实现星级评分
最近的项目中有一个星级评分的需求, 自己就写了一下, 由于可能一个页面要用到多个,就采用了面向对象的写法. 用到的png图片也放到这里. js要用到jquery. css: .sr-star{ ...
- js实现星级评分之方法一
利用一个星级评分的小案例,来逐步封装js星级评分插件. 从最基础的js知识,通过一个小的demo,逐步学习js的面向对象知识. 从浅到深,逐步递进. 图片素材 <!DOCTYPE html> ...
- 原生JS实现-星级评分系统
今天我又写了个很酷的实例:星级评分系统(可自定义星星个数.显示信息) sufuStar.star();使用默认值5个星星,默认信息 var msg = [........]; sufuStar.sta ...
- js css 点亮 星级评分
利用css 和 js 实现星级评分 <!DOCTYPE html> <html lang="en"> <head> <meta chars ...
- 原生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/ ...
- javascript星级评分(多个)
JS打多个类型星级评分: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http: ...
随机推荐
- opacity兼容写法
.opacity{ position: absolute; top: 0px;left: 0px; background: #000; filter:alpha(opacity=50); /* IE ...
- Redis数据库?-Redis的Virtual Memory介绍(转)
众所周知,Redis是一个内存数据库,和Memcached类似,所有数据存在内存中,当然,Redis有rdb和appendonlyfile两个落地文件,可以对断电停机等故障下的数据恢复做一些保证.但是 ...
- 在Visual Studio 2010/2012中 找不到创建WebService的项目模板
参考文章: http://blog.sina.com.cn/s/blog_6d545999010152wb.html 在 Visual Studio 2010 或者2012的新建 Web 应用程序或者 ...
- [UEditor]百度编辑器配置总结
前端配置文件ueditor.config.js 前端有两个重要的配置属性: UEDITOR_HOME_URL: 配置百度编辑器的资源目录路径,你可以手动指定此路径,默认是有URL变量指定,而URL变量 ...
- AP_AP系列 - 费用报表分析(案例)
2014-07-08 Created By BaoXinjian
- python (2)xpath与定向爬虫
内容来自:极客学院,教学视频: 写在前面: 提取Item 选择器介绍 我们有很多方法从网站中提取数据.Scrapy 使用一种叫做 XPath selectors的机制,它基于 XPath表达式. 这是 ...
- c#创建、保存excel正常执行
源地址:http://blog.csdn.net/hui_shixu/article/details/5785029
- C# 操作网页标签
1 元素的 显示与隐藏 C# HTML: <div Id="div1" runat="server" style="display:non ...
- gRPC 的 RoadMap 20160325 更新
gRPC是一个高性能.通用的开源RPC框架,其由Google主要面向移动应用开发并基于HTTP/2协议标准而设计,基于ProtoBuf(Protocol Buffers)序列化协议开发,且支持众多开发 ...
- svn排除不想要的目录上传的实践技巧
使用SVN时,经常会遇到,有些目录,上传到SVN上,不想最持同步中,尤其像.net中的bin.obj目录,在网上找了很多资料,都是说setting-->General-->Subversi ...