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