JS作业及代码

Posted #安生

tags:

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

 

  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>
示例代码

 

以上是关于JS作业及代码的主要内容,如果未能解决你的问题,请参考以下文章

谷歌浏览器调试jsp 引入代码片段,如何调试代码片段中的js

VSCode自定义代码片段——JS中的面向对象编程

VSCode自定义代码片段9——JS中的面向对象编程

js代码片段: utils/lcoalStorage/cookie

JS代码片段:一个日期离现在多久了

HTML5期末大作业:餐饮美食网站设计——咖啡(10页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 咖啡网页设计 美食餐饮网页设计...(代码片段