星座运势

最新推荐文章于 2021-07-28 13:26:45 发布

mj_leona

最新推荐文章于 2021-07-28 13:26:45 发布

阅读量343

点赞数

本文链接：https://blog.csdn.net/mj_leona/article/details/79553432

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .box{
            width: 280px;
            height: 183px;
            margin: 100px auto;
            position: relative;
            overflow: hidden;
            font-size: 14px;
            border: 1px solid cornflowerblue;
        }
        .box-t{
            width: 278px;
            height: 93px;
        }
        .box-b{
            width: 240px;
            height: 90px;
            margin: 0 auto;
            line-height: 24px;

        }
        .t-title{
            color: cornflowerblue;
            margin:10px 0 10px 20px;
            font:400 16px/16px "Microsoft YaHei";
        }
        .t-ico{
            width: 50px;
            height: 50px;
            background: url("http://mat1.gtimg.com/www/images/qq2012/temp/astroIcon.png") no-repeat;
            float: left;
            margin-left: 10px;
        }
        .t-right{
            float: left;
            margin-left: 20px;
            margin-top: 10px;
            margin-bottom: 10px;
        }
        .yunshi{
            position: relative;
        }
        .yunshi-ico{
            width: 80px;
            height: 13px;
            background: url("http://mat1.gtimg.com/www/images/qq2012/temp/yunshi.png") no-repeat;
            position: absolute;
            left: 68px;
            top: 3px;
        }
        .yunshi-ico1{
            width: 64px;
            height: 13px;
            background: url("http://mat1.gtimg.com/www/images/qq2012/temp/yunshi.png") no-repeat left bottom;
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>

    <script>
        window.onload = function () {
            function $(id) {
                return document.getElementById(id);
            };

            function fn() {
                var ayy=[10,9,8,6,7,5,8,9,10,4,9,5]; //定义运势数组
                var textayy=["今天白羊宝宝会对神秘。通灵方面的事物特别感兴趣，对此类事情喜欢追根究底，而且探索的过程也还...[详细]",
                    "今天金牛不容易掌控自己的情绪，包括言行，都容易受到别人的干扰。放平心态，做一些瑜伽的舒展练...[详细]",
                    "今天的双子要注意健康，精力过于旺盛无处发泄适合高强度练习，但同时也要注意运动过后落汗后出门...[详细]",
                    "今天巨蟹在工作要格外细心，避免因为马虎大意让工作出现失误，容易遭受上级的批评。部分巨蟹有较...[详细]",
                    "今天狮子与人交流非常吃力，如果需要和客户沟通，对方非常的刁钻，自己处在非常弱势的位置，由此...[详细]",
                    "今天的处女们适合多静心冥想。自我反省。探索不为人知的潜意识世界。部分处女的情绪不佳，心中有...[详细]",
                    "今天天秤们容易有购置房产搬家行为，杂事颇多，让你觉得很累。整个人也。这一时的劳累不妨碍你发...[详细]",
                    "今天的天蝎变得内敛不愿意过多的发表自己的观点，内心波澜不惊。部分天蝎子谋划久远长远利益的项...[详细]",
                    "今天的射手需要格外留心自己的身体健康问题。部分射手的副业会给自己带来财利上的收获，但自己还...[详细]",
                    "今天的你会有很多侥幸、占便宜的心理，能量是守恒的，看似一时的意外收获，也很容易在其他地方有...[详细]",
                    "今天的你说话非常容易冲动，要把握好自己的说话分寸，多听少说踏实做事，这样就可以在工作中更好...[详细]",
                    "今天的双鱼会通过阅读学习来提升自己的知识，会让你受益匪浅，从一开始低迷的情绪状态里让你变得...[详细]"];
                $("sele").onchange = function () {
                    $("ico").style.backgroundPosition = "0px "+(-this.value*50)+"px";
                    $("yic").style.width = ayy[this.value]*8+"px";
                    $("bob").innerHTML = textayy[this.value];
                };
            };

            fn();

        };
    </script>
</head>
<body>
    <div class="box">
        <div class="box-t">
            <div class="t-title">星座运势</div>
            <div class="t-yunshi">
                <div class="t-ico" id="ico"></div>
                <div class="t-right">
                    <div class="xingzuo" id="xingzuo">
                        <select id="sele">
                            <option value="0">白羊座3月21日-4月19日</option>
                            <option value="1">金牛座4月20日-5月20日</option>
                            <option value="2">双子座5月21日-6月21日</option>
                            <option value="3">巨蟹座6月22日-7月22日</option>
                            <option value="4">狮子座7月23日-8月22日</option>
                            <option value="5">处女座8月23日-9月22日</option>
                            <option value="6">天秤座9月23日-10月23日</option>
                            <option value="7">天蝎座10月24日-11月22日</option>
                            <option value="8">射手座11月23日-12月21日</option>
                            <option value="9">摩羯座12月22日-1月19日</option>
                            <option value="10">水瓶座1月20日-2月18日</option>
                            <option value="11">双鱼座2月19日-3月20日</option>
                        </select>
                    </div>
                    <div class="yunshi">今日运势：<div class="yunshi-ico"><span class="yunshi-ico1" id="yic"></span></div></div>
                </div>
            </div>
        </div>
        <div class="box-b" id="bob">今天白羊宝宝会对神秘。通灵方面的事物特别感兴趣，对此类事情喜欢追根究底，而且探索的过程也还...[详细]</div>
    </div>
</body>
</html>

//知识点：对于下拉菜单select.onchange的运用，对于this.value的理解，使用数组

mj_leona

关注

0
点赞
踩
1

收藏

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

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;style&gt; .box{ width:
复制链接

扫一扫