妙味课堂作业20160113(优化版)
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了妙味课堂作业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; 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>
以上是关于妙味课堂作业20160113(优化版)的主要内容，如果未能解决你的问题，请参考以下文章