鼠标选择动态改变网页背景颜色的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()

相关文章

  • js replace()去除代码中空格的实例

    js replace()去除代码中空格的实例

    下面小编就为大家带来一篇js replace()去除代码中空格的实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-02-02
  • JavaScript实现表格快速变色效果代码

    JavaScript实现表格快速变色效果代码

    这篇文章主要介绍了JavaScript实现表格快速变色效果的方法,通过javascript数组遍历结合时间函数来实现表格快速变色的功能,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-08-08
  • 详解使用grunt完成requirejs的合并压缩和js文件的版本控制

    详解使用grunt完成requirejs的合并压缩和js文件的版本控制

    这篇文章主要介绍了详解使用grunt完成requirejs的合并压缩和js文件的版本控制 ,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
    2017-03-03
  • JS获取当前使用的浏览器名字以及版本号实现方法

    JS获取当前使用的浏览器名字以及版本号实现方法

    下面小编就为大家带来一篇JS获取当前使用的浏览器名字以及版本号实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08
  • JavaScript定时器设置、使用与倒计时案例详解

    JavaScript定时器设置、使用与倒计时案例详解

    这篇文章主要介绍了JavaScript定时器设置、使用与倒计时案例,详细分析了javascript定时器的设置、取消、循环调用并附带一个倒计时功能应用案例,需要的朋友可以参考下
    2019-07-07
  • javascript 支持页码格式的分页类

    javascript 支持页码格式的分页类

    前端时间因为项目需要,要对一个产品下所有的附属图片进行分页显示,没考虑ajax一张张请求,所以干脆一次性全部把图片out,然后在载入的时候进行分页,网上很多jquery,property等都实现了
    2009-12-12
  • 原生js实现轮播图

    原生js实现轮播图

    这篇文章主要为大家详细介绍了原生js实现轮播图的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-02-02
  • javascript使用alert实现一个精美的弹窗

    javascript使用alert实现一个精美的弹窗

    其实最初使用alert还是一个常态,包括现在很多B端平台还在直接使用alert,本文主要介绍了javascript使用alert实现一个精美的弹窗,感兴趣的可以了解一下
    2023-02-02
  • JavaScript数据结构之二叉查找树的定义与表示方法

    JavaScript数据结构之二叉查找树的定义与表示方法

    这篇文章主要介绍了JavaScript数据结构之二叉查找树的定义与表示方法,简单讲述了二叉查找树的概念、特点及javascript针对二叉查找树的创建、插入、遍历等操作相关实现技巧,需要的朋友可以参考下
    2017-04-04
  • JS关键字球状旋转效果的实例代码

    JS关键字球状旋转效果的实例代码

    这篇文章主要介绍了JS关键字球状旋转效果的实例代码。需要的朋友可以过来参考下,希望对大家有所帮助
    2013-11-11

最新评论