学习java Script的热身作业

Posted Objiect

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了学习java Script的热身作业相关的知识,希望对你有一定的参考价值。

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3 <head>
  4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5 <title>无标题文档</title>
  6 <style>
  7 .dv { width:800px; height:600px; text-align:center;}
  8 .td2 { width:80px; height:30px; border:solid #CCC 1px; background:#F00; color:#FFF; text-align:center; position:relative;}
  9 .dv1 { width:150px; height:150px; border:solid #000 3px;}
 10 .dv2 { width:300px; height:250px; border:solid #CCC 20px; position:absolute; top:100px; left:460px; display:none; background:#FFF;}
 11 .td3 { width:30px; height:30px; border:solid #999 1px; text-align:center; color:#FFF;}
 12 .td4 { width:30px; height:30px; border:solid #999 1px; text-align:center; color:#666; background:#CCC;}
 13 .td5 { width:60px; height:30px; border:solid #999 1px; text-align:center; color:#FFF; background:#009;}
 14 .tb { padding-left:70px; padding-top:20px;}
 15 </style>
 16 <script>
 17 window.onload=function(){
 18 var td1=document.getElementById("td");
 19 var dv0=document.getElementById("dva");
 20 var dv1=document.getElementById("dvv");
 21 var dv2=document.getElementById("dve");
 22 var color1=document.getElementById("c1");
 23 var color2=document.getElementById("c2");
 24 var color3=document.getElementById("c3");
 25 var width1=document.getElementById("w1");
 26 var width2=document.getElementById("w2");
 27 var width3=document.getElementById("w3");
 28 var height1=document.getElementById("h1");
 29 var height2=document.getElementById("h2");
 30 var height3=document.getElementById("h3");
 31 var re=document.getElementById("recover");
 32 var su=document.getElementById("sure");
 33 
 34 td1.onclick=function(){
 35 dv2.style.display=\'block\';
 36 dv0.style.background=\'#999999\';
 37 }
 38 
 39 color1.onclick=function(){
 40 dv1.style.background=\'#F00\';
 41 }
 42 color1.onmouseover=function(){
 43 color1.style.background=\'#F00\';
 44 }
 45 color1.onmouseout=function(){
 46 color1.style.background=\'#99CC66\';
 47 }
 48 
 49 color2.onclick=function(){
 50 dv1.style.background=\'#FF0\';
 51 }
 52 color2.onmouseover=function(){
 53 color2.style.background=\'#FF0\';
 54 }
 55 color2.onmouseout=function(){
 56 color2.style.background=\'#CCCC00\';
 57 }
 58 
 59 color3.onclick=function(){
 60 dv1.style.background=\'#00F\';
 61 }
 62 color3.onmouseover=function(){
 63 color3.style.background=\'#00F\';
 64 }
 65 color3.onmouseout=function(){
 66 color3.style.background=\'#3399CC\';
 67 }
 68 
 69 width1.onclick=function(){
 70 dv1.style.width=\'200px\';
 71 }
 72 width1.onmouseover=function(){
 73 width1.style.background=\'#F90\';
 74 }
 75 width1.onmouseout=function(){
 76 width1.style.background=\'#CCC\';
 77 }
 78 
 79 width2.onclick=function(){
 80 dv1.style.width=\'300px\';
 81 }
 82 width2.onmouseover=function(){
 83 width2.style.background=\'#F90\';
 84 }
 85 width2.onmouseout=function(){
 86 width2.style.background=\'#CCC\';
 87 }
 88 
 89 width3.onclick=function(){
 90 dv1.style.width=\'400px\';
 91 }
 92 width3.onmouseover=function(){
 93 width3.style.background=\'#F90\';
 94 }
 95 width3.onmouseout=function(){
 96 width3.style.background=\'#CCC\';
 97 }
 98 
 99 height1.onclick=function(){
100 dv1.style.height=\'200px\';
101 }
102 height1.onmouseover=function(){
103 height1.style.background=\'#F90\';
104 }
105 height1.onmouseout=function(){
106 height1.style.background=\'#CCC\';
107 }
108 
109 height2.onclick=function(){
110 dv1.style.height=\'300px\';
111 }
112 height2.onmouseover=function(){
113 height2.style.background=\'#F90\';
114 }
115 height2.onmouseout=function(){
116 height2.style.background=\'#CCC\';
117 }
118 
119 height3.onclick=function(){
120 dv1.style.height=\'400px\';
121 }
122 height3.onmouseover=function(){
123 height3.style.background=\'#F90\';
124 }
125 height3.onmouseout=function(){
126 height3.style.background=\'#CCC\';
127 }
128 
129 re.onclick=function(){
130 dv1.style.width=\'150px\';
131 dv1.style.height=\'150px\';
132 dv1.style.background=\'none\';
133 }
134 
135 su.onclick=function(){
136 dv2.style.display=\'none\';
137 dv0.style.background=\'none\';
138 }
139 }
140 </script>
141 </head>
142 
143 <body>
144 <div id="dva" class="dv">
145 <table>
146 <tr>
147 <td>
148 <strong>请为下面的DIV设置样式:</strong>
149 </td>
150 <td id="td" class="td2">
151 点击设置
152 </td>
153 </tr>
154 </table>
155 <div id="dvv" class="dv1">
156 </div>
157 <div id="dve" class="dv2">
158 <table cellspacing="10px">
159 <tr>
160 <td>请选择背景颜色:</td>
161 <td id="c1" class="td3" bgcolor="#99CC66">红</td>
162 <td id="c2" class="td3" bgcolor="#CCCC00">黄</td>
163 <td id="c3" class="td3" bgcolor="#3399CC">蓝</td>
164 </tr>
165 <tr>
166 <td>请选择宽(px):</td>
167 <td id="w1" class="td4">200</td>
168 <td id="w2" class="td4">300</td>
169 <td id="w3" class="td4">400</td>
170 </tr>
171 <tr>
172 <td>请选择高(px):</td>
173 <td id="h1" class="td4">200</td>
174 <td id="h2" class="td4">300</td>
175 <td id="h3" class="td4">400</td>
176 </tr>
177 </table>
178 <table class="tb" cellspacing="10px">
179 <tr>
180 <td id="recover" class="td5">恢复</td>
181 <td id="sure" class="td5">确定</td>
182 </tr>
183 </table>
184 </div>
185 </div>
186 </body>
187 </html>
热身作业

以上是关于学习java Script的热身作业的主要内容,如果未能解决你的问题,请参考以下文章

软件工程2021:第1次作业—— 自我介绍 + “分析" 软件(热身运动)

软件工程2021:第1次作业—— 自我介绍 + "分析" 软件(热身运动)

软件工程2021:第1次作业—— 自我介绍 + “分析" 软件(热身运动)

201621123062《java程序设计》第九周作业总结

软件测试2021:第一次作业 -- 热身练习

201621123054《Java程序设计》第九周学习总结