返回顶部

收藏

改变网页颜色的JS调色板

更多
<script LANGUAGE="JavaScript">

var hex = new Array(6)<!--定义数组变量-->

hex[0] = "FF"
hex[1] = "CC"
hex[2] = "99"
hex[3] = "66"
hex[4] = "33"
hex[5] = "00"
function display(triplet) 
{
    document.bgColor = '#' + triplet<!--根据输入的triplet,更新窗口的背景颜色-->
    alert('现在的背景颜色代码是: ' + triplet)<!--弹出提示窗口-->
}
function drawCell(red, green, blue) 
{
    document.write('<TD BGCOLOR="#' + red + green + blue + '">')<!--定义小方格内的背景颜色-->
    document.write('<A HREF="javascript:display(\'' + (red + green + blue) + '\')">')<!--定义超链接,调用display函数-->
    document.write('<IMG SRC="place.gif" BORDER=0 HEIGHT=12 WIDTH=12>')<!--引用图片-->
    document.write('</A>')
    document.write('</TD>')
}
function drawRow(red, blue) 
{
    document.write('<TR>')
    for (var i = 0; i < 6; ++i) <!--循环6次-->
{
        drawCell(red, hex[i], blue)<!--一行6个小方格内部的颜色差别在于red和blue分量-->
    }
    document.write('</TR>')
}
function drawTable(blue) {
    document.write('<TABLE CELLPADDING=0 CELLSPACING=0 BORDER=0>')
    for (var i = 0; i < 6; ++i) {<!--循环6次-->
        drawRow(hex[i], blue)<!--每个表格总体的颜色差别在于蓝色分量的不同-->
    }
    document.write('</TABLE>')  
}
function drawCube() {
    document.write('<TABLE CELLPADDING=5 CELLSPACING=0 BORDER=1><TR>')
    for (var i = 0; i < 6; ++i) {
        document.write('<TD BGCOLOR="#FFFFFF">')<!--定义表格的背景颜色为白色-->
        drawTable(hex[i])<!--循环画出每一个表格-->
        document.write('</TD>')
    }
    document.write('</TR></TABLE>')
}
drawCube()<!--直接调用drawCube()函数-->

</script>

<body>

单击上面的调色板试试
</body>

</html>
<!--本例程实现了调色板的功能-->
<!--颜色的基本构成,以及调配方法-->
<!--超连接的使用-->
<!--弹出窗口的使用-->

标签:javascript

收藏

0人收藏

支持

0

反对

0

相关聚客文章
  1. K-Res 发表 2018-10-27 12:10:11 关于Javascript中类成员函数中内嵌函数的this闭包问题
  2. 杨魁 发表 2018-10-25 07:28:13 Under the Hood: NaN of JS
  3. 尖兵 发表 2018-10-25 11:03:47 服务重启导致的Java服务抖动CPU占用高
  4. 可乐加糖 发表 2018-10-23 08:31:16 JavaScript文档生成器JSDuck
  5. 可乐加糖 发表 2018-10-23 08:31:16 JavaScript文档生成器JSDuck
  6. wenming.gapo 发表 2018-10-23 11:32:30 AOP装饰函数与小T的情愫(二)
  7. 尖兵 发表 2018-10-18 13:19:02 Java诊断工具Arthas
  8. 尖兵 发表 2018-10-18 13:19:02 Java诊断工具Arthas
  9. hellas 发表 2018-10-18 14:20:31 AOP装饰函数与小T的情愫
  10. 博主 发表 2018-10-15 10:02:38 生成聚合收款二维码:支付宝、微信、QQ 钱包
  11. axiu 发表 2018-10-14 02:30:40 微信小程序开发总结
  12. xirruiqiang 发表 2018-10-14 08:14:43 round 函数在不同语言中的实现乱象

发表评论