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

2024-05-06 15:56:33

字體：大中小

供稿：網(wǎng)友

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

效果：

代碼：

復(fù)制代碼代碼如下:

<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" value="紅色" />
    <input type="button" value="綠色" />
    <input type="button" value="黃色" />
    <input type="button" value="藍(lán)色" />
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
</body>