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 相关文章推荐
JS去除字符串的空格增强版(可以去除中间的空格)
Aug 26 Javascript
IE6-IE9不支持table.innerHTML的解决方法分享
Sep 14 Javascript
如何阻止复制剪切和粘贴事件为了表单内容的安全
May 23 Javascript
JavaScript获得url查询参数的方法
Jul 02 Javascript
jQuery实现文字自动横移
Jan 08 Javascript
JS+HTML5 FileReader实现文件上传前本地预览功能
Mar 27 Javascript
javascript将json格式数组下载为excel表格的方法
Dec 22 Javascript
JS严格模式知识点总结
Feb 27 Javascript
Angular异步变同步处理方法
Aug 13 Javascript
详解element-ui中form验证杂记
Mar 04 Javascript
webpack4.0+vue2.0利用批处理生成前端单页或多页应用的方法
Jun 28 Javascript
react 生命周期实例分析
May 18 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
用DBSQL类加快开发MySQL数据库程序的速度
2006/10/09 PHP
在PHP中使用反射技术的架构插件使用说明
2010/05/18 PHP
IIS7.X配置PHP运行环境小结
2011/06/09 PHP
php数据库配置文件一般做法分享
2012/07/07 PHP
thinkphp的dump函数无输出实例代码
2016/11/15 PHP
PHP实现的自定义数组排序函数与排序类示例
2016/11/18 PHP
硬盘浏览程序,保存成网页格式便可使用
2006/12/03 Javascript
Save a File Using a File Save Dialog Box
2007/06/18 Javascript
javascript下有关dom以及xml节点访问兼容问题
2007/11/26 Javascript
safari,opera嵌入iframe页面cookie读取问题解决方法
2010/06/23 Javascript
node.js中的fs.lstat方法使用说明
2014/12/16 Javascript
javascript实现连续赋值
2015/08/10 Javascript
轻松掌握JavaScript代理模式
2016/08/26 Javascript
nodejs实现超简单生成二维码的方法
2018/03/17 NodeJs
Angular CLI 使用教程指南参考小结
2019/04/10 Javascript
基于javascript的拖拽类封装详解
2019/04/19 Javascript
JQuery样式操作、click事件以及索引值-选项卡应用示例
2019/05/14 jQuery
Vue时间轴 vue-light-timeline的用法说明
2020/10/29 Javascript
Centos5.x下升级python到python2.7版本教程
2015/02/14 Python
python实现多线程抓取知乎用户
2016/12/12 Python
Python 的类、继承和多态详解
2017/07/16 Python
python字符串与url编码的转换实例
2018/05/10 Python
执行Django数据迁移时报 1091错误及解决方法
2019/10/14 Python
KARATOV珠宝在线商店:俄罗斯珠宝品牌
2019/03/13 全球购物
英国的一家创新礼品和小工具零售商:Menkind
2019/08/24 全球购物
广州喜创信息技术有限公司JAVA软件工程师笔试题
2012/10/17 面试题
J2EE面试题集锦(附答案)
2013/08/16 面试题
学生发电厂实习自我鉴定
2013/09/22 职场文书
应届毕业生的个人自我鉴定
2013/10/24 职场文书
母亲节演讲稿范文
2014/01/02 职场文书
《满井游记》教学反思
2014/02/26 职场文书
房地产公司见习自我鉴定
2014/04/28 职场文书
演讲稿的格式及范文
2014/08/22 职场文书
2014年综合治理工作总结
2014/11/20 职场文书
管理者们如何制定2019年的工作计划?
2019/07/01 职场文书
python开发的自动化运维工具ansible详解
2021/08/07 Python