JavaScript实现星级评分


Posted in Javascript onJanuary 12, 2017

事件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;}
 </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 相关文章推荐
JQuery与iframe交互实现代码
Dec 24 Javascript
JS控件ASP.NET的treeview控件全选或者取消(示例代码)
Dec 16 Javascript
javascript中Number对象的toString()方法分析
Dec 20 Javascript
javascript获取元素离文档各边距离的方法
Feb 13 Javascript
javascript模块化简单解析
Apr 07 Javascript
JQuery 传送中文乱码问题的简单解决办法
May 24 Javascript
将form表单通过ajax实现无刷新提交的简单实例
Oct 12 Javascript
js中的DOM模拟购物车功能
Mar 22 Javascript
vue-music 使用better-scroll遇到轮播图不能自动轮播问题
Dec 03 Javascript
Layui给switch添加响应事件的例子
Sep 03 Javascript
js点击事件的执行过程实例分析【冒泡与捕获】
Apr 11 Javascript
基于p5.js 2D图像接口的扩展(交互实现)
Nov 30 Javascript
angular2倒计时组件使用详解
Jan 12 #Javascript
JavaScript中localStorage对象存储方式实例分析
Jan 12 #Javascript
利用VUE框架,实现列表分页功能示例代码
Jan 12 #Javascript
js中常用的Math方法总结
Jan 12 #Javascript
Vue数据驱动模拟实现4
Jan 12 #Javascript
移动端点击态处理的三种实现方式
Jan 12 #Javascript
js手机号批量滚动抽奖实现代码
Apr 17 #Javascript
You might like
PHP 网页过期时间的控制代码
2009/06/29 PHP
php制作简单模版引擎
2016/04/07 PHP
iis6手工创建网站后无法运行php脚本的解决方法
2017/06/08 PHP
PHP实现简单登录界面
2019/10/23 PHP
任意位置显示html菜单
2007/02/01 Javascript
jquery怎样实现ajax联动框(二)
2013/03/08 Javascript
JS实现控制表格只显示行边框或者只显示列边框的方法
2015/03/31 Javascript
JavaScript 事件对象介绍
2015/04/13 Javascript
JavaScript使用DeviceOne开发实战(二) 生成调试安装包
2015/12/01 Javascript
jquery 判断是否支持Placeholder属性的方法
2017/02/07 Javascript
js实现产品缩略图效果
2017/03/10 Javascript
Node.js利用debug模块打印出调试日志的方法
2017/04/25 Javascript
jQuery 防止相同的事件快速重复触发方法
2018/02/08 jQuery
[43:58]DOTA2上海特级锦标赛C组败者赛 Newbee VS Archon第二局
2016/02/27 DOTA
在Python的gevent框架下执行异步的Solr查询的教程
2015/04/16 Python
简单解决Python文件中文编码问题
2015/11/22 Python
简单谈谈Python中的元祖(Tuple)和字典(Dict)
2017/04/21 Python
pycharm下查看python的变量类型和变量内容的方法
2018/06/26 Python
python3+pyqt5+itchat微信定时发送消息的方法
2019/02/20 Python
Python实现一个带权无回置随机抽选函数的方法
2019/07/24 Python
对Python 中矩阵或者数组相减的法则详解
2019/08/26 Python
Python hashlib加密模块常用方法解析
2019/12/18 Python
python sleep和wait对比总结
2021/02/03 Python
详解如何通过H5(浏览器/WebView/其他)唤起本地app
2017/12/11 HTML / CSS
英国知名奢侈品包包品牌:Milli Millu
2016/12/22 全球购物
Lookfantastic台湾:英国彩妆美发保养购物网
2018/03/26 全球购物
自行车租赁公司创业计划书
2014/01/28 职场文书
优秀护士演讲稿
2014/04/30 职场文书
个人务虚会发言材料
2014/10/20 职场文书
商铺门面租房协议书
2014/10/21 职场文书
2015年人民调解工作总结
2015/05/18 职场文书
《莫泊桑拜师》教学反思
2016/02/22 职场文书
CocosCreator如何实现划过的位置显示纹理
2021/04/14 Javascript
php将xml转化对象的实例详解
2021/11/17 PHP
JavaScript的function函数详细介绍
2021/11/20 Javascript
前端实现滑动按钮AJAX与后端交互的示例代码
2022/02/24 Javascript