<!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. TypeScript 之 模块

    https://m.runoob.com/manual/gitbook/TypeScript/_book/doc/handbook/Modules.html 外部模块简写 外部模块简写:declare ...

  3. requestAnimationFrame 知识点

    与setTimeout相比,requestAnimationFrame最大的优势是由系统来决定回调函数的执行时机.具体一点讲,如果屏幕刷新率是60Hz,那么回调函数就每16.7ms被执行一次,如果刷新 ...

  4. 洛谷 3295 [SCOI2016]萌萌哒——并查集优化连边

    题目:https://www.luogu.org/problemnew/show/P3295 当要连的边形如 “一段区间内都是 i 向 i+L 连边” 的时候,用并查集优化连边. 在连边的时候,如果要 ...

  5. python和linux如何学习一门新的编程语言(python)(python基础结构)

    1.python 开发 1.1基础 python,java语言优势:可以写网页+后台功能,python开发效率高,执行效率低,java执行效率高,开发效率低 环境变量配置:进入--->控制面板\ ...

  6. Gradle详细解析***

    前言 对于Android工程师来说编译/打包等问题立即就成痛点了.一个APP有多个版本,Release版.Debug版.Test版.甚至针对不同APP Store都有不同的版本.在以前ROM的环境下, ...

  7. WPF实现打印用户界面功能

    方式一:public bool Print(string pathStr) { try { if (File.Exists(pathStr) == false) return false; var p ...

  8. 在Outlook客户端使用SSL加密,弹出安全证书警告的解决方法。

    这是使用自己的域名.第三方的邮件系统是产生的问题. 如万网的邮箱系统,但在Outlook中,设置的pop3/imap/smtp的域名是你自己的域名. imap.youname.domain pop3. ...

  9. Tribon/AM 数据库名字的含义

    收集在这里备用 数据库名 Tribon环境变量 内容描述 船体型线数据库 SB_CGDB 船体外型信息 型表面,船体曲线,板缝 船体结构数据库 SB_OGDB 船体模型信息 板材数据库 SB_PLDB ...

  10. Flask--异常处理

    异常处理: abort(404)-捕获HTTP抛出的统一状态码 @app.errorhandler-捕获全局异常错误码,捕获异常错误 @app.route("/demo4") de ...