javascript滑鼠滑動評分控制項完整實例_javascript技巧
- WBOY原創
- 2016-05-16 15:59:231156瀏覽
本文實例講述了javascript滑鼠滑動評分控制項。分享給大家供大家參考。具體實作方法如下：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>javascript鼠标滑动控件</title>
<script type="text/javascript">
function ArrayIndexof(arr, inElement) {
for (var i = 0; i < arr.length; i++) {
if (arr[i] == inElement) {
return i;
}
}
return -1;
}
function GetTDS() {
var tbl = document.getElementById("tblMain");
var tds = tbl.getElementsByTagName("td");
return tds;
}
function iniEvent() {
var tds = GetTDS();
for (var i = 0; i < tds.length; i++) {
td = tds[i];
td.onmouseover = TdOnMouseOver;
}
var tbl = document.getElementById("tblMain");
tbl.onmouseout = TableMouseOut;
}
function SetRating(tdTmp) {
var tds = GetTDS();
var index = ArrayIndexof(tds, tdTmp);
for (var i = 0; i <= index; i++) {
td = tds[i];
td.innerHTML = "★";
}
for (var i = index + 1; i < tds.length; i++) {
td = tds[i];
td.innerHTML = "☆";
}
}
function TdOnMouseOver() {
SetRating(this);
}
//鼠标离开表格后自动清除
function TableMouseOut() {
var tds = GetTDS();
for (var i = 0; i < tds.length; i++) {
td = tds[i];
td.innerHTML = "☆";
}
}
</script>
</head>
<body onload="iniEvent()">
<table id="tblMain" border="1">
<tr>
<td>☆</td>
<td>☆</td>
<td>☆</td>
<td>☆</td>
<td>☆</td>
</tr>
</table>
</body>
</html>
希望本文所述對大家的javascript程式設計有所幫助。
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn