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 相关文章推荐
js中window.open打开一个新的页面
Aug 10 Javascript
使用jQuery将多条数据插入模态框的实现代码
Oct 08 Javascript
$.extend 的一个小问题
Jun 18 Javascript
jQuery采用连缀写法实现的折叠菜单效果
Sep 18 Javascript
javascript正则表达式之分组概念与用法实例
Jun 16 Javascript
javascript实现随机生成DIV背景色
Jun 20 Javascript
数据结构中的各种排序方法小结(JS实现)
Jul 23 Javascript
微信小程序 选择器(时间,日期,地区)实例详解
Nov 16 Javascript
jQuery编写textarea输入字数限制代码
Mar 23 jQuery
JavaScript中的return布尔值的用法和原理解析
Aug 14 Javascript
详解vue引入子组件方法
Feb 12 Javascript
基于Vue2实现移动端图片上传、压缩、拖拽排序、拖拽删除功能
Jan 05 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
2020最新CPU的性能排名
2020/04/02 数码科技
php重定向的三种方法分享
2012/02/22 PHP
php中替换字符串中的空格为逗号','的方法
2014/06/09 PHP
Yii框架分页实现方法详解
2017/05/20 PHP
php中isset与empty函数的困惑与用法分析
2019/07/05 PHP
js继承 Base类的源码解析
2008/12/30 Javascript
jQuery each()方法的使用方法
2010/03/18 Javascript
jquery教程限制文本框只能输入数字和小数点示例分享
2014/01/13 Javascript
详解ECharts使用心得总结
2016/12/06 Javascript
js实现常见的工具条效果
2017/03/02 Javascript
JavaScript中Hoisting详解 (变量提升与函数声明提升)
2017/08/18 Javascript
浅谈node中的cluster集群
2018/06/02 Javascript
详解Angular Forms中自定义ngModel绑定值的方式
2018/12/10 Javascript
Vue 组件复用多次自定义参数操作
2020/07/27 Javascript
[49:17]DOTA2-DPC中国联赛 正赛 Phoenix vs Dynasty BO3 第三场 1月26日
2021/03/11 DOTA
Python中利用原始套接字进行网络编程的示例
2015/05/04 Python
初步剖析C语言编程中的结构体
2016/01/16 Python
Python中利用Scipy包的SIFT方法进行图片识别的实例教程
2016/06/03 Python
python Opencv将图片转为字符画
2021/02/19 Python
python Spyder界面无法打开的解决方法
2018/04/27 Python
Python3导入CSV文件的实例(跟Python2有些许的不同)
2018/06/22 Python
python实现顺时针打印矩阵
2019/03/02 Python
python 含子图的gif生成时内存溢出的方法
2019/07/07 Python
PyTorch: 梯度下降及反向传播的实例详解
2019/08/20 Python
Python爬虫使用浏览器cookies:browsercookie过程解析
2019/10/22 Python
手把手教你Python yLab的绘制折线图的画法
2019/10/23 Python
Python实现邮件发送的详细设置方法(遇到问题)
2021/01/18 Python
奢华时尚的独特视角:La Garçonne
2018/06/07 全球购物
美国购买新书和二手书网站:Better World Books
2018/10/31 全球购物
加大码胸罩、内裤和服装:Just My Size
2019/03/21 全球购物
师范毕业生求职自荐信
2013/09/25 职场文书
班风口号
2014/06/18 职场文书
领导班子四风查摆对照检查材料思想汇报
2014/10/05 职场文书
2014年生活老师工作总结
2014/12/23 职场文书
幼儿体育课教学反思
2016/02/16 职场文书
PHP使用QR Code生成二维码实例
2021/07/07 PHP