javascript鼠標(biāo)滑動(dòng)評(píng)分控件完整實(shí)例

更新時(shí)間：2015年05月13日 15:36:48 作者：永遠(yuǎn)愛好寫程序

這篇文章主要介紹了javascript鼠標(biāo)滑動(dòng)評(píng)分控件實(shí)現(xiàn)方法,以完整實(shí)例形式詳細(xì)分析了javascript操作鼠標(biāo)事件及頁面元素樣式實(shí)現(xiàn)評(píng)分效果的方法,需要的朋友可以參考下

本文實(shí)例講述了javascript鼠標(biāo)滑動(dòng)評(píng)分控件。分享給大家供大家參考。具體實(shí)現(xiàn)方法如下：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>javascript鼠標(biāo)滑動(dòng)控件</title>
<script type="text/javascript">
function ArrayIndexof(arr, inElement) {
  for (var i = 0; i < arr.length; i++) {
 if (arr[i] == inElement) {
   return i;
 }
  }
  return -1;
}
function GetTDS() {
  var tbl = document.getElementById("tblMain");
  var tds = tbl.getElementsByTagName("td");
  return tds;      
}
function iniEvent() {
  var tds = GetTDS();
  for (var i = 0; i < tds.length; i++) {
 td = tds[i];
 td.onmouseover = TdOnMouseOver;
  }
  var tbl = document.getElementById("tblMain");
  tbl.onmouseout = TableMouseOut;
}
function SetRating(tdTmp) {
  var tds = GetTDS();
  var index = ArrayIndexof(tds, tdTmp);
  for (var i = 0; i <= index; i++) {
 td = tds[i];
 td.innerHTML = "★";
  }
  for (var i = index + 1; i < tds.length; i++) {
 td = tds[i];
 td.innerHTML = "☆";
  }
}
function TdOnMouseOver() {
  SetRating(this);
}
//鼠標(biāo)離開表格后自動(dòng)清除
function TableMouseOut() {
  var tds = GetTDS();
  for (var i = 0; i < tds.length; i++) {
 td = tds[i];
 td.innerHTML = "☆";         
  }
}
</script>
</head>
<body onload="iniEvent()">
<table id="tblMain" border="1">
<tr>
  <td>☆</td>
  <td>☆</td>
  <td>☆</td>
  <td>☆</td>
  <td>☆</td>
</tr>
</table>
</body>
</html>

希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

微信小程序頁面滾動(dòng)到指定位置代碼實(shí)例
這篇文章主要介紹了微信小程序頁面滾動(dòng)到指定位置代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2019-09-09
JavaScript限定復(fù)選框的選擇個(gè)數(shù)示例代碼
有10個(gè)復(fù)選框，用戶最多只能勾選3個(gè)，否則就灰掉所有復(fù)選框，具體實(shí)現(xiàn)思路及代碼如下，感興趣的朋友可以參考下，希望對(duì)大家有所幫助
2013-08-08
Bootstrap頁面縮小變形的快速解決辦法
bootstrap布局是應(yīng)用得很廣泛的一種網(wǎng)頁布局方法，下面通過本文給大家介紹bootstrap頁面縮小變形的快速解決辦法，需要的朋友參考下吧
2017-02-02
js-FCC算法-No repeats please字符串的全排列(詳解)
下面小編就為大家?guī)硪黄猨s-FCC算法-No repeats please字符串的全排列(詳解)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-05-05
Echarts?graph關(guān)系圖的使用入門級(jí)教程
近期需要使用echarts關(guān)系圖,這里給大家總結(jié)下,這篇文章主要給大家介紹了關(guān)于Echarts?graph關(guān)系圖使用的相關(guān)資料,文中給出了詳細(xì)的代碼介紹,需要的朋友可以參考下
2024-01-01
js 數(shù)組隨機(jī)字符串(廣告不重復(fù))
今天一個(gè)網(wǎng)友想讓他的廣告隨機(jī)顯示，每次刷新廣告的內(nèi)容都不一樣，經(jīng)過參考源碼網(wǎng)站分析就是通過下面代碼實(shí)現(xiàn)，特分享下方便需要的朋友
2013-08-08
js 驗(yàn)證身份證信息有效性
根據(jù)身份證號(hào)碼編碼規(guī)則對(duì)其進(jìn)行有效性驗(yàn)證，具體實(shí)現(xiàn)如下，大家可以參考下
2014-03-03
JS中的一些常用的函數(shù)式編程術(shù)語
這篇文章主要介紹了JS中的一些常用的函數(shù)式編程術(shù)語,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，
2019-06-06
Js-$.extend擴(kuò)展方法使方法參數(shù)更靈活
在ＪＳ里，我們的方法參數(shù)通常使用JQ的$.extend擴(kuò)展方法來實(shí)現(xiàn),感興趣的朋友可以了解下
2013-01-01
JS Array.slice 截取數(shù)組的實(shí)現(xiàn)方法
這篇文章主要介紹了JS Array.slice 截取數(shù)組的實(shí)現(xiàn)方法,因?yàn)槲覀冃枰刂埔幌麻L(zhǎng)度，需要的朋友可以參考下
2016-01-01