zoukankan html css js c++ java
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 { 800px; height:600px; text-align:center;}
  8 .td2 { 80px; height:30px; border:solid #CCC 1px; background:#F00; color:#FFF; text-align:center; position:relative;}
  9 .dv1 { 150px; height:150px; border:solid #000 3px;}
 10 .dv2 { 300px; height:250px; border:solid #CCC 20px; position:absolute; top:100px; left:460px; display:none; background:#FFF;}
 11 .td3 { 30px; height:30px; border:solid #999 1px; text-align:center; color:#FFF;}
 12 .td4 { 30px; height:30px; border:solid #999 1px; text-align:center; color:#666; background:#CCC;}
 13 .td5 { 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>
示例代码
查看全文
相关阅读:
vue路由跳转的方式（一）
ElementUi树形目录
 Element UI问题总结
 angular入门
 IntelliJ IDEA 指定Java编译版本
 Python 笔记 v1
Typora极简教程
 Gitbook在Windows上安装
 IntelliJ IDEA中查看UML类图
 服务器最大连接数问题
原文地址：https://www.cnblogs.com/123wyy123wyy/p/6857256.html