Css框架之星星评价功能

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

一、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);}

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

二、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);
					}
				}
			}
		},

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

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); }

三、Html代码

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

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

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

<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.评分功能需要两个参数,一是json数据,一些基本属性,如下表。

序号 参数名 默认值 说明
1 title 标题: 评分显示标题
2 starNumber 5 显示星星数量
3 onestarScore 1 每颗星星的分数

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

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

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

序号 参数名 默认值 说明
1 title 标题: 宝贝描述:
2 starNumber 5 显示星星数量
3 onestarScore 1 每颗星星的分数
4 scoreToal 0 显示总分数

具体代码如下:

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

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

你可能感兴趣的:(css,JavaScript,css,前端,javascript,html)