星座运势-选择下拉列表选项不同，内容的样式不同

最新推荐文章于 2024-07-14 12:56:18 发布

吃瓜群众欢乐多

最新推荐文章于 2024-07-14 12:56:18 发布

阅读量907

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/sinat_36146776/article/details/52900487

版权

下拉列表改变内容的样式

下拉列表选择改变后，星座图片改变；星星个数改变；内容也发生改变

实现代码如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box {
            width: 320px;
            height: 260px;
            padding-left: 30px;
            margin: 100px auto;
            border: 1px solid #ccc;
        }
        .box-top {
            height: 35px;
            font: 400 18px/35px "microsoft yahei";
            color: #62b4cc;
        }
        .box-middle {
            height: 50px;
            padding-left: 60px;
            margin: 10px 0;
            background: url(images/xingzuo.png) no-repeat;
        }
        select {
            float: left;
        }
        .box-star {
            float: left;
            margin-top: 5px;
            width: 180px;
        }
        .box-bottom {
            padding-right: 30px;
        }
        .icon1 {
            display: inline-block;
            width: 80px;
            height: 13px;
            background: url(images/star.png) no-repeat;
        }
        .icon2 {
            display: inline-block;
            width: 80px;
            height: 13px;
            background: url(images/star.png) no-repeat 0 -28px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="box-top">
            星座运势
        </div>
        <div class="box-middle" id="xingZuo">
            <select name="" id="sel">
                <option value="0">白羊座1-3</option>
                <option value="1">水瓶座2-6</option>
                <option value="2">双子座3-9</option>
                <option value="3">双子座4-9</option>
                <option value="4">双子座5-9</option>
                <option value="5">双子座6-9</option>
                <option value="6">双子座7-9</option>
                <option value="7">双子座8-9</option>
                <option value="8">双子座9-9</option>
                <option value="9">双子座10-9</option>
            </select>
            <div class="box-star">今日运势:
                <span class="icon1">
                    <span class="icon2" id="star"></span>
                </span>
            </div>
        </div>
        <div class="box-bottom" id="content">
            今天工作运势相当的好，但要小心破财，要注意危言耸听的宗教信仰而花费了不理智的钱财，或是身边...[详细]
        </div>
    </div>
    <script type="text/javascript">
        window.οnlοad=function(){
            function $(id){return document.getElementById(id);}
            var arr=[10,9,6,3,2,4,5,7,8,8]//控制星星个数
            var txt=["内容一","内容2","内容3","内容4","内容5","内容6","内容7","内容8","内容9","内容10"];//描述内容
            $("sel").οnchange=function(){
                console.log(this.value);
                $("xingZuo").style.backgroundPosition="left "+(-50*this.value)+"px";
                $("star").style.width=arr[this.value]*8+"px";
                $("content").innerHTML=txt[this.value];
            }
        }
    </script>
</body>
</html>

吃瓜群众欢乐多

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
星座运势-选择下拉列表选项不同，内容的样式不同

下拉列表改变内容的样式下拉列表选择改变后，星座图片改变，星星个数改变实现代码如下： .box { width: 320px; height: 260px; padding-left: 30px; margin: 100px a
复制链接

扫一扫