鼠标选择动态改变网页背景颜色的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的siblings效果的js代码
Aug 09 Javascript
javascript中的缓动效果实现程序
Dec 29 Javascript
jquery二级导航内容均分的原理及实现
Aug 13 Javascript
中文输入法不触发onkeyup事件的解决办法
Jul 09 Javascript
jquery实现侧边弹出的垂直导航
Dec 09 Javascript
JavaScript中的数组遍历forEach()与map()方法以及兼容写法介绍
May 19 Javascript
基于js对象,操作属性、方法详解
Aug 11 Javascript
完美解决input[type=number]无法显示非数字字符的问题
Feb 28 Javascript
Vue学习笔记进阶篇之多元素及多组件过渡
Jul 19 Javascript
搭建element-ui的Vue前端工程操作实例
Feb 23 Javascript
jQuery实现放大镜案例
Oct 19 jQuery
JS实现选项卡插件的两种写法(jQuery和class)
Dec 30 jQuery
深入理解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缓存技术详细总结
2013/08/07 PHP
使用CodeIgniter的类库做图片上传
2014/06/12 PHP
Javascript与PHP验证用户输入URL地址是否正确
2014/10/09 PHP
php单例模式实现方法分析
2015/03/14 PHP
php正则表达式获取内容所有链接
2015/07/24 PHP
Prototype使用指南之range.js
2007/01/10 Javascript
jquery动态添加删除一行数据示例
2014/06/12 Javascript
jQuery AJAX timeout 超时问题详解
2016/06/21 Javascript
AngularJS实现根据变量改变动态加载模板的方法
2016/11/04 Javascript
Bootstrap Table使用心得总结
2016/11/29 Javascript
jQuery File Upload文件上传插件使用详解
2016/12/06 Javascript
angular+ionic返回上一页并刷新页面
2017/08/08 Javascript
Angular2的管道Pipe的使用方法
2017/11/07 Javascript
nodejs+koa2 实现模仿springMVC框架
2020/10/21 NodeJs
[40:03]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#1EHOME VS Archon
2016/03/02 DOTA
Python对list列表结构中的值进行去重的方法总结
2016/05/07 Python
python 爬虫出现403禁止访问错误详解
2017/03/11 Python
Python3 模块、包调用&amp;路径详解
2017/10/25 Python
python3 读写文件换行符的方法
2018/04/09 Python
一份python入门应该看的学习资料
2018/04/11 Python
numpy下的flatten()函数用法详解
2019/05/27 Python
python画图--输出指定像素点的颜色值方法
2019/07/03 Python
python脚本实现音频m4a格式转成MP3格式的实例代码
2019/10/09 Python
python判断变量是否为int、字符串、列表、元组、字典的方法详解
2020/02/13 Python
Python txt文件如何转换成字典
2020/11/03 Python
python中doctest库实例用法
2020/12/31 Python
Giglio英国站:意大利奢侈品购物网
2018/03/06 全球购物
医学生实习自我鉴定
2013/09/27 职场文书
大学生职业生涯设计书
2014/01/02 职场文书
保护环境建议书
2014/03/12 职场文书
激情洋溢的毕业生就业求职信
2014/03/15 职场文书
实习生工作证明范本
2014/09/14 职场文书
资料员岗位职责
2015/02/10 职场文书
2015中秋节晚会主持词
2015/07/01 职场文书
JS如何实现基于websocket的多端桥接平台
2021/05/14 Javascript
使用Cargo工具高效创建Rust项目
2022/08/14 Javascript