javascript鼠標滑動評分控件完整實例
更新時間：2015年05月13日 15:36:48 作者：永遠愛好寫程序
這篇文章主要介紹了javascript鼠標滑動評分控件實現(xiàn)方法,以完整實例形式詳細分析了javascript操作鼠標事件及頁面元素樣式實現(xiàn)評分效果的方法,需要的朋友可以參考下
本文實例講述了javascript鼠標滑動評分控件。分享給大家供大家參考。具體實現(xiàn)方法如下：
<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程序設(shè)計有所幫助。
相關(guān)文章
這篇文章主要介紹了微信小程序頁面滾動到指定位置代碼實例,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-09-09
JavaScript限定復(fù)選框的選擇個數(shù)示例代碼
有10個復(fù)選框，用戶最多只能勾選3個，否則就灰掉所有復(fù)選框，具體實現(xiàn)思路及代碼如下，感興趣的朋友可以參考下，希望對大家有所幫助2013-08-08
bootstrap布局是應(yīng)用得很廣泛的一種網(wǎng)頁布局方法，下面通過本文給大家介紹bootstrap頁面縮小變形的快速解決辦法，需要的朋友參考下吧2017-02-02
js-FCC算法-No repeats please字符串的全排列(詳解)
下面小編就為大家?guī)硪黄猨s-FCC算法-No repeats please字符串的全排列(詳解)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05
Echarts?graph關(guān)系圖的使用入門級教程
近期需要使用echarts關(guān)系圖,這里給大家總結(jié)下,這篇文章主要給大家介紹了關(guān)于Echarts?graph關(guān)系圖使用的相關(guān)資料,文中給出了詳細的代碼介紹,需要的朋友可以參考下2024-01-01
今天一個網(wǎng)友想讓他的廣告隨機顯示，每次刷新廣告的內(nèi)容都不一樣，經(jīng)過參考源碼網(wǎng)站分析就是通過下面代碼實現(xiàn)，特分享下方便需要的朋友2013-08-08
根據(jù)身份證號碼編碼規(guī)則對其進行有效性驗證，具體實現(xiàn)如下，大家可以參考下2014-03-03
這篇文章主要介紹了JS中的一些常用的函數(shù)式編程術(shù)語,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，2019-06-06
在ＪＳ里，我們的方法參數(shù)通常使用JQ的$.extend擴展方法來實現(xiàn),感興趣的朋友可以了解下2013-01-01
JS Array.slice 截取數(shù)組的實現(xiàn)方法
這篇文章主要介紹了JS Array.slice 截取數(shù)組的實現(xiàn)方法,因為我們需要控制一下長度，需要的朋友可以參考下2016-01-01