很酷的星级评分系统原生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 相关文章推荐
如何实现浏览器上的右键菜单
Jul 10 Javascript
[原创]来自ImageSee官方 JavaScript图片浏览器
Jan 16 Javascript
JS 面向对象的5钟写法
Jul 31 Javascript
JavaScript中的类数组对象介绍
Dec 30 Javascript
jQuery使用empty()方法删除元素及其所有子元素的方法
Mar 26 Javascript
让JavaScript中setTimeout支持链式操作的方法
Jun 19 Javascript
基于JavaScript实现快速转换文本语言(繁体中文和简体中文)
Mar 07 Javascript
JavaScript使用键盘输入控制实现数字验证功能
Aug 19 Javascript
Angularjs中controller的三种写法分享
Sep 21 Javascript
令按钮悬浮在(手机)页面底部的实现方法
May 02 Javascript
基于Vue实现图书管理功能
Oct 17 Javascript
移动端H5页面返回并刷新页面(BFcache)的方法
Nov 06 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获取文件绝对路径的代码(上一级目录)
2011/05/29 PHP
PHP高自定义性安全验证码代码
2011/11/27 PHP
Joomla开启SEF的方法
2016/05/04 PHP
IE与FireFox的兼容性问题分析
2007/04/22 Javascript
文本框根据输入内容自适应高度的代码
2011/10/24 Javascript
Eclipse去除js(JavaScript)验证错误
2014/02/11 Javascript
原生JS实现图片轮播与淡入效果的简单实例
2016/08/21 Javascript
Angular 2 利用Router事件和Title实现动态页面标题的方法
2017/08/23 Javascript
用最简单的方法判断JavaScript中this的指向(推荐)
2017/09/04 Javascript
基于vue2.0实现简单轮播图
2017/11/27 Javascript
nodejs超出最大的调用栈错误问题
2017/12/27 NodeJs
vue实现动态列表点击各行换色的方法
2018/09/13 Javascript
基于better-scroll 实现歌词联动功能的代码
2020/05/07 Javascript
python结合opencv实现人脸检测与跟踪
2015/06/08 Python
opencv3/Python 稠密光流calcOpticalFlowFarneback详解
2019/12/11 Python
Python3操作MongoDB增册改查等方法详解
2020/02/10 Python
PyTorch中Tensor的数据统计示例
2020/02/17 Python
Python并发concurrent.futures和asyncio实例
2020/05/04 Python
Python闭包及装饰器运行原理解析
2020/06/17 Python
使用Keras建立模型并训练等一系列操作方式
2020/07/02 Python
Python基础教程之输入输出和运算符
2020/07/26 Python
python+pygame实现坦克大战小游戏的示例代码(可以自定义子弹速度)
2020/08/11 Python
HTML5输入框下拉菜单功能的示例代码
2020/09/08 HTML / CSS
iHerb台湾:维生素、保健品和健康产品
2018/01/31 全球购物
Stubhub英国:购买体育、演唱会和剧院门票
2018/06/10 全球购物
NULL是什么,它是怎么定义的
2015/05/09 面试题
下面关于"联合"的题目的输出是什么
2013/08/06 面试题
TCP/IP的分层模型
2013/10/27 面试题
岗位职责定义及内容
2013/11/08 职场文书
团购业务员岗位职责
2014/03/15 职场文书
中国文明网向国旗敬礼活动精彩寄语2014
2014/09/27 职场文书
会议邀请函
2015/01/30 职场文书
关于调整工作时间的通知
2015/04/24 职场文书
房屋转让协议书(标准范本)
2016/03/21 职场文书
2019年度开业庆典祝福语大全!
2019/07/05 职场文书
MySQL之select、distinct、limit的使用
2021/11/11 MySQL