<!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. NET设计模式 第二部分 结构性模式(13):代理模式(Proxy Pattern)

    代理模式(Proxy Pattern) ——.NET设计模式系列之十四 Terrylee,2006年5月 摘要:在软件系统中,有些对象有时候由于跨越网络或者其他的障碍,而不能够或者不想直接访问另一个对 ...

  2. mysql的变量信息详解

    mysql的变量详解 执行show variables命令可以查看MySQL服务器的变量 变量名 默认值 说明 对应的配置文件参数 auto_increment_increment 1 自增长类型的初 ...

  3. 使用Docker Compose部署基于Sentinel的高可用Redis集群

    使用Docker Compose部署基于Sentinel的高可用Redis集群 https://yq.aliyun.com/articles/57953 Docker系列之(五):使用Docker C ...

  4. MS Batch AI

    微软的Batch AI服务是一项新服务,它可以帮助你在GPU pool上训练和测试机器学习模型,包括深度学习模型.它简化了在当前许多流行的深度学习框架(如TensorFlow.Microsoft认知工 ...

  5. mig_7series DDR控制器的配置

    mig_7series DDR控制器的配置

  6. Docker的一些概念

    Docker的一些概念 2.1 什么是Docker? 说实话关于Docker是什么并太好说,下面我通过四点向你说明Docker到底是个什么东西. Docker 是世界领先的软件容器平台. Docker ...

  7. sql Find_IN_SET 用法

    字段以 1,2,3,4 格式存储的SELECT * from test where FIND_IN_SET('15',btype) GROUP_CONCAT + group_by

  8. Base64 转 图片

    static void Main(string[] args) { string s = "iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAIAAAABc2X6AAAAC ...

  9. R语言数据挖掘相关包总结-转帖

    与数据挖掘有关或者有帮助的R包和函数的集合. 1.聚类 常用的包: fpc,cluster,pvclust,mclust 基于划分的方法: kmeans, pam, pamk, clara 基于层次的 ...

  10. maven私服的使用

    使用的版本是nexus2 比较犀利的一个博客https://www.cnblogs.com/tyhj-zxp/p/7605879.html 一.安装搭建私服(windows) bin目录cmd执行ne ...