无标题文档
<script><br/>window.onload=function(){<br/> var td1=document.getelementbyid("td");<br/> var dv0=document.getelementbyid("dva");<br/> var dv1=document.getelementbyid("dvv");<br/> var dv2=document.getelementbyid("dve");<br/> var color1=document.getelementbyid("c1");<br/> var color2=document.getelementbyid("c2");<br/> var color3=document.getelementbyid("c3");<br/> var width1=document.getelementbyid("w1");<br/> var width2=document.getelementbyid("w2");<br/> var width3=document.getelementbyid("w3");<br/> var height1=document.getelementbyid("h1");<br/> var height2=document.getelementbyid("h2");<br/> var height3=document.getelementbyid("h3");<br/> var re=document.getelementbyid("recover");<br/> var su=document.getelementbyid("sure");<br/><br/> td1.onclick=function(){<br/> dv2.style.display='block';<br/> dv0.style.background='#999999';<br/> }<br/><br/> color1.onclick=function(){<br/> dv1.style.background='#f00';<br/> }<br/> color1.onmouseover=function(){<br/> color1.style.background='#f00';<br/> }<br/> color1.onmouseout=function(){<br/> color1.style.background='#99cc66';<br/> }<br/><br/> color2.onclick=function(){<br/> dv1.style.background='#ff0';<br/> }<br/> color2.onmouseover=function(){<br/> color2.style.background='#ff0';<br/> }<br/> color2.onmouseout=function(){<br/> color2.style.background='#cccc00';<br/> }<br/><br/> color3.onclick=function(){<br/> dv1.style.background='#00f';<br/> }<br/> color3.onmouseover=function(){<br/> color3.style.background='#00f';<br/> }<br/> color3.onmouseout=function(){<br/> color3.style.background='#3399cc';<br/> }<br/><br/> width1.onclick=function(){<br/> dv1.style.width='200px';<br/> }<br/> width1.onmouseover=function(){<br/> width1.style.background='#f90';<br/> }<br/> width1.onmouseout=function(){<br/> width1.style.background='#ccc';<br/> }<br/><br/> width2.onclick=function(){<br/> dv1.style.width='300px';<br/> }<br/> width2.onmouseover=function(){<br/> width2.style.background='#f90';<br/> }<br/> width2.onmouseout=function(){<br/> width2.style.background='#ccc';<br/> }<br/><br/> width3.onclick=function(){<br/> dv1.style.width='400px';<br/> }<br/> width3.onmouseover=function(){<br/> width3.style.background='#f90';<br/> }<br/> width3.onmouseout=function(){<br/> width3.style.background='#ccc';<br/> }<br/><br/> height1.onclick=function(){<br/> dv1.style.height='200px';<br/> }<br/> height1.onmouseover=function(){<br/> height1.style.background='#f90';<br/> }<br/> height1.onmouseout=function(){<br/> height1.style.background='#ccc';<br/> }<br/><br/> height2.onclick=function(){<br/> dv1.style.height='300px';<br/> }<br/> height2.onmouseover=function(){<br/> height2.style.background='#f90';<br/> }<br/> height2.onmouseout=function(){<br/> height2.style.background='#ccc';<br/> }<br/><br/> height3.onclick=function(){<br/> dv1.style.height='400px';<br/> }<br/> height3.onmouseover=function(){<br/> height3.style.background='#f90';<br/> }<br/> height3.onmouseout=function(){<br/> height3.style.background='#ccc';<br/> }<br/><br/> re.onclick=function(){<br/> dv1.style.width='150px';<br/> dv1.style.height='150px';<br/> dv1.style.background='none';<br/> }<br/><br/> su.onclick=function(){<br/> dv2.style.display='none';<br/> dv0.style.background='none';<br/> }<br/> }<br/></script>
请选择背景颜色: |
红 |
黄 |
蓝 |
请选择宽(px): |
200 |
300 |
400 |
请选择高(px): |
200 |
300 |
400 |
以上就是分享一篇关于JS的实例代码的详细内容,更多请关注php中文网其它相关文章!