五星好评html编写,五星好评.html

五星好评

body{

/*文字大小12px，1.5倍的行间距 ，arial 一种字体*/

font: 12px/1.5 arial;

color: #666;

}

ul,p{

margin: 0;

padding: 0;

}

#star{

width: 600px;

margin: 10px auto;

position: relative;

}

#star span,

#star ul{

float: left;

margin: 0 5px;

}

#star li{

list-style: none;

float: left;

width: 24px;

height: 24px;

cursor: pointer;

background-image: url(star.png);

background-repeat: no-repeat;

/*background-size: 0 200%; */

}

#star li.on{

background-position: 0 -28px;

}

#star p{

position: absolute;

top: 20px;

width: 160px;

/*background-color: lightskyblue;*/

}

#star p em{

display: block;

font-style: normal;

color: #f60;

}

#star strong{

color: #f60;

}

点击星星评分

window.onload = function () {

var star = document.querySelector('#star');

var aLi = star.getElementsByTagName('li');

var span = star.getElementsByTagName('span')[1];

var p = star.getElementsByTagName('p')[0];

var ul = star.getElementsByTagName('ul')[0];

var message = [

"很不满意|差得太离谱，与卖家描述的严重不符，非常不满",

"不满意|部分有破损，与卖家描述的不符，不满意",

"一般|质量一般，没有卖家描述的那么好",

"满意|质量不错，与卖家描述的基本一致，还是挺满意的",

"非常满意|质量非常好，与卖家描述的完全一致，非常满意"

];

// 用来记录点击的第几个li标签

var isStar =0;

// split('|') 按照指定的字符分隔字符串，返回一个数组

// console.log(message[0].split('|')[1]);

for (var i = 0; i < aLi.length; i++) {

// 记录每个li标签的索引值

aLi[i].index = i;

// 当鼠标进来时，实现对应的星星

aLi[i].onmouseover = function () {

showStar(this.index + 1);

//显示评语和评分

p.innerHTML=''+(this.index+1)+'分 '+

message[this.index].split('|')[0] + ' '+

message[this.index].split('|')[1];

//改变p标签的位置 this.offsetWidth(li的宽度)

p.style.left=ul.offsetLeft+this.offsetWidth*this.index+'px';

}

// 点击li标签之后，对评分进行处理

aLi[i].οnclick=function(){

// 当点击第几个li标签时，isStar的值就是几

isStar=this.index+1;

// 清空p标签的内容

p.innerHTML='';

// 显示右侧最终的评语

span.innerHTML=''+isStar+'分('+message[this.index].split('|')[1]+')';

}

// 当鼠标离开时，恢复星星初始状态

aLi[i].onmouseout = function () {

showStar(isStar);

// 清空p标签内容

p.innerHTML='';

}

}

function showStar(index) {

// console.log(index);

for (var i = 0; i < aLi.length; i++) {

// 根据所点到的li标签显示星星的数量，比如：点到

// 第二个星星，就应该让前两个星星展示

// if (i < index) {

// aLi[i].className = 'on';

// } else {

// aLi[i].className = '';

// }

aLi[i].className=i

}

}

}

一键复制

编辑

Web IDE

原始数据

按行查看

历史