鼠标选择动态改变网页背景颜色的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的attr与prop使用介绍
Oct 10 Javascript
jQuery设置div一直在页面顶部显示的方法
Oct 24 Javascript
javascript:void(0)是什么意思示例介绍
Nov 17 Javascript
在JavaScript中使用NaN值的方法
Jun 05 Javascript
js实现网站最上边可关闭的浮动广告条代码
Sep 04 Javascript
jQuery表格行上移下移和置顶的实现方法
Oct 08 Javascript
Angular实现form自动布局
Jan 28 Javascript
JS实现获取剪贴板内容的方法
Jun 21 Javascript
jQuery 常见小例汇总
Dec 14 Javascript
JavaScript 数组去重并统计重复元素出现的次数实例
Dec 14 Javascript
Js图片点击切换轮播实现代码
Jul 27 Javascript
openlayers实现图标拖动获取坐标
Sep 25 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
PHP 5.0对象模型深度探索之类的静态成员
2008/03/27 PHP
深入讲解PHP的Yii框架中的属性(Property)
2016/03/18 PHP
php通过curl添加cookie伪造登陆抓取数据的方法
2016/04/02 PHP
PHP常用的类封装小结【4个工具类】
2019/06/28 PHP
如何在Laravel之外使用illuminate组件详解
2020/09/20 PHP
JS在IE和FF下attachEvent,addEventListener学习笔记
2009/11/26 Javascript
Jquery:ajax实现翻页无刷新功能代码
2013/08/05 Javascript
兼容最新firefox、chrome和IE的javascript图片预览实现代码
2014/08/08 Javascript
javascript操作select元素实例分析
2015/03/27 Javascript
jquery中用jsonp实现搜索框功能
2016/10/18 Javascript
详谈JS中数组的迭代方法和归并方法
2017/08/11 Javascript
react-native 圆弧拖动进度条实现的示例代码
2018/04/12 Javascript
Vue表单控件绑定图文详解
2019/02/11 Javascript
angular6开发steps步骤条组件
2019/07/04 Javascript
[01:04:49]KG vs LGD 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
python分割和拼接字符串
2013/11/01 Python
详解Python的Flask框架中的signals信号机制
2016/06/13 Python
numpy中实现二维数组按照某列、某行排序的方法
2018/04/04 Python
python计算两个地址之间的距离方法
2018/06/09 Python
Python寻找路径和查找文件路径的示例
2019/07/10 Python
浅析Python+OpenCV使用摄像头追踪人脸面部血液变化实现脉搏评估
2019/10/17 Python
德国团购网站:Groupon德国
2018/03/13 全球购物
英国和国际包裹递送:ParcelCompare
2019/08/26 全球购物
EJB与JAVA BEAN的区别
2016/08/29 面试题
销售经理工作职责范文
2013/12/03 职场文书
结婚典礼证婚词
2014/01/08 职场文书
技校毕业生自荐信范文
2014/03/07 职场文书
体育专业自荐书
2014/05/29 职场文书
综合素质评价思想道德自我评价
2015/03/09 职场文书
校运会通讯稿
2015/07/18 职场文书
2015年信息技术教研组工作总结
2015/07/22 职场文书
医德医风学习心得体会
2016/01/25 职场文书
七年级思品教学反思
2016/02/20 职场文书
四年级语文教学反思
2016/03/03 职场文书
详解如何用Python实现感知器算法
2021/06/18 Python
gtx1650怎么样 gtx1650显卡相当于什么级别
2022/04/08 数码科技