移动端星级评分效果的实现

星级评分在网页当中是经常用到的，今天特地用原生的JS实现了在移动端中的星级评分效果。由于在移动端中是没有鼠标事件的，所以在移动端中的星级评分效果的实现方式要与pc端稍微有点不同，就是要把相应的事件转成移动端的事件。
星级评分的目录结构如下：

图片资源也很简单：

星级评分的html结构很简单：

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/><meta name="apple-mobile-web-app-capable" content="yes"/><meta name="apple-mobile-web-app-status-bar-style" content="black"/><meta http-equiv="pragma" content="no-cache"/><title>移动星级评分</title><meta name="format-detection" content="telephone=no,email=no"/><meta name="applicable-device" content="mobile"/><link rel="stylesheet" href="./css/star6.css" />
</head>
<body>
<div class="wrap"><div class="star-out" data-score="4.0"><p class="star-score"></p></div>
</div>
<script src="./js/star6.js"></script>
</body>
</html>

html中data-score属性是为了保存评分数据，传给后台用的。
css代码如下：

/*标签样式初始化*/
a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline;word-wrap:break-word;
}
input{white-space:nowrap;
}
input:-webkit-autofill {-webkit-box-shadow:0 0 0px 1000px #fff inset;
}
*{background-repeat:no-repeat;-webkit-tap-highlight-color:rgba(0,0,0,0);
}
ul,li,ol{list-style:none;
}
img{border:none;-webkit-tap-highlight-color:rgba(0,0,0,0);
}
html, body{height:100%;font-family:"微软雅黑";color:#303445;
}
a{text-decoration:none;border:none;outline:none;color:#303445;tap-highlight-color:rgba(0,0,0,0);focus-ring-color:rgba(0, 0, 0, 0);-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-focus-ring-color:rgba(0, 0, 0, 0);-moz-tap-highlight-color:rgba(0,0,0,0);-moz-focus-ring-color:rgba(0, 0, 0, 0);
}
a:visited{color:inherit;
}
input,button{outline:none;
}
/*响应式布局*/
@media only screen and (min-width: 320px){html{ font-size:50px;}
}
@media only screen and (min-width: 360px){html{ font-size:56.25px;}
}
@media only screen and (min-width: 375px){html{ font-size:58.59px;}
}
@media only screen and (min-width: 400px){html{ font-size:62.5px;}
}
@media only screen and (min-width: 414px){html{ font-size:64.68px;}
}
@media only screen and (min-width: 640px){html{ font-size:100px;}
}
@media only screen and (min-width: 768px){html{ font-size:120px;}
}.wrap {margin:50px auto;display:flex;justify-content:center;
}.wrap .star-out {height:33px;width:165px;background:url("../images/star.png");cursor:pointer;display:inline-block;font-size:0;
}.wrap .star-score {width:132px;height:33px;background:url("../images/star.png") 0 72px;
}

我们先用面向过程的方法实现其中的js逻辑：

