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


Posted in Javascript onAugust 21, 2016

今天我又写了个很酷的实例:星级评分系统(可自定义星星个数、显示信息)
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.简化代码:将可能要重复写的代码拿出来,单独写成一个函数;

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
    *{
      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;
    }
  </style>
  <script>
    window.onload = function(){
      var sufuStar = function (){
        //工具函数
        function gbyId(id){return document.getElementById(id);}

        function addEvent(elem,type,func){ //兼容IE
          if(elem.addEventListener){
            elem.addEventListener(type,func,false)
          }else if(elem.attachEvent){
            elem.attachEvent('on'+type,func)
          }
        }
        function getIndex(event) { //兼容IE
          var e = event || window.event;
          var t = e.target || e.srcElement;
          if (t.tagName.toLowerCase() === 'a') {
            return parseInt(t.innerHTML);
          }
        }
        function showInfo(index,msg){
          var info = gbyId('star-info');
          info.style.display = 'block';
          info.style.left = index*21-51+'px';
          info.innerHTML = "<strong> "+index+'分 '+msg[index-1].match(/(.+)\|/)[1]+'<br />'+'</strong>'+msg[index-1].match(/\|(.+)/)[1];
        }
        function appenStar(elem,nums){
          var frag = document.createDocumentFragment(); //为了提高性能,因使用DocumentFragment一次性append,这样页面只重新渲染一次
          for(var i = 0;i<nums;i++){
            var a =document.createElement('a');
            a.innerHTML = i+1;
            a.href = "javascript:;"; //阻止浏览器的点击链接的默认行为
            frag.appendChild(a);
          }
          elem.appendChild(frag);
        }
        //主体函数
        function star(num,myMsg){
          var n = num||5; //当num有值则取其值,无值则取默认值5;
          var clickStar=curentStar=0; //clickStar保存点击状态
          var msg = myMsg||[
            "很不满意|差得太离谱,与卖家描述的严重不符,非常不满",
            "不满意|部分有破损,与卖家描述的不符,不满意",
            "一般|质量一般,没有卖家描述的那么好",
            "满意|质量不错,与卖家描述的基本一致,还是挺满意的",
            "非常满意|质量非常好,与卖家描述的完全一致,非常满意"
          ];
          var starContainer = gbyId('star-div');
          appenStar(starContainer,n);
          addEvent(starContainer,'mouseover',over); //采用事件代理模式(通过<a>标签的父元素starContainer来代理事件)
          addEvent(starContainer,'mouseout',out);
          addEvent(starContainer,'click',click);
          function over(event){
            if(getIndex(event)){ //若getIndex(event)取不到值,说明当前触发事件的目标不是<a>标签
              var index = getIndex(event);
              change(index);
              showInfo(index,msg);
            }
          }
          function out(event){
            change(); //将评分设为已点击状态clickStar
            gbyId('star-info').style.display = 'none'
          }
          function click(event) {
            if (getIndex(event)) {
              var index = getIndex(event);
              clickStar = index; //保存点击状态
              gbyId('star-info').style.display = 'none';
              gbyId('star-span').innerHTML = "<strong>" + index + '分 ' + msg[index - 1].match(/(.+)\|/)[1] + '</strong>'+'<br />'+ msg[index - 1].match(/\|(.+)/)[1];
            }
          }
          function change(index){
            curentStar = index||clickStar;
            for(var i=0;i<n;i++){
              starContainer.children[i].className = i<curentStar ? 'on' : ''
            }
          }
        }
        return {
          star:star
        }
      }(); //这里的()表示函数立即执行,这样变量sufuStar才能调用匿名函数的返回值star

      //调用执行: sufuStar.star(num,myMsg),参数可为空,参数num,myMsg将设为默认值
      sufuStar.star();
    }
  </script>
</head>
<body>
<div id="star">
  <span>点击星星打分:</span>
  <div id="star-div">
  </div>
  <span id="star-span"></span>
  <p id="star-info">
  </p>
</div>
</body>
</html>

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

