JavaScript實現(xiàn)星級評分
更新時間：2017年01月12日 14:14:04 作者：森林長
本文主要分享了JavaScript實現(xiàn)星級評分的實例代碼，具有一定的參考價值，下面跟著小編一起來看下吧
事件onmouseover
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>JavaScript星級評分</title>
<style type="text/css">
*{margin:0;padding:0;}
.wrapper{height:20px;padding:5px;width:130px;margin:100px auto 10px;}
</style>
<script type="text/javascript">
function ArrayIndexOf(arr, element) {
for (var i = 0; i < arr.length; i++) {
if (arr[i] == element) {
return i;
}
}
return -1;
}
function GetTds() {
var tbl = document.getElementById("tblMain");
var tds = tbl.getElementsByTagName("td");
return tds;
}
function InitEvent() {
var tds=GetTds();
for (var i = 0; i < tds.length; i++) {
var td = tds[i];
td.onmouseover = TdOnclick;
td.style.cursor = "pointer";
}
}
function TdOnclick() {
var tds = GetTds();
var index = ArrayIndexOf(tds, this);
for (var i = 0; i <=index; i++) {
var td = tds[i];
td.innerHTML = "★";
}
for (var j = index + 1; j < tds.length; j++) {
var td = tds[j];
td.innerHTML = "☆";
}
}
</script>
</head>
<body onload="InitEvent()" class="wrapper">
<table id="tblMain">
<tr><td>☆</td><td>☆</td><td>☆</td><td>☆</td><td>☆</td></tr>
</table>
</body>
</html>
以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！
相關(guān)文章
javascript橋接橋接設(shè)計模式（Bridge Pattern）是一種結(jié)構(gòu)型設(shè)計模式,它用于將抽象部分與其具體實現(xiàn)部分分離,使它們可以獨立地變化,本文將通過代碼示例詳解的給大家介紹一下JS橋接模式,需要的朋友可以參考下2023-08-08
javascript中的self和this用法小結(jié)
本篇文章主要是對javascript中的self和this用法進行了詳細的總結(jié)介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-02-02
JavaScript中使用Object.prototype.toString判斷是否為數(shù)組
這篇文章主要介紹了JavaScript中使用Object.prototype.toString判斷是否是數(shù)組,本文講解了Object.prototype.toString相關(guān)知識,并給出了判斷數(shù)組的實現(xiàn)代碼,使用本文方法同樣可以判斷javascrpty的其它數(shù)據(jù)類型,需要的朋友可以參考下2015-04-04
這篇文章主要介紹了javascript事件監(jiān)聽與事件委托,結(jié)合實例形式詳細分析了javascript事件監(jiān)聽與事件委托相關(guān)原理、用法與操作注意事項,需要的朋友可以參考下2019-08-08
使用p5.js實現(xiàn)動態(tài)GIF圖片臨摹重現(xiàn)
這篇文章主要為大家詳細介紹了使用p5.js實現(xiàn)動態(tài)GIF圖片臨摹重現(xiàn)，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-10-10
原生JS實現(xiàn)網(wǎng)絡(luò)彩票投注效果
分享一個最近模仿市面彩票系統(tǒng)寫個小案例，沒有使用任何后臺，從投注到開獎再到返獎都是用原生JS實現(xiàn)的。2016-09-09
這篇文章主要介紹了JS實現(xiàn)的豎向折疊菜單代碼,涉及JavaScript動態(tài)遍歷頁面元素及樣式修改的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-10-10
年底了各個公司都有抽獎活動，我也寫了一個超級簡單的代碼來實現(xiàn)抽獎效果，這里沒有華麗的Css3效果，但卻有短小精悍的js代碼。2015-01-01
xml文檔轉(zhuǎn)換程序的一個小應(yīng)用，幾行代碼生成餅圖。源代碼打包提供。2010-11-11
微信小程序js文件改變參數(shù)并在視圖上及時更新【推薦】
這篇文章主要介紹了微信小程序js文件改變參數(shù)并在視圖上及時更新的實現(xiàn)代碼，本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友參考下吧2018-06-06