-
<!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(){ //點(diǎn)亮整顆 ????????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); ????????????????????//觸發(fā)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) ????????????????}) ????????????}; //默認(rèn)參數(shù) ????????????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?{ ????????????//返回一個(gè)對象(對象是一個(gè)方法) ????????????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("把咖啡倒進(jìn)杯子") }; Coffee.prototype.addCondiments=function(){ ????console.log("加糖和牛奶") }; var?Tea=function(){}; Tea.prototype.brew=function(){ ????console.log("用沸水浸泡茶葉") }; Tea.prototype.pourInCup=function(){ ????console.log("把茶水倒進(jìn)杯子") }; Tea.prototype.addCondiments=function(){ ????console.log("加檸檬") }; //泡一杯不加調(diào)料的茶 Tea.prototype.customerWantsCondiments=function(){ ????return?window.confirm("請問需要加調(diào)料嘛？") //return?false; }; Coffee.prototype=new?Beverage; Tea.prototype=new?Beverage; var?coffee=new?Coffee(); coffee.init(); var?tea=new?Tea(); tea.init();查看全部 -
設(shè)計(jì)模式--分離共同點(diǎn)
咖啡和茶不同，抽象出‘飲料’
把水煮沸
泡的方式不同，抽象成‘泡’
加的調(diào)料不同，抽想成‘調(diào)料’
查看全部 -
Pattern.js
var Coffee=function(){};
Coffee.prototype.boilWater=function(){ console.log("把水煮沸") }; Coffee.prototype.brewCoffee=function(){ console.log("用沸水沖泡咖啡") }; Coffee.prototype.pourInCup=function(){ console.log("把咖啡倒進(jìn)杯子") }; 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("把茶水倒進(jìn)杯子") }; 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種
創(chuàng)建型模式
結(jié)構(gòu)型模式
行為型模式
查看全部 -
關(guān)于全局變量問題：
1、模擬命名空間（聲明一個(gè)對象，全局變量就是對象的屬性；函數(shù)就是對象的方法）；
2、閉包 ----(function(){})();該函數(shù)自執(zhí)行，里面定義的變量都是局部變量。
關(guān)于事件綁定浪費(fèi)問題：
$item.on 為每個(gè)星星綁定都綁定了相同的事件，導(dǎo)致浪費(fèi)；
如何解決？事件委托（冒泡），意思就是將事件綁定到父元素中，再執(zhí)行事件時(shí)只要判斷事件觸發(fā)的元素是目標(biāo)元素即可；
查看全部 -
關(guān)于如何生成片段？
sublime 中 Tools (new snippet)
將片段內(nèi)容放置到<content></content>
注意：如果想要生成的片段有默認(rèn)光標(biāo)定位，用${1:document}，后面的document 是默認(rèn)內(nèi)容；再按tab光標(biāo)會到${2};${0}代表tab鍵后光標(biāo)最后停留的位置。
觸發(fā)該片段的命令為<tabTrigger>html5</tabTrigger>
該命令使用的文檔類型：<scope>text.html</scope>
按Ctrl + S 進(jìn)行保存，后綴名必須為sublime-snippet
查看全部 -
設(shè)計(jì)模式定義
查看全部 -
根據(jù)老師的思路指導(dǎo)，用原生寫出來的，沒有學(xué)jq，終于實(shí)現(xiàn)了
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(){
//點(diǎn)亮方法
var init=function (obj,sclass,num){//構(gòu)造函數(shù)
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")//判斷發(fā)生事件target的屬性名稱是什么，target的返回值是大寫的，所以要轉(zhuǎn)換成效小寫
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")//判斷發(fā)生事件target的屬性名稱是什么，target的返回值是大寫的，所以要轉(zhuǎn)換成效小寫
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);
查看全部 -
那個(gè)點(diǎn)亮星星的函數(shù)不是很懂
查看全部 -
什么是snippets，
(尤指講話或文字的）小片，片段，零星的話( snippet的名詞復(fù)數(shù) )
查看全部 -
<!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>查看全部 -
點(diǎn)亮半顆星的原理分析
查看全部 -
有哪些設(shè)計(jì)模式查看全部
舉報(bào)