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


Posted in Javascript onDecember 10, 2013

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

这是截图

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

相应的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 相关文章推荐
jQuery filter函数使用方法
May 19 Javascript
谈谈encodeURI和encodeURIComponent以及escape的区别与应用
Nov 24 Javascript
谈谈我对JavaScript DOM事件的理解
Dec 18 Javascript
js实现数组冒泡排序、快速排序原理
Mar 08 Javascript
详解AngularJS 模态对话框
Apr 07 Javascript
BootStrap实现手机端轮播图左右滑动事件
Oct 13 Javascript
jquery表单插件form使用方法详解
Jan 20 Javascript
简单实现jQuery弹窗效果
Oct 30 jQuery
jQuery代码优化方法总结
Jan 29 jQuery
layer弹出的iframe层在执行完毕后关闭当前弹出层的方法
Aug 17 Javascript
jquery-ui 进度条功能示例【测试可用】
Jul 25 jQuery
多个Vue项目部署到服务器的步骤记录
Oct 22 Javascript
深入理解JavaScript高级之词法作用域和作用域链
Dec 10 #Javascript
javascript四舍五入函数代码分享(保留后几位)
Dec 10 #Javascript
javascript如何创建表格(javascript绘制表格的二种方法)
Dec 10 #Javascript
javascript修改表格背景色实例代码分享
Dec 10 #Javascript
jquery全选checkBox功能实现代码(取消全选功能)
Dec 10 #Javascript
javascript中文本框中输入法切换的问题
Dec 10 #Javascript
javascript 数字格式化输出的实现代码
Dec 10 #Javascript
You might like
Session的工作方式
2006/10/09 PHP
静态的动态续篇之来点XML
2006/08/15 Javascript
jquery 模式对话框终极版实现代码
2009/09/28 Javascript
JavaScript读取中文cookie时的乱码问题的解决方法
2009/10/14 Javascript
jquery中获得$.ajax()事件返回的值并添加事件的方法
2010/04/15 Javascript
jquery教程ajax请求json数据示例
2014/01/13 Javascript
js或jquery实现页面打印可局部打印
2014/03/27 Javascript
js实现点击图片将图片地址复制到粘贴板的方法
2015/02/16 Javascript
jQuery实现鼠标悬停显示提示信息窗口的方法
2015/04/30 Javascript
详解Document.Cookie
2015/12/25 Javascript
怎样判断jQuery当前元素是隐藏还是显示
2016/11/23 Javascript
12个非常有用的JavaScript技巧
2017/05/17 Javascript
vue实现购物车抛物线小球动画效果的方法详解
2019/02/13 Javascript
jquery将json转为数据字典的实例代码
2019/10/11 jQuery
vue v-for出来的列表,点击某个li使得当前被点击的li字体变红操作
2020/07/17 Javascript
基于Python实现的百度贴吧网络爬虫实例
2015/04/17 Python
Python使用chardet判断字符编码
2015/05/09 Python
python实现的守护进程(Daemon)用法实例
2015/06/02 Python
Python使用设计模式中的责任链模式与迭代器模式的示例
2016/03/02 Python
python使用Matplotlib绘制分段函数
2018/09/25 Python
Python转换字典成为对象,可以用&quot;.&quot;方式访问对象属性实例
2020/05/11 Python
python的pip有什么用
2020/06/17 Python
NBA欧洲商店(英国):NBA Europe Store UK
2018/07/27 全球购物
成都思必达公司C#程序员招聘面试题
2013/06/26 面试题
计算机专业毕业生的自我评价
2013/11/18 职场文书
金属材料工程个人求职的自我评价
2013/12/04 职场文书
中学生爱国演讲稿
2013/12/31 职场文书
财经学院自荐信范文
2014/02/02 职场文书
社区国庆节活动方案
2014/02/05 职场文书
校园绿化美化方案
2014/06/08 职场文书
办理信用卡收入证明范例
2014/09/13 职场文书
工商局所长四风自我剖析及整改措施
2014/10/26 职场文书
孔庙导游词
2015/02/04 职场文书
公司酒会主持词
2015/07/02 职场文书
2016教师学习党章心得体会
2016/01/15 职场文书
前端与RabbitMQ实时消息推送未读消息小红点实现示例
2022/07/23 Java/Android