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


Posted in Javascript onNovember 29, 2013

效果:

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

JS小功能(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>
Javascript 相关文章推荐
Jquery attr(&quot;checked&quot;) 返回checked或undefined 获取选中失效
Oct 10 Javascript
JS获取当前网址、主机地址项目根路径
Nov 19 Javascript
jQuery图片左右滚动代码 有左右按钮实例
Jun 20 Javascript
js 创建对象 经典模式全面了解
Aug 16 Javascript
JS命令模式例子之菜单程序
Oct 10 Javascript
javascript实现圣旨卷轴展开效果(代码分享)
Mar 23 Javascript
js求数组中全部数字可拼接出的最大整数示例代码
Aug 25 Javascript
jquery在vue脚手架中的使用方式示例
Aug 29 jQuery
微信小程序绑定手机号获取验证码功能
Oct 22 Javascript
vue多个元素的样式选择器问题
Nov 29 Javascript
keep-alive不能缓存多层级路由菜单问题解决
Mar 10 Javascript
JavaScript实现淘宝商品图切换效果
Apr 29 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
You might like
一个程序下载的管理程序(一)
2006/10/09 PHP
PHP 上传文件的方法(类)
2009/07/30 PHP
PHP写杨辉三角实例代码
2011/07/17 PHP
php中time()和mktime()方法的区别
2013/09/28 PHP
PHP清除缓存的几种方法总结
2017/09/12 PHP
Laravel自定义 封装便捷返回Json数据格式的引用方法
2019/09/29 PHP
Javascript 布尔型分析
2008/12/22 Javascript
[推荐]javascript 面向对象技术基础教程
2009/03/03 Javascript
javascript 类定义的4种方法
2009/09/12 Javascript
juqery 学习之五 文档处理 包裹、替换、删除、复制
2011/02/11 Javascript
jQuery 中使用JSON的实现代码
2011/12/01 Javascript
jquery实现鼠标滑过小图时显示大图的方法
2015/01/14 Javascript
两款JS脚本判断手机浏览器类型跳转WAP手机网站
2015/10/16 Javascript
基于JavaScript实现通用tab选项卡(通用性强)
2016/01/07 Javascript
全面了解JavaScript对象进阶
2016/07/19 Javascript
jquery实现转盘抽奖功能
2017/01/06 Javascript
angular.JS实现网页禁用调试、复制和剪切
2017/03/31 Javascript
详解vue.js的事件处理器v-on:click
2017/06/27 Javascript
Vue的Class与Style绑定的方法
2017/09/01 Javascript
vue路由嵌套的SPA实现步骤
2017/11/06 Javascript
vue.js简单配置axios的方法详解
2017/12/13 Javascript
微信小程序版翻牌小游戏
2018/01/26 Javascript
JS删除String里某个字符的方法
2021/01/06 Javascript
bootstrap table列和表头对不齐的解决方法
2019/07/19 Javascript
[03:02]2014DOTA2西雅图邀请赛 让队员自己告诉你DK NAVI备战情况
2014/07/08 DOTA
[01:20]DOTA2 2017国际邀请赛冠军之路无止竞
2017/06/19 DOTA
使用python爬取B站千万级数据
2018/06/08 Python
使用python的pyplot绘制函数实例
2020/02/13 Python
AmazeUI在模态框中嵌入表单形成模态输入框
2020/08/20 HTML / CSS
荷兰在线体育用品商店:Avantisport.nl
2018/07/04 全球购物
正宗的日本零食和糖果订阅盒:Bokksu
2019/11/21 全球购物
质量月活动策划方案
2014/03/10 职场文书
乡镇三项教育实施方案
2014/03/30 职场文书
我们的节日春节活动方案
2014/08/22 职场文书
2014年服务员工作总结
2014/11/18 职场文书
mysql 8.0.27 绿色解压版安装教程及配置方法
2022/04/20 MySQL