js产生随机颜色

来源：互联网发布：2015年网络零售交易额编辑：程序博客网时间：2024/05/01 21:36

1、首先是一个HTML布局，p标签是是用来放当前颜色的，div的背景颜色就是这个颜色

[html] view plaincopyprint?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  
<html>  
    <head>  
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
        <title>randomColor</title>  
    </head>  
    <body>  
        <p id="colorStr"></p>  
        <div id="div1" style="width:100px;height:100px"></div>  
    </body>  
</html>  

2、之后是核心的脚本：

[javascript] view plaincopyprint?
<script>  
    //颜色字符串  
    var colorStr="";  
    //字符串的每一字符的范围  
    var randomArr=['0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f'];  
    //产生一个六位的字符串  
    for(var i=0;i<6;i++){  
        //15是范围上限，0是范围下限，两个函数保证产生出来的随机数是整数  
        colorStr+=randomArr[Math.ceil(Math.random()*(15-0)+0)];  
    }  
    document.getElementById("colorStr").innerHTML="颜色为：#"+colorStr;  
    document.getElementById("div1").style.backgroundColor="#"+colorStr;  
</script>  

0 0