demo17-作业1网页换肤

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .set_bg_con{
                width: 440px;
                height: 40px;
                border: 1px solid #DDDDDD;
                margin: 40px auto;
                background-color: #fff;
                
            }
            .set_text{
                line-height: 40px;
                float: left;
                margin: 0 20px 0 10px;
                color: #666;
            }
            .style01,.style02,.style03,.style04,.style05,.style06{
                width: 30px;
                height: 26px;
                margin: 8px 5px;
                background: red;
                cursor: pointer;
                /*设置成横向的*/
                float: right;
            }
            .style01{
                background: #0181cc;
            }
            .style02{
                background: #00b9f1;
            }
            .style03{
                background: #ef8201;
            }
            .style04{
                background: #8fc320;
            }
            .style05{
                background: #e84191;
            }
            .style06{
                background: #ee87b4;
            }
        </style>
        

    </head>
    <body id="body01">
        <div class="set_bg_con">
            <div class="set_text">请选择网页的背景色:</div>
            <div class="style01" id="c01"></div>
            <div class="style02" id="c02"></div>
            <div class="style03" id="c03"></div>
            <div class="style04" id="c04"></div>
            <div class="style05" id="c05"></div>
            <div class="style06" id="c06"></div>
        </div>
    </body>
<script type="text/javascript">
        
            //点击色块改变网页的背景色.
            var oBodybg = document.getElementById("body01")
            var oBtn01 = document.getElementById("c01")
            var oBtn02 = document.getElementById("c02")
            var oBtn03 = document.getElementById("c03")
            var oBtn04 = document.getElementById("c04")
            var oBtn05 = document.getElementById("c05")
            var oBtn06 = document.getElementById("c06")
            
            oBtn01.onclick = function(){
                oBodybg.style.backgroundColor="#0181cc";
            }
            
            oBtn02.onclick = function(){
                oBodybg.style.backgroundColor="#00b9f1";
            }
            
            oBtn03.onclick = function(){
                oBodybg.style.backgroundColor="#ef8201";
            }
            
            oBtn04.onclick = function(){
                oBodybg.style.backgroundColor="#8fc320";
            }
            
            oBtn05.onclick = function(){
                oBodybg.style.backgroundColor="#e84191";
            }
            
            oBtn06.onclick = function(){
                oBodybg.style.backgroundColor="#ee87b4";
            }
            
    </script>
</html>
<!--
    面试的时候写伪代码.可以写中文,如果不会写具体的代码
-->
演示效果: