鼠标选择动态改变网页背景颜色的JS代码

 更新时间:2013年12月10日 15:27:50   作者:  
这篇文章主要介绍了鼠标选择动态改变网页背景颜色的JS代码,有需要的朋友可以参考一下

采用Javascript实现,用鼠标点击相应颜色,动态改变网页背景颜色

这是截图

相应的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
}
function drawCell(red, green, blue) {
document.write('<TD BGCOLOR="#' + red + green + blue + '">')
document.write('<A HREF="javascript:display(\'' + (red + green + blue) + '\')">')
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) {
drawCell(red, hex[i], blue)
}
document.write('</TR>')
}
function drawTable(blue) {
document.write('<TABLE CELLPADDING=0 CELLSPACING=0 BORDER=0>')
for (var i = 0; i < 6; ++i) {
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()

相关文章

  • JavaScript中的ajax功能的概念和示例详解

    JavaScript中的ajax功能的概念和示例详解

    AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML)。这篇文章主要给大家介绍了JavaScript中的ajax功能的概念和示例详解,感兴趣的朋友一起看看吧
    2016-10-10
  • JS判断输入的字符串是否是数字的方法(正则表达式)

    JS判断输入的字符串是否是数字的方法(正则表达式)

    下面小编就为大家带来一篇JS判断输入的字符串是否是数字的方法(正则表达式)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-11-11
  • js链接确认提醒功能

    js链接确认提醒功能

    非常不错的功能,当单机一个链接时,会弹出确认对话框效果
    2008-09-09
  • javascript 中按属性值查找数组中的对象多种方法

    javascript 中按属性值查找数组中的对象多种方法

    JavaScript 数组可以保存混合类型的不同值,例如字符串、空值或布尔值,并且不需要数组的大小来指定它在哪里自动增长和动态,这篇文章主要介绍了javascript 中按属性值查找数组中的对象多种方法,需要的朋友可以参考下
    2023-06-06
  • three.js响应式设计实例详解

    three.js响应式设计实例详解

    响应式网站设计(Responsive Web design)是一种网络页面设计布局,是目前比较流行的一种网页设计,下面这篇文章主要给大家介绍了关于three.js响应式设计的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-04-04
  • JavaScript实现简单的双色球(实例讲解)

    JavaScript实现简单的双色球(实例讲解)

    下面小编就为大家带来一篇JavaScript实现简单的双色球(实例讲解)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • js 浏览本地文件夹系统示例代码

    js 浏览本地文件夹系统示例代码

    js 浏览本地文件夹系统不可思议吧,经测试效果还是不错的,感兴趣的朋友可以参考下
    2013-10-10
  • 挺实用的20个JavaScript简化写法代码技巧

    挺实用的20个JavaScript简化写法代码技巧

    掌握一些JavaScript的精简书写方式,有助增强代码的阅读性,提升代码质量,任何一种编程语言的简写小技巧都是为了帮助你写出更简洁、更完善的代码,让你用更少的编码实现你的需求
    2023-08-08
  • BootStrap智能表单实战系列(九)表单图片上传的支持

    BootStrap智能表单实战系列(九)表单图片上传的支持

    这篇文章主要介绍了BootStrap智能表单实战系列(九)表单图片上传的支持,介绍如何在生成表单后,可以支持上传图片后可以及时预览图片的功能,需要的朋友可以参考下
    2016-06-06
  • 浅谈bootstrap使用中的一些问题以及解决过程

    浅谈bootstrap使用中的一些问题以及解决过程

    下面小编就为大家带来一篇浅谈bootstrap使用中的一些问题以及解决过程。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-10-10

最新评论