H5 - 实现半颗星评分功能

demo 地址: https://github.com/iotjin/JhAPICloud_iOS

效果图

代码

<!DOCTYPE HTML>
<html><head><meta charset="UTF-8"><meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" /><meta name="format-detection" content="telephone=no, email=no, date=no, address=no"><title>GridViewDemoList</title><link rel="stylesheet" type="text/css" href="../../../css/api.css" /><link rel="stylesheet" type="text/css" href="../../../css/aui.css" /><style type="text/css">body {background-color: white;}.aui-bar{background: #45C01A;}.score_bg{background: white;padding-top: 15px;}.score_text1{margin-left: 15px;font-size: 15px;}.score_text2{margin-top: 5px;margin-left: 20px;font-size: 15px;}.star_bg0{margin-left: 50px;display: table;}.star_bg{background: yellow;position:relative;width: 50px;height: 50px;display: inline-block;}.starImg{position: absolute;z-index: 100;display: inline-block;width: 50px;height: 50px;pointer-events: none;}star_bg2{position: absolute;z-index: 80;display: inline-block;}.star{display: inline-block;width: 25px;height: 50px;background: orange;}.line1{border-bottom:1px solid gray;}.fen{margin-top: 100px;text-align: center;}</style>
</head><body><header class="aui-bar aui-bar-nav baseThemeColor" id="header"><a class="aui-pull-left aui-btn" tapmode onclick="closeWin()"><span class="aui-iconfont aui-icon-left"></span></a><div class="aui-title">星星样式评分- 10分</div></header><div class="score_bg"><div class="score_text1">请问您对本次服务是否满意？</div><div class="score_text2">（1-10评分，1分不满意，10分非常满意）</div></div><div class="star_bg0"><div class="star_bg"><img class="starImg" src="../../../image/evaluate_star.png"><div class="star_bg2"><div class="star" onclick="clickStar(1)"></div><div class="star" onclick="clickStar(2)"></div></div></div><div class="star_bg"><img class="starImg" src="../../../image/evaluate_star.png"><div class="star_bg2"><div class="star" onclick="clickStar(3)"></div><div class="star" onclick="clickStar(4)"></div></div></div><div class="star_bg"><img class="starImg" src="../../../image/evaluate_star.png"><div class="star_bg2"><div class="star" onclick="clickStar(5)"></div><div class="star" onclick="clickStar(6)"></div></div></div><div class="star_bg"><img class="starImg" src="../../../image/evaluate_star.png"><div class="star_bg2"><div class="star" onclick="clickStar(7)"></div><div class="star" onclick="clickStar(8)"></div></div></div><div class="star_bg"><img class="starImg" src="../../../image/evaluate_star.png"><div class="star_bg2"><div class="star" onclick="clickStar(9)"></div><div class="star" onclick="clickStar(10)"></div></div></div></div><div class="fen" id="fen">10分</div></body><script type="text/javascript" src="../../../script/api.js"></script><script>var selectfraction;apiready = function(){$api.fixStatusBar($api.byId('header'));}function closeWin(){api.closeWin({});}//星星 单选评价function clickStar(value) {event.stopPropagation();console.log('点击评分'+value);// $api.dom('.star').style.background = 'black';var items = $api.domAll(".star");for (var i = 0; i < items.length; i++) {items[i].style.background = 'white';}for (var j = 0; j < value; j++) {items[j].style.background = 'orange';}selectfraction = value;$api.byId('fen').innerHTML = selectfraction+'分';}</script></html>

H5 - 实现半颗星评分功能相关推荐

打分五角星html制作,css简单实现五角星评分、点赞收藏、展示评分（半颗星、1/3颗星）...
css简单实现五角星评分.点赞收藏.展示评分(半颗星.1/3颗星) 1. 前言之前做的好几个项目中,都会遇到打分,评分,点赞这样的需求,写了很多次,每次需要再写的时候,就会翻出之前写过的代码,然后 ...
JAVA做一个五星评论打分字体,css简单实现五角星评分、点赞收藏、展现评分（半颗星、1/3颗星）...
1.前言javascript 以前作的好几个项目中,都会遇到打分,评分,点赞这样的需求,写了不少次,每次须要再写的时候,就会翻出以前写过的代码,而后copy过来.总以为这样的话没有进步,没有把知识放进 ...
进阶篇之纯css 字体实现五角星（半颗星）评分
1.前言之前写了一篇实现五角星打分效果的demo.这个demo用来实现打分效果绰绰有余,那么有时候我们在统计评分的时候,就会有半颗星或者1/3颗星星这样的那要如何实现呢?来来来,纯字体 css实现! ...
微信小程序实现星星评分-整颗星星评分、半颗星星评分、任意颗星星展示
一.实现整颗星星评分(默认一颗星) 1.效果图 2.准备图片 3.remark.wxml <view class="stars"><view wx:for=&qu ...
【前端】ionic--星级评价半颗星实现方法
前言 demo效果个人实现过程小结前言小编最近在做星级评价实现半颗星评价的功能,得到这个需求,便开始了探索之旅,一开始自己登陆淘宝网查看评价效果,发现没有半颗星的效果,并且在网上查找半 ...
评价打分组件，SVG 半颗星的解决方案！
作者:KUMAR HARSH 译者:前端小智来源:blog 有梦想,有干货,微信搜索 [大迁世界] 关注这个在凌晨还在刷碗的刷碗智. 本文 GitHub https://github.com/qq4 ...
微信小程序动态评分展示/五角星展示/半颗星展示/自定义长度展示
一.前言项目中遇到的评分相关的需求其实还挺多.之前也写过网页中关于评分功能实现的文档.这次,是基于微信小程序开发而提炼出一个简单方便使用的方法,网页开发中同样可用.这次使用的还是字体,主要是字体这个 ...
vue自定义星星评分组件rater，可自定义星星图片，大小，暂不支持半颗星
在线预览地址:https://wenyuming.github.io/w-demos/dist/index.html#/rater 鉴于第三方ui库的星星评分组件星星基本上是固定,不能自定义,使用起来 ...
微信小程序打星评分功能
2019独角兽企业重金招聘Python工程师标准>>> 效果图: html: <radio-group bindchange="radioChange"&g ...

H5 - 实现半颗星评分功能

demo 地址: https://github.com/iotjin/JhAPICloud_iOS

效果图

代码

H5 - 实现半颗星评分功能相关推荐

最新文章

热门文章