js简单实现遮罩层

最新推荐文章于 2024-01-25 14:46:30 发布

王先森0208

最新推荐文章于 2024-01-25 14:46:30 发布

阅读量1.3k

点赞数

本文链接：https://blog.csdn.net/fff07/article/details/78376681

版权

做的妙味的一个课后作业：比较笨的js,不过遮罩层很好实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>热身课后练习1</title>
    <link rel="stylesheet" type="text/css" href="afterClass.css">
</head>

<body>
<div id="bar">
    <h1>请为下面的DIV设置样式：</h1>
    <h3 id="h3">点击设置</h3>
</div>
<div id="box" class="box"></div>
<div class="bg" id="bg"></div>
<div id="center_box" class="center_box">
    <div>
        <ul>
            <li id="li1">
                <strong>请选择背景色：</strong>
                <div class="color_box"></div>
                <div class="color_box"></div>
                <div class="color_box"></div>
            </li>
            <li id="li2">
                <strong>请选择宽度：&nbsp;&nbsp;&nbsp;</strong>
                <div class="color_box">200px</div>
                <div class="color_box">300px</div>
                <div class="color_box">400px</div>
            </li>
            <li id="li3" style="margin: 0;">
                <strong>请选择高度：&nbsp;&nbsp;&nbsp;</strong>
                <div class="color_box">200px</div>
                <div class="color_box">300px</div>
                <div class="color_box">400px</div>
            </li>
        </ul>
    </div>
    <div>
        <input id="reset" type="button" value="恢复" οnclick="resetx()">
        <input id="submit" type="button" value="确定" οnclick="submitx()">
    </div>
</div>
<script>
    var box=document.getElementById("box");
    var center_box=document.getElementById("center_box");
    var h3=document.getElementById("h3");
    var bg=document.getElementById("bg");
//    var small_box=document.getElementById("li1").getElementsByTagName("div");
    var small_box=document.getElementsByClassName("color_box");
    small_box[0].onclick=function () {
        box.style.backgroundColor="red";
    } ;
    small_box[1].onclick=function () {
        box.style.backgroundColor="yellow";
    }  ;

    small_box[2].onclick=function () {
        box.style.backgroundColor="blue";
    } ;
    small_box[3].onclick=function () {
        box.style.width="200px";
    } ;
    small_box[4].onclick=function () {
        box.style.width="300px";
    } ;
    small_box[5].onclick=function () {
        box.style.width="400px";
    } ;
    small_box[6].onclick=function () {
        box.style.height="200px";
    } ;
    small_box[7].onclick=function () {
        box.style.height="300px";
    } ;
    small_box[8].onclick=function () {
        box.style.height="400px";
    } ;

    var reset=document.getElementById("reset");
    var submit=document.getElementById("submit");

    function resetx() {
        box.style.backgroundColor="gray";
        box.style.width="200px";
        box.style.height="200px";

    }
    function submitx() {
        center_box.style.display="none";
        bg.style.display="none";

    }
    h3.onclick=function () {
        center_box.style.display="block";
        bg.style.display="block";

    }
</script>

</body>
</html>

/**{*/
    /*margin: 0;*/
    /*padding: 0;*/
/*}*/
#bar{
    /*float: left;*/
    height: 50px;
}
h1,h3{
    margin: 0;
    padding: 0;
    height:50px;
    line-height:50px;
    /*text-align: center;*/
    float: left;

}
.box{
    float: left;
    background: gray;
    width:200px;
    height: 200px;
    border:1px black solid;

}
.bg{
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity:0.5;
    background-color: black;
    display: none;
}
.center_box{
    position: absolute;
    left: 400px;
    top: 60px;
    float: left;
    margin-left: 20px;
    border: solid darkgray 15px;
    text-align: center;
    width: 300px;
    height: 200px;
    background: white;
    display: none;
    z-index: 2;
}
.center_box ul{
    /*margin: 0;*/
    padding: 0;
    margin-left: 20px;
}
.center_box ul>li{
    text-align: left;
    /*width: 40%;*/
    padding: 0;
    margin-bottom:20px;
    height: 30px;
    line-height:30px;
}
.center_box input{
    background: cadetblue;
}

.center_box strong{
    float: left;
    height: 30px;
    line-height:30px;
}
.center_box ul{
    float: left;
}
.color_box{
    width: 30px;
    height: 30px;
    float: left;
    /*background: #000;*/
    line-height:30px;
    margin-left: 10px;
    font-size:10px;
}
.color_box:nth-of-type(1){
    background: red;
}
.color_box:nth-of-type(2){
    background: yellow;
}
.color_box:nth-of-type(3){
    background: blue;
}
.center_box ul li:nth-of-type(2) .color_box{
    background: darkgray;
}
.center_box ul li:nth-of-type(3) .color_box{
    background: darkgray;
}

.center_box input{
    width: 50px;
    /*float: left;*/
}

王先森0208

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js简单实现遮罩层

做的妙味的一个课后作业：比较笨的js,不过遮罩层很好实现html>html lang="en">head> meta charset="UTF-8"> title>热身课后练习1title> link rel="stylesheet" type="text/css" href="afterClass.css">head>body>div id="bar"
复制链接

扫一扫