快捷導(dǎo)航

JS小功能（button選擇顏色)簡單實(shí)例

更新時(shí)間：2013年11月29日 15:27:46 作者：

這篇文章主要介紹了button選擇顏色簡單實(shí)例，有需要的朋友可以參考一下

效果：

代碼：

<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 '藍(lán)色': 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="藍(lán)色" />
    <div id="red" style="display: block;">
    </div>
    <div id="green">
    </div>
    <div id="yellow">
    </div>
    <div id="blue">
    </div>
</body>