-
<!DOCTYPE html> <html leng="zh-CN"> <head> <meta charset="UTF-8"/> <title>星级评分--第二种方式</title> <style> body,ul,li{ padding: 0; margin: 0; } li{ list-style-type: none; } .rating{ width:150px; height: 27px; margin:100px auto; } .rating-item{ float:left; width:30px; height: 27px; background:url(img/start1.PNG) no-repeat; cursor:pointer; } </style> </head> <body> <ul class="rating" id="rating"> <li class="rating-item" title="很不好"></li> <li class="rating-item" title="不好"></li> <li class="rating-item" title="一般"></li> <li class="rating-item" title="好"></li> <li class="rating-item" title="很好"></li> </ul> <ul class="rating" id="rating2" > <li class="rating-item" title="很不好2"></li> <li class="rating-item" title="不好2"></li> <li class="rating-item" title="一般2"></li> <li class="rating-item" title="好2"></li> <li class="rating-item" title="很好2"></li> </ul> <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script> <script> var rating=(function(){ //点亮整颗 var LightEntire=function(el,options){ this.$el = $(el); this.$item = this.$el.find('.rating-item'); this.opts = options } LightEntire.prototype.init=function(){ this.lightOn(this.opts.num); if(!this.opts.readOnly){ this.bindEvent(); } } LightEntire.prototype.lightOn=function(num){ num=parseInt(num) this.$item.each(function (index) { if (index < num) { $(this).css('background-position', '0 -45px'); } else { $(this).css('background-position', '0 -15px'); } }) } LightEntire.prototype.bindEvent=function(){ var self=this; itemLength=self.$item.length; self.$el.on('mouseover', '.rating-item', function () { var num=$(this).index() + 1 self.lightOn(num); (typeof self.opts.select==='function') &&self.opts.select.call(this,num,itemLength); //触发select事件 self.$el.trigger('select',[num,itemLength]) }).on('click', '.rating-item', function () { self.opts.num = $(this).index() + 1; (typeof self.opts.chosen==='function') &&self.opts.chosen.call(this,self.opts.num,itemLength); self.$el.trigger('chosen',[self.opts.num,itemLength]) }).on('mouseout',function(){ self.lightOn(self.opts.num) }) }; //默认参数 var defaults={ num:0, readOnly:false, selsect:function(){}, chosen:function(){} }; //初始化 var init = function(el,options){ options=$.extend({},defaults,options); new LightEntire(el,options).init() } return { //返回一个对象(对象是一个方法) init:init } })() rating.init('#rating',{ num:2, /* select:function(num,total){ console.log(this) console.log(num+'/'+total) }*/ }); $('#rating').on('select',function(e,num,total){ console.log(num+'/'+total); }).on('chosen',function(e,num,total){ console.log(num+'/'+total); }) </script> </head> </body> </html>查看全部 -
半颗星的分析
查看全部 -
var Beverage = function(){}; Beverage.prototype.boilWater=function(){ console.log("把水煮沸") }; Beverage.prototype.brew=function(){ throw new Error('子类必须重写该方法'); }; Beverage.prototype.pourInCup=function(){ throw new Error('子类必须重写该方法'); }; Beverage.prototype.addCondiments=function(){ throw new Error('子类必须重写该方法'); }; Beverage.prototype.customerWantsCondiments=function(){ return true; }; Beverage.prototype.init=function(){ this.boilWater() this.brew() this.pourInCup() if(this.customerWantsCondiments()){ this.addCondiments() } }; var Coffee= function(){}; Coffee.prototype.brew=function(){ console.log("用沸水冲泡咖啡") }; Coffee.prototype.pourInCup=function(){ console.log("把咖啡倒进杯子") }; Coffee.prototype.addCondiments=function(){ console.log("加糖和牛奶") }; var Tea=function(){}; Tea.prototype.brew=function(){ console.log("用沸水浸泡茶叶") }; Tea.prototype.pourInCup=function(){ console.log("把茶水倒进杯子") }; Tea.prototype.addCondiments=function(){ console.log("加柠檬") }; //泡一杯不加调料的茶 Tea.prototype.customerWantsCondiments=function(){ return window.confirm("请问需要加调料嘛？") //return false; }; Coffee.prototype=new Beverage; Tea.prototype=new Beverage; var coffee=new Coffee(); coffee.init(); var tea=new Tea(); tea.init();查看全部 -
设计模式--分离共同点
咖啡和茶不同，抽象出‘饮料’
把水煮沸
泡的方式不同，抽象成‘泡’
加的调料不同，抽想成‘调料’
查看全部 -
Pattern.js
var Coffee=function(){};
Coffee.prototype.boilWater=function(){ console.log("把水煮沸") }; Coffee.prototype.brewCoffee=function(){ console.log("用沸水冲泡咖啡") }; Coffee.prototype.pourInCup=function(){ console.log("把咖啡倒进杯子") }; Coffee.prototype.addSugarAndMilk=function(){ console.log("加糖和牛奶") }; Coffee.prototype.init=function(){ this.boilWater() this.brewCoffee() this.pourInCup() this.addSugarAndMilk() }; var Tea=function(){}; Tea.prototype.boilWater=function(){ console.log("把水煮沸") }; Tea.prototype.steepTea=function(){ console.log("用沸水浸泡茶叶") }; Tea.prototype.pourInCup=function(){ console.log("把茶水倒进杯子") }; Tea.prototype.addLemon=function(){ console.log("加柠檬") }; Tea.prototype.init=function(){ this.boilWater(); this.steepTea(); this.pourInCup(); this.addLemon(); }; var coffee=new Coffee(); coffee.init(); var tea=new Tea(); tea.init();查看全部 -
23种goF模式，大致分为3种
创建型模式
结构型模式
行为型模式
查看全部 -
关于全局变量问题：
1、模拟命名空间（声明一个对象，全局变量就是对象的属性；函数就是对象的方法）；
2、闭包 ----(function(){})();该函数自执行，里面定义的变量都是局部变量。
关于事件绑定浪费问题：
$item.on 为每个星星绑定都绑定了相同的事件，导致浪费；
如何解决？事件委托（冒泡），意思就是将事件绑定到父元素中，再执行事件时只要判断事件触发的元素是目标元素即可；
查看全部 -
关于如何生成片段？
sublime 中 Tools (new snippet)
将片段内容放置到<content></content>
注意：如果想要生成的片段有默认光标定位，用${1:document}，后面的document 是默认内容；再按tab光标会到${2};${0}代表tab键后光标最后停留的位置。
触发该片段的命令为<tabTrigger>html5</tabTrigger>
该命令使用的文档类型：<scope>text.html</scope>
按Ctrl + S 进行保存，后缀名必须为sublime-snippet
查看全部 -
设计模式定义
查看全部 -
根据老师的思路指导，用原生写出来的，没有学jq，终于实现了
function getByClassname(obj,sclass){
obj=obj||document;
var arrname=[];
var arrname2=[];
if(obj.getElementsByClassName){
return obj.getElementsByClassName(sclass);
}else{
arrname=obj.getElementsByTagName('*');
for(var i=0;i<arrname.length;i++){
var a=arrname[i].className.split(' ');
for(var j=0;i<a.length;j++){
if(a[i]==sclass){
return arrname2.push(arrname[i]);
}
}
}
}
}
var rating= (function(){
//点亮方法
var init=function (obj,sclass,num){//构造函数
var oUl=document.getElementById(obj);
var aLi=getByClassname(oUl,sclass);
//初始化
show(num);
//事件绑定
oUl.onmousemove=function(ev){
var Ev=ev||window.event;
var target=Ev.target||Ev.srcElement;// target是ev带的属性，srcElement是IE兼容写法
if(target.nodeName.toLowerCase()=="li")//判断发生事件target的属性名称是什么，target的返回值是大写的，所以要转换成效小写
show(target.index+1);
}
oUl.onmouseout=function(ev){
show(num);
}
oUl.onclick=function(ev){
var Ev=ev||window.event;
var target=Ev.target||Ev.srcElement;// target是ev带的属性，srcElement是IE兼容写法
if(target.nodeName.toLowerCase()=="li")//判断发生事件target的属性名称是什么，target的返回值是大写的，所以要转换成效小写
num=target.index+1;
}
function show(num){
for(var i=0;i<aLi.length;i++){
aLi[i].index=i;
if(aLi[i].index<num){
aLi[i].style.backgroundPosition='0 -25px';
}else{
aLi[i].style.backgroundPosition='0 0';
}
}
}
}
return {
init:init
}
})();
rating.init('ul1','raing-item',3);
rating.init('ul2','raing-item',1);
查看全部 -
那个点亮星星的函数不是很懂
查看全部 -
什么是snippets，
(尤指讲话或文字的）小片，片段，零星的话( snippet的名词复数 )
查看全部 -
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>星级评分</title> <style> body,ul,li{ padding: 0; margin: 0; } li{ list-style-type: none; } .rating{ width: 140px; height: 27px; margin:100px; } .rating-item{ float:left; width: 28px; height: 27px; background: url(images/xx.png)no-repeat; background-position:0 -27px; cursor: pointer; } </style> </head> <body> <ul class="rating" id="rating"> <li class="rating-item" title="很不好"></li> <li class="rating-item" title="不好"></li> <li class="rating-item" title="一般"></li> <li class="rating-item" title="好"></li> <li class="rating-item" title="很好"></li> </ul> <script src="../js/jquery-1.11.1.min.js"></script> <script> var num=2; var $rating=$("#rating"); var $item=$rating.find(".rating-item"); // 电亮 var lightOn=function(num){ $item.each(function(index){ if(index < num){ $(this).css("backgroundPosition","0 0"); }else{ $(this).css("backgroundPosition","0 -27px"); } }) }; // 初始化 lightOn(num); // 绑定事件 $item.on('mouseover', function(){ lightOn($(this).index()+1); }).on("click",function(){ num=$(this).index()+1; }); $rating.on('mouseout',function(){ lightOn(num); }); </script> </body> </html>查看全部 -
点亮半颗星的原理分析
查看全部 -
有哪些设计模式查看全部
举报