Css框架之星星评价功能

我一直将自学的系统叫做CSS框架，其实这是一个Css+Javascript+Html的代码框架，更准确的说应该叫前台框架。这类前台框架，我一直用先写CSS代码，后写JavaScript，最后记录HTML代码，实际在开发中，我喜欢不停地切换Css，Html和JavaScript之间撰写代码，这样不会因为我记性差而忘记，但这样开发有一个毛病，就是效率有点低，整体把握不好。这节主要实现星星评价功能，我采用背景填充+宽度，可现实半颗星。具体效果如下：

一、Css代码

.myth-star {background: url(img/star-d.png);font-size: 0;line-height: 0;margin-right: 5px;}
		.myth-star span{width: 24px;height: 24px;display: inline-block;cursor: pointer;}
		.myth-star-show{background: url(img/star-s.png);}
1
2
3

这段代码中我们需要两张图片，一张是没有选择的灰白色星星图片，一张是选择的黄色的星星图片。

二、JavaScript代码

这里分两段代码，一段代码是实现，鼠标滑入评价星星变为黄色，滑出恢复原样，单击显示最后您选择的评分，星星对应显示黄色，并返回调用函数。代码如下：

star:function(options, callback){
			var defaults = {
				title:'评分：',
				starNumber: 5,
				onestarScore:1
			}
			var options = extend(defaults, options);
			//标题
			var objTitle = document.createElement("span");
			objTitle.innerHTML=defaults.title;
			objTitle.classList.add("float-left");
			this.appendChild(objTitle);
			//评分星星选择
			var objStarBg = document.createElement("div");
			objStarBg.classList.add("myth-star");
			objStarBg.classList.add("float-left");
			this.appendChild(objStarBg);
			//评分结果显示
			var scoreBox = document.createElement("strong");
			scoreBox.classList.add("float-left");
			this.appendChild(scoreBox);	
			//鼠标滑动显示评分星星，单击确定评分
			var isStar=true;			
			var starobj = new Array;
			for (var i = 0; i < defaults.starNumber; i++) {
				var obj = document.createElement("span");
				obj.id=i;
				starobj[i]=obj;
				objStarBg.appendChild(obj)
			}
			for (var i = 0; i < starobj.length; i++) {
				starobj[i].onmouseover=function(){
					if(isStar){
						for (var j = 0; j <= this.id; j++) {
							starobj[j].classList.add("myth-star-show");
							scoreBox.innerHTML = Number(defaults.onestarScore)*(Number(this.id)+1)+ "分";
						}
					}
				}
				starobj[i].onmouseleave=function(){
					if(isStar){
						for (var j = 0; j <= this.id; j++){
							starobj[j].classList.remove("myth-star-show");
						}
						scoreBox.innerHTML ="";
					}
				}
				starobj[i].onclick=function(){
					isStar=false;
					for (var j = 0; j < starobj.length; j++) {
						if(j<=this.id){
							starobj[j].classList.add("myth-star-show");
						}
						else
						{
							starobj[j].classList.remove("myth-star-show");
						}						
					}
					scoreBox.innerHTML = Number(defaults.onestarScore)*(Number(this.id)+1)+ "分";
					if (!callback) {
						return;
					}
					else{
						callback((Number(this.id)+1)*defaults.onestarScore);
					}
				}
			}
		},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68

另一段代码如下，这段代码主要实现，显示评分结果，可以半颗星星显示。

starshow:function(options, callback){
			var defaults = {
				title:"宝贝描述：",
				starNumber: 5,
				onestarScore:1,
				scoreToal:0
			}
			var options = extend(defaults, options);
			var objTitle = document.createElement("span");
			objTitle.innerHTML=defaults.title;
			objTitle.classList.add("float-left");
			this.appendChild(objTitle);
			var objStarBg = document.createElement("div");
			objStarBg.classList.add("myth-star");
			objStarBg.classList.add("float-left");
			objStarBg.style.width=Number(defaults.starNumber*24)+'px';;
			objStarBg.style.height="24px";
			objStarBg.innerHTML='
+(24*Number(defaults.scoreToal)/Number(defaults.onestarScore))+'px;height: 25px;" class="myth-star-show">
';
			this.appendChild(objStarBg);
			var scoreBox = document.createElement("strong");
			scoreBox.classList.add("float-left");
			if(defaults.scoreToal!=0)
			{
				scoreBox.innerHTML =defaults.scoreToal+"分";
			}
			this.appendChild(scoreBox);			
		}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

三、Html代码

上述无论是Css代码还是Javascript代码，均需要加入我们以前的基本框架内。html通过以下两行代码引入到Html中。

<link rel="stylesheet" href="css/myth.css">
<script src="js/myth.js">script>
1
2

下面代码是调用展示和调用：

<div class="mythBox mid">
	<div class="clearfix" id="mystart">div>	
	<div class="clearfix" id="mystart2">div>	
div>
<script>
	myth("#mystart").star({},function(d){
	console.log('您选择的评分是'+d+'分')
	});
	myth("#mystart2").starshow({title:"新宝贝评价：",scoreToal:2.5})
script>
1
2
3
4
5
6
7
8
9
10

四、参数说明

1.评分功能需要两个参数，一是json数据，一些基本属性，如下表。

我已在Javascript中已全部进行了默认设置。另一个参数是回调函数，回调函数返回选择评分。例如：

myth("#mystart").star({starNumber:6},function(d){
	console.log('您选择的评分是'+d+'分')
);
1
2
3

2.展示评分功能需要一个Json数据类型参数，我也在Javascript中已全部进行了默认设置，具体如下。

具体代码如下：

myth("#mystart2").starshow({title:"新宝贝评价：",scoreToal:2.5})
1

需要源代码的请单击下载。