<!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. docker for mac 安装 kubernetes、kubernetes dashboard

    安装参考地址(按照此文档,安装成功):https://yq.aliyun.com/articles/508460 官方说明:https://kubernetes.io/docs/tasks/acces ...

  2. c++获取键盘输入cin、scanf使用详解

    cin是c++标准,scanf是在c中使用的 #include<cstdio> #include<iostream> #include<cstring> using ...

  3. Spring整合Hibernate（转）

    概述 Spring整合Hibernate有什么好处? 1.由IOC容器来管理Hibernate的SessionFactory 2.让Hibernate使用上Spring的声明式事务 整合步骤 整合前准 ...

  4. golang gopacket网络抓包和分析

    gopacket 是golang语言使用的网络数据抓取和分析的工具包. 本文简单介绍如何使用gopacket进行网络抓包. 下载gopacket # go get git@github.com:goo ...

  5. c++中无名命名空间的使用

    1. 命名空间作用 命名空间是程序设计者命名的内存区域,程序设计者根据需指定一些有名字的空间域,把一些全局实体分别存放到各个命名空间中,从而与其他全局实体分隔开. 通俗的说,每个名字空间都是一个名字空 ...

  6. Redis：五种数据类型的简单增删改查

    Redis简单增删改查例子 例一:字符串的增删改查 #增加一个key为ay_key的值 127.0.0.1:6379> set ay_key "ay" OK #查询ay_ke ...

  7. Release Notes for XE5

    开发者之前说明 http://docwiki.embarcadero.com/RADStudio/XE5/en/Release_Notes_for_XE5

  8. apache配置https协议

    安装openssl有两种方式,第一种直接下载安装包,装上就可运行:第二种可以自己下载源码,自己编译.下面对两种方式均进行详细描述. 一.下载和安装openss 方法一:直接使用openssl安装包 W ...

  9. spring boot编译项目打jar包

    <build> <plugins> <!--jar包打包--> <plugin> <groupId>org.springframework. ...

  10. Python模块简介及安装 [numpy,pandas,matplotlib,scipy,statsmodels,Gensim,sklearn,keras]

    https://pan.baidu.com/s/1bpVv3Ef  67bd          模块安装文件下载地址 pip install "numpy-1.12.0b+mkl-cp35- ...