<!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. Redis select选择数据库

    Redis的功能真是强大,可以做数据库,可以做缓存. 今天发现Redis支持分隔操作空间,使得空间与空间之间互不影响. SELECT index 切换到指定的数据库,数据库索引号 index 用数字值 ...

  2. 深入理解java虚拟机读后总结（个人总结记录）

    1.jvm布局:   jdk1.6版本JVM布局分为:heap(堆),method(方法区),stack(虚拟机栈),native stack(本地方法栈),程序计数器共五大区域. 其中方法区包含运行 ...

  3. BT.656 NTSC制式彩条生成模块(verilog)

    BT.656 NTSC制式彩条生成模块(verilog) 1.知识储备 隔行扫描是将一副图像分成两场扫描,第一场扫描第1,2,5,7...等奇数行,第二场扫描2,4,6,8...等偶数行,并把扫奇数行 ...

  4. java小程序（课堂作业06）

    编写一个程序,此程序在运行时要求用户输入一个 整数,代表某门课的考试成绩,程序接着给出“不及格”.“及格”.“中”.“良”.“优”的结论. 要求程序必须具备足够的健壮性,不管用户输入什 么样的内容,都 ...

  5. Git的一些东西（后续补充）

    查看帮助,要装git-doc,另外推荐git的图形客户端gitg,比gitk好看多了,用apt-get install就可   HEAD是当前工作版本的指针   --global保存的是当前用户的配置 ...

  6. Scrapy环境安装

    开始安装前,建议安装Visual C++ 2015 Build Tools,否则会一直出现如下提示: 下载地址:http://landinghub.visualstudio.com/visual-cp ...

  7. Excel连接SSAS提示“传输层中遇到错误”的问题

    用Excel连接SSAS,在身份验证时弹出对话框提示“传输层中遇到错误”,后来发现其实就是用户名或密码不对,不知道为何Excel不提示一个明确一点的信息.

  8. Java 中统计文件中出现单词的次数练习

    统计英文article.txt文件中出现hello这个单词的次数 这个是article.txt文件内容 { hello The Royal Navy is trying hello to play h ...

  9. Linux From Scratch [3]

    1. 为了编译glibc,我们需要kernel header. make mrproper # clean kernel tree make INSTALL_HDR_PATH=dest headers ...

  10. quartz里job不执行的解决方案(并发量太低原因)

    这里写链接内容 使用框架spring3+quartz1.8 生产环境中碰到会有job一直不执行的情况,后来分析是因为quartz中线程总数太少,而项目中所有的job都是并发执行的就会导致当到达时间节点 ...