JavaScript實(shí)現(xiàn)商品評(píng)價(jià)五星好評(píng)
更新時(shí)間：2020年11月30日 08:40:26 作者：_Yoke
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)商品評(píng)價(jià)五星好評(píng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了JavaScript實(shí)現(xiàn)商品評(píng)價(jià)五星好評(píng)的具體代碼，供大家參考，具體內(nèi)容如下
一.效果展示
二.代碼實(shí)現(xiàn)
1.html代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>好評(píng)</title>
<link rel="stylesheet" type="text/css" href="../js7/css/reset.css" />
<link rel="stylesheet" type="text/css" href="css/myTest3.css" />
<script type="text/javascript">
window.onload = function(){
ul = document.getElementById('star');
lis = ul.getElementsByTagName('li');
for (var i = 0; i < lis.length; i++) {
lis[i].onclick = function(){
//被用戶點(diǎn)擊后彈框并提示分?jǐn)?shù)
//獲取當(dāng)前對(duì)象的對(duì)象名
var className = this.className;//nostart
//重新定義class,并彈出評(píng)分
ul.className = "nostar " + className;
var score = this.getElementsByTagName('a')[0].title;
console.log(score);
alert('評(píng)分：' + score);
}
}
}
</script>
</head>
<body>
<ul class="nostar " id="star">
<li class="onestar"><a title="1分"></a></li>
<li class="twostar"><a title="2分"></a></li>
<li class="threestar"><a title="3分"></a></li>
<li class="fourstar"><a title="4分"></a></li>
<li class="fivestar"><a title="5分"></a></li>
</ul>
</body>
</html>
2.css代碼
body{
padding: 200px 600px;
}
.nostar{
width: 80px;
height: 16px;
background: url(../img/star-matrix.gif) no-repeat;
position: relative;
}
.nostar li {
width: 16px;
height: 16px;
float: left;
}
.nostar li a{
display: inline-block;
width: 16px;
height: 16px;
position: absolute;
/* text-indent: -999px; */
/* 層級(jí)關(guān)系*/
z-index: 10;
}
.nostar li a:hover{
/* 將a的大小變化 width 80 */
left: 0px;
width: 80px;
background: url(../img/star-matrix.gif) no-repeat;
z-index: 5;
}
.onestar{background-position: 0 -16px;}
.twostar{background-position: 0 -32px;}
.threestar{background-position: 0 -48px;}
.fourstar{background-position: 0 -64px;}
.fivestar{background-position: 0 -80px;}
.nostar li.onestar a:hover{ background-position: 0 -96px ;}
.nostar li.twostar a:hover{ background-position: 0 -112px ;}
.nostar li.threestar a:hover{ background-position: 0 -128px ;}
.nostar li.fourstar a:hover{ background-position: 0 -144px ;}
.nostar li.fivestar a:hover{ background-position: 0 -160px ;}
3.代碼下載
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
基于JS實(shí)現(xiàn)經(jīng)典的井字棋游戲
井字棋作為我們?cè)谏蠈W(xué)時(shí)代必玩的一款連珠游戲，承載了很多人的童年記憶。本文我們就用HTML、css、js來實(shí)現(xiàn)一款井字棋游戲，感興趣的可以動(dòng)手嘗試一下2022-04-04
十個(gè)開發(fā)人員面臨的最常見的JavaScript問題總結(jié)
今天，JavaScript?是幾乎所有現(xiàn)代?Web?應(yīng)用的核心。這就是為什么JavaScript問題，以及找到導(dǎo)致這些問題的錯(cuò)誤，是?Web?發(fā)者的首要任務(wù)。本文總結(jié)了十個(gè)常見的問題及解決方法，需要的可以參考一下2022-11-11
這篇文章主要給大家介紹了關(guān)于three.js引入glsl文件并高亮顯示代碼的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-03-03
這篇文章主要介紹了JS實(shí)現(xiàn)的豎向折疊菜單代碼,涉及JavaScript動(dòng)態(tài)遍歷頁面元素及樣式修改的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)幻燈片輪播圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-08-08
JS中精巧的自動(dòng)柯里化實(shí)現(xiàn)方法
給大家詳細(xì)分析了JS中精巧的自動(dòng)柯里化實(shí)現(xiàn)方法并通過代碼實(shí)例分析了過程和原理，參考學(xué)習(xí)下吧。2017-12-12
Echarts圖表如何利用formatter自定義tooltip的內(nèi)容和樣式
這篇文章主要給大家介紹了關(guān)于Echarts圖表如何利用formatter自定義tooltip的內(nèi)容和樣式的相關(guān)資料,echarts的圖表配置非常的靈活自由,但是不熟悉的時(shí)候容易不知道怎么配置,需要的朋友可以參考下2023-06-06
JavaScript如何調(diào)用C++模塊中的函數(shù)
這篇文章主要給大家介紹了關(guān)于JavaScript如何調(diào)用C++模塊中函數(shù)的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2024-01-01
原生JS控制多個(gè)滾動(dòng)條同步跟隨滾動(dòng)效果
本文要探討的是，當(dāng)這兩個(gè)容器元素的內(nèi)容都超出了容器高度，即都出現(xiàn)了滾動(dòng)框的時(shí)候，如何在其中一個(gè)容器元素滾動(dòng)時(shí)，讓另外一個(gè)元素也隨之滾動(dòng)2017-12-12
本文主要介紹了不同DOM級(jí)別下的事件處理程序，同時(shí)介紹了事件冒泡和捕獲的觸發(fā)原理和方法。熟練地使用不同級(jí)別的DOM事件并且解決相應(yīng)的瀏覽器兼容性問題對(duì)我們的前端項(xiàng)目開發(fā)會(huì)很有幫助。2016-12-12