mui淘宝星级评

最新推荐文章于 2022-07-12 14:38:00 发布
最新推荐文章于 2022-07-12 14:38:00 发布
阅读量1.9k 收藏 4
点赞数 1 
<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link href="css/mui.min.css" rel="stylesheet" />
		<style type="text/css">
			.mui-icon-star{color: #B5B5B5;font-size: 30px;}
	    	.mui-icon-star-filled{color: #FFB400;font-size: 30px;} 
	   		ul{padding: 10px 0px;}
	    	li{display: -webkit-box;width: 100%;padding: 0 10px;} 
	    	li a{-webkit-box-flex: 1;display: block;font-size: 15px;line-height: 30px;color: #000;}
	    	li div{-webkit-box-flex: 2;text-align: right;}
	    	#info{padding: 20px 10px;}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<h1 class="mui-title">评分</h1>
		</header>
		<div class="mui-content">
			<ul class="mui-table-view">
				<li class="star-li">
					<a>运行速度</a>
					<div class="icons">
						<i data-index="1" class="mui-icon mui-icon-star"></i>
						<i data-index="2" class="mui-icon mui-icon-star"></i>
						<i data-index="3" class="mui-icon mui-icon-star"></i>
						<i data-index="4" class="mui-icon mui-icon-star"></i>
						<i data-index="5" class="mui-icon mui-icon-star"></i>
					</div>
				</li>
				<li class="star-li">
					<a>UI界面</a>
					<div class="icons">
						<i data-index="1" class="mui-icon mui-icon-star"></i>
						<i data-index="2" class="mui-icon mui-icon-star"></i>
						<i data-index="3" class="mui-icon mui-icon-star"></i>
						<i data-index="4" class="mui-icon mui-icon-star"></i>
						<i data-index="5" class="mui-icon mui-icon-star"></i>
					</div>
				</li>
				<li class="star-li">
					<a>社区支持</a>
					<div class="icons">
						<i data-index="1" class="mui-icon mui-icon-star"></i>
						<i data-index="2" class="mui-icon mui-icon-star"></i>
						<i data-index="3" class="mui-icon mui-icon-star"></i>
						<i data-index="4" class="mui-icon mui-icon-star"></i>
						<i data-index="5" class="mui-icon mui-icon-star"></i>
					</div>
				</li>
			</ul>
			<div id="info"></div>
		</div>
		<script src="js/mui.min.js"></script>
		<script type="text/javascript" charset="utf-8">
			mui.init();
		      mui('.icons').on('click','i',function(){
		      	var index = parseInt(this.getAttribute("data-index"));//获取当前元素的索引值
		      	var parent = this.parentNode;//获取当前元素的父节点
		      	var children = parent.children;//获取父节点下所有子元素
		      	if(this.classList.contains("mui-icon-star")){//判断当前节点列表中是否含有.mui-icon-star元素
		      		for(var i=0;i<index;i++){//亮星
		      				children[i].classList.remove('mui-icon-star');
		      				children[i].classList.add('mui-icon-star-filled');
		      		}
		      	}else{//重置已经亮星的元素
		      		for (var i = index; i < 5; i++) {
		      			children[i].classList.add('mui-icon-star')
		      			children[i].classList.remove('mui-icon-star-filled')
		      		}
		      	}
		      	document.getElementById("info").innerHTML = parent.previousElementSibling.innerText + "："+index+"星好评";
		      })
		</script>
	</body>

</html>

薄荷糖丷微微凉
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
mui实现评价星星点亮
Yanfengting的博客
03-05 1568
源码 &amp;amp;lt;!DOCTYPE html&amp;amp;gt; &amp;amp;lt;html lang=&amp;quot;en&amp;quot;&amp;amp;gt; &amp;amp;lt;head&amp;amp;gt; &amp;amp;lt;meta charset=&amp;quot;UTF-8&amp;quot;&amp;amp;gt; &amp;
muidemo整理测试
02-16
【MUI技术详解】 "Muidemo整理测试"这个标题揭示了这是一个关于MUI框架的实践与测试项目。MUI是一款专为移动应用开发设计的前端框架，尤其适用于H5页面和微信小程序。它以其轻量级、高效以及高度可定制化的特点，在...
mui星级评价模块
u012442504的专栏
11-21 2258
二话不说，直接mui上代码： &lt;div class="mui-content-padded"&gt; &lt;div class="mui-inline"&gt;星级评分&lt;/div&gt; &lt;div class="icons mui-inline" style="margin-left: 6px;"&gt; &amp
mui入门
SanPhantom的博客
09-26 1962
最近在做手机版网站，对比了jQuery Mobile，zepto，mui，最后选定mui。 官方文档位置：http://dev.dcloud.net.cn/mui/ui/ 12 注意事项： 1. DOM结构 关于mui页面的dom，你需要知道如下规则。 固定栏靠前 所谓的固定栏，也就是带有.mui-bar属性的节点，都是基于fixed定位的元素；常见组件包括：顶部导航栏（.mui-bar-nav...
mui赋值_mui input用法
weixin_39970823的博客
12-18 987
input:focus{border:none !important;}input[type=date] {background-color:transparent;border: none;FILTER: alpha(opacity=0); /*androd*/appearance:none; /*下拉框去掉右侧图标*/-moz-appearance:none;-webkit-appearan...
mui ajax 下拉,mui下拉菜单
weixin_42106357的博客
08-06 998
mui下拉菜单var page = 1;//最大页数var maxPage = Number.MAX_VALUE;mui.init({pullRefresh: {container: '#pullrefresh',up: {auto: true,style: 'circle',contentrefresh: "正在刷新...",height: 50,callback: pullupRefresh}...
MUI框架快速开发
Serena_tz的博客
07-12 2975
使用MUI框架搭建项目，首先我们要下载一个HBuilderX。使用HBuilderX新建一个项目，在工具栏选择文件–新建–项目。 选择5+App项目，选择mui项目模板，输入项目名称，创建成功！ 项目目录如下，包含基本的mui的css、js文件，入口文件是index.html。 输入mh可以快速生成标题栏。 生成的代码如下。 页面效果如图所示。 输入mbo，创建项目主体代码。 在mui-content包含的盒子内书写代码，属于项目主体的代码，当需要滚动的时候，mh生成的标题栏仍然一直在顶部。 输入
mui图片上传
0.2°C
05-11 5125
作为一个后台开发人员、写这个真的是浪费不少脑细胞，虽然做出来了，但是也很麻烦，如果哪位大哥或者小妹妹那里有简单点的，我跪求！ 相关的js 和 css 网盘地址： 链接：https://pan.baidu.com/s/1v-CNj0HiNoUOgF7gL8pMFg 提取码：w3em 首先展示一下效果图： 点击那个加号（注：这个 + （加号）是图标不是图片，不会弄的找前端的给弄）会...
mui实现上下滑动控制显隐效果
LZUGIS
12-30 1573
概述 本文讲述在mui框架下实现上下滑动控制显隐的效果。 效果 实现 html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1.0,maxi...
mui中分页功能
glgom的博客
11-30 7946
这写有完整的JS代码，只要定义好一下几个参数就可以自动生成分页的导航栏 //定义有关分页的全局变量 pageNum：当前页 pageSize：每页显示的数据 pages：总页数 total：总数据数 navigatepageSize：分页导航显示的页码数 效果图： <!DOCTYPE html> <html> <head> <meta ...
mui.js及相关示例
08-18
《mui.js：移动UI框架深度解析与实践指南》 在当今移动互联网的快速发展中，前端开发者需要快速构建高质量、高性能的移动应用。mui.js作为一款轻量级的移动UI框架，以其简洁的API、丰富的组件库和良好的兼容性，...
VUE中使用MUI方法
12-08
VUE中如何使用MUI 1、第一步：下载MUI 百度搜索MUI进入其官网点击右上角github地址，下载MUI文件  2、第二步：拷贝文件 拷贝下载文件的dist目录中的三个文件复制到自己项目中创建的mui目录中 。 若引入的mui.css...
MUI 漫画APP.zip
11-04
《MUI 漫画APP》是一款基于MUI框架开发的简单漫画阅读应用程序。MUI是DCloud（数字天堂）推出的一款轻量级的前端框架，专为移动Web应用设计，旨在提供一套易于上手、功能完备且性能优化的组件库，帮助开发者快速构建...
MUI项目实战源码
05-09
**MUI项目实战源码详解** 本项目是一个跨平台的应用程序，它利用了MUI框架和Vue.js前端框架，结合豆瓣网的开放API，实现了展示热门电影和按条件搜索电影的功能。下面将对这个项目的核心技术和实现细节进行深入探讨...
[毕业设计]VB开发的高校题库与考试管理系统(源代码+论文).zip
08-06
[毕业设计]VB开发的高校题库与考试管理系统(源代码+论文)
mysql-9.0.1-winx64-debug-test.zip
08-06
mysql
java-springboot+vue疗养院管理系统实现源码(项目源码-说明文档)
最新发布
08-06
java-springboot+vue疗养院管理系统 项目关键技术 开发工具：IDEA 、Eclipse 编程语言: Java 数据库: MySQL5.7+ 后端技术：Springboot 前端技术：Vue、HTML5、css、JavaScript 关键技术：springboot、vue、MYSQL、MAVEN 数据库工具：Navicat、SQLyog
java-springboot+vue教学辅助平台实现源码(项目源码-说明文档)
08-06
java-springboot+vue教学辅助平台 项目关键技术 开发工具：IDEA 、Eclipse 编程语言: Java 数据库: MySQL5.7+ 后端技术：Springboot 前端技术：Vue、HTML5、css、JavaScript 关键技术：springboot、vue、MYSQL、MAVEN 数据库工具：Navicat、SQLyog
蚂蚁人工智能综合应用系统前端
08-06
目标通过java+python方式，实现含视频检测、视频分类、语音生成、文生图、图文检索、chatgpt、chatglm、stable-diffusion、数字人等最新主流AI大模型等的综合人工智能应用系统目标通过java+python方式，实现含视频检测、视频分类、语音生成、文生图、图文检索、chatgpt、chatglm、stable-diffusion、数字人等最新主流AI大模型等的综合人工智能应用系统目标通过java+python方式，实现含视频检测、视频分类、语音生成、文生图、图文检索、chatgpt、chatglm、stable-diffusion、数字人等最新主流AI大模型等的综合人工智能应用系统目标通过java+python方式，实现含视频检测、视频分类、语音生成、文生图、图文检索、chatgpt、chatglm、stable-diffusion、数字人等最新主流AI大模型等的综合人工智能应用系统目标通过java+python方式，实现含视频检测、视频分类、语音生成、文生图、图文检索、chatgpt、chatglm、stable-diffusion、数字人等最新主流AI
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值