js 星座运势

最新推荐文章于 2024-02-29 16:53:03 发布

qq_37137999

最新推荐文章于 2024-02-29 16:53:03 发布

阅读量1k

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/qq_37137999/article/details/80650488

版权

JS 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>星座运势</title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			#box{
				width: 350px;
				height: 350px;
				border: 1px solid #5EFF5E;
				margin: 200px auto;
				padding: 20px;
			}
			img{
				border: none;
				
			}
			#img{
				width: 50px;
				height: 50px;
				float: left;
				background: url(../images/xz.png) no-repeat;
			}
			.yunshi{
				width: 80px;
				height: 16px;
				display: inline-block;
				position: relative;
				background: url(../images/t2.jpg) no-repeat;
				
			}
			#star{
				width: 40px;
				height: 16px;
				display: inline-block;
				position: absolute;
				top: 0;
				left: 0;
				text-align: left;
				background: url(../images/t2.jpg) 0 bottom;
			}
			section{
				width: 280px;
				height: 50px;
				float: right;
				margin-bottom: 20px;
			}
			select{
				height: 30px;
				line-height: 30px;
				text-align: center;
			}
		</style>
		<script type="text/javascript">
			window.onload = function(){
				//获取元素
				function $(id){ return document.getElementById(id);}
				
				//arr 存放运势的分数  总分10分
				var arr = [5,6,10,4,7];
				//txtArr 存放运势的介绍
				var txtArr = ["白羊座的内容","金牛座的内容","双子座的内容","巨蟹座的内容","狮子座的内容"];
				
				var sel = document.getElementById("select");
				//select 的改变事件
				sel.onchange = function(){
					//alert(this.value);   //得到当前索引号
					$("img").style.backgroundPosition = "0 "+(-50 * this.value)+"px";
					
					//变化星星的个数
					$("star").style.width = arr[this.value] * 8+"px";  //总宽度为80px , 总分为10分，每一份为8px，根据option的value值改变
					//变化整体运势内容
					$("txt").innerHTML = txtArr[this.value]; //根据option的value值改变
				}
			}
		</script>
	</head>
	<body>
		<div id="box">
			<div id="img"></div>
			<section>
				<select name="" id="select">
					<option value="0">白羊座 02.13-05.13</option>
					<option value="1">金牛座 02.13-05.13</option>
					<option value="2">双子座 02.13-05.13</option>
					<option value="3">巨蟹座 02.13-05.13</option>
					<option value="4">狮子座 02.13-05.13</option>
				</select>
				<div>
						今日运势
						<span id="yunshi" class="yunshi">
							<span id="star" class="star"></span>
						</span>
				</div>
			</section>
			<p style="clear: both;" id="txt">整体运势：一直都能够保持好的心情，容光焕发，身边的人都能够感受你的快乐。生活中可能会出现不如意的事情，但... 详细></p>
		</div>
	</body>
</html>

效果：

qq_37137999

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
js 星座运势

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;星座运势&lt;/title&gt; &lt;style type="text/css"&gt; *{ padding: 0; margin:
复制链接

扫一扫