console 命令行工具 X clear
console
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <style>
        body,
        html {
            height: 100%;
        }
        
        span {
            display: inline-block;
        }
        
        #title {
            width: 100px;
            height: 30px;
            background: orangered;
        }
        
        #mouse {
            margin-top: 20px;
            margin-left: 30px;
            width: 100px;
            height: 100px;
            border: 3px solid;
        }
        
        #floats {
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: #000;
            opacity: 0.5;
            filter: alpha(opacity=50);
        }
        
        #alert {
            display: none;
            width: 300px;
            height: 200px;
            background: #fff;
            border: 20px solid #bbbbbb;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -170px;
            margin-top: -120px;
        }
        
        .content {
            margin: 20px;
            text-align: center;
        }
        
        .btn {
            width: 30px;
            text-align: center;
            margin: 3px;
        }
    </style>
    <script>
        window.onload = function() {
            var otitleBtn = document.getElementById('title');
            var oMouse = document.getElementById('mouse');
            var oFloats = document.getElementById('floats');
            var oAlert = document.getElementById('alert');
            var oWidth2 = document.getElementById('width2');
            var oWidth3 = document.getElementById('width3');
            var oWidth4 = document.getElementById('width4');
            var oHeight2 = document.getElementById('height2');
            var oHeight3 = document.getElementById('height3');
            var oHeight4 = document.getElementById('height4');
            var oReset = document.getElementById('reset');
            var oConfirm = document.getElementById('confirm');

            otitleBtn.onclick = function() {
                oFloats.style.display = 'block';
                oAlert.style.display = 'block';
            }

            function color(msg) {
                oMouse.style.background = msg;
            }

        }
    </script>
</head>

<body>
    <strong> 为下面的DIV设置样式：</strong>
    <button id="title">点击设置</button>
    <div id="mouse"></div>
    <div id="floats"></div>
    <div id="alert">
        <div class="content">
            <span>请选择背景颜色：</span>
            <span class="btn"><button onclick="color('red')" style="background:red;">红</button></span>
            <span class="btn"><button onclick="color('yellow')" style="background:yellow;">黄</button></span>
            <span class=" btn"><button onclick="color('blue')" style="background:blue;">蓝</button></span>
        </div>
        <div class="content ">
            <span>请选择宽（px）：</span>
            <span id="width2" class="btn "><button>200</button></span>
            <span id="width3" class="btn "><button>300</button></span>
            <span id="width4" class="btn "><button>400</button></span>
        </div>
        <div class="content ">
            <span>请选择高（px）：</span>
            <span id="height2" class="btn "><button>200</button></span>
            <span id="height3" class="btn "><button>300</button></span>
            <span id="height4" class="btn "><button>400</button></span>
        </div>
        <div class="content ">
            <span id="reset" class="set "><button>恢复</button></span>
            <span id="confirm" class="set "><button>确定</button></span>
        </div>
    </div>
</body>

</html>