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

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

  • var rating = (function() { var lightOn = function(item, num) { item.each(function(index) { if(index < num) { $(this).css("background-position", "0 -36px"); } else { $(this).css("background-position", "0 0"); } }) } var init = function(el, num) { var rating = $(el); var item = rating.find(".rating-item"); //初始化 lightOn(item, num); //事件委托 子元素事件(.rating-item)委托给父元素(rating)处理 rating.on("mouseover", ".rating-item", function() { lightOn(item, $(this).index() + 1); }).on("click", ".rating-item", function() { num = $(this).index() + 1; }).on("mouseout", function() { //事件绑定 lightOn(item, num); }) } //jQuery插件 $.fn.extend({ rating: function(num) { return this.each(function() { init(this, num); }) } }) return { init: init } })() //方法 //rating.init("#rating",2); //插件 $("#rating").rating(2);
    查看全部
  • CSS样式放在头部,让浏览器先渲染样式 js行为放在body最后,防止找不到节点,同时不会阻塞页面 CSS和js都引入外部文件的形式,这样可以在客户端缓存。
    查看全部
  • 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();


    查看全部
  • 23种goF模式,大致分为3种

    1. 创建型模式

    2. 结构型模式

    3. 行为型模式

    查看全部
  • 设计模式定义

    查看全部
  • 那个点亮星星的函数不是很懂

    查看全部
  • <!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>


    查看全部
  • 有哪些设计模式
    查看全部
  • var num = 2,

    $rating = $("#rating"),

    $item = $rating.find(".rating-item");


    //点亮

    var lightOn = function(num) {

    //num是要点亮的星星数

    $item.each(function(index) {

    //

    if(index < num) {

    $(this).css("background-position", "0 -40px");

    //".rating-item"==this

    } else {

    $(this).css("background-position", "0 0");

    }

    });

    }

    //初始化

     lightOn(num);

     

     //事件绑定

     $item.on('mouseover',function(){

      //鼠标移上去所指星星亮起

      lightOn($(this).index()+1);

     }).on('click',function(){

     

      num=$(this).index()+1;

      //此时num改变为当前点击的星星数

     });

    //给父元素添加moseout事件。移出的时候 点亮当前的num数

    $rating.on('mouseout',function(){

    lightOn(num);

    });


    查看全部
  • 学习设计模式不同阶段
    查看全部
  • 整理下js的思路: 写好主功能函数,就是点亮这个函数-->为元素一一绑定事件 为元素绑定事件有个小细节:mouseout事件绑定在ul这个父容器上,而不是li单个项目上。 完善: 全局变量重名或者冲突,解决方法:自我匿名函数,就是用一个闭包 不用为每个li都绑定事件,只需要为他们父容器绑定即可,利用事件的冒泡处理 $rating.on('mouseover','.rating-item',function(){},子元素事件委托给父元素处理 为了实现功能复用,我们可以把它写成一个模块,可以用函数来实现,利用函数带参实现不同需求; 命名为init函数,怎么使用呢?就可以用return返回来使用,而return返回对象的话就可以这样使用:rating.init("#el",num) 这里有个小细节:功能函数例如lightOn因为只需要申明一次就可以把它放到init函数外面。
    查看全部
  • 关于constructor指向问题: 无论什么时候,只要创建了一个新函数,就会根据一组特定的规则为该函数创建一个prototype属性,默认情况下prototype属性会默认获得一个constructor(构造函数)属性,这个属性是一个指向prototype属性所在函数的指针,说的有些绕了,上代码: var superClass = function(){ this.num = 2; } superClass.prototype.show = function(){ console.log(this.name); } var F1 = function(){}; console.log(F1.prototype.constructor);//function (){} F1.prototype = new superClass(); console.log(F1.prototype.constructor);//function (){this.num = 2;}
    查看全部
  • F.prototype = superClass.prototype 和 F.prototype = new superClass();的区别: 前者F仅仅继承superClass的方法,而构造函数里的属性不会继承,后者则是把属性和prototype的方法也一并继承了, 代码验证: var superClass = function(){ this.num = 2; } superClass.prototype.show = function(){ console.log(this.name); } var F1 = function(){}; var F2 = function(){}; F1.prototype = new superClass(); F2.prototype = superClass.prototype; var f = new F1(); var f2 = new F2(); f.show();//2 f2.show();//undefined
    查看全部
  • 整理下js的思路: 写好主功能函数,就是点亮这个函数-->为元素一一绑定事件 为元素绑定事件有个小细节:mouseout事件绑定在ul这个父容器上,而不是li单个项目上。 完善: 全局变量重名或者冲突,解决方法:自我匿名函数,就是用一个闭包 不用为每个li都绑定事件,只需要为他们父容器绑定即可,利用事件的冒泡处理 $rating.on('mouseover','.rating-item',function(){},子元素事件委托给父元素处理 为了实现功能复用,我们可以把它写成一个模块,可以用函数来实现,利用函数带参实现不同需求; 命名为init函数,怎么使用呢?就可以用return返回来使用,而return返回对象的话就可以这样使用:rating.init("#el",num) 这里有个小细节:功能函数例如lightOn因为只需要申明一次就可以把它放到init函数外面。
    查看全部
  • 设计模式即经验
    查看全部
首页上一页1234567下一页尾页

举报

0/150
提交
取消
课程须知
1、对html,css基础知识已经掌握。 2、对JavaScript和jQuery能够熟练掌握。
老师告诉你能学到什么?
1、开发项目的实现思路 2、评分效果的实现 3、js中的开发技巧

微信扫码,参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!