JS small function (button to select color simple instance

  • 2020-03-30 00:40:48
  • OfStack

Effect:

< img border = 0 SRC = "/ / files.jb51.net/file_images/article/201311/20131129152643873.jpg" >

< img border = 0 SRC = "/ / files.jb51.net/file_images/article/201311/20131129152735127.jpg" >

Code:


<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 ' red ': this.style.background = '#FF0000';
                            break;
                        case ' green ': this.style.background = '#00FF00';
                            break;
                        case ' yellow ': this.style.background = '#FFFF00';
                            break;
                        case ' blue ': 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=" red " style="background-color: #FF0000" />
    <input type="button" id="btn2" value=" green " />
    <input type="button" id="btn3" value=" yellow " />
    <input type="button" id="btn4" value=" blue " />
    <div id="red" style="display: block;">
    </div>
    <div id="green">
    </div>
    <div id="yellow">
    </div>
    <div id="blue">
    </div>
</body>


Related articles: