原生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 相关文章推荐
收集json解析的四种方法分享
Jan 17 Javascript
JavaScript获取flash对象与网上的有所不同
Apr 21 Javascript
简述JavaScript的正则表达式中test()方法的使用
Jun 16 Javascript
jQuery实现网站添加高亮突出显示效果的方法
Jun 26 Javascript
JS实现超简洁网页title标题跑动闪烁提示效果代码
Oct 23 Javascript
javascript入门教程基础篇
Nov 16 Javascript
详解js中class的多种函数封装方法
Jan 03 Javascript
理解javascript定时器中的单线程
Feb 23 Javascript
用JS生成UUID的方法实例
Mar 30 Javascript
Vue实现动态添加或者删除对象和对象数组的操作方法
Sep 21 Javascript
微信小程序实现购物车代码实例详解
Aug 29 Javascript
echarts实现折线图的拖拽效果
Dec 19 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框架Phpbean说明
2008/01/10 PHP
PHP 获取文件路径(灵活应用__FILE__)
2013/02/15 PHP
一个简单的php加密解密函数(动态加密)
2013/06/19 PHP
解析PHP跳出循环的方法以及continue、break、exit的区别介绍
2013/07/01 PHP
php中删除、清空session的方式总结
2015/10/09 PHP
WordPress后台中实现图片上传功能的实例讲解
2016/01/11 PHP
JAVASCRIPT下判断IE与FF的比较简单的方式
2008/10/17 Javascript
table insertRow、deleteRow定义和用法总结
2014/05/14 Javascript
JavaScript取得WEB安全颜色列表的方法
2015/07/14 Javascript
在Linux系统中搭建Node.js开发环境的简单步骤讲解
2016/01/26 Javascript
通过JS获取Request.QueryString()参数的值实现方法
2016/09/27 Javascript
Javascript 实现放大镜效果实例详解
2016/12/03 Javascript
jQuery实现单击按钮遮罩弹出对话框效果(1)
2017/02/20 Javascript
jQuery实现动态给table赋值的方法示例
2017/07/04 jQuery
详细分析单线程JS执行问题
2017/11/22 Javascript
vue2.0实现前端星星评分功能组件实例代码
2018/02/12 Javascript
node实现的爬虫功能示例
2018/05/04 Javascript
自定义vue组件发布到npm的方法
2018/05/09 Javascript
JavaScript new对象的四个过程实例浅析
2018/07/31 Javascript
浅谈webpack和webpack-cli模块源码分析
2020/01/19 Javascript
JS实现前端路由功能示例【原生路由】
2020/05/29 Javascript
vue 项目中当访问路由不存在的时候默认访问404页面操作
2020/08/31 Javascript
Vue中使用JsonView来展示Json树的实例代码
2020/11/16 Javascript
Fabric 应用案例
2016/08/28 Python
Python 爬虫模拟登陆知乎
2016/09/23 Python
pycharm 实现显示project 选项卡的方法
2019/01/17 Python
Python实现打砖块小游戏代码实例
2019/05/18 Python
基于python-opencv3的图像显示和保存操作
2019/06/27 Python
python读取mysql数据绘制条形图
2020/03/25 Python
解决Keras使用GPU资源耗尽的问题
2020/06/22 Python
Python基础教程(一)——Windows搭建开发Python开发环境
2020/07/20 Python
Python实现一个优先级队列的方法
2020/07/31 Python
python爬取微博评论的实例讲解
2021/01/15 Python
全球地下的服装和态度:Slam Jam
2018/02/04 全球购物
学校后勤人员职责
2013/12/27 职场文书
2014年教师培训的自我评价
2014/01/03 职场文书