我一直将自学的系统叫做CSS框架,其实这是一个Css+Javascript+Html的代码框架,更准确的说应该叫前台框架。这类前台框架,我一直用先写CSS代码,后写JavaScript,最后记录HTML代码,实际在开发中,我喜欢不停地切换Css,Html和JavaScript之间撰写代码,这样不会因为我记性差而忘记,但这样开发有一个毛病,就是效率有点低,整体把握不好。这节主要实现星星评价功能,我采用背景填充+宽度,可现实半颗星。具体效果如下:
.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);}
这段代码中我们需要两张图片,一张是没有选择的灰白色星星图片,一张是选择的黄色的星星图片。
这里分两段代码,一段代码是实现,鼠标滑入评价星星变为黄色,滑出恢复原样,单击显示最后您选择的评分,星星对应显示黄色,并返回调用函数。代码如下:
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);
}
上述无论是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})
需要源代码的请单击下载。