2019-04-09

作者: 沫忘丶 | 来源:发表于2019-04-09 22:42 被阅读0次

【每日经济学人】2019-04-09
卖萌的ScalersTalk第四轮新概念朗读持续力训练Day16
（Vitalik Buterin）论区块链治理中的“共谋”
js的执行机制
获取谷歌AdMob、Adsense账户API授权密钥
js数组方式整理
牌局前转发诗链接
孤独
2019-4-9晨间日记
Mr. L 的ScalersTalk第四轮《新概念》朗读持续力训

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body{
margin: 0;
}
#box{
width: 100px;
height: 100px;
border: 5px solid black;
}
#zzc{
display: none;
}
#bg{
width: 100%;
height: 100%;
background: #000;
opacity: 0.4;
position: absolute;
top: 0;
}
.content{
width: 300px;
height: 200px;
background: #fff;
position: absolute;
left: 40%;
top: 30%;
}
.content p{
text-align: center;
padding: 7px;
}
span{
border: 3px solid black;
padding: 2px;
margin: 2px;
}
</style>
</head>
<body>
<p>
请为下面的div设置样式：<button id="btn" type="button">点击设置</button>
</p>
<div id="box"></div>

    <div id="zzc">
        <div id="bg"></div>
        <div class="content">
            <p>请准备背景颜色：
            <span id="red">红</span>
            <span id="yellow">黄</span>
            <span id="blue">蓝</span>
            </p>
            <p>请设置宽度：
            <span id="w200">200px</span>
            <span id="w300">300px</span>
            <span id="w400">400px</span>
            </p>
            <p>请设置高度：
            <span id="h200">200px</span>
            <span id="h300">300px</span>
            <span id="h400">400px</span>
            </p>
            <p>
                <span id="set">
                    重置
                </span>
                <span id="return">
                    返回
                </span>
            </p>
        </div>
        </div>
    <script type="text/javascript">
        var oBtn = document.getElementById('btn');
        var oBox = document.getElementById('box');
        var oZzc = document.getElementById('zzc');
        var oRed = document.getElementById('red');
        var oYellow = document.getElementById('yellow');
        var oBlue = document.getElementById('blue');
        var oW200 = document.getElementById('w200');
        var oW300 = document.getElementById('w300');
        var oW400 = document.getElementById('w400');
        var oH200 = document.getElementById('h200');
        var oH300 = document.getElementById('h300');
        var oH400 = document.getElementById('h400');
        var oSet = document.getElementById('set');
        var oReturn = document.getElementById('return');
        oBtn.onclick = function(){
            oZzc.style.display="block";
        }
        oRed.onclick = function(){
            oBox.style.background = "red";
        }
        oYellow.onclick = function(){
            oBox.style.background = "yellow";
        }
        oBlue.onclick = function(){
            oBox.style.background = "blue";
        }
        oW200.onclick = function(){
            oBox.style.width = "200px";
        }
        oW300.onclick = function(){
            oBox.style.width = "300px";
        }
        oW400.onclick = function(){
            oBox.style.width = "400px";
        }
        oH200.onclick = function(){
            oBox.style.height = "200px";
        }
        oH300.onclick = function(){
            oBox.style.height = "300px";
        }
        oH400.onclick = function(){
            oBox.style.height = "400px";
        }
        oReturn.onclick = function(){
            oZzc.style.display="none";
        }
        oSet.onclick = function(){
            oBox.style.background = "white";
            oBox.style.width = "100px";
            oBox.style.height = "100px";
        }
    </script>
</body>

</html>