<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <input type="button" value="改变DIV颜色" id="btn" />
        <div style="width:300px;height:300px;border:1px solid while; " id="d"><span id="span1"></span></div>
    </body>
</html>
<script>
    var oBtn = document.getElementById("btn");
    var oDiv = document.getElementById("d");
    var oSpan1 = document.getElementById("span1");
    var g = 0;
    function rand( min,max ){
     return Math.round( Math.random()*(max-min) + min )
}
    
    oBtn.onclick = function(){
        var arr = ["red","blue","green","pink","yellow"];
        for( var i = 0 ; i < 1 ; i++ ){
            g = rand( 0,4 );
            if( g == 0 ){
                oDiv.style.backgroundColor = "red";
                oSpan1.innerHTML = "red";
            }else if( g==1 ){
                oDiv.style.backgroundColor = "blue";
                oSpan1.innerHTML = "blue";
            }else if( g==2 ){
                oDiv.style.backgroundColor = "green";
                oSpan1.innerHTML = "green";
            }else if( g==3 ){
                oDiv.style.backgroundColor = "pink";
                oSpan1.innerHTML = "pink";
            }else{
                 oDiv.style.backgroundColor = "yellow";
                 oSpan1.innerHTML = "yellow";
            }
            
            
            
            
//          switch( g ){
//              case 0 : oDiv.style.backgroundColor = "red" && oSpan.innerHTML = "red";
//              case 1 : oDiv.style.backgroundColor = "blue" && oSpan.innerHTML = "blue";
//              case 2 : oDiv.style.backgroundColor = "green" && oSpan.innerHTML = "green";
//              case 3 : oDiv.style.backgroundColor = "pink" && oSpan.innerHTML = "pink";
//              case 4 : oDiv.style.backgroundColor = "yellow" && oSpan.innerHTML = "yellow";
//          }
        }
        
        
        
        
        
//      var brr = [];
//      var g = 0;
//      for( var i = 0 ; i < 5 ; i++ ){
//          g = rand( 0,5 );
//          brr.push( arr[g] );
//      }
//      return brr;
    }
    
    
    
    
//  
//  oBtn.onclick = function(){
//      
// oDiv.style.backgroundColor = "blue";
// oDiv.style.backgroundColor = "green";
// oDiv.style.backgroundColor = "pink";
// oDiv.style.backgroundColor = "yellow";
//  }
    
    
</script>
<!--red blue green pink yellow-->
    <!--function getColor(){
            var str = ["red","blue","green","pink","yellow"];
            var color = "#";
            for( var i = 0 ; i < 1 ; i++ ){
                color += str.charAt( rand(0,4) );//根据随机下标得到对应的字符
            }
            return color;
        }-->

点击DIV随机换颜色的更多相关文章

  1. JS实现鼠标移入DIV随机变换颜色

    今天分享一个在 JavaScript中,实现一个鼠标移入可以随机变换颜色,本质就是js的随机数运用. 代码如下: <!DOCTYPE html> <html> <head ...

  2. js点击按钮为元素随机字体颜色和背景色

    文章地址 https://www.cnblogs.com/sandraryan/ 写两个button和一个div,点击按钮分别改变背景色和前景色(字体颜色).产生的是一个随机颜色. <!DOCT ...

  3. checkbox复选框和div click事件重叠，点击div后复选框也被选中，同时改变div颜色，否则则不选中

     checkbox复选框和div click事件重叠,点击div后复选框也被选中,同时改变div颜色,否则则不选中 <!DOCTYPE html> <html lang=" ...

  4. 为革命保护视力 --- 给 Visual Studio 换颜色

    “为革命,保护视力,预防近视,眼保健操开始......” 这个应该是最老版本的眼保健操了,你听过? 一堆废话 且不说上面这个眼保健操到底有木有用,让眼睛放松下还是很有必要的,尤其是现在天天对着不是手机 ...

  5. Visual Studio 换颜色

    --- 给 Visual Studio 换颜色 “为革命,保护视力,预防近视,眼保健操开始......” 这个应该是最老版本的眼保健操了,你听过? 一堆废话 且不说上面这个眼保健操到底有木有用,让眼睛 ...

  6. PS 证件照换颜色

    1.打开要修改的图片,然后先Ctrl+J备份一份 2.点击魔法棒,点击要换颜色的地方,如衣服,之后会出现虚线,如果自动选择的不全,可以按住Shift键自行选择区域 3.然后Shift+Fn+F5(由于 ...

  7. JS---Math.Random()*10--[0,10)随机变颜色

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  8. [转]为革命保护视力 --- 给 Visual Studio 换颜色

    本文转自:http://www.cnblogs.com/stg609/p/3723968.html “为革命,保护视力,预防近视,眼保健操开始......” 这个应该是最老版本的眼保健操了,你听过? ...

  9. 原生js实现多个随机大小颜色位置速度小球的碰壁反弹

    文章地址 https://www.cnblogs.com/sandraryan/ 需求:生成n个小球,让他们在一个大盒子中碰壁反弹,要求小球随机颜色,大小,初始位置,运动速度. 思路分析: 创建小球随 ...

随机推荐

  1. create-react-app：reject和不reject(使用react-app-rewired)这2种情况下的antd组件按需引入配置

    create-react-app:eject和不eject(使用react-app-rewired)这2种情况下的antd组件按需引入配置: 不eject(使用react-app-rewired)配置 ...

  2. PyCharm中的Console自动换行

    菜单栏-> File -> Settings -> Editor -> General -> Console,选中右侧Use soft wraps in console前 ...

  3. VS2010生成安装包制作步骤 （转）

    阅读目录 VS2010生成安装包制作步骤 回到目录 VS2010生成安装包制作步骤   在VS2010中文旗舰版本中生成winForm安装包,可以复制你电脑中的开发环境,避免你忘记了一下配置然后在别的 ...

  4. NET设计模式 第二部分 结构性模式(8)：桥接模式（Bridge Pattern）

    桥接模式(Bridge Pattern) ——.NET设计模式系列之九 Terrylee,2006年2月 概述 在软件系统中,某些类型由于自身的逻辑,它具有两个或多个维度的变化,那么如何应对这种“多维 ...

  5. 亚马逊aws 一个实例双网卡-两个弹性ip设置

    一个实例默认只有1个网络接口: 步骤一.创建一个新的网络接口,附加到实例. 步骤二.手动添加路由 增加两个路由表,为后续的双网关做点小准备: vim /etc/iproute2/rt_tables 添 ...

  6. Pandas的使用（2）

    Pandas的使用(2) 1.新建一个空的DataFrame数据类型 total_price = pd.DataFrame() #新建一个空的DataFrame 2.向空的DataFrame中逐行添加 ...

  7. Centos7安装WPS和截图工具shutter

    centos7安装WPS 1..在wps官网上下载rpm安装包 2..rpm包安装命令 yum install xxx[安装包的名字] 注意:执行此项命令需要root权限 3.安装完成后即可使用 Ce ...

  8. [转]阿里云CentOS 7.1使用yum安装MySql5.6.24

    阿里云CentOS 7.1使用yum安装MySql5.6.24 作者:vfhky | 时间:2015-06-25 09:43 | 分类:web 在前面两篇文章<2015博客升级记(四):Cent ...

  9. MySQL 5.7.16 字符串拆分 -> 单列变多行记录(转发）

    http://blog.csdn.net/mchdba/article/details/53889803 ----------------------------------------------- ...

  10. 根据时间段获取时间段内所有时间点（js）

    Date.prototype.format=function (){var s='';s+=this.getFullYear()+'-';// 获取年份.s+=(this.getMonth()+1)+ ...