window.onload = function () {function bind(obj, ev, fn) {if (obj.addEventListener) {obj.addEventListener(ev, fn, false);} else {obj.attachEvent('on' + ev, function() {fn.call(obj);});}}var oStarOut = document.querySelector('.star-out');var oStarScore = document.querySelector('.star-score');var totalWidth = 165; // 星级评分组件总宽度var fraction = 0.0; // 分数bind(oStarOut, 'touchend', function (e) {    // 鼠标点与星级评分组件左端的距离var oDis =  e.changedTouches[0].pageX - e.srcElement.offsetLeft;var newScore = (oDis / totalWidth).toFixed(2);if (newScore > 0.00 && newScore <= 0.20) {newScore = 0.20;fraction = (5 * newScore).toFixed(1); // 1.0分}if (newScore > 0.20 && newScore <= 0.40) {newScore = 0.40;fraction = (5 * newScore).toFixed(1); // 2.0分}if (newScore > 0.40 && newScore <= 0.60) {newScore = 0.60;fraction = (5 * newScore).toFixed(1); // 3.0分}if (newScore > 0.60 && newScore <= 0.80) {newScore = 0.80;fraction = (5 * newScore).toFixed(1); // 4.0分}if (newScore > 0.80 && newScore <= 1) {newScore = 1;fraction = (5 * newScore).toFixed(1); // 5.0分}var starWidth = Math.floor(newScore * totalWidth);oStarScore.style.width = starWidth + 'px';oStarOut.setAttribute('data-score', fraction);});};

然后，为了方便代码的复用，我们要将以上的代码封装成js模块：

window.onload = function () {var starModule = (function () {var oStarOut = document.querySelector('.star-out');var oStarScore = document.querySelector('.star-score');var totalWidth = 165; // 星级评分组件总宽度var fraction = 0.0; // 分数var bind = function (obj, ev, fn) {if (obj.addEventListener) {obj.addEventListener(ev, fn, false);} else {obj.attachEvent('on' + ev, function() {fn.call(obj);});}};var star = bind(oStarOut, 'touchend', function (e) {// 鼠标点与星级评分组件左端的距离var oDis =  e.changedTouches[0].pageX - e.srcElement.offsetLeft;var newScore = (oDis / totalWidth).toFixed(2);if (newScore > 0.00 && newScore <= 0.20) {newScore = 0.20;fraction = (5 * newScore).toFixed(1); // 1.0分}if (newScore > 0.20 && newScore <= 0.40) {newScore = 0.40;fraction = (5 * newScore).toFixed(1); // 2.0分}if (newScore > 0.40 && newScore <= 0.60) {newScore = 0.60;fraction = (5 * newScore).toFixed(1); // 3.0分}if (newScore > 0.60 && newScore <= 0.80) {newScore = 0.80;fraction = (5 * newScore).toFixed(1); // 4.0分}if (newScore > 0.80 && newScore <= 1) {newScore = 1;fraction = (5 * newScore).toFixed(1); // 5.0分}var starWidth = Math.floor(newScore * totalWidth);oStarScore.style.width = starWidth + 'px';oStarOut.setAttribute('data-score', fraction);});return {star: star};})();starModule.star;};

至此，移动端的星级评分效果就实现了，我们主要用的了移动端的touchend事件来实现，最终的效果如下：

移动端星级评分效果的实现相关推荐

php mysql 星级评分_jQuery+PHP实现星级评分效果
码农公社 210.net.cn 210= 1024 10月24日一个重要的节日--码农(程序员)节 jQuery+PHP实现星级评分效果,评分功能比较常用,例如商城平台就会有个评分功能,本实例就 ...
用css实现星级评分效果
以前看到其他网站实现的实现的星级评分效果,没在意那么多,直到昨天做一个页面需要这个功能效果时,发现自己实现起来还是这么困难,折腾了半天才弄出来. 1. 其实主要是利用背景图片的切换位置来实现星级的效果 ...
html css星级评分,纯css实现星级评分效果
效果效果图如下星级评分实现思路: 5个类型为radio的input,abel标签修改样式背景图为星星 label标签给每个星星鼠标停留时加注名字点击星星有放大旋转的动画 dom结构用form ...
js实现星级评分效果（非常规5个li代码）
1. 前言此方案受到JS单行写一个评级组件启发,自己写了一个简单Demo. 功能有正常滑动,动态显示实心星星个数:当点击确认,则保持当前的实心星星个数:再移动时未点击,则离开后还是保持之前的状态. ...
html 评分星级显示,星级评分效果.html
jquery鼠标滑过星星区域显示评论信息.评论星星打分jquery特效|jsfoot网页特效演示 @charset "utf-8"; /* reset */ *{margin:0 ...
android自定义控件（星级评分）
一.背景视觉过来提了一个需求,要求完成一个星级评分控件,该控件中的星星的颜色需要实现渐变的效果,并且没有渐变的规律,也就是说各个星星的颜色需要不一样,效果如下: 二.问题分析星星控件对应的控件是a ...
java实现星级评分功能_纯CSS的星级评价效果
前言这种星星评价效果,相信大家这个并不陌生,经常会遇到这个.现在如果要我们自己实现一个,很多人第一反应可能用JS+CSS去实现它.这种方式并没有什么不好的地方,只是我们在复用的时候不是很方便,需要带 ...
php星级评分,jQuery_基于jQuery的星级评分插件，首先看一下运行效果如下图所 - phpStudy...
基于jQuery的星级评分插件首先看一下运行效果如下图所示. 鼠标移到星星上该星星前面的所有星星全部变亮,鼠标单击将记录点击的星星数,前面的所有星星将变亮. 一.原理本程序的原理是这样的:一个&qu ...
php mysql 星级评分_jQuery+PHP星级评分实现方法_jquery
本例实现的效果: 过渡动画显示评分操作. 及时更新平均得分和用户所评的分数. 后台限制用户重复评分操作,并在前端及时显示. XHTML HTML结构分为用于显示灰星星div#big_rate.亮星星d ...

移动端星级评分效果的实现

移动端星级评分效果的实现相关推荐

最新文章

热门文章