点滴积累【JS】---JS小功能(button选择颜色)
2013-11-25 10:44
387 查看
效果:
代码:
代码:
<head runat="server"> <title></title> <style type="text/css"> #red { width: 260px; height: 200px; background: #FF0000; display: none; } #green { width: 260px; height: 200px; background: #00FF00; display: none; } #yellow { width: 260px; height: 200px; background: #FFFF00; display: none; } #blue { width: 260px; height: 200px; background: #0000FF; display: none; } </style> <script type="text/javascript"> window.onload = function () { var btn = document.getElementsByTagName('input'); var div = document.getElementsByTagName('div'); for (var i = 0; i < btn.length; i++) { btn[i].index = i; btn[i].onclick = function () { for (var i = 0; i < btn.length; i++) { btn[i].style.background = ''; } switch (this.value) { case '红色': this.style.background = '#FF0000'; break; case '绿色': this.style.background = '#00FF00'; break; case '黄色': this.style.background = '#FFFF00'; break; case '蓝色': this.style.background = '#0000FF'; break; } for (var i = 0; i < btn.length; i++) { div[i].style.display = ''; } div[this.index].style.display = 'block'; } } }; </script> </head> <body> <input type="button" id="btn1" value="红色" style="background-color: #FF0000" /> <input type="button" id="btn2" value="绿色" /> <input type="button" id="btn3" value="黄色" /> <input type="button" id="btn4" value="蓝色" /> <div id="red" style="display: block;"> </div> <div id="green"> </div> <div id="yellow"> </div> <div id="blue"> </div> </body>
相关文章推荐
- JS小功能(button选择颜色)简单实例
- 点滴积累【JS】---JS小功能(onmouseover实现选择月份)
- JS小功能(button选择颜色)简单实例
- 点滴积累【JS】---JS小功能(createElement和insertBefore添加div下面的节点)
- 点滴积累【JS】---JS小功能(JS实现排序)
- 点滴积累【JS】---JS小功能(JS实现模仿微博发布效果)
- 点滴积累【JS】---JS小功能(JS实现动态添加运动属性)
- 点滴积累【JS】---JS小功能(setInterval实现图片效果显示时间)
- 点滴积累【JS】---JS小功能(列表页面隔行变色)
- 点滴积累【JS】---JS小功能(JS实现隐藏显示侧边栏,也就是分享栏的隐藏显示)
- 点滴积累【JS】---JS小功能(JS实现多物体缓冲运动)
- 点滴积累【JS】---JS小功能(onmousedown实现鼠标拖拽div移动)
- 点滴积累【JS】---JS小功能(JS实现侧悬浮浮动)
- 点滴积累【JS】---JS小功能(onmousemove鼠标移动坐标接龙DIV)
- 点滴积累【JS】---JS小功能(offsetLeft实现图片滚动效果)
- 点滴积累【JS】---JS小功能(checkbox实现全选和全取消)
- 点滴积累【JS】---JS小功能(操作Table--动态添加删除表格及数据)
- 点滴积累【JS】---JS小功能(JS实现匀速运动)
- 点滴积累【JS】---JS小功能(JS实现多功能缓冲运动框架)
- JS实现页面table鼠标移动改变tr行颜色,单击tr选中复选框功能