JavaScript實現(xiàn)星級評價效果
更新時間：2019年05月17日 16:25:18 作者：wangsq-js
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)星級評價效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了js實現(xiàn)星級評價效果展示的具體代碼，供大家參考，具體內(nèi)容如下
背景圖片實現(xiàn)
圖片是width:36px; height:25px;
背景是白色，中間一個空的五角星，空的邊緣有一像素的邊框；（不然就看不到了）；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>星級評價(可半星)</title>
<style>
.xin{height: 25px; background: url(images/x.png); position: relative; display: inline-block;}
.xin span{display: block; height: 25px; background: #f60; position: absolute; left: 0; top: 0;z-index: -1;transition: 0.2s;}
.xin ul{position: absolute; top: 0; left: 0; height: 25px; margin: 0; padding: 0; list-style: none;}
.xin ul li{float: left; width: 18px; height: 25px;}
.fensu{display: inline-block;}
</style>
</head>
<body>
<input type="hidden" title="10" value="3.5">
<input type="hidden" title="5" value="1.5">
<script>
var input=document.querySelectorAll("input[type=hidden]");
input.forEach(function(_input){
var Div=document.createElement("div");
Div.className="xin";
Div.style.width=18*(_input.title || 5)*2 + "px";
_input.parentNode.insertBefore(Div,_input);
var span=document.createElement("span");
span.style.width=(_input.value)*36+"px";
var p=document.createElement("p");
p.innerHTML=_input.value+"分";
p.className="fensu";
Div.parentNode.insertBefore(p,Div);
Div.parentNode.insertBefore(Div,p);
Div.appendChild(span);
var ul=document.createElement("ul");
Div.appendChild(ul);
for(var i=0;i<(_input.title || 5)*2;i++){
var li=document.createElement("li");
li.title=(i+1)/2+"分";
ul.appendChild(li);
}
var LI=ul.querySelectorAll("li");
LI.forEach(function(_li,x){
_li.onclick=function(){
_input.value=(x+1)/2;
span.style.width=18*(x+1)+"px";
p.innerHTML=_input.value+"分";
}
_li.onmouseover=function(){
span.style.width=18*(x+1)+"px";
}
_li.onmouseout=function(){
span.style.width=(_input.value)*36+"px";
}
})
var br=document.createElement("br");
p.parentNode.insertBefore(br,p);
p.parentNode.insertBefore(p,br);
})
</script>
</body>
</html>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
兩種方法實現(xiàn)在HTML頁面加載完畢后運行某個js
這篇文章主要介紹了通過兩種方法實現(xiàn)在HTML頁面加載完畢后運行某個js,需要的朋友可以參考下2014-06-06
先給大家說下游戲規(guī)則：在變化數(shù)量的顏色塊里找出一個不同顏色的塊點擊。下面通過js代碼給大家分享找不同色塊的游戲?qū)崿F(xiàn)方法，需要的朋友參考下吧2017-07-07
如何使用wheelnav.js構(gòu)建酷炫的動態(tài)導(dǎo)航菜單
本文主要介紹一種基于SVG的web動態(tài)導(dǎo)航組件,通過這個組件可以實現(xiàn)很多豐富酷炫的效果,首先介紹這款wheelnav.js的相關(guān)知識,然后結(jié)合代碼講解如何在html頁面中創(chuàng)建其對象,接著講解wheelnav的一些屬性和方法,最后給出基于wheelnav的實際成果,喜歡的朋友一起學(xué)習(xí)吧2024-06-06
這篇文章主要介紹了JavaScript判斷文件上傳類型的方法,可實現(xiàn)針對重復(fù)的內(nèi)容也能觸發(fā)onchange事件,需要的朋友可以參考下2014-09-09
微信公眾號開發(fā) 實現(xiàn)點擊返回按鈕就返回到聊天界面
本文分享了微信公眾號開發(fā)實現(xiàn)點擊返回按鈕就返回到聊天界面的示例代碼。需要的朋友一起來看下吧2016-12-12
javascript使用遞歸算法求兩個數(shù)字組合功能示例
這篇文章主要介紹了javascript使用遞歸算法求兩個數(shù)字組合功能,結(jié)合實例形式分析了JS基于遞歸算法的數(shù)組遍歷、判斷、轉(zhuǎn)換等相關(guān)操作技巧,需要的朋友可以參考下2017-01-01
使用iconfont字體圖標(biāo)可以隨意改變大小,避免圖片放大失真問題,但是值得注意,修改字體圖標(biāo)大小的時候使用font-size屬性,并且顏色可隨意更改,本文給大家介紹iconfont的N種使用方法,感興趣的朋友一起看看吧2024-01-01
這篇文章主要為大家詳細介紹了原生JavaScript實現(xiàn)幻燈片效果，文中安裝步驟介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-02-02
下面小編就為大家?guī)硪黄猨s自調(diào)用匿名函數(shù)的三種寫法(推薦)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08
微信小程序webview中監(jiān)聽返回按鈕實現(xiàn)步驟
在微信小程序中webview返回鍵是一個非常實用的功能,它允許用戶在嵌入的網(wǎng)頁中返回到上一個頁面,這篇文章主要給大家介紹了微信小程序webview中監(jiān)聽返回按鈕的實現(xiàn)步驟,需要的朋友可以參考下2024-08-08