很酷的星级评分系统原生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 相关文章推荐
javascript 对象的定义方法
Jan 10 Javascript
javascript新建标签,判断键盘输入,以及判断焦点(示例代码)
Nov 25 Javascript
a标签的href与onclick事件的区别详解
Nov 12 Javascript
JS模拟并美化的表单控件完整实例
Aug 19 Javascript
浅谈js基本数据类型和typeof
Aug 09 Javascript
JavaScript的事件机制详解
Jan 17 Javascript
微信小程序 九宫格实例代码
Jan 21 Javascript
基于Vue2实现的仿手机QQ单页面应用功能(接入聊天机器人 )
Mar 30 Javascript
js实现字符全排列算法的简单方法
May 01 Javascript
Vue中使用ElementUI使用第三方图标库iconfont的示例
Oct 11 Javascript
示例vue 的keep-alive缓存功能的实现
Dec 13 Javascript
如何在Angular应用中创建包含组件方法示例
Mar 23 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变量存储的详解
2013/06/13 PHP
PHP获取短链接跳转后的真实地址和响应头信息的方法
2014/07/25 PHP
关于php微信订阅号开发之token验证后自动发送消息给订阅号但是没有消息返回的问题
2015/12/21 PHP
Linux安装配置php环境的方法
2016/01/14 PHP
PHP那些琐碎的知识点(整理)
2017/05/20 PHP
老生常谈PHP面向对象之注册表模式
2017/05/26 PHP
javascript基本语法分析说明
2008/06/15 Javascript
一组JS创建和操作表格的函数集合
2009/05/07 Javascript
跨域表单提交状态的变相判断代码
2009/11/12 Javascript
JQuery 1.4 中的Ajax问题
2010/01/23 Javascript
提高jQuery性能的十个诀窍
2013/11/14 Javascript
window.open 以post方式传递参数示例代码
2014/02/27 Javascript
简单实现js页面切换功能
2021/01/10 Javascript
jQuery使用DataTable实现删除数据后重新加载功能
2017/02/27 Javascript
详解Vuejs2.0之异步跨域请求
2017/04/20 Javascript
jquery ajax异步提交表单数据的方法
2017/10/27 jQuery
layer实现关闭弹出层刷新父界面功能详解
2017/11/15 Javascript
详解webpack3编译兼容IE8的正确姿势
2017/12/21 Javascript
使用node打造自己的命令行工具方法教程
2018/03/26 Javascript
在React项目中使用Eslint代码检查工具及常见问题
2018/10/10 Javascript
微信小程序实现的一键连接wifi功能示例
2019/04/24 Javascript
JS数组splice操作实例分析
2019/10/12 Javascript
three.js 将图片马赛克化的示例代码
2020/07/31 Javascript
使用Python读写及压缩和解压缩文件的示例
2016/07/08 Python
python字符串string的内置方法实例详解
2018/05/14 Python
Python实现将Excel转换成xml的方法示例
2018/08/25 Python
CSS3打造百度贴吧的3D翻牌效果示例
2017/01/04 HTML / CSS
CSS3实现菜单悬停效果
2020/11/17 HTML / CSS
定制别致的瑜伽垫:Sugarmat
2019/06/21 全球购物
自1926年以来就为冰岛保持温暖:66°North
2020/11/27 全球购物
投标单位介绍信
2014/01/09 职场文书
护理目标管理责任书
2014/07/25 职场文书
教师求职自荐信
2015/03/26 职场文书
《倍数和因数》教学反思
2016/02/23 职场文书
小程序实现悬浮按钮的全过程记录
2021/10/16 HTML / CSS
MySQL索引失效十种场景与优化方案
2023/05/08 MySQL