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插件开发方法(初学者)
Feb 03 Javascript
Event altKey,ctrlKey,shiftKey属性解析
Dec 18 Javascript
js数组循环遍历数组内所有元素的方法
Jan 18 Javascript
JS二维数组的定义说明
Mar 03 Javascript
基于Jquery+div+css实现弹出登录窗口(代码超简单)
Oct 27 Javascript
javascript 广告移动特效的实现代码
Jun 25 Javascript
Vue非父子组件通信详解
Jun 12 Javascript
AngularJS实现与后台服务器进行交互的示例讲解
Aug 13 Javascript
vuejs移动端实现div拖拽移动
Jul 25 Javascript
简单谈谈javascript高级特性
Sep 04 Javascript
Vue使用screenfull实现全屏效果
Sep 17 Javascript
如何在vue 中使用柱状图 并自修改配置
Jan 21 Vue.js
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
laravel请求参数校验方法
2019/10/10 PHP
Javascript Request获取请求参数如何实现
2012/11/28 Javascript
Javascript Boolean、Nnumber、String 强制类型转换的区别详细介绍
2012/12/13 Javascript
JavaScript动态创建div属性和样式示例代码
2013/10/09 Javascript
js 获取页面高度和宽度兼容 ie firefox chrome等
2014/05/14 Javascript
js使用html()或text()方法获取设置p标签的显示的值
2014/08/01 Javascript
JS是按值传递还是按引用传递
2015/01/30 Javascript
js获取form表单所有数据的简单方法
2016/08/18 Javascript
JavaScript数组去重的几种方法效率测试
2016/10/23 Javascript
AngularJS extend用法详解及实例代码
2016/11/15 Javascript
mongoose更新对象的两种方法示例比较
2017/12/19 Javascript
create-react-app构建项目慢的解决方法
2018/03/14 Javascript
基于vue-upload-component封装一个图片上传组件的示例
2018/10/16 Javascript
Vue + Elementui实现多标签页共存的方法
2019/06/12 Javascript
JS校验与最终登陆界面功能完整示例
2020/01/13 Javascript
JavaScript实现多文件下载方法解析
2020/08/07 Javascript
详解JavaScript 事件流
2020/09/02 Javascript
[05:41]2014DOTA2西雅图国际邀请赛 小组赛7月10日TOPPLAY
2014/07/10 DOTA
[55:44]OG vs NAVI 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
python中os模块详解
2016/10/14 Python
django实现前后台交互实例
2017/08/07 Python
python交互式图形编程实例(三)
2017/11/17 Python
Python中类的初始化特殊方法
2017/12/01 Python
Python 移动光标位置的方法
2019/01/20 Python
python3发送邮件需要经过代理服务器的示例代码
2019/07/25 Python
Django中reverse反转并且传递参数的方法
2019/08/06 Python
关于win10在tensorflow的安装及在pycharm中运行步骤详解
2020/03/16 Python
关于Python 中的时间处理包datetime和arrow的方法详解
2020/03/19 Python
python 制作简单的音乐播放器
2020/11/25 Python
网站性能延迟加载图像的五种技巧(小结)
2020/08/13 HTML / CSS
canvas版人体时钟的实现示例
2021/01/29 HTML / CSS
党校培训思想汇报
2013/12/30 职场文书
《满井游记》教学反思
2014/02/26 职场文书
机械设计及其自动化专业求职信
2014/06/09 职场文书
2015年新农村建设指导员工作总结
2015/07/24 职场文书
详解Spring Security如何在权限中使用通配符
2022/06/28 Java/Android