鼠标选择动态改变网页背景颜色的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 style 中visibility和display之间的区别
Jan 22 Javascript
jQuery 遍历json数组的实现代码
Sep 22 Javascript
javascript 获取所有id中包含某关键字的控件的实现代码
Nov 25 Javascript
一个简单的弹性返回顶部JS代码实现介绍
Jun 09 Javascript
js函数与php函数的区别实例浅析
Jan 12 Javascript
实例详解AngularJS实现无限级联动菜单
Jan 15 Javascript
JS实现把鼠标放到链接上出现滚动文字的方法
Apr 06 Javascript
JS正则验证多个邮箱完整实例【邮箱用分号隔开】
Apr 19 Javascript
详谈Angular 2+ 的表单(一)之模板驱动型表单
Apr 25 Javascript
taro开发微信小程序的实践
May 21 Javascript
vue实现按需加载组件及异步组件功能
May 27 Javascript
vue使用代理解决请求跨域问题详解
Jul 24 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表单重复提交实现方法
2015/09/29 PHP
ThinkPHP框架获取最后一次执行SQL语句及变量调试简单操作示例
2018/06/13 PHP
改进:论坛UBB代码自动插入方式
2006/12/22 Javascript
jQuery学习笔记 操作jQuery对象 属性处理
2012/09/19 Javascript
js用闭包遍历树状数组的方法
2014/03/19 Javascript
jquery库文件略庞大用纯js替换jquery的方法
2014/08/12 Javascript
jQuery中val()方法用法实例
2014/12/25 Javascript
Javascript实现计算个人所得税
2015/05/10 Javascript
jquery日历插件datepicker用法分析
2016/01/22 Javascript
javascript中arguments,callee,caller详解
2016/03/16 Javascript
Vue.js每天必学之过渡与动画
2016/09/06 Javascript
JS多物体实现缓冲运动效果示例
2016/12/20 Javascript
js原生Ajax的封装和原理详解
2017/03/11 Javascript
前端开发之CSS原理详解
2017/03/11 Javascript
vue中如何引入jQuery和Bootstrap
2017/04/10 jQuery
微信小程序request出现400的问题解决办法
2017/05/23 Javascript
浅析JS中常用类型转换及运算符表达式
2017/07/23 Javascript
详解jquery选择器的原理
2017/08/01 jQuery
JavaScript实现省市联动过程中bug的解决方法
2017/12/04 Javascript
nodejs实现超简单生成二维码的方法
2018/03/17 NodeJs
Vue SSR 组件加载问题
2018/05/02 Javascript
Vue2.0+Vux搭建一个完整的移动webApp项目的示例
2019/03/19 Javascript
微信小程序实现签字功能
2019/12/23 Javascript
10分钟学会js处理json的常用方法
2020/12/06 Javascript
[02:28]DOTA2 2017国际邀请赛小组赛回顾
2017/08/09 DOTA
python基于mysql实现的简单队列以及跨进程锁实例详解
2014/07/07 Python
Python实现拼接多张图片的方法
2014/12/01 Python
用python制作游戏外挂
2018/01/04 Python
python 实现识别图片上的数字
2019/07/30 Python
用HTML5制作烟火效果的教程
2015/05/12 HTML / CSS
事务机电主管工作职责
2014/02/25 职场文书
公司聘任书模板
2014/03/29 职场文书
企业消防安全责任书
2014/07/23 职场文书
2014年城市管理工作总结
2014/12/02 职场文书
2015元旦晚会主持人开场白+结束语
2014/12/14 职场文书
2015年度个人教学工作总结
2015/05/20 职场文书