原生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 相关文章推荐
js 实现菜单左右滚动显示示例介绍
Nov 21 Javascript
jQuery实现可用于博客的动态滑动菜单完整实例
Sep 17 Javascript
jQuery插件简单学习实例教程
Jul 01 Javascript
JavaScript中的对象和原型(一)
Aug 12 Javascript
学习使用Bootstrap栅格系统
May 11 Javascript
JS判断非空至少输入两个字符的简单实现方法
Jun 23 Javascript
Node Puppeteer图像识别实现百度指数爬虫的示例
Feb 22 Javascript
详解node.js 下载图片的 2 种方式
Mar 02 Javascript
vue.js中导出Excel表格的案例分析
Jun 11 Javascript
详解VUE中的插值( Interpolation)语法
Oct 18 Javascript
Antd的table组件表格的序号自增操作
Oct 27 Javascript
浅谈Vue使用Elementui修改默认的最快方法
Dec 05 Vue.js
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
thinkphp数据查询和遍历数组实例
2014/11/28 PHP
PHP获取文件夹内文件数的方法
2015/03/12 PHP
php添加数据到xml文件的简单例子
2016/09/08 PHP
php中strlen和mb_strlen用法实例分析
2016/11/12 PHP
PHP面向对象中new self()与 new static()的区别浅析
2017/08/17 PHP
TP框架实现上传一张图片和批量上传图片的方法分析
2020/04/23 PHP
PHP实现简单注册登录系统
2020/12/28 PHP
jQuery获取地址栏参数插件(模仿C#)
2010/10/26 Javascript
js弹出层永远居中实现思路及代码
2013/11/29 Javascript
11种ASP连接数据库的方法
2015/09/18 Javascript
javascript 判断页面访问方式电脑或者移动端
2016/09/19 Javascript
webpack开发跨域问题解决办法
2017/08/03 Javascript
javaScript实现鼠标在文字上悬浮时弹出悬浮层效果
2020/04/12 Javascript
vue单页应用在页面刷新时保留状态数据的方法
2018/09/21 Javascript
记一次vue去除#问题处理经过小结
2019/01/24 Javascript
小程序api实现promise封装过程解析
2019/11/21 Javascript
详解vue v-model
2020/08/31 Javascript
pydev使用wxpython找不到路径的解决方法
2013/02/10 Python
Python中使用装饰器来优化尾递归的示例
2016/06/18 Python
详解python基础之while循环及if判断
2017/08/24 Python
使用python采集脚本之家电子书资源并自动下载到本地的实例脚本
2018/10/23 Python
python 求一个列表中所有元素的乘积实例
2019/06/11 Python
Python netmiko模块的使用
2020/02/14 Python
python 按钮点击关闭窗口的实现
2020/03/04 Python
简单了解django处理跨域请求最佳解决方案
2020/03/25 Python
Python如何利用Har文件进行遍历指定字典替换提交的数据详解
2020/11/05 Python
css3 伪类选择器快速复习小结
2019/09/10 HTML / CSS
HTML5之SVG 2D入门8—文档结构及相关元素总结
2013/01/30 HTML / CSS
为数据库创建索引都需要注意些什么
2012/07/17 面试题
化学专业毕业生求职信
2014/07/28 职场文书
银行实习推荐信
2015/03/27 职场文书
业务员岗位职责范本
2015/04/03 职场文书
区域销售大会开幕词
2016/03/04 职场文书
SQLServer 日期函数大全(小结)
2021/04/08 SQL Server
Java面试题冲刺第十九天--数据库(4)
2021/08/07 Java/Android
解决vue中provide inject的响应式监听
2022/04/19 Vue.js