原生JS实现-星级评分系统的简单实例

今天我又写了个很酷的实例：星级评分系统（可自定义星星个数、显示信息）
sufuStar.star();
使用默认值5个星星，默认信息

var msg = [........];
sufuStar.star(10,msg);

自定义星星个数为10、显示信息msg格式参考默认值，条数必须和星星个数一致；

自己实现一些实例，有个好处，能增加应用各知识点的熟练度，还能检验出自己的薄弱项！一经发现，立即翻API文档恶补！

不知道是不是我太笨，这个实例居然写了整整一天！

不废话了，先说下这个实例涉及的知识点：

1.用CSS的border来画个三角形，并用before来把它加到其它元素上；

2.学习如何用CSS来定位元素；

3.学习事件的代理；

4.如何优化性能；

5.String对象的match方法的应用，正则表达式的应用；

6.注册事件与事件处理，需要兼容IE的写法；

7.学习如何利用‘||'给变量设置默认值；

8.简化代码：将可能要重复写的代码拿出来，单独写成一个函数；

下面是带注释的完整代码，碰到不懂得就查文档吧，以我目前的水平只能写成这样了，若有好的建议，欢迎前辈指出！

  
  
  
    *{
      margin: 0;
      padding: 0;
    }
    #star{
      position: absolute;
      left: 0;
      right: 0;
      top: 30px;
      bottom: 0;
      margin: auto;
      width: 80%;
      font-size: 12px;
    }
    #star-div{
      margin:5px;
      font-size: 0;
    }
    #star-div a{
      display: inline-block;
      width: 21px;
      height: 21px;
      background: url(http://files.cnblogs.com/files/susufufu/star0.gif) no-repeat;

    }
    #star-div .on{
      background: url(http://files.cnblogs.com/files/susufufu/star1.gif) no-repeat;
    }
    #star-info{
      position: absolute;
      top: 55px;
      left: -30px;
      display: none;
      width: 155px;
      height: 50px;
      padding: 2px;
      line-height: 17px;
      border-radius: 8px;
      background-color: gold;
      z-index: 5;
    }
    #star-info:before{
      content: '';
      border-bottom: 10px solid gold;
      border-left: 10px solid rgba(0,0,0,0);
      border-right: 10px solid rgba(0,0,0,0);
      position: absolute;
      left: 35px;
      top: -10px;
    }
    #star-span{line-height: 14px}
    #star-info strong,#star-span strong{
      color: red;
    }
  
  



  点击星星打分:
  
  
  
  

  

以上这篇原生JS实现-星级评分系统的简单实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持考高分网。