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操作ajax返回的json的注意问题!
Feb 23 Javascript
Javascript异步表单提交,图片上传,兼容异步模拟ajax技术
May 10 Javascript
jQuery中:has选择器用法实例
Dec 30 Javascript
JavaScript阻止浏览器返回按钮的方法
Mar 18 Javascript
js只执行1次的函数示例
Jul 20 Javascript
jquery 抽奖小程序实现代码
Oct 12 Javascript
Angular中自定义Debounce Click指令防止重复点击
Jul 26 Javascript
javascript实现循环广告条效果
Dec 12 Javascript
使用veloticy-ui生成文字动画效果
Feb 08 Javascript
Puppeteer 爬取动态生成的网页实战
Nov 14 Javascript
javascript中的this作用域详解
Jul 15 Javascript
小程序实现投票进度条
Nov 20 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
ThinkPHP结合AjaxFileUploader实现无刷新文件上传的方法
2014/10/29 PHP
php连接微软MSSQL(sql server)完全攻略
2016/11/27 PHP
php tpl模板引擎定义与使用示例
2019/08/09 PHP
PHP中类与对象功能、用法实例解读
2020/03/27 PHP
Web开发之JavaScript
2012/03/29 Javascript
JavaScript获取网页、浏览器、屏幕高度和宽度汇总
2014/12/18 Javascript
js操作滚动条事件实例
2015/01/29 Javascript
基于javascript简单实现对身份证校验
2021/01/25 Javascript
利用JS实现文字的聚合动画效果
2017/01/22 Javascript
bootstrap table实现单击单元格可编辑功能
2017/03/28 Javascript
从零开始学习Node.js系列教程五:服务器监听方法示例
2017/04/13 Javascript
js HTML5 canvas绘制图片的方法
2017/09/08 Javascript
vue 使用 sortable 实现 el-table 拖拽排序功能
2020/12/26 Vue.js
vue 数据双向绑定的实现方法
2021/03/04 Vue.js
[50:15]VP vs Mineski 2018国际邀请赛淘汰赛BO3 第二场 8.22
2018/08/23 DOTA
使用python的chardet库获得文件编码并修改编码
2014/01/22 Python
Python实现Linux下守护进程的编写方法
2014/08/22 Python
Python编程入门的一些基本知识
2015/05/13 Python
详解Python中time()方法的使用的教程
2015/05/22 Python
python中实现延时回调普通函数示例代码
2017/09/08 Python
django静态文件加载的方法
2018/05/20 Python
python开启debug模式的方法
2019/06/27 Python
利用ImageAI库只需几行python代码实现目标检测
2019/08/09 Python
Python 复平面绘图实例
2019/11/21 Python
numpy实现神经网络反向传播算法的步骤
2019/12/24 Python
python rsa-oaep加密的示例代码
2020/09/23 Python
Python3中小括号()、中括号[]、花括号{}的区别详解
2020/11/15 Python
CSS3中的注音对齐属性ruby-align用法指南
2016/07/01 HTML / CSS
CSS3中Transition动画属性用法详解
2016/07/04 HTML / CSS
会计电算化学生个人的自我评价
2014/02/08 职场文书
毕业生个人求职自荐信
2014/02/26 职场文书
建筑工地宣传标语
2014/06/18 职场文书
优秀毕业生的求职信
2014/07/21 职场文书
职业生涯规划书怎么写?
2014/09/14 职场文书
成本会计实训报告
2014/11/05 职场文书
HTML CSS 一个标签实现带动画的抖音LOGO
2022/04/26 HTML / CSS