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 window.onload 加载多个函数的方法
Nov 02 Javascript
JSON 教程 json入门学习笔记
Sep 22 Javascript
jquery多浏览器捕捉回车事件代码
Jun 22 Javascript
jQuery布局插件UI Layout简介及使用方法
Apr 03 Javascript
Js注册协议倒计时的小例子
Jun 24 Javascript
无闪烁更新网页内容JS实现
Dec 19 Javascript
JS中判断null、undefined与NaN的方法
Mar 24 Javascript
js创建对象的区别示例介绍
Jul 24 Javascript
AngularJS中$interval的用法详解
Feb 02 Javascript
Webpack4+Babel7+ES6兼容IE8的实现
Apr 10 Javascript
Vue中jsx不完全应用指南小结
Nov 01 Javascript
微信小程序基于高德地图API实现天气组件(动态效果)
Oct 22 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
php下实现折线图效果的代码
2007/04/28 PHP
详解使用php调用微信接口上传永久素材
2017/04/11 PHP
使用户点击后退按钮使效三行代码
2007/07/07 Javascript
javascript 弹出层组件(升级版)
2011/05/12 Javascript
页面js遇到乱码问题的解决方法是和无法转码的情况
2014/04/30 Javascript
jQuery中的jQuery()方法用法分析
2014/12/27 Javascript
JQuery中DOM加载与事件执行实例分析
2015/06/13 Javascript
js鼠标点击图片切换效果代码分享
2015/08/26 Javascript
JavaScript的==运算详解
2016/07/20 Javascript
Node.js的环境安装配置(使用nvm方式)
2016/10/11 Javascript
基于JS设计12306登录页面
2016/12/28 Javascript
jQuery EasyUi 验证功能实例解析
2017/01/06 Javascript
Vue2 使用 Echarts 创建图表实例代码
2017/05/18 Javascript
vue.js获取数据库数据实例代码
2017/05/26 Javascript
使用svg实现动态时钟效果
2018/07/17 Javascript
JavaScript查看代码运行效率console.time()与console.timeEnd()用法
2019/01/18 Javascript
微信小程序五子棋游戏的悔棋实现方法【附demo源码下载】
2019/02/20 Javascript
微信二次分享报错invalid signature问题及解决方法
2019/04/01 Javascript
vue中父子组件传值,解决钩子函数mounted只运行一次的操作
2020/07/27 Javascript
Vue通过Blob对象实现导出Excel功能示例代码
2020/07/31 Javascript
vue mvvm数据响应实现
2020/11/11 Javascript
Pyramid将models.py文件的内容分布到多个文件的方法
2013/11/27 Python
python实现图片处理和特征提取详解
2017/11/13 Python
redis之django-redis的简单缓存使用
2018/06/07 Python
Flask之flask-script模块使用
2018/07/26 Python
Python爬虫爬取新浪微博内容示例【基于代理IP】
2018/08/03 Python
python看某个模块的版本方法
2018/10/16 Python
pytorch查看通道数 维数 尺寸大小方式
2020/05/26 Python
css3遮罩层镂空效果的多种实现方法
2020/05/11 HTML / CSS
美国花布包包品牌:Vera Bradley
2017/08/11 全球购物
感恩节活动策划方案
2014/05/16 职场文书
公务员年度个人总结
2015/02/12 职场文书
2015年英语教研组工作总结
2015/05/23 职场文书
Mysql官方性能测试工具mysqlslap的使用简介
2021/05/21 MySQL
利用Python+OpenCV三步去除水印
2021/05/28 Python
Java网络编程之UDP实现原理解析
2021/09/04 Java/Android