鼠标选择动态改变网页背景颜色的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 相关文章推荐
ASP.NET jQuery 实例7 通过jQuery来获取DropDownList的Text/Value属性值
Feb 03 Javascript
JQuery each打印JS对象的方法
Nov 13 Javascript
JavaScript异步回调的Promise模式封装实例
Jun 07 Javascript
jQuery html()方法使用不了无法显示内容的问题
Aug 06 Javascript
jquery+ajax+text文本框实现智能提示完整实例
Jul 09 Javascript
Angularjs在初始化未完毕时出现闪烁问题的解决方法分析
Aug 05 Javascript
详解ES6语法之可迭代协议和迭代器协议
Jan 13 Javascript
浅谈jquery fullpage 插件增加头部和版权的方法
Mar 20 jQuery
mpvue全局引入sass文件的方法步骤
Mar 06 Javascript
微信小程序实现上传多个文件 超过10个
Mar 30 Javascript
vue-openlayers实现地图坐标弹框效果
Sep 24 Javascript
在vue中使用eslint,配合vscode的操作
Nov 09 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利用header函数实现文件下载时直接提示保存
2009/11/12 PHP
javascript编程起步(第二课)
2007/01/10 Javascript
不间断滚动JS打包类,基本可以实现所有的滚动效果,太强了
2007/12/08 Javascript
学习ExtJS border布局
2009/10/08 Javascript
jquery 全局AJAX事件使用代码
2010/11/05 Javascript
javascript客户端遍历控件与获取父容器对象示例代码
2014/01/06 Javascript
jquery的ajax简单结构示例代码
2014/02/17 Javascript
JavaScript创建对象的方式小结(4种方式)
2015/12/17 Javascript
使用OpenLayers3 添加地图鼠标右键菜单
2015/12/29 Javascript
基于javascript html5实现3D翻书特效
2016/03/14 Javascript
微信小程序 条件渲染详解
2016/10/09 Javascript
jquery控制页面的展开和隐藏实现方法(推荐)
2016/10/15 Javascript
DropDownList实现可输入可选择(两种版本可选)
2016/12/07 Javascript
基于Nodejs利用socket.io实现多人聊天室
2017/02/22 NodeJs
jQuery中animate()的使用方法及解决$(”body“).animate({“scrollTop”:top})不被Firefox支持的问题
2017/04/04 jQuery
深入理解ES6中let和闭包
2018/02/22 Javascript
JS中的回调函数实例浅析
2018/03/21 Javascript
解决layui 复选框等内置控件不显示的问题
2018/08/14 Javascript
JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例
2019/05/14 jQuery
vue props 一次传多个值实例
2020/07/22 Javascript
[03:07]完美世界DOTA2联赛PWL DAY10 决赛集锦
2020/11/11 DOTA
python机器学习案例教程——K最近邻算法的实现
2017/12/28 Python
Python编程求解二叉树中和为某一值的路径代码示例
2018/01/04 Python
numpy实现合并多维矩阵、list的扩展方法
2018/05/08 Python
python 通过 socket 发送文件的实例代码
2018/08/14 Python
Python使用combinations实现排列组合的方法
2018/11/13 Python
python 检查数据中是否有缺失值,删除缺失值的方式
2019/12/02 Python
使用PyTorch实现MNIST手写体识别代码
2020/01/18 Python
细数nn.BCELoss与nn.CrossEntropyLoss的区别
2020/02/29 Python
美国最大的烧烤架和户外生活用品专业零售商:Barbeques Galore
2021/01/09 全球购物
我能否用void** 指针作为参数, 使函数按引用接受一般指针
2013/02/16 面试题
字符串str除首尾字符外的其他字符按升序排列
2013/03/08 面试题
给海归自荐信的建议
2013/12/13 职场文书
《花的勇气》教后反思
2014/02/12 职场文书
高中语文教学反思范文
2016/02/16 职场文书
用Python监控你的朋友都在浏览哪些网站?
2021/05/27 Python