html+js 使用js对图形的颜色进行设置

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>实验七</title>
<style type="text/css">
    .circle{
        width:100px;
        height:100px;
        border-radius:50%;
        -moz-border-radius:50%;
        -webkit-border-radius:50%;
        float:left}
</style>
</head>

<body onLoad="color()">
<script>
    var s=new Array();
    var c=new Array();
    var flag=new Array();
    function color()
    {
        s[0]="red";
        s[1]="yellow";
        s[2]="blue";
        s[3]="green";
        c[0]=c[1]=c[2]=c[3]=0;
        flag[0]=flag[1]=flag[2]=flag[3]=0;
        for(var i=0;i<4;i++)
        {
            do
            {
                c[i]=Math.round((Math.random()*10))%4;
            }while(flag[c[i]]==1);
            flag[c[i]]=1;
        }
        document.getElementById("cir1").style.backgroundColor=s[c[0]];
        document.getElementById("cir2").style.backgroundColor=s[c[1]];
        document.getElementById("cir3").style.backgroundColor=s[c[2]];
        document.getElementById("cir4").style.backgroundColor=s[c[3]];
    }
</script>
<div id="cir1" class="circle" style="background-color:#FFF"></div>
<div id="cir2" class="circle" style="background-color:#FFF"></div>
<div id="cir3" class="circle" style="background-color:#FFF"></div>
<div id="cir4" class="circle" style="background-color:#FFF"></div>
</body>
</html>

0

Leave a Reply

Your email address will not be published.