在js中制作一个十行十列的表格,要求每个单元格随机变色

在js中制作一个十行十列的表格,要求每个单元格随机变色,第1张

onload = function(){

    var tab = documentcreateElement("table");

    tabstylemargin = "0 auto";

    tabstylewidth = "500px";

    var tb = documentcreateElement("tbody");

    tabappendChild(tb);

    for(var i = 0; i < 10; i++){

        var row = tbinsertRow(tbrowslength);

        for(var j = 0; j < 10; j++){

            var col = rowinsertCell(rowcellslength);

            colstylewidth = "50px";

            colstyleheight = "50px";

            var a = Mathfloor(Mathrandom()  255);

            var b = Mathfloor(Mathrandom()  255);

            var c = Mathfloor(Mathrandom()  255);

            colstylebackgroundColor = "rgb(" + a + "," + b + "," + c + ")";

        }

    }

    documentbodyappendChild(tab);

}

试试这个代码,在IE,OPERA,FF下测试通过:

<html>

<head>

<meta >

1、这个函数来自Rico,Longbill及Dnewcn修改。

2、说明: 传入参数一个,为元素的id值或元素本身,返回为元素的真实背景色值(字符串)。背景值均为16进制的值(原代码是是IE里面返回的是16进制的值,而Mozilla则是rgb值,Dnewcn将其修改为均返回16进制的值)。

3、代码如下:

<html>  

<head>  

<title>得到元素真实的背景颜色</title>  

<style>  

classname  {background-color:#ff99dd;}  

#div3  {background-color:#d8bfd8;}  

div  {background-color:#87cefa;border:1px solid #333333;margin:10px;padding:4px;}  

body  {background-color:#bed742;}  

#div4  {background-color:transparent;}  

</style>  

</head>  

<body>  

<span style="text-align:center;font-size:20px;color:#ff7f50;width:100%;">得到元素真实的背景颜色 <font style="font-size:12px;">By <a href=

<div id='div1'>div1 直接通过div标签定义背景色(#87cefa)</div>  

<div id='div2' class=classname>div2 通过class name定义背景色(#ff99dd)</div>  

<div id='div3'>div3 通过id定义背景色(#d8bfd8)</div>  

<div id='div4'>div4 这是一个透明的div,背景色应为上一个元素的颜色(#bed742)</div>  

<button onclick="go()">getBg()</button>  

<script>  

function getBg(element)  

{//author: Longbill (

)  

//dnewcn修补  

  var rgbToHex=function(rgbarray,array){  

      if (rgbarraylength < 3) return false;  

      if (rgbarraylength == 4 && rgbarray[3] == 0 && !array) return 'transparent';  

      var hex = [];  

      for (var i = 0; i < 3; i++){  

        var bit = (rgbarray[i] - 0)toString(16);  

        hexpush((bitlength == 1)  '0' + bit : bit);  

      }  

      return array  hex : '#' + hexjoin('');  

    }  

//---------------  

  if (typeof element == "string") element = documentgetElementById(element);  

  if (!element) return;  

  cssProperty = "backgroundColor";  

  mozillaEquivalentCSS = "background-color";  

  if (elementcurrentStyle)  

    var actualColor = elementcurrentStyle[cssProperty];  

  else  

  {  

    var cs = documentdefaultViewgetComputedStyle(element, null);  

    var actualColor = csgetPropertyValue(mozillaEquivalentCSS)match(/\d{1,3}/g);  

//-----  

    actualColor = (actualColor)  rgbToHex(actualColor) : "transparent";  

  }  

  if (actualColor == "transparent" && elementparentNode)  

    return argumentscallee(elementparentNode);  

  if (actualColor == null)  

    return "#ffffff";  

  else  

    return actualColor;  

}  

function go()  

{  

  for(var i=1;i<=4;i++) eval("alert('div"+i+":'+getBg('div"+i+"'));");  

}  

</script>  

</body>  

</html>

以上就是关于在js中制作一个十行十列的表格,要求每个单元格随机变色全部的内容,包括:在js中制作一个十行十列的表格,要求每个单元格随机变色、JAVASCRIPT随机改变字符颜色和大小、如何从js中获取元素的颜色并改变等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/9759220.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-01
下一篇 2023-05-01

发表评论

登录后才能评论

评论列表(0条)

保存