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: ...
随机推荐
- 个人卡付款sql
select arap_djfb.billdate as 单据日期, bd_corp.unitname as 付款单位, arap_djfb.zy as 付款摘要, bd_cubasdoc.custc ...
- 黄聪:手机移动站Web响应式开发工具Viewport Resizer插件(360浏览器、谷歌Chrome浏览器兼容)
插件作用: 移植自@MalteWassermann的脚本,一个可以测试响应式布局的chrome扩展. 插件截图: 插件下载地址(需FQ): https://chrome.google.com/webs ...
- [Android-2A] -仿IOS微信滑动删除_SwipeListview左滑删除例子
https://yunpan.cn/cueUIQkRafQrH (提取码:7ec1) 关于这样类似的例子网上的代码很多,最近发现这个例子里的代码在开发中会遇到一系列的问题.比如ListView的OnI ...
- PO_PO系列 - 收货管理分析(案例)
2014-07-01 Created By BaoXinjian
- hdu 5441 travel 离线+带权并查集
Time Limit: 1500/1000 MS (Java/Others) Memory Limit: 131072/131072 K (Java/Others) Problem Descript ...
- 把centos 的mysql 重装一下 把原来的lnmp删除,怎么备份还原数据库
mysqldump --lock-all-tables -u root -p --databases mydb > /opt/database/mydb.sql,或者直接备份mysql的数据存储 ...
- 转-Android 之 使用File类在SD卡中读取数据文件
如果需要在程序中使用sdcard进行数据的存储,那么需要在AndroidMainfset.xml文件中 进行权限的配置: Java代码: <!-- 在sd中创建和删除文件的权限 --> ...
- android webview type=file文件上传,安卓端代码
http://stackoverflow.com/questions/5907369/file-upload-in-webview http://blog.csdn.net/longlingli/ar ...
- HTTP Get请求URL最大长度
各浏览器HTTP Get请求URL最大长度并不相同,几类常用浏览器最大长度及超过最大长度后提交情况如下: IE6.0 :url最大长度2083个字符,超过最大长度后无法提 ...
- 视频最后用使用了function(i,ot)一笔带过,但我看不懂i和ot这2个参数的具体值是怎么获取得到的,能不能说一下参数传递过程?
使用函数设置文本内容: $(selector).text(function(index,currentcontent)) 参数描述content必需.规定被选元素的新文本内容.注意: 特殊字符会被编 ...