这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要介绍了 button 选择颜色简单实例,有需要的朋友可以参考一下
效果:
代码:
- <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>
(adsbygoogle = window.adsbygoogle || []).push({});
来源: http://www.phperz.com/article/17/0629/278110.html