JavaScript小练习-阿里云开发者社区

JavaScript小练习

2023-09-19 22

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： JavaScript小练习

+关注继续查看

<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-">
     <meta name="viewport" content="width=device-width, initial-scale=.">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>Document</title>
     <style type="text/css">
         .set_bg_con{
            width:px;
            height:px;
            border:px solid #ddd;
            margin:px auto ;
            background-color:#fff
        }
        .set_text{
            line-height:px;
            float:left;
            margin: px  px;
            color:#;
        }
        .style,.style,.style,.style,.style,.style{
            width:px;
            height:px;
            float:left;
            margin:px px;
            background: gold;
            cursor:pointer;
        }
        .style{
            background:#cc;
        }
        .style{
            background:#bf;
        }
        .style{
            background:#ef;
        }
        .style{
            background:#fc;
        }
        .style{
            background:#e;
        }
        .style{
            background:#eeb;
        }
    </style>
    <script type="text/javascript">

        window.onload = function(){
            var oBtn = document.getElementById('c');
            var oBtn = document.getElementById('c');
            var oBtn = document.getElementById('c');
            var oBtn = document.getElementById('c');
            var oBtn = document.getElementById('c');
            var oBtn = document.getElementById('c');
            var oBody = document.getElementById('body')

            oBtn.onclick = function(){
                oBody.style.backgroundColor = '#cc';
            }

            oBtn.onclick = function(){
                oBody.style.backgroundColor = '#bf';
            }

            oBtn.onclick = function(){
                oBody.style.backgroundColor = '#ef';
            }

            oBtn.onclick = function(){
                oBody.style.backgroundColor = '#fc';
            }

            oBtn.onclick = function(){
                oBody.style.backgroundColor = '#e';
            }

            oBtn.onclick = function(){
                oBody.style.backgroundColor = '#eeb';
            }


        }

    </script>
</head>
<body id="body">
    <div class="set_bg_con">
        <div class="set_text">请选择网页的背景色：</div>
        <div class="style" id="c"></div>
        <div class="style" id="c"></div>
        <div class="style" id="c"></div>
        <div class="style" id="c"></div>
        <div class="style" id="c"></div>
        <div class="style" id="c"></div>
    </div>
</body>
</html>

<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-">
     <meta name="viewport" content="width=device-width, initial-scale=.">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>Document</title>
     <style type="text/css">
         .set_con{
            width:px;
            height:px;
            border:px solid #;
            margin:px auto ;
        }

        .left_set{
            width:px;
            float:left;
            height:px;
            border-right:px solid #;
            padding-top:px;
        }

        .left_set label{
            float:left;
            width:px;
            height:px;
            line-height:px;
            text-align:left;
            text-indent:px;
            margin-top:px;
            font-size:px;
        }

        .left_set input{
            padding:px;
            width:px;
            height:px;
            border: px solid #;
            float:left;
            margin-top:px;
            text-indent:px;
            outline:none;
        }

        .left_set .setbtn{
            width:px;
            height:px;
            border:px;
            background:#cc;
            color:#fff;
            text-indent:px;
            margin-left:px;
            font-size:px;
            margin-top:px
        }

        .right_show{
            width:px;
            height:px;
            float:left;
            overflow:auto;
        }

        .box{
            width:px;
            height:px;
            border: px solid #;
            background:gold;
            margin:px auto ;
        }

    </style>
    <script type="text/javascript">      
       window.onload = function(){
            var oInput = document.getElementById('input');
            var oInput = document.getElementById('input');
            var oInput = document.getElementById('input');
            var oInput = document.getElementById('input');
            var oInput = document.getElementById('input');
            var oBtn = document.getElementById('input');
            var oBox = document.getElementById('box');

            oBtn.onclick = function(){
                var sVal = oInput.value;
                var sVal = oInput.value;
                var sVal = oInput.value;
                var sVal = oInput.value;
                var sVal = oInput.value;

                oBox.style.width = sVal;
                oBox.style.height = sVal;
                oBox.style.backgroundColor = sVal;
                oBox.style.border = sVal;
                oBox.style.borderRadius = sVal;
            }

       }

    </script>
</head>
<body>
    <div class="set_con">
        <div class="left_set">
            <label>宽度：</label>
            <input type="text" value="px" id="input">
            <label>高度：</label>
            <input type="text" value="px" id="input">
            <label>背景色：</label>
            <input type="text" value="gold" id="input">
            <label>边框：</label>
            <input type="text" value="px solid #" id="input">
            <label>圆角：</label>
            <input type="text" value="px"  id="input">
            <input type="button" value="设 置" class="setbtn" id="input">
        </div>
        <div class="right_show">
            <div class="box" id="box"></div>
        </div>
    </div>
</body>
</html>