为了账号安全，请及时绑定邮箱和手机立即绑定
首页 免费课 星级评分原理和实现（上） 笔记

星级评分原理和实现（上）

AlexWang
查看讲师更多课程 AlexWang讲师的其他课程
难度初级
时长 2小时10分
学习人数
综合评分9.63
63人评价 查看评价
9.8 内容实用
9.6 简洁易懂
9.5 逻辑清晰
最热 最新
  • RelaxLearning 01:06

    ul包li  便于整体的维护，比如整体居中。。。

    id  为了在js中能更好的获取到元素

    class 设置样式

    ul+li写法（更语义化）   div+a写法......

    查看全部
    0 采集 收起 来源：原理分析和准备工作

    2020-07-21

  • RelaxLearning

    script放哪

    1. 放到head 里，当js没有加载完成之前，后面的dom结点就无法加载，就会阻塞页面的渲染，导致页面出现长时间的空白，造成很糟糕的用户体验

    2. 而把他放到body的结尾处的话就没有这样的问题

    3. css 一般都放在css内，这是因为我们不希望看到裸奔的页面，在看到他穿衣服的样子，而是希望他直接穿着衣服出现在我们的面前

    查看全部
    0 采集 收起 来源：创建HTML结构、添加CSS样式和JS行为

    2020-07-21

  • RelaxLearning 06:06

    首选项 -》插件设置-》emmet->Settings-User

    html:Xhtml    意思使用Xhtml语法

    查看全部
    0 采集 收起 来源：关于sublime编辑器的2个小知识

    2020-07-16

  • RelaxLearning 04:43

    新建代码片段文件

    tools(工具)--》新建代码片段

    将指定代码片段 替换“Hello, ${1:this} is a ${2:snippet}.”

    ${1} ：建好文件后光标自动出现在${1}位置上

    ${2}:    按tab键光标从${1}自动到${2}位置上(不好是再按tab键时,光标会从${2}跳到文件末尾处)

    ${0}：指光标出现的最后位置，代码正常出现，解决了${2}的缺点

    ${1:Document} 指定该光标处显示什么内容

    <tabTrigger>html5</tabTrigger>   自定义指定出现该代码片段的命令 

    <scope>text.html</scope>   指定能使用该代码片段的文件

    查看全部
    0 采集 收起 来源：关于sublime编辑器的2个小知识

    2020-07-16

  • RelaxLearning 03:36

    保存新建代码片段文件名---》命名（.sublime-snippet）

    查看全部
    0 采集 收起 来源：关于sublime编辑器的2个小知识

    2020-07-16

  • love童 01:40

    第一种实现方式原理

    查看全部
    0 采集 收起 来源：原理分析和准备工作

    2019-10-25

  • love童 01:08

    第一种实现方式两种写法

    查看全部
    0 采集 收起 来源：原理分析和准备工作

    2019-10-25

  • 菜鸟00001


    http://img1.sycdn.imooc.com//5da918ad00014acd07800441.jpg高大上的设计模式概念

    查看全部
    0 采集 收起 来源：高大上的设计模式

    2019-10-18

  • 慕粉2466386 04:23

    https://img1.sycdn.imooc.com//5d4d28fb0001aa1c11410624.jpg设计模式三种模式

    查看全部
    0 采集 收起 来源：高大上的设计模式

    2019-08-09

  • 慕粉2466386 
    <!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>


    查看全部
    0 采集 收起 来源：改进代码--JS第二次尝试

    2019-08-09

  • 慕UI1177701

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

    （function（）{

    }）（）

    查看全部
    0 采集 收起 来源：点亮整颗星星

    2019-04-17

  • 笑傲江湖3955759

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

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

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

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

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

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

    查看全部
    0 采集 收起 来源：高大上的设计模式

    2019-03-15

  • 笑傲江湖3955759

    在sublime中新建一个html文件

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

    查看全部
    0 采集 收起 来源：关于sublime编辑器的2个小知识

    2019-03-13

  • qq_斌_40

    https://img1.sycdn.imooc.com//5bed4f5b0001fd5e08610603.jpg

    https://img1.sycdn.imooc.com//5bed4f5c00015a9c05830620.jpg

    https://img1.sycdn.imooc.com//5bed4f5d0001d5f508600596.jpg


    1、prototype原型

    2、self的this指向LightEntire


    查看全部
    0 采集 收起 来源：点亮整颗星星

    2018-11-15

  • 林念志祥 
    <!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>


    查看全部
    0 采集 收起 来源：点亮半颗星星

    2018-11-13

首页上一页1234567下一页尾页

举报

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

微信扫码，参与3人拼团

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

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

查看已购买的课程