zoukankan      html  css  js  c++  java
  • 妙味课堂作业20160113(优化版)

    <!DOCTYPE html>
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>2016011220160115</title>
    
        <style>
          #set_color{
            display: inline-block;
             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;
             100%;
            height:100%;
            position: fixed; 
            z-index: 10;
          }
          #layer_content{
             15%;
            margin-left: 40%;
            background-color: white;
            opacity: 1;
            padding: 20px;
            z-index: 20;
            position: absolute; 
          }
          #target_div{
            border: 5px solid #000;
             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>
  • 相关阅读:
    101. Symmetric Tree(js)
    100. Same Tree(js)
    99. Recover Binary Search Tree(js)
    98. Validate Binary Search Tree(js)
    97. Interleaving String(js)
    96. Unique Binary Search Trees(js)
    95. Unique Binary Search Trees II(js)
    94. Binary Tree Inorder Traversal(js)
    93. Restore IP Addresses(js)
    92. Reverse Linked List II(js)
  • 原文地址:https://www.cnblogs.com/xiayedexin/p/5157253.html
Copyright © 2011-2022 走看看