javascript模擬評分控件實現(xiàn)方法
更新時間：2015年05月13日 15:13:52 作者：永遠愛好寫程序
這篇文章主要介紹了javascript模擬評分控件實現(xiàn)方法,涉及javascript操作頁面元素與樣式的相關(guān)技巧,需要的朋友可以參考下
本文實例講述了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)設(shè)置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"; //設(shè)置光標手型
}
}
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程序設(shè)計有所幫助。
相關(guān)文章
這篇文章主要介紹了JS實現(xiàn)仿蘋果底部任務欄菜單效果代碼,可實現(xiàn)鼠標滑過顯示大圖標功能,涉及javascript鼠標事件及頁面元素遍歷并修改屬性的技巧,需要的朋友可以參考下2015-08-08
圖像放大鏡在很多網(wǎng)站中都扮演著重要的角色，大多數(shù)開發(fā)人員使用?jquery?來創(chuàng)建圖像放大鏡。在本教程中，我將向大家展示如何使用?HTML、CSS?和?JavaScript?制作一個簡單的圖像放大鏡，需要的可以參考一下2022-08-08
livereload工具實現(xiàn)前端可視化開發(fā)【推薦】
本文將介紹一個工具--livereload。這是一款能根據(jù)你本地文件(html、css、js)的變化，自動跟蹤刷新瀏覽器的實時刷新工具，有了這個工具，會大大減輕你刷新頁面的工作量。下面跟著小編一起來看下吧2016-12-12
下面小編就為大家分享一篇圖片加載完成再執(zhí)行事件的實例，具有很好的參考價值，一起跟隨小編過來看看吧，希望對大家有所幫助2017-11-11
最近在做一個項目，需要JS時間戳轉(zhuǎn)成C#里的時間，再把C#里的時間戳轉(zhuǎn)成JS的時間,就仔細研究了下js與C#進行轉(zhuǎn)換的注意要點，這里記錄下來，有需要的小伙伴自己拿走。2014-11-11
這篇文章主要介紹了iframe高度自適應及隱藏滾動條的實例詳解的相關(guān)資料,希望通過本文能幫助到大家，需要的朋友可以參考下2017-09-09
利用Javascript實現(xiàn)簡單的轉(zhuǎn)盤抽獎
這篇文章主要介紹了利用Javascript實現(xiàn)的簡單的轉(zhuǎn)盤抽獎，文中分享了兩種抽獎效果，一種是默認轉(zhuǎn)動，一種是需要點擊開始轉(zhuǎn)動的，并給出了晚上的示例代碼，需要的朋友可以參考借鑒，下面來一起看看吧。2017-02-02
WeUI是一套同微信原生視覺體驗一致的基礎(chǔ)樣式庫,由微信官方設(shè)計團隊為微信內(nèi)網(wǎng)頁和微信小程序量身設(shè)計,令用戶的使用感知更加統(tǒng)一,下面這篇文章主要給大家介紹了關(guān)于微信小程序使用擴展組件庫WeUI的相關(guān)資料,需要的朋友可以參考下2022-04-04
《JavaScript DOM 編程藝術(shù)》讀書筆記之JavaScript 圖片庫
這篇文章主要介紹了《JavaScript DOM 編程藝術(shù)》讀書筆記之JavaScript 圖片庫,需要的朋友可以參考下2015-01-01
javascript和jquery實現(xiàn)設(shè)置和移除文本框默認值效果代碼
這篇文章主要介紹了javascript和jquery實現(xiàn)設(shè)置和移除文本框默認值效果代碼,本文實現(xiàn)的是類似html5 placeholder（空白提示）一種效果,需要的朋友可以參考下2015-01-01