JS原生评分组件
JS原生评分组件
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>评分组件</title>
<link rel="stylesheet" href="css/reset.css">
<style>
/*外层底色星星*/
.star-rating{
background-image: url("img/bgimg.svg");
width: 480px;
height: 48px;
background-size: 48px;
cursor: pointer;
position: relative;
}
.star-rating[data-title]:hover::after{
content: attr(data-title);
position: absolute;
left: 0;
background-color: #eee;
padding: 5px 5px;
border-radius: 5px;
}
/*内层星星*/
.star-value{
background-image: url("img/cover.svg");
width: 50%;
height: 100%;
background-size: 48px;
}
</style>
</head>
<body>
<!--外层背景星星和内部覆盖星星-->
<div class="star-rating">
<div class="star-value"></div>
</div>
<div id="rater"></div>
</body>
<script src="js/index.js"></script>
<script>
rater({
element:document.getElementById("rater"),
max:10,
starSize:36,
showTip:true,
step:0.5,
rating:3
});
</script>
</html>
@charset "UTF-8";
body,div,dl,dt,dd,ul,li,pre,form,fieldset,select,input,textarea,button,p,img,iframe{ margin:; padding:; }
h1,h2,h3,h4,h5,h6{ font-weight:normal; margin:; padding:; }
body{ width: 100%; font-family: "Arial Narrow","SimSun","宋体"; background-color: #fff; -webkit-overflow-scrolling: touch;overflow-scrolling: touch; }
/* 重置button边框 */
button{ border: none; }
/* 去掉列表前的标识, li 会继承 */
ol,ul{list-style: none;}
/* 让链接默认不显示下划线*/
a{cursor: pointer;text-decoration: none;}
/* 清理浮动 */
.clearfix:before,.clearfix:after{ display: block; content: " "; clear: both; }
/* for ie67*/
.clearfix{zoom:;}
/* HTML5 媒体文件跟 img 保持一致 */
audio,canvas,video{ display: inline-block; *display: inline; *zoom:; }
address,caption,cite,code,dfn,em,th{ font-style: normal; font-weight: normal; }
.box-sizing{ -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }
/*p{ text-align:justify; text-justify:distribute;}*/
div, p, span { text-overflow: ellipsis; word-break: break-all; word-wrap: break-word; }
/*iphone及ipad下输入框默认内阴影*/
input, button { outline: none; -webkit-appearance: none; }
textarea { resize: none; outline: none; }
img { vertical-align: middle; border:; width: 100%; }
a:active, a:hover { outline:; }
/*ios和android下触摸元素时出现半透明灰色遮罩*/
a, input { border: none; outline: none; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); }
input[type=button] { cursor: pointer; }
input[type=submit] { cursor: pointer; }
reset.css
/*
定义函数 渲染评分组件
*/
function rater(options){
var showTip;
//options为传入的一个参数（为对象）
//判断options是否为一个对象
if(Object.prototype.toString.call(options)!=="[object Object]"){
throw new Error("需要一个字面量对象作为参数");
}
if(typeof options.element === "undefined" || options.element == null){
throw new Error("需要一个dom节点");
}
if(typeof options.showTip === "undefined"){
showTip=true;
}else {
showTip=options.showTip;
}
//console.log(showTip);
if(typeof options.step !== "undefined"){
if(options.step <= 0 || options.step > 1){
throw new Error("step必须是0-1的小数");
}
}
/*
参数：
element:dom 当前作用元素
max:当前最大星星数量
starSize:星星大小
showTip:布尔 true 显示title false 不显示
step:0-1 增长速度
rating:默认几个星星
*/
// 获取参数
var ele=options.element;
var max=options.max||5;
var starSize=options.starSize||48;
var step=options.step||1;
var currentStar;//当前星星数量
var rating;//设置当前记录值 用来判断点击后的记录纸
// Dom操作
ele.style.width=max*starSize+"px";
ele.classList.add("star-rating");
//ele.className += "star-rating";
ele.style.backgroundSize=starSize+"px";
ele.style.height=starSize+"px";
// 创建内部div节点 添加到当前节点中
var createDom=document.createElement("div");
createDom.classList.add("star-value");
createDom.style.backgroundSize=starSize+"px";
// 默认0%
if(!options.rating){
createDom.style.width="0%";
}else{
rating=options.rating;
createDom.style.width=(options.rating/max)*100+"%";
} ele.appendChild(createDom); //mousemove事件函数
function onStarIn(e){
var x=e.offsetX;//父级左边的距离
var eleWidth=ele.offsetWidth;//父级的宽度
var percent=x/eleWidth;//获取百分比
if(step===1){
currentStar=Math.ceil(percent*max);//当前星星数量
}else {
for (var i = step;;i+=step){
if(i>=percent*max){
currentStar=i;
break;
}
}
currentStar=parseFloat(currentStar.toPrecision(12));
}
// 渲染宽度
createDom.style.width=(currentStar/max)*100+"%";
//设置自定义属性
if(showTip){
ele.setAttribute("data-title",currentStar+"/"+max);
}
}
//mouseleave事件函数
function onStarOut(){
if(rating){
createDom.style.width=(rating/max)*100+"%";
}else{
createDom.style.width="0px";
}
}
//click 事件函数
function onStarClick(){
rating=currentStar;
createDom.style.width=(currentStar/max)*100+"%";
}
//绑定事件
ele.addEventListener("mousemove",onStarIn);
ele.addEventListener("mouseleave",onStarOut);
ele.addEventListener("click",onStarClick);
}
运行效果如下：
---星星为背景图片！
---偶尔听到一个课程讲解的，感觉会用到，就留下了。记录于此。
JS原生评分组件的更多相关文章
- 原生JS结合cookie实现商品评分组件
开发思路如下: 1.利用JS直接操作DOM的方式开发商品评分组件,主要实现功能有:显示评价评分的样式以及将用户操作后对应的数据返回到主页面 2.主页面引入商品评分组件的js文件并根据规定格式的数据,生 ...
- ExtJS 4.2 评分组件
上一文章是扩展ExtJS自带的Date组件.在这里将创建一个评分组件. 目录 1. 介绍 2. 示例 3. 资源下载 1. 介绍 代码参考的是 Sencha Touch 2上的一个RatingStar ...
- Vue.js学习 Item11 – 组件与组件间的通信
什么是组件? 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有 ...
- Vue.js 的精髓——组件
开篇:Vue.js 的精髓——组件 写在前面 Vue.js,无疑是当下最火热的前端框架 Almost,而 Vue.js 最精髓的,正是它的组件与组件化.写一个 Vue 工程,也就是在写一个个的组件. ...
- React Native实战系列教程之自定义原生UI组件和VideoView视频播放器开发
React Native实战系列教程之自定义原生UI组件和VideoView视频播放器开发 2016/09/23 | React Native技术文章 | Sky丶清| 4 条评论 | 1 ...
- react 实现评分组件
写了个评分组件,效果如下 组件Rate.js import React, { Component } from 'react' import './Rate.less' export default ...
- js原生高逼格插件
如何定义一个高逼格的原生JS插件 作为一个前端er,如果不会写一个小插件,都不好意思说自己是混前端界的.写还不能依赖jquery之类的工具库,否则装得不够高端.那么,如何才能装起来让自己看起来逼格更高 ...
- js原生代码实现轮播图案例
一.轮播图是现在网站网页上最常见的效果之一,对于轮播图的功能,要求不同,效果也不同! 我们见过很多通过不同的方式,实现这一效果,但是有很多比较麻烦,而且不容易理解,兼容性也不好. 在这里分享一下,用j ...
- 《Ext JS模板与组件基本知识框架图----模板》
最近在整理Ext JS的模板和组件,在参考<Ext JS权威指南>,<Ext JS Web应用程序开发指南>,<Ext JS API>等相关书籍后才写下这篇< ...
随机推荐
- ASICS各跑鞋分类及选购方法
从跑吧转来的,老帖子后面的鞋子可能不能与时俱进 不过前面的方法不错. 1简介: ASICS鞋子鞋底如果有AHAR或AHAR+的为超耐磨标志,而且超耐度一般都是黑色,用指甲刮鞋底时如刮车轮底胶.ASIC ...
- MySQL性能优化的20+条经验
1. 为查询缓存优化你的查询 大多数的MySQL服务器都开启了查询缓存.这是提高性最有效的方法之一,而且这是被MySQL的数据库引擎处理的.当有很多相同的查询被执行了多次的时候,这些查询结果会被放到一 ...
- 微信公众号 报token验证失败
最近两天一直碰到token验证失败的问题,如下图所示 然后上网疯狂的搜索答案,碰到的人还真不少,原因大概有这几个: 1)服务器URL未实名认证 2)token重名(基本不可能) 3)服务器部署的项目 ...
- mysql实现‘主从复制’
mysql主从复制(超简单) 怎么安装mysql数据库,这里不说了,只说它的主从复制,步骤如下: 首先准备多台服务器,其中一台作为主服务器,从服务器数量自定. 1.主从服务器分别作以下操作: 主服务器 ...
- sql server alter column 由于一个或多个对象访问此列，ALTER TABLE ALTER COLUMN 失败
今天在修改一个字段类型,由原来的 varchar(500) 增加到 varchar(1000) 则对应的SQL 语句,执行后如图错误 结果查下来是因为其中一个视图建成了索引视图, 解决办法:先将该视图 ...
- NET(C#)：使用HttpWebRequest头中的Range下载文件片段
转自:http://www.mgenware.com/blog/?p=220 HTTP请求包头信息中有一个Range属性可以指定索取部分HTTP请求的文件.在.NET中则通过HttpWebReques ...
- 马云18年前制止偷井盖视频走红 2013-05-10 11:00:37 来源: 新快报(广州) 有0人参与 分享到 网易微博 新浪微博 腾讯空间 人人网 有道云笔记 在一次访谈中，即将卸任阿里巴巴CEO的马云自曝了他第一次上电视是在1995年。“我刚开始创
马云18年前制止偷井盖视频走红 2013-05-10 11:00:37 来源: 新快报(广州) 有0人参与 分享到 网易微博 新浪微博 腾讯空间 人人网 有道云笔记 在一次访谈中,即将卸任阿里巴巴 ...
- 记一次挖掘115网盘反射型xss，08xss的储存型xss
记一次对115分站简单绕过过滤继续实现xss,08xss平台也中枪!! 115反射型xss url:http://115.qiye.115.com/disk/?ac=select_public_fil ...
- python UI自动化实战记录六：页面1用例编写
使用python自带的unittest测试框架,用例继承自unittest.TestCase类. 1 引入接口类和页面类 2 setUp函数中打开页面,定义接口对象 3 tearDown函数中关闭页面 ...
- bootstrap table footerFormatter用法 统计列求和 sum、average等
其实上一篇blog里已经贴了代码,简单解释一下吧: 1.showFooter: true,很重要,设置footer显示: $(cur_table).bootstrapTable({ url: '/et ...