鼠标选择动态改变网页背景颜色的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 相关文章推荐
让焦点自动跳转
Jul 01 Javascript
用js实现手把手教你月入万刀(转贴)
Nov 07 Javascript
JavaScript获取当前网页最后修改时间的方法
Apr 03 Javascript
javascript中返回顶部按钮的实现
May 05 Javascript
Bootstrap每天必学之导航条
Nov 27 Javascript
实例详解JavaScript获取链接参数的方法
Jan 01 Javascript
全面解析JavaScript中的valueOf与toString方法(推荐)
Jun 14 Javascript
JS获得多个同name 的input输入框的值的实现方法
Jan 09 Javascript
jQuery操作之效果详解
May 19 jQuery
mpvue 页面预加载新增preLoad生命周期的两种方式
Oct 17 Javascript
实用的 vue tags 创建缓存导航的过程实现
Dec 03 Vue.js
vue-cropper插件实现图片截取上传组件封装
May 27 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
利用static实现表格的颜色隔行显示
2006/10/09 PHP
给初学PHP的5个入手程序
2006/11/23 PHP
php提示无法加载或mcrypt没有找到 PHP 扩展 mbstring解决办法
2012/03/27 PHP
Windows下的PHP安装文件线程安全和非线程安全的区别
2014/04/23 PHP
PHP版本常用的排序算法汇总
2015/12/20 PHP
jQuery+php简单实现全选删除的方法
2016/11/28 PHP
Laravel+Intervention实现上传图片功能示例
2019/07/09 PHP
JS 表单验证大全
2011/11/23 Javascript
获取div编辑框,textarea,input text的光标位置 兼容IE,FF和Chrome的方法介绍
2012/11/08 Javascript
各浏览器对document.getElementById等方法的实现差异解析
2013/12/05 Javascript
jQuery实现的自定义弹出层效果实例详解
2016/09/04 Javascript
10分钟掌握XML、JSON及其解析
2020/12/06 Javascript
详解vuex 中的 state 在组件中如何监听
2017/05/23 Javascript
原生JS+HTML5实现跟随鼠标一起流动的粒子动画效果
2018/05/03 Javascript
Angular脚手架开发的实现步骤
2019/04/09 Javascript
vue实现购物车小案例
2019/09/27 Javascript
js实现选项卡效果
2020/03/07 Javascript
python单链表实现代码实例
2013/11/21 Python
python模拟新浪微博登陆功能(新浪微博爬虫)
2013/12/24 Python
python eventlet绿化和patch原理
2020/11/21 Python
CSS3实现swap交换动画
2016/01/19 HTML / CSS
用css3实现转换过渡和动画效果
2020/03/13 HTML / CSS
Top Villas美国:豪华别墅出租和度假屋
2018/07/10 全球购物
乌克兰电子和家用电器商店:Foxtrot
2019/07/23 全球购物
英国医生在线预约:Top Doctors
2019/10/30 全球购物
大学生个人求职口试自我评价
2014/02/16 职场文书
中学学校门卫岗位职责
2014/08/15 职场文书
简单租房协议书范本
2014/08/20 职场文书
民事诉讼代理授权委托书范本
2014/10/08 职场文书
2015年维修工作总结
2015/04/25 职场文书
小学生光盘行动倡议书
2015/04/28 职场文书
董事长致辞
2015/07/29 职场文书
2016公务员年度考核评语
2015/12/01 职场文书
小学班级口号大全
2015/12/25 职场文书
德生BCL3000抢先使用感受和评价
2022/04/07 无线电
收音机爱好者玩机13年,简评其使用过的19台收音机
2022/04/30 无线电