鼠标选择动态改变网页背景颜色的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 简便实现页面元素数据验证功能
Mar 24 Javascript
一些常用且实用的原生JavaScript函数
Sep 08 Javascript
JavaScript框架是什么?怎样才能叫做框架?
Jul 01 Javascript
使用jquery实现仿百度自动补全特效
Jul 23 Javascript
jquery带翻页动画的电子杂志代码分享
Aug 21 Javascript
深入探秘jquery瀑布流的实现
Jan 30 Javascript
Vue.js学习记录之在元素与template中使用v-if指令实例
Jun 27 Javascript
MUI实现上拉加载和下拉刷新效果
Jun 30 Javascript
jQuery初级教程之网站品牌列表效果
Aug 02 jQuery
微信小程序网络请求封装示例
Jul 24 Javascript
vue源码中的检测方法的实现
Sep 26 Javascript
浅析Vue 防抖与节流的使用
Nov 14 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字符串 ==比较运算符的副作用
2009/10/21 PHP
WordPress后台中实现图片上传功能的实例讲解
2016/01/11 PHP
PHP substr()函数参数解释及用法讲解
2017/11/23 PHP
无语,javascript居然支持中文(unicode)编程!
2007/04/12 Javascript
js获取指定日期前后的日期代码
2013/08/20 Javascript
判断文档离浏览器顶部的距离的方法
2014/01/08 Javascript
jQuery截取指定长度字符串的实现原理及代码
2014/07/01 Javascript
js实现网站最上边可关闭的浮动广告条代码
2015/09/04 Javascript
JavaScript中文件上传API详解
2016/04/01 Javascript
AngularJS入门教程之路由机制ngRoute实例分析
2016/12/13 Javascript
JavaScript实现Fly Bird小游戏
2016/12/15 Javascript
angular forEach方法遍历源码解读
2017/01/25 Javascript
React利用插件和不用插件实现双向绑定的方法详解
2017/07/03 Javascript
angular2 ng build部署后base文件路径问题详细解答
2017/07/15 Javascript
微信小程序 循环及嵌套循环的使用总结
2017/09/26 Javascript
总结javascript三元运算符知识点
2018/09/28 Javascript
Vue el-autocomplete远程搜索下拉框并实现自动填充功能(推荐)
2019/10/25 Javascript
Python numpy实现数组合并实例(vstack,hstack)
2018/01/09 Python
python基础教程项目三之万能的XML
2018/04/02 Python
python删除文件夹下相同文件和无法打开的图片
2019/07/16 Python
python读取raw binary图片并提取统计信息的实例
2020/01/09 Python
Python数据结构dict常用操作代码实例
2020/03/12 Python
Python利用for循环打印星号三角形的案例
2020/04/12 Python
装上这 14 个插件后,PyCharm 真的是无敌的存在
2021/01/11 Python
美国办公用品购物网站:Quill.com
2016/09/01 全球购物
李宁官方网店:中国运动品牌
2017/11/02 全球购物
T3官网:头发造型工具
2019/12/26 全球购物
师范生自我鉴定范文
2013/10/05 职场文书
工作睡觉检讨书
2014/02/25 职场文书
企业年度评优方案
2014/06/02 职场文书
食品安全处置方案
2014/06/14 职场文书
自查自纠工作总结
2014/10/15 职场文书
群众路线调研报告范文
2014/11/03 职场文书
学雷锋倡议书
2015/01/19 职场文书
青年教师听课心得体会
2016/01/15 职场文书
Python一行代码实现自动发邮件功能
2021/05/30 Python