javascript模擬評分控件實現(xiàn)方法
更新時間：2015年05月13日 15:13:52 作者：永遠愛好寫程序
這篇文章主要介紹了javascript模擬評分控件實現(xiàn)方法,涉及javascript操作頁面元素與樣式的相關技巧,需要的朋友可以參考下
本文實例講述了javascript模擬評分控件實現(xiàn)方法。分享給大家供大家參考。具體實現(xiàn)方法如下：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>動態(tài)設置style(評分效果)</title>
<script type="text/javascript">
//查找一個元素在數(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"; //設置光標手型
}
}
function tdOnClick() {
var tbl = document.getElementById("tblRating");
var tds = tbl.getElementsByTagName("td");
//查找當前點擊的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>
希望本文所述對大家的javascript程序設計有所幫助。
相關文章
這篇文章主要介紹了CocosCreator入門教程之用TS制作第一個游戲，對TypeScript感興趣的同學，一定要看一下2021-04-04
這篇文章主要介紹了JSON格式的鍵盤編碼對照表,本文給出英文鍵名、對應數(shù)值和中文注釋,需要的朋友可以參考下2015-01-01
javascript使用定時函數(shù)實現(xiàn)跳轉到某個頁面
定時跳轉到某個頁面，比如跳轉到一個頁面處理完任務，然后又回到原來的頁面，這個用javascript的定時函數(shù)很容易實現(xiàn)2013-12-12
今天總結一下javascript 內置對象Math中的函數(shù)用法，順帶寫一下常見的案例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步2022-03-03
這篇文章主要介紹了深入探尋javascript定時器，十分的詳盡，十分全面,需要的朋友可以參考下2015-01-01
這篇文章主要介紹了在JavaScript中構建ArrayList，很實用,需要的朋友可以參考下2014-09-09
這篇文章主要為大家詳細介紹了原生javascript實現(xiàn)連連看游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-01-01
LayUi使用switch開關,動態(tài)的去控制它是否被啟用的方法
今天小編就為大家分享一篇LayUi使用switch開關,動態(tài)的去控制它是否被啟用的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
這篇文章主要介紹了JS使用JSON作為參數(shù),結合實例形式分析了ajax傳遞json數(shù)據(jù)及數(shù)據(jù)處理的相關技巧,需要的朋友可以參考下2016-06-06
javascript變量作用域在不同瀏覽器的實現(xiàn)處理代碼2008-09-09