很酷的星级评分系统原生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;
 }
 
 



 点击星星打分:
 
 
 
 

 

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。