前端笔试题阿里篇之一-- css，js打造rating打分效果

最新推荐文章于 2022-09-27 16:32:53 发布

zd10101501

最新推荐文章于 2022-09-27 16:32:53 发布

阅读量1.2k

点赞数

分类专栏：前端面试笔试资料整理

本文链接：https://blog.csdn.net/danzhang1010/article/details/22893009

版权

前端面试笔试资料整理专栏收录该内容

8 篇文章 0 订阅

订阅专栏

在平常的淘宝收到货物之后，可以给货物的服务态度，物流态度打分，这道题目就是要求采用css，div实现这样的效果。原题目如下：

通过 HTML 和 CSS 实现 Rating 效果，请写出 2.0 和 3.5 的实现代码，要求样式可以实现 0.0、0.5、1.0、…、5.0 的所有形态，并通过一句话描述其用法，我自己加入了一个效果，就是点击某颗星之后，移开鼠标，该分数依旧显示。

该题考查的知识点主要有以下几个：

1.对 z-Index属性的掌握，当采用绝对定位方式时，可以i将元素以叠加的方式放置在其他元素之上。在这个rating效果中，采用了不同的3个index值。

2.对行内元素如何定位的掌握。

3.元素宽度变化带来的动画效果。

4.使用js的事件控制元素的样式。

5.a标签的伪属性的理解和使用。

源码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>New Web Project</title>
		<style>
			* {
				margin: 0px;
				padding: 0px;
			}
			ul {
				/*注意此处采用相对对位，这样里面的a标签才能相对ul进行绝对定位 */
				position: relative;
				width: 150px;
				height: 29px;
				list-style: none;
				/*此处的unselected、png图片就是未选中时的黑色星星，让它在x轴方向上平铺*/
				background: transparent url(../images/unselected.png) repeat-x;
			}
			li {

				float: left;
			}
			.start {
			    /*因为a标签是行内元素，只有让它变为块内元素，设置高度才有效*/	
				display: block;
				/*注意初始时都是30px宽*/
				width: 30px;
				height: 29px;
				/*注意采用绝对定位，但是在类选择器中，设置left属性，不起 作用？*/
				position: absolute;
				top: 0px;
				/*重点属性，将它的z-index设置得最大，这样这一层离我们最近。只有它最大，当鼠标移动到别的星星上时，才会触发该星星的hover事件，*/
				z-index: 20;
			}
			.start:hover {
				position: absolute;
				top: 0px;
				/*重点属性，当鼠标移动上去时，它显示的层应该位于它未选中时层的下面，此值一定要比上面的zindex值20小*/
				z-index: 2;
				background: transparent url(../images/s2.png) repeat-x;
			}

			#s_1 {
				left: 0px;
			}
			#s_1:hover {
				width: 30px;
				left: 0px;
			}
			#s_2 {
				left: 30px;
			}
			#s_2:hover {
				/*注意此处的width变了，变成了60，并且它相对于ul的左顶点定位  left：0px，top ：0px；，造成了两颗星变绿的假象*/
				width: 60px;
				left: 0px;
			}
			#s_3 {
				left: 60px;
			}
			#s_3:hover {
				/*注意此处的width变了，变成了90px，并且它相对于ul的左顶点定位。造成了三颗星变绿的假象*/
				width: 90px;
				left: 0px;
			}
			#s_4 {
				left: 90px;
			}
			#s_4:hover {
				width: 120px;
				left: 0px;
			}
			#s_5 {
				left: 120px;
			}
			#s_5:hover {
				width: 150px;
				left: 0px;
			}
			/*该类属性主要用于当点击了该颗星，并且离开时，id=‘selecteda’ li标签显示的样式，它的宽度是点击a标签时动态计算的，当鼠标悬浮到a标签时，它的宽度为0px*/
			._selected {
				background: transparent url(../images/s2.png) repeat-x ;				
				height: 29px;
				display: inline-block;				
				z-index: 1;
			}
		</style>
	</head>
	<body>

		<div>
			<ul>
				<li id="selecteda"></li>
				<li>
					<a id="s_1" class="start" ></a>
				</li>
				<li>
					<a id="s_2" class="start" ></a>
				</li>
				<li>
					<a id="s_3" class="start"></a>
				</li>
				<li>
					<a id="s_4" class="start"></a>
				</li>
				<li>
					<a id="s_5" class="start"></a>
				</li>
			</ul>
		</div>

	</body>
	<script>
	
		var as = document.getElementsByTagName('a');
			var _selecteda = document.getElementById('selecteda');
	
			for (key in as) {
				as[key].href = "javascript:void(0)";
				//为a标签的click注册事件，设置selecteda的宽度和当前选中的星星宽度一样宽
				as[key].onclick = function() {
					_selecteda.className = '_selected';
					var index = this.id.split("_")[1];
					var _width = 30;
					_selecteda.style.width = _width * index + 'px';
	
				};
				as[key].onmouseover = function() {	
					//当鼠标悬浮时 ，将宽度置0			
					_selecteda.style.width ='0px';
				};
	
			}
	
	
	</script>
</html>

<------用到的图片资源

zd10101501

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
前端笔试题阿里篇之一-- css，js打造rating打分效果

在平常的淘宝收到货物之后，可以给货物的服务态度，物流态度打分，这道题目就是要求采用css，div实现这样的效果。原题目如下：通过 HTML 和 CSS 实现 Rating 效果，请写出 2.0 和 3.5 的实现代码，要求样式可以实现 0.0、0.5、1.0、…、5.0 的所有形态，并通过一句话描述其用法，我自己加入了一个效果，就是点击某颗星之后，移开鼠标，该分数依旧显示。该题
复制链接

扫一扫