原生JS实现-星级评分系统的简单实例
今天我又写了个很酷的实例：星级评分系统（可自定义星星个数、显示信息）
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实现-星级评分系统的简单实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。
相关推荐
-
JS实现带提示的星级评分效果完整实例
本文实例讲述了JS实现带提示的星级评分效果.分享给大家供大家参考,具体如下: 这是一款JS仿淘宝网的星级评分系统,鼠标放在上边可以显示星级代表的评分级别,鼠标点击时会选中当前的星级,目前此功能在网页上十分流行,虽然是仿做的,但已经很不错的功能了,希望大家喜欢! 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-start-level-pf-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD
-
jquery插件star-rating.js实现星级评分特效
特效介绍 jquery星级评分插件star-rating.js下载插件,点击星星或者心的左边,就是半分,右边就是1分.点击减号,分数置为0.不兼容IE8以下的浏览器. 演示图 使用方法 第一步.引入下面的代码: 复制代码 代码如下: <link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet"> <script s
-
很酷的星级评分系统原生JS实现
今天我又写了个很酷的实例:星级评分系统(可自定义星星个数.显示信息) sufuStar.star();使用默认值5个星星,默认信息 var msg = [........]; sufuStar.star(10,msg);自定义星星个数为10.显示信息msg格式参考默认值,条数必须和星星个数一致: 自己实现一些实例,有个好处,能增加应用各知识点的熟练度,还能检验出自己的薄弱项!一经发现,立即翻API文档恶补! 不知道是不是我太笨,这个实例居然写了整整一天! 不废话了,先说下这个实例涉及的知识点
-
JavaScript制作淘宝星级评分效果的思路
小编也是刚开始学JavaScript,觉得淘宝评星效果很棒,于是产生了自己写一个的想法,先给大家分享一下实现效果: 现附上自己写的源代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script language="JavaScript" type="text/javascript">
-
JavaScript实现星级评分
事件onmouseover <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>JavaSc
-
javascript 星级评分效果(手写)
今天上午抽空随手写了个星级评分的效果,给大家分享下.由于水平有限,如有问题请指出. 首先要准备一张星星的图片,灰色是默认状态,黄色是选择状态.如图: 最后附上代码: 复制代码 代码如下: <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>javascript星级评分</title> <style
-
原生JS实现-星级评分系统的简单实例
今天我又写了个很酷的实例:星级评分系统(可自定义星星个数.显示信息) sufuStar.star(); 使用默认值5个星星,默认信息 var msg = [........]; sufuStar.star(10,msg); 自定义星星个数为10.显示信息msg格式参考默认值,条数必须和星星个数一致: 自己实现一些实例,有个好处,能增加应用各知识点的熟练度,还能检验出自己的薄弱项!一经发现,立即翻API文档恶补! 不知道是不是我太笨,这个实例居然写了整整一天! 不废话了,先说下这个实例涉及的知识点
-
Angularjs渲染的 using 指令的星级评分系统示例
本文介绍Angularjs渲染的 using 指令的星级评分系统示例,分享给大家,具体如下: 我试图创建静态使用 angularjs/离子成效甚微的星级评分系统.但目前什么都不输出到屏幕上......我是我做错了吗? service.html <ion-list> <ion-item ng-repeat="business in businessList track by $index" class="item-icon-right"> &l
-
原生js实现仿window10系统日历效果的实例
舞动的灵魂版js日历,完全采用js实现,故而实现了与语言无关,jsp.asp.net php asp均可使用.无论你是开发软件,还是网站,均是不可或缺的实用代码. 该日历主要实现了获取当前时间时分秒,年月日星期,动态生成选择年的select,月的select,然后根据你所选中的年月,显示该年月对应的这一个月的日期. 点击上一个月,下一个月按钮,在下拉列表中显示对应的年月. <!DOCTYPE html> <html lang="en"> <head>
-
原生JS取代一些JQuery方法的简单实现
1.选取元素 // jQuery var els = $('.el'); // Native var els = document.querySelectorAll('.el'); // Shorthand var $ = function (el) { return document.querySelectorAll(el); } querySelectorAll方法返回的是NodeList对象,需要转换为数组. myList = Array.prototype.slice.call(myNo
-
10行原生JS实现文字无缝滚动(超简单)
废话不多说,直接上代码 <section class="pro_quota_tip"> <div class="tip_box"> <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external
-
纯js实现html转pdf的简单实例(推荐)
项目开发中遇到了一个变态需求,需要把一整个页面导出为pdf格式,而且要保留页面上的所有的表格.svg图片和样式. 简而言之,就是希望像截图一样,把整个页面截下来,然后保存成pdf. 咋不上天呢-- 查了一下,能够实现html转pdf的方法还是挺多的,大概有以下几种: 1.大部分浏览器就有这个功能.然而我们客户要的可不是这个,人家要的是能够在系统中主动触发的导出为pdf功能,所以这种方案pass. 2.利用第三方工具.我找到了一种利用wkhtmltopdf这种工具来导出的方案,自己在我们的项目中试
-
原生js封装添加class,删除class的实例
一.添加class function addClass(ele,cName) { var arr = ele.className.split(' ').concat(cName.split(" ")); for(var i=0;i<arr.length;i++){ for(var k=arr.length-1;k>i;k--){ (arr[k]==="")&&arr.splice(k,1); (arr[i]===arr[k])&&
-
用js实现放大镜的效果的简单实例
第一次发博客,还有点小激动,本人现在正在天津上大学,希望以后从事前端这一行业,学习的时间不长,写博客为了记录自己的学习过程和收获,当然也算是巩固.可能写的东西不会像大牛那样高大上,只是一些基本的内容,当然我也会收藏一些我认为好的,不错的文章(其实最主要是我能看懂....).我相信以后自己也能够写出高大上的东西.加油! 废话说的有点多,说正事.前几天看了一段潭州教育的教学视频,其中的老师是用JQuery实现放大镜的效果(老师讲的是在是太慢,各种乱扯,跳着看的).由于我还没有好好的学习过JQuery
-
原生js 封装get ,post, delete 请求的实例
现在的项目中都在用VUE 以及react 等MVC, MVVM 框架. 丢弃了原始的JQ .不可能为了个$.ajax();而把JQ引进来吧. 在vue1的开发中 提供了 vueResouce, vue2 出来后明确提出了不在更新vueResouce 而提供axios 的方法. 在react 的开发中提供fetch 封装的方法.等等.但在工作与后台的交互中基本都是form表单的形式.于是自己封装了个 POST,GET,DELETE 的请求方式.当然根据不同的公司,不同的方式.都可以自己扩展.目前