编程 Javascript

JS小功能（button选择颜色)简单实例

Posted in Javascript onNovember 29, 2013

效果：

代码：

<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选择颜色)简单实例

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

用于自动添加Digg This!按钮的JavaScript

Dec 23 Javascript

用js实现层随着内容大小动态渐变改变推荐

Dec 19 Javascript

jquery事件机制扩展插件 jquery鼠标右键事件

Dec 21 Javascript

使用jquery动态加载javascript以减少服务器压力

Oct 29 Javascript

javascript中with()方法的语法格式及使用

Aug 04 Javascript

jquery实现简单合拢与展开网页面板的方法

Sep 01 Javascript

AngularJS在IE8的不支持的解决方法

May 13 Javascript

AngularJS创建自定义指令的方法详解

Nov 03 Javascript

Vue2.0利用 v-model 实现组件props双向绑定的优美解决方案

Mar 13 Javascript

vue中实现在外部调用methods的方法(推荐)

Feb 08 Javascript

vue.js表单验证插件(vee-validate)的使用教程详解

May 23 Javascript

vue h5移动端禁止缩放代码

Oct 28 Javascript

javascript从右边截取指定字符串的三种实现方法

Nov 29 #Javascript

Javascript setInterval的两种调用方法(实例讲解)

Nov 29 #Javascript

Jquery中children与find之间的区别详细解析

Nov 29 #Javascript

JS关键字球状旋转效果的实例代码

Nov 29 #Javascript

JS Loading功能的简单实现

Nov 29 #Javascript

分享Javascript中最常用的55个经典小技巧

Nov 29 #Javascript

浅析JavaScript中的类型和对象

Nov 29 #Javascript