鼠标选择动态改变网页背景颜色的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 相关文章推荐
XENON基于JSON变种
Jul 27 Javascript
jQuery中append、insertBefore、after与insertAfter的简单用法与注意事项
Apr 04 Javascript
js拦截alert对话框另类应用
Jan 16 Javascript
js获取指定日期周数以及星期几的小例子
Jun 27 Javascript
js不间断滚动的简单实现
Jun 03 Javascript
js replace()去除代码中空格的实例
Feb 14 Javascript
使用 Node.js 模拟滑动拼图验证码操作的示例代码
Nov 02 Javascript
在一个页面实现两个zTree联动的方法
Dec 20 Javascript
js监听html页面的上下滚动事件方法
Sep 11 Javascript
vue实现一个炫酷的日历组件
Oct 08 Javascript
在layui中select更改后生效的方法
Sep 05 Javascript
解决vuex改变了state的值,但是页面没有更新的问题
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数据流应用的一个简单实例
2012/09/14 PHP
3种方法轻松处理php开发中emoji表情的问题
2016/07/18 PHP
PHP常用操作类之通信数据封装类的实现
2017/07/16 PHP
TP5框架实现自定义分页样式的方法示例
2020/04/05 PHP
多个iframe自动调整大小的问题
2006/09/18 Javascript
js 获取服务器控件值的代码
2010/03/05 Javascript
兼容所有浏览器的js复制插件Zero使用介绍
2014/03/19 Javascript
将HTML格式的String转化为HTMLElement的实现方法
2014/08/07 Javascript
事件委托与阻止冒泡阻止其父元素事件触发
2014/09/02 Javascript
深入理解JavaScript中为什么string可以拥有方法
2016/05/24 Javascript
JS获取和修改元素样式的实例代码
2016/08/06 Javascript
js style.display=block显示布局错乱问题的解决方法
2016/09/21 Javascript
微信小程序 video详解及简单实例
2017/01/16 Javascript
js实现鼠标跟随运动效果
2020/08/02 Javascript
详解微信小程序之scroll-view的flex布局问题
2019/01/16 Javascript
详解使用Nuxt.js快速搭建服务端渲染(SSR)应用
2019/03/13 Javascript
Ajax请求时无法重定向的问题解决代码详解
2019/06/21 Javascript
JS前端知识点 运算符优先级,URL编码与解码,String,Math,arguments操作整理总结
2019/06/27 Javascript
Vue实现图书管理小案例
2020/12/03 Vue.js
python中format()函数的简单使用教程
2018/03/14 Python
解决python nohup linux 后台运行输出的问题
2018/05/11 Python
python 中文件输入输出及os模块对文件系统的操作方法
2018/08/27 Python
在python中pandas的series合并方法
2018/11/12 Python
Python 单元测试(unittest)的使用小结
2018/11/14 Python
Python简单I/O操作示例
2019/03/18 Python
python3 反射的四种基本方法解析
2019/08/26 Python
python工具快速为音视频自动生成字幕(使用说明)
2021/01/27 Python
css3实现背景颜色渐变让图片不再是唯一的实现方式
2012/12/18 HTML / CSS
加拿大健康、婴儿和美容产品在线购物:Well.ca
2016/11/30 全球购物
Otticanet英国:最顶尖的世界名牌眼镜, 能得到打折季的价格
2019/02/10 全球购物
什么是servlet链?
2014/07/13 面试题
《罗布泊,消逝的仙湖》教学反思
2014/03/01 职场文书
部门经理迟到检讨书
2015/02/16 职场文书
委托开发合同书(标准版)
2019/08/07 职场文书
演讲稿之我的初心我的成长
2019/08/12 职场文书
MySQL添加索引特点及优化问题
2022/07/23 MySQL