鼠标选择动态改变网页背景颜色的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.each()用法分享
Jul 31 Javascript
FF(火狐)浏览器无法执行window.close()解决方案
Nov 13 Javascript
jQuery+PHP+MySQL二级联动下拉菜单实例讲解
Oct 27 Javascript
基于Vue.js实现数字拼图游戏
Aug 02 Javascript
WEB前端实现裁剪上传图片功能
Oct 17 Javascript
JavaScript正则替换HTML标签功能示例
Mar 02 Javascript
js css3实现图片拖拽效果
Mar 04 Javascript
12个非常有用的JavaScript技巧
May 17 Javascript
详解vue数组遍历方法forEach和map的原理解析和实际应用
Nov 15 Javascript
小程序文字跑马灯效果
Dec 28 Javascript
JS使用Prim算法和Kruskal算法实现最小生成树
Jan 17 Javascript
vue3使用vue-count-to组件的实现
Dec 25 Vue.js
深入理解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之图片上传类实例代码(加了缩略图)
2016/06/30 PHP
CI框架教程之优化验证码机制详解【验证码辅助函数】
2019/04/16 PHP
PHP中的异常处理机制深入讲解
2020/11/10 PHP
js函数使用技巧之 setTimeout(function(){},0)
2009/02/09 Javascript
基于jQuery的history历史记录插件
2010/12/11 Javascript
JQuery $.each遍历JavaScript数组对象实例
2014/09/01 Javascript
JS+CSS实现Li列表隔行换色效果的方法
2015/02/16 Javascript
jQuery插件MixItUp实现动画过滤和排序
2015/04/12 Javascript
JS排序之冒泡排序详解
2017/04/08 Javascript
Vue CLI3 开启gzip压缩文件的方式
2018/09/30 Javascript
element el-tree组件的动态加载、新增、更新节点的实现
2020/02/27 Javascript
微信分享invalid signature签名错误踩过的坑
2020/04/11 Javascript
JS中的继承操作实例总结
2020/06/06 Javascript
[01:02:17]2014 DOTA2华西杯精英邀请赛 5 24 DK VS VG
2014/05/26 DOTA
[06:01]刀塔次级联赛top10第一期
2014/11/07 DOTA
介绍Python的Django框架中的静态资源管理器django-pipeline
2015/04/25 Python
Python的Tornado框架的异步任务与AsyncHTTPClient
2016/06/27 Python
Python正则替换字符串函数re.sub用法示例
2017/01/19 Python
三步实现Django Paginator分页的方法
2019/06/11 Python
python实现文件批量编码转换及注意事项
2019/10/14 Python
Python编写memcached启动脚本代码实例
2020/08/14 Python
伦敦平价潮流珠宝首饰品牌:Astrid & Miyu
2016/10/10 全球购物
护士实习自我鉴定
2013/10/22 职场文书
幼儿教师自我鉴定
2013/11/02 职场文书
上班迟到检讨书
2014/01/10 职场文书
会计电算化个人求职信范文
2014/01/24 职场文书
小学英语教学反思
2014/01/30 职场文书
函授药学自我鉴定
2014/02/07 职场文书
公司门卫岗位职责
2014/03/15 职场文书
幽默自我介绍演讲稿
2014/08/21 职场文书
公司副总经理岗位职责
2014/10/01 职场文书
优秀共产党员推荐材料
2014/12/18 职场文书
2014小学年度工作总结
2014/12/20 职场文书
教你用python控制安卓手机
2021/05/13 Python
MySQL 分区表中分区键为什么必须是主键的一部分
2022/03/17 MySQL
苹果macOS 13开发者预览版Beta 8发布 正式版10月发布
2022/09/23 数码科技