下面小编就为大家带来一篇原生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实现-星级评分系统的简单实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持本站。
以上就是原生JS实现-星级评分系统的简单实例的详细内容，更多请关注本站其它相关文章！