Javascript 相关文章推荐
javascript类继承机制的原理分析
Sep 12 Javascript
javascript中取前n天日期的两种方法分享
Jan 26 Javascript
基于JavaScript如何实现私有成员的语法特征及私有成员的实现方式
Oct 28 Javascript
phantomjs导出html到pdf的方法总结
Oct 19 Javascript
vue中使用localstorage来存储页面信息
Nov 04 Javascript
Vue.js devtool插件安装后无法使用的解决办法
Nov 27 Javascript
通过fastclick源码分析彻底解决tap“点透”
Dec 24 Javascript
详解Node使用Puppeteer完成一次复杂的爬虫
Apr 18 Javascript
vue项目中应用ueditor自定义上传按钮功能
Apr 27 Javascript
vue-router传递参数的几种方式实例详解
Nov 13 Javascript
重学JS 系列:聊聊继承(推荐)
Apr 11 Javascript
Vue 引入AMap高德地图的实现代码
Apr 29 Javascript
JSONP和批量操作功能的实现方法
Aug 21 #Javascript
全面解析标签页的切换方式
Aug 21 #Javascript
JavaScript第一篇之实现按钮全选、功能
Aug 21 #Javascript
JS实现图片局部放大或缩小的方法
Aug 20 #Javascript
JS获取及验证开始结束日期的方法
Aug 20 #Javascript
jquery弹出框插件jquery.ui.dialog用法分析
Aug 20 #Javascript
jQuery实现表格隔行及滑动,点击时变色的方法【测试可用】
Aug 20 #Javascript
You might like
PHP自定义函数收代码
2010/08/01 PHP
基于PHP技术开发客服工单系统
2016/01/06 PHP
PHP 中使用explode()函数切割字符串为数组的示例
2017/05/06 PHP
通过源码解析Laravel的依赖注入
2018/01/22 PHP
php解析非标准json、非规范json的方式实例
2020/12/10 PHP
JavaScript中的Web worker多线程API研究
2014/12/06 Javascript
checkbox 选中一个另一个checkbox也会选中的实现代码
2016/07/09 Javascript
javascript self对象使用详解
2016/10/18 Javascript
jQuery纵向导航菜单效果实现方法
2016/12/19 Javascript
javascript 使用正则test( )第一次是 true,第二次是false
2017/02/22 Javascript
JS实现根据密码长度显示安全条功能
2017/03/08 Javascript
jquery实现表单获取短信验证码代码
2017/03/13 Javascript
JS抛物线动画实例制作
2018/02/24 Javascript
Vue自定义过滤器格式化数字三位加一逗号实现代码
2018/03/23 Javascript
vue组件实现可搜索下拉框扩展
2020/10/23 Javascript
[01:33]一分钟玩转DOTA2第三弹:DOTA2&DotA快捷操作大对比
2014/06/04 DOTA
[13:55]Newbee vs Team Spirit
2018/06/07 DOTA
Python入门篇之编程习惯与特点
2014/10/17 Python
Python操作MongoDB数据库的方法示例
2018/01/04 Python
Python实现的对本地host127.0.0.1主机进行扫描端口功能示例
2019/02/15 Python
分析经典Python开发工程师面试题
2019/04/08 Python
详解Python3除法之真除法、截断除法和下取整对比
2019/05/23 Python
PyQt QListWidget修改列表项item的行高方法
2019/06/20 Python
Python完全识别验证码自动登录实例详解
2019/11/24 Python
解决Python3.8用pip安装turtle-0.0.2出现错误问题
2020/02/11 Python
Python表达式的优先级详解
2020/02/18 Python
解决pyinstaller打包运行程序时出现缺少plotly库问题
2020/06/02 Python
用Python 爬取猫眼电影数据分析《无名之辈》
2020/07/24 Python
python 深度学习中的4种激活函数
2020/09/18 Python
CSS3中线性颜色渐变的一些实现方法
2015/07/14 HTML / CSS
用HTML5制作一个简单的弹力球游戏
2015/05/12 HTML / CSS
一份创业计划书范文
2014/02/08 职场文书
学校出纳员岗位职责
2014/03/18 职场文书
村干部任职承诺书
2015/01/21 职场文书
2016年4月份红领巾广播稿
2015/12/21 职场文书
canvas 中如何实现物体的框选
2022/08/05 Javascript