很酷的星级评分系统原生JS实现


Posted in Javascript onAugust 25, 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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js每次Title显示不同的名言
Sep 25 Javascript
跟我一起学写jQuery插件开发方法(附完整实例及下载)
Apr 01 Javascript
JavaScript解析URL参数示例代码
Aug 12 Javascript
JavaScript Math.floor方法(对数值向下取整)
Jan 09 Javascript
jQuery网页选项卡插件rTabs用法实例分析
Aug 26 Javascript
javascript实现保留两位小数的多种方法
Dec 18 Javascript
详述JavaScript实现继承的几种方式(推荐)
Mar 22 Javascript
利用AngularJs实现京东首页轮播图效果
Sep 08 Javascript
vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据
Oct 26 Javascript
vue2 mint-ui loadmore实现下拉刷新,上拉更多功能
Mar 21 Javascript
微信小程序实现团购或秒杀批量倒计时
Nov 01 Javascript
JavaScript面向对象程序设计中对象的定义和继承详解
Jul 29 Javascript
jQuery 利用$.ajax 时获取原生XMLHttpRequest 对象的方法
Aug 25 #Javascript
轻松掌握JavaScript策略模式
Aug 25 #Javascript
Javascript 6里的4个新语法
Aug 25 #Javascript
Javascript实现代码折叠功能
Aug 25 #Javascript
深入浅出ES6之let和const命令
Aug 25 #Javascript
PhotoSwipe异步动态加载图片方法
Aug 25 #Javascript
相册展示PhotoSwipe.js插件实现
Aug 25 #Javascript
You might like
PHP文本数据库的搜索方法
2006/10/09 PHP
PHP中显示格式化的用户输入
2006/10/09 PHP
APACHE的AcceptPathInfo指令使用介绍
2013/01/18 PHP
如何实现php图片等比例缩放
2015/07/28 PHP
JavaScript 对象的属性和方法4种不同的类型
2010/03/19 Javascript
JQuery Ajax通过Handler访问外部XML数据的代码
2010/06/01 Javascript
ASP.NET jQuery 实例1(在TextBox里面创建一个默认提示)
2012/01/13 Javascript
jQuery中add()方法用法实例
2015/01/08 Javascript
给before和after伪元素设置js效果的方法
2015/12/04 Javascript
javascript中错误使用var造成undefined
2016/03/31 Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(一)
2016/05/17 Javascript
jquery解析XML及获取XML节点名称的实现代码
2016/05/18 Javascript
详解JavaScript中|单竖杠运算符的使用方法
2016/05/23 Javascript
Angular中使用ui router实现系统权限控制及开发遇到问题
2016/09/23 Javascript
fullPage.js和CSS3实现全屏滚动效果
2017/05/05 Javascript
详解前后端分离之VueJS前端
2017/05/24 Javascript
详解vue-router2.0动态路由获取参数
2017/06/14 Javascript
基于substring()和substr()的使用以及区别(实例讲解)
2017/12/28 Javascript
Vue.js实现表格渲染的方法
2018/09/07 Javascript
JS Html转义和反转义(html编码和解码)的实现与使用方法总结
2020/03/10 Javascript
jQuery实现鼠标放置名字上显示详细内容气泡提示框效果的方法分析
2020/04/04 jQuery
ant-design-vue按需加载的坑的解决
2020/05/14 Javascript
Python不规范的日期字符串处理类
2014/06/10 Python
Python cookbook(数据结构与算法)根据字段将记录分组操作示例
2018/03/19 Python
Python3之读取连接过的网络并定位的方法
2018/04/22 Python
python字符串格式化方式解析
2019/10/19 Python
浅谈ROC曲线的最佳阈值如何选取
2020/02/28 Python
解决pycharm中的run和debug失效无法点击运行
2020/06/09 Python
Python的3种运行方式:命令行窗口、Python解释器、IDLE的实现
2020/10/10 Python
python中子类与父类的关系基础知识点
2021/02/02 Python
Python3.9.1中使用split()的处理方法(推荐)
2021/02/07 Python
新媒传信软件测试面试题
2013/02/24 面试题
应届毕业生个人自荐信范文
2013/11/30 职场文书
机械设计毕业生自荐信
2014/02/02 职场文书
新闻工作者先进事迹
2014/05/26 职场文书
离婚协议书怎么写
2014/09/12 职场文书