前端新手项目练习之星级评分
前端新手记录自己在网络上找到的前端练习项目。
项目简介
一个简单的星评分系统，鼠标移上去显示评分和描述，点击之后评分和描述直接显示在右侧。
星级评分系统.gif
html部分
html部分主体是一个列表，代表五颗星星，感觉列表在我的项目里出现有些频繁。。。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>星级评分系统</title>
<link rel="stylesheet" href="starMarkingSystem.css" type="text/css" />
<script src="starMarkingSystem.js" type="text/javascript" ></script>
</head>
<body>
<div id="star">
<span>点击星星就能打分</span>
<ul>
<li><a href="javascript:;">1</a></li>
<li><a href="javascript:;">2</a></li>
<li><a href="javascript:;">3</a></li>
<li><a href="javascript:;">4</a></li>
<li><a href="javascript:;">5</a></li>
</ul>
<span></span>
<p></p>
</div>
</body>
</html>
CSS部分
比较值得学习的地方是实现星星的部分，使用背景来显示星星，并将文字无限左移来进行隐藏。
body,div,ul,li,p {
margin: 0;
padding: 0;
}
body {
color: #666;
font: 12px/1.5 Arial;
}
ul {
list-style-type: none;
}
#star {
position: relative;
width: 600px;
margin: 10px auto;
}
#star ul, #star span {
float:left;
display: inline;
height: 19px;
line-height:19px;
}
#star ul {
margin: 0 10px;
}
#star li {
float: left;
width: 24px;
cursor: pointer;
text-indent: -9999px; /* 起到隐藏文字的效果 */
background: url(img/star.png) no-repeat;
}
#star strong {
color: #f60;
padding-left: 10px;
}
#star li.on {
background-position:0 -28px;
}
#star p {
position: absolute;
top: 20px;
width: 159px;
height: 60px;
display: none;
background: url(img/icon.gif) no-repeat;
padding: 7px 10px 0;
}
#star p em {
color: #f60;
display: block;
font-size: normal;
}
font属性
font可以在一个声明中声明所有字体属性。另外，当设置font-size的时候，可通过斜杠来设置行高（inline-height）例如12px/1.5代表字体大小12px,行高为12 * 1.5 = 18px。
text-indent属性
代表文本块中首行文本的缩进，如果设置为-9999px,可以实现文字的隐藏。
background属性
简写属性在一个声明中设置所有的背景属性，本项目用来设置background-image来设置背景图像，元素的背景占据了元素的全部尺寸，包括内边距和边框，但不包括外边距。background-repeat决定图像是否重复。
javascript部分
window.onload = function() {
var oStar = document.getElementById("star");
var aLi = oStar.getElementsByTagName("li");
var oUl = oStar.getElementsByTagName("ul")[0];
var oSpan = oStar.getElementsByTagName("span")[1];
var oP = oStar.getElementsByTagName("p")[0];
var i = iScore = iStar = 0;
var aMsg = [
"很不满意|差得太离谱，与卖家描述的严重不符，非常不满",
"不满意|部分有破损，与卖家描述的不符，不满意",
"一般|质量一般，没有卖家描述的那么好",
"满意|质量不错，与卖家描述的基本一致，还是挺满意的",
"非常满意|质量非常好，与卖家描述的完全一致，非常满意"
]
for(i = 1; i < aLi.length; i++) {
aLi[i - 1].index = i;
//鼠标移过显示分数
aLi[i - 1].onmouseover = function() {
fnPoint(this.index);
oP.style.display = "block";
oP.style.left = oUl.offsetLeft + this.index * this.offsetWidth - 104 + "px";
oP.innerHTML = "<em><b>" + this.index + "</b> 分" + aMsg[this.index - 1].match(/(.+)\|/)[1]
+ "</em>" + aMsg[this.index - 1].match(/\|(.+)/)[1];
};
//鼠标离开后恢复上次评分
aLi[i - 1].onmouseout = function() {
fnPoint();
oP.style.display = "none";
}
//点击后进行评分处理
aLi[i - 1].onclick = function() {
iStar = this.index;
oP.style.display = "none";
oSpan.innerHTML = "<strong>" + (this.index) + " 分</strong> (" +
aMsg[this.index - 1].match(/\|(.+)/)[1] + ")";
}
//评分处理
function fnPoint(iArg) {
iScore = iArg || iStar;
for(i = 0; i < aLi.length; i++) {
aLi[i].className = i < iScore ? "on" : "";
}
};
}
}
本项目javascript部分的主要知识点是如何给DOM元素添加事件，项目中为列表中的元素添加了onmouseover、onmouseout、onclick事件。
总结
通过这个星级评分系统主要是对DOM元素的操作和事件进行了了解
网友评论