为了账号安全,请及时绑定邮箱和手机立即绑定

星级评分原理和实现(上)

  • <!--此处有图片-->设计模式三种模式

    04:23
    看视频
  • <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>星级评分-第一种实现方式</title>
        <style type="text/css">
     *{/*清除内外边距*/
     padding:0;
     margin:0;
     }
    
     ul li{/*清除列表样式*/
     list-style-type: none;
     }
    
     .rating{
     width: 350px;
     height:70px;
     margin:100px auto;
     overflow:hidden;
     }
     .rating-item{
     /*position: fixed;*/
     width:70px;
     height:70px;
     background:url("images/star.png")no-repeat;
     cursor: pointer;
     /*!**!  background-position: 0 -65px;*/
     float:left;
     /*overflow: hidden;*/
     }
        </style>
    </head>
    <body>
    <!--ctrl+/  单行注释-->
    <!--块注释 ctrl+shift+/-->
    <!--ctrl+shift+up 代码拖动-->
    <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="很不好"></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="rating3">
        <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="rating4">
        <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="rating5">
        <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>
    
    
    <!--js文件放最后为防止找不到节点,同时不会阻塞页面-->
    <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
    <script type="text/javascript">
    
     var rating = (function () {
     //点亮星星
     var lightOn = function($item,num) {
     //num是要点亮的星星数
     $item.each(function(index) {
     if(index < num) {
     $(this).css("background-position", "0 -65px");
     } else {
     $(this).css("background-position", "0 0");
    
     }
    
                });
    
     };
    
            var init = function (el,num) {
     var $rating = $(el), $item = $rating.find(".rating-item");
    
     lightOn($item,num);
     //事件绑定
     $rating.on('mouseover','.rating-item',function(){
     //鼠标移上去所指星星亮起
     lightOn($item,$(this).index()+1);
     }).on('click','.rating-item',function(){
     num=$(this).index()+1;
     //此时num改变为当前点击的星星数
     }).on('mouseout',function(){
     lightOn($item,num);
    
     });
    
     };
    
     //插件
     $.fn.extend({
     rating:function (num) {
     return this.each(function(){
     init(this,num);
     });
    
     }
            });
    
            return{
     init:init
     };
     //初始化
    
     })();
     //   rating.init('#rating',2);
    //    rating.init('#rating2',3);
     $('#rating').rating(1);
     $('#rating2').rating(2);
     $('#rating3').rating(3);
     $('#rating4').rating(4);
     $('#rating5').rating(5);
    
    </script>
    </body>
    </html>


  • 为了尽可能少的暴露出全局变量,需要引入局部作用域,就是自我执行的匿名函数

    (function(){

    })()

  • 创建型模式:对创建对象的过程进行封装

    单例模式、建造者模式、抽象工厂模式、工厂模式、原型模式

    结构型模式:解决类、对象、模块之间的耦合关系

    适配器模式、桥接模式、装饰模式、组合模式、外观模式、享元模式、代理模式

    行为型模式:解决对象之间的相互通信与协作,进一步明确对象的职责

    模板方法模式、命令模式、迭代器模式、观察者模式、中介者模式、备忘录模式、解释器模式、状态模式、策略模式、职责链模式、访问者模式

  • 在sublime中新建一个html文件

    输入HTML:5,按tab键,会自动完成html文件代码的基本结构

  • <!--此处有图片-->

    <!--此处有图片-->

    <!--此处有图片-->


    1、prototype原型

    2、self的this指向LightEntire


  • <!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();


  • 设计模式--分离共同点

    1. 咖啡和茶不同,抽象出‘饮料’

    2. 把水煮沸

    3. 泡的方式不同,抽象成‘泡’

    4. 加的调料不同,抽想成‘调料’

  • 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. 结构型模式

    3. 行为型模式

  • 关于全局变量问题:

    1、模拟命名空间(声明一个对象,全局变量就是对象的属性;函数就是对象的方法);

    2、闭包 ----(function(){})();该函数自执行,里面定义的变量都是局部变量。


    关于事件绑定浪费问题:

    $item.on 为每个星星绑定都绑定了相同的事件,导致浪费;

    如何解决?事件委托(冒泡),意思就是将事件绑定到父元素中,再执行事件时只要判断事件触发的元素是目标元素即可;

  • 关于如何生成片段?

    1. sublime 中 Tools (new snippet)

    2. 将片段内容放置到<content></content>

    3. 注意:如果想要生成的片段有默认光标定位,用${1:document},后面的document 是默认内容;再按tab光标会到${2};${0}代表tab键后光标最后停留的位置。

    4. 触发该片段的命令为<tabTrigger>html5</tabTrigger>

    5. 该命令使用的文档类型:<scope>text.html</scope>

    6. 按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>


首页上一页1234567下一页尾页

举报

0/150
提交
取消
课程须知
1、对html,css基础知识已经掌握。 2、对JavaScript和jQuery能够熟练掌握。
老师告诉你能学到什么?
1、开发项目的实现思路 2、评分效果的实现 3、js中的开发技巧
意见反馈 邀请有奖 帮助中心 APP下载
官方微信