快捷導(dǎo)航

javascript模擬評(píng)分控件實(shí)現(xiàn)方法

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

這篇文章主要介紹了javascript模擬評(píng)分控件實(shí)現(xiàn)方法,涉及javascript操作頁(yè)面元素與樣式的相關(guān)技巧,需要的朋友可以參考下

本文實(shí)例講述了javascript模擬評(píng)分控件實(shí)現(xiàn)方法。分享給大家供大家參考。具體實(shí)現(xiàn)方法如下：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>動(dòng)態(tài)設(shè)置style(評(píng)分效果)</title>
<script type="text/javascript">
//查找一個(gè)元素在數(shù)組中的索引位置
function ArrayIndexOf(arr, element) {
  for (var i = 0; i < arr.length; i++) {
  if (arr[i] == element) {
   return i;
  }
 }
  return -1;
}
function IniEvent() {
  var tbl = document.getElementById("tblRating");
  var tds = tbl.getElementsByTagName("td");
  for (var i = 0; i < tds.length; i++) {
 var td = tds[i];
 td.onclick = tdOnClick;
 td.style.cursor = "pointer"; //設(shè)置光標(biāo)手型
  }
}
function tdOnClick() {
  var tbl = document.getElementById("tblRating");
  var tds = tbl.getElementsByTagName("td");
  //查找當(dāng)前點(diǎn)擊的td的索引
   var index = ArrayIndexOf(tds, this);
  //之前的td改為紅色
  for (var i = 0; i <= index; i++) {
  tds[i].style.background = "red";
  }
  //之后的td改為白色
  for (var i = index + 1; i < tds.length; i++) {
   tds[i].style.background = "white";
  }
}
</script>
</head>
<body onload="IniEvent()">
  <table id="tblRating">
  <tr>
    <td>☆</td>
    <td>☆</td>
    <td>☆</td>
    <td>☆</td>
    <td>☆</td>
  </tr>
  </table>
</body>
</html>

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

您可能感興趣的文章:

相關(guān)文章

CocosCreator入門教程之用TS制作第一個(gè)游戲
這篇文章主要介紹了CocosCreator入門教程之用TS制作第一個(gè)游戲，對(duì)TypeScript感興趣的同學(xué)，一定要看一下
2021-04-04
JSON格式的鍵盤編碼對(duì)照表
這篇文章主要介紹了JSON格式的鍵盤編碼對(duì)照表,本文給出英文鍵名、對(duì)應(yīng)數(shù)值和中文注釋,需要的朋友可以參考下
2015-01-01
javascript使用定時(shí)函數(shù)實(shí)現(xiàn)跳轉(zhuǎn)到某個(gè)頁(yè)面
定時(shí)跳轉(zhuǎn)到某個(gè)頁(yè)面，比如跳轉(zhuǎn)到一個(gè)頁(yè)面處理完任務(wù)，然后又回到原來的頁(yè)面，這個(gè)用javascript的定時(shí)函數(shù)很容易實(shí)現(xiàn)
2013-12-12
javascript內(nèi)置對(duì)象Math案例總結(jié)分析
今天總結(jié)一下javascript 內(nèi)置對(duì)象Math中的函數(shù)用法，順帶寫一下常見的案例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步
2022-03-03
深入探尋javascript定時(shí)器
這篇文章主要介紹了深入探尋javascript定時(shí)器，十分的詳盡，十分全面,需要的朋友可以參考下
2015-01-01
在JavaScript中構(gòu)建ArrayList示例代碼
這篇文章主要介紹了在JavaScript中構(gòu)建ArrayList，很實(shí)用,需要的朋友可以參考下
2014-09-09
原生javascript實(shí)現(xiàn)連連看游戲
這篇文章主要為大家詳細(xì)介紹了原生javascript實(shí)現(xiàn)連連看游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-01-01
LayUi使用switch開關(guān),動(dòng)態(tài)的去控制它是否被啟用的方法
今天小編就為大家分享一篇LayUi使用switch開關(guān),動(dòng)態(tài)的去控制它是否被啟用的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2019-09-09
JS使用JSON作為參數(shù)實(shí)例分析
這篇文章主要介紹了JS使用JSON作為參數(shù),結(jié)合實(shí)例形式分析了ajax傳遞json數(shù)據(jù)及數(shù)據(jù)處理的相關(guān)技巧,需要的朋友可以參考下
2016-06-06
不同瀏覽器javascript變量作用域的處理方法
javascript變量作用域在不同瀏覽器的實(shí)現(xiàn)處理代碼
2008-09-09