介绍 & lt; ! DOCTYPE html>
& lt; html lang=癳n"祝辞
& lt; head>
,& lt; meta charset=癠TF-8"比;
,& lt; title>星级评价(可半星)& lt;/title>
,& lt; style>
.xin才能{高度:25 px;,背景:,url(图片/x.png);,位置:,相对;,显示:,inline-block;}
.xin 才能跨越{显示:块;,高度:,25 px;,背景:,#法郎;,位置:,绝对的,,左:,0;,:,0;z - index:, 1;转型:,0.2年代;}
.xin 才能ul{绝对位置:,,,:,0;,左:,0;,高度:,25 px;,保证金:,0;,填充:,0;,list-style:,没有;}
.xin 才能;ul 李{浮动:左;,宽度:,18 px;,高度:,25 px;}
.fensu才能{显示:inline-block;}
,& lt;/style>
& lt;/head>
& lt; body>
,& lt; input 类型=癶idden", title=?0“, https://www.yisu.com/zixun/value=" 3.5 ">
<>脚本
var输入=document.querySelectorAll(“输入(type=隐藏)”);
input.forEach(函数(_input) {
var Div=document.createElement (" Div ");
Div.className=蚌巍?
Div.style.width=18 * (_input。标题| | 5)* 2 +“px”;
_input.parentNode.insertBefore (Div, _input);
var跨度=document.createElement(“跨度”);
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(跨度);
var ul=document.createElement (“ul”);
Div.appendChild (ul);
(var=0;我<(_input。标题| | 5)* 2,我+ +){
李var=document.createElement(“李”);
li.title=(i + 1)/2 +“分”;
ul.appendChild(李);
}
李var=ul.querySelectorAll(“李”);
LI.forEach(函数(_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);
}）>
这篇文章给大家分享的是有关JavaScript实现星级评价效果的方法的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
具体内容如下
<强>背景图片实现
图片是宽度:36 px;高度:25 px;
背景是白色,中间一个空的五角星,空的边缘有一像素的边框;(不然就看不到了),