鼠标选择动态改变网页背景颜色的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 相关文章推荐
JavaScript 学习笔记(四)
Dec 31 Javascript
jQuery 入门级学习笔记及源码
Jan 22 Javascript
js两行代码按指定格式输出日期时间
Oct 21 Javascript
jquery在项目中做复选框时遇到的一些问题笔记
Nov 17 Javascript
IE浏览器中图片onload事件无效的解决方法
Apr 29 Javascript
js从Cookies里面取值的简单实现
Jun 30 Javascript
Jquery实现简单的轮播效果(代码管用)
Mar 14 Javascript
基于JS实现无缝滚动思路及代码分享
Jun 07 Javascript
AngularJS 路由和模板实例及路由地址简化方法(必看)
Jun 24 Javascript
详解vue2.0组件通信各种情况总结与实例分析
Mar 22 Javascript
Element ui 下拉多选时新增一个选择所有的选项
Aug 21 Javascript
js前端传json后台接收‘‘被转为quot的问题解决
Nov 12 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 常见郁闷问题答解
2006/11/25 PHP
php下图片文字混合水印与缩略图实现代码
2009/12/11 PHP
基于PHP选项与信息函数的使用详解
2013/05/10 PHP
浅析PHP安装扩展mcrypt以及相关依赖项(PHP安装PECL扩展的方法)
2013/07/05 PHP
学习php设计模式 php实现抽象工厂模式
2015/12/07 PHP
4种PHP异步执行的常用方式
2015/12/24 PHP
Ajax提交表单时验证码自动验证 php后端验证码检测
2016/07/20 PHP
syntaxhighlighter 使用方法
2007/07/02 Javascript
jquery select下拉框操作的一些说明
2010/04/02 Javascript
jquery 学习之二 属性 文本与值(text,val)
2010/11/25 Javascript
document.documentElement的一些使用技巧
2013/04/18 Javascript
javascript中的window.location.search方法简介
2013/09/02 Javascript
javascript函数特点实例分析
2015/05/14 Javascript
jQuery页面刷新(局部、全部)问题分析
2016/01/09 Javascript
Node.js的项目构建工具Grunt的安装与配置教程
2016/05/12 Javascript
JavaScript使用Range调色及透明度实例
2016/09/25 Javascript
javascript中活灵活现的Array对象详解
2016/11/30 Javascript
安装vue-cli报错 -4058 的解决方法
2017/10/19 Javascript
详谈构造函数加括号与不加括号的区别
2017/10/26 Javascript
vue中格式化时间过滤器代码实例
2019/04/17 Javascript
微信小程序实现的一键复制功能示例
2019/04/24 Javascript
解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题
2020/08/14 Javascript
跟老齐学Python之玩转字符串(1)
2014/09/14 Python
详解Python 数据库 (sqlite3)应用
2016/12/07 Python
python 系统调用的实例详解
2017/07/11 Python
Python3中的bytes和str类型详解
2019/05/02 Python
Python Sphinx使用实例及问题解决
2020/01/17 Python
经验丰富程序员才知道的8种高级Python技巧
2020/07/27 Python
pandas apply多线程实现代码
2020/08/17 Python
kmart凯马特官网:美国最大的打折零售商和全球最大的批发商之一
2016/11/17 全球购物
自我鉴定书面格式
2014/01/13 职场文书
2014年学校工作总结
2014/11/20 职场文书
上帝也疯狂观后感
2015/06/09 职场文书
九年级化学教学反思
2016/02/22 职场文书
详解JavaScript中Arguments对象用途
2021/08/30 Javascript
Python实现学生管理系统并生成exe可执行文件详解流程
2022/01/22 Python