妙味课堂作业20160113(优化版)

最新推荐文章于 2021-06-16 02:28:50 发布

weixin_30576827

最新推荐文章于 2021-06-16 02:28:50 发布

阅读量79

点赞数

原文链接：http://www.cnblogs.com/xiayedexin/p/5157253.html

版权

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>2016011220160115</title>

    <style>
      #set_color{
        display: inline-block;
        width: 80px;
        text-align: center;
        background-color: red;
        font-size: 16px;
        padding: 10px 0;
        color:white; 
        cursor: pointer;  
      }
      #layer{
        display: none;
      }

      #layer_bg{
        background-color: black;
        opacity: 0.2;
        top:0;
        left:0;
        width: 100%;
        height:100%;
        position: fixed; 
        z-index: 10;
      }
      #layer_content{
        width: 15%;
        margin-left: 40%;
        background-color: white;
        opacity: 1;
        padding: 20px;
        z-index: 20;
        position: absolute; 
      }
      #target_div{
        border: 5px solid #000;
        width: 100px;
        height:100px;
      }
    </style>
  </head>

  <body>
    <p><strong>请为下面的DIV设置样式：</strong><span id="set_color">点击设置</span></p>
    <div id="target_div">
    </div>
    <div id="layer">
      <div id="layer_bg">
      </div>
      <div id="layer_content">
        <p>
          <span>请选择背景色：</span>
            <button value="红">红</button>
            <button value="黄">黄</button>
            <button value="蓝">蓝</button>
        </p>
        <p>
          请选择宽（PX）：
            <button value="200">200</button>
            <button value="300">300</button>
            <button value="400">400</button>
        </p>
        <p>
          请选择高（PX）：
            <button value="200">200</button>
            <button value="300">300</button>
            <button value="400">400</button>
        </p>
          <button value="恢复">恢复</button>
          <button value="确定">确定</button>
      </div>
    </div>


    <script type="text/javascript">
    var btns = document.getElementsByTagName('button');
    var tarDiv = document.getElementById('target_div');
    var colors = ['red','yellow','blue','200px','300px','400px'];
    for (var i = 0; i < btns.length - 1; i++) {
        btns[i].onclick = function(i){
      /********闭包的样例，破解闭包***********/
          return function(){
          if(i>=0 && i<=2){
            tarDiv.style.background = colors[i];
          }
          else if(i>=3 && i<=5){
            tarDiv.style.width = colors[i];
          }
          else if(i>=6 && i<=8){
            tarDiv.style.height = colors[i-3];
          }
          };
        }(i);
    };

    btns[9].onclick = function(){
      tarDiv.style.background = 'white';
      tarDiv.style.width = '100px';
      tarDiv.style.height = '100px';
    }

      btns[3].onmouseover = function(){
      tarDiv.style.background = '#CC6666';
      tarDiv.style.width = '200px';
    }
    btns[10].onclick = function(){
      document.getElementById('layer').style.display = 'none';
    }
    document.getElementById('set_color').onclick = function(){
      document.getElementById('layer').style.display = 'block';
    };

    </script>
  </body>
</html>

转载于:https://www.cnblogs.com/xiayedexin/p/5157253.html

weixin_30576827

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
妙味课堂作业20160113(优化版)

<!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>2016011220160115</title> <style&g...
复制链接

扫一扫