console 命令行工具 X clear

console

console.log('11111111111111111')

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>菜鸟教程(runoob.com)</title>
	<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">

	</script>
	<script>
		function displayDate(){
	        document.getElementById("demo").innerHTML=Date();
        }
        $(document).ready(function(){
            $("#demo001").click(function(){
                $(this).hide();
                setTimeout(()=>{
                    $(this).show();
                    console.log('22222222');
                }, 1000);
            });
        });
	</script>
</head>

<body>

	<h1>我的第一个 JavaScript 程序</h1>
	<h2 id="demo001">------点我我就消失系列-----------</h2>
	<p id="demo">这是一个段落</p>
	<button type="button" onclick="displayDate()">显示日期</button>

	<div class='div001'>
		<div class='sub1'>
			<span class='mg-auto bg-y'> text </span>
        </div>
        <div class='sub2 child-v-center'>22222</div>
        <div class='sub3 child-center'> 
            <span class='bg-y'> 3333333333333333333 </span>
        </div>
    </div>

</body>
</html>

.div001{
    display: flex;
    height: 100px;
    background: #f1f1f1;
}

.sub1{
    flex: 0 0 100px;
    background: red;

    display: flex;  //for child center
}

.sub2{
    flex: 0 0 150px;
    background: green;
}

.sub3{
    flex: 1;
    background: blue;
}

.mg-auto{
    margin: auto;
}

.bg-r{
    background: red;
}
.bg-g{
    background: green;
}
.bg-b{
    background: blue;
}
.bg-y{
    background: yellow;
}
.child-v-center{
    display: flex;
    align-items: center;
}
.child-center{
    display: flex;
    justify-content: center;
    align-items: center;
}