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 相关文章推荐
浅谈JavaScript function函数种类
Dec 29 Javascript
深入探密Javascript数组方法
Jan 08 Javascript
JavaScript返回网页中超链接数量的方法
Apr 03 Javascript
Bootstrap每天必学之简单入门
Nov 19 Javascript
JavaScript编码风格指南(中文版)
Aug 26 Javascript
AngularJS 前台分页实现的示例代码
Jun 07 Javascript
详解基于Vue2.0实现的移动端弹窗(Alert, Confirm, Toast)组件
Aug 02 Javascript
Nuxt.js的路由跳转操作(页面跳转nuxt-link)
Nov 06 Javascript
vue 封装面包屑组件教程
Nov 16 Javascript
JS操作JSON常用方法(10w阅读)
Dec 06 Javascript
原生js实现滑块区间组件
Jan 20 Javascript
微信小程序实现拍照和相册选取图片
May 09 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
改造一台复古桌面收音机
2021/03/02 无线电
php5中类的学习
2008/03/28 PHP
php smarty 二级分类代码和模版循环例子
2011/06/01 PHP
PHP实现的连贯操作、链式操作实例
2014/07/08 PHP
2014最热门的24个php类库汇总
2014/12/18 PHP
php实现源代码加密的方法
2015/07/11 PHP
HTML页面如何象ASP一样接受参数
2007/02/07 Javascript
DHTML Slide Show script图片轮换
2008/03/03 Javascript
js 动态添加标签(新增一行,其实很简单,就是几个函数的应用)
2009/03/26 Javascript
javascript 二维数组的实现与应用
2010/03/16 Javascript
jquery中交替点击事件toggle方法的使用示例
2013/12/08 Javascript
Jquery中ajax方法data参数的用法小结
2014/02/12 Javascript
JavaScript实现简单图片滚动附源码下载
2014/06/17 Javascript
Javascript URI 解析介绍
2015/03/15 Javascript
把Node.js程序加入服务实现随机启动
2015/06/25 Javascript
jQuery EasyUI 菜单与按钮之创建简单的菜单和链接按钮
2015/11/18 Javascript
快速掌握Node.js模块封装及使用
2016/03/21 Javascript
jquery滚动条插件slimScroll使用方法
2017/02/09 Javascript
jQuery UI实现动画效果代码分享
2018/08/19 jQuery
vue-router权限控制(简单方式)
2018/10/29 Javascript
简单了解Ajax表单序列化的实现方法
2019/06/14 Javascript
解决vue中的无限循环问题
2020/07/27 Javascript
vue使用lodop打印控件实现浏览器兼容打印的方法
2021/02/07 Vue.js
[01:00:59]VP VS VG Supermajor小组赛胜者组第二轮 BO3第二场 6.2
2018/06/03 DOTA
[47:03]完美世界DOTA2联赛PWL S3 access vs LBZS 第一场 12.20
2020/12/23 DOTA
Python中模块string.py详解
2017/03/12 Python
Python应用库大全总结
2018/05/30 Python
python实现查找所有程序的安装信息
2020/02/18 Python
python如何将两张图片生成为全景图片
2020/03/05 Python
GDAL 矢量属性数据修改方式(python)
2020/03/10 Python
Flask缓存静态文件的具体方法
2020/08/02 Python
10种CSS3实现的loading动画,挑一个走吧?
2020/11/16 HTML / CSS
div或img图片高度随宽度自适应的方法
2020/02/06 HTML / CSS
跟单文员的岗位职责
2013/11/14 职场文书
爸爸的花儿落了教学反思
2014/02/20 职场文书
实习生工作证明范本
2014/09/14 职场文书