鼠标选择动态改变网页背景颜色的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 相关文章推荐
YUI 读码日记之 YAHOO.util.Dom - Part.1
Mar 22 Javascript
javascript 动态数据下的锚点错位问题解决方法
Dec 24 Javascript
js+ajax实现获取文件大小的方法
Dec 08 Javascript
浅析JS操作DOM的一些常用方法
May 13 Javascript
js 基础篇必看(点击事件轮播图的简单实现)
Aug 20 Javascript
关于js原型的面试题讲解
Sep 25 Javascript
jQuery点击导航栏选中更换样式的实现代码
Jan 23 Javascript
js获取地址栏参数的两种方法
Jun 27 Javascript
浅谈关于.vue文件中style的scoped属性
Aug 19 Javascript
Vue2.0 $set()的正确使用详解
Jul 28 Javascript
jQuery实现鼠标拖拽登录框移动效果
Sep 13 jQuery
在vant中使用时间选择器和popup弹出层的操作
Nov 04 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 小心urldecode引发的SQL注入漏洞
2011/10/27 PHP
php判断ip黑名单程序代码实例
2014/02/24 PHP
php的mkdir()函数创建文件夹比较安全的权限设置方法
2014/07/28 PHP
getJSON跨域SyntaxError问题分析
2014/08/07 PHP
php官方微信接口大全(微信支付、微信红包、微信摇一摇、微信小店)
2015/12/21 PHP
php生成毫秒时间戳的实例讲解
2017/09/22 PHP
Jquery上传插件 uploadify v3.1使用说明
2012/06/18 Javascript
Extjs中通过Tree加载右侧TabPanel具体实现
2013/05/05 Javascript
原生JavaScript实现滚动条效果
2020/03/24 Javascript
JQUERY表单暂存功能插件分享
2016/02/23 Javascript
jquery datatable服务端分页
2016/08/31 Javascript
js实现HashTable(哈希表)的实例分析
2016/11/21 Javascript
关于javascript sort()排序你可能忽略的一点理解
2017/07/18 Javascript
判断滚动条滑到底部触发事件(实例讲解)
2017/11/15 Javascript
React教程之封装一个Portal可复用组件的方法
2018/01/02 Javascript
VUE2 前端实现 静态二级省市联动选择select的示例
2018/02/09 Javascript
npm 下载指定版本的组件方法
2018/05/17 Javascript
Vue.js实现表格渲染的方法
2018/09/07 Javascript
微信小程序自定义键盘 内部虚拟支付
2018/12/20 Javascript
bootstrap-table formatter 使用vue组件的方法
2019/05/09 Javascript
Python导入模块时遇到的错误分析
2017/08/30 Python
Python实现输出程序执行进度百分比的方法
2017/09/16 Python
在cmd中运行.py文件: python的操作步骤
2018/05/12 Python
Python使用MyQR制作专属动态彩色二维码功能
2019/06/04 Python
Python基于pygame实现单机版五子棋对战
2019/12/26 Python
Django --Xadmin 判断登录者身份实例
2020/07/03 Python
Scrapy模拟登录赶集网的实现代码
2020/07/07 Python
用CSS3将你的设计带入下个高度
2009/08/08 HTML / CSS
CSS3中利用animation属性创建雪花飘落特效
2014/05/14 HTML / CSS
伦敦眼门票在线预订:London Eye
2018/05/31 全球购物
如何用Python来进行查询和替换一个文本字符串
2014/01/02 面试题
毕业设计计划书
2014/01/09 职场文书
正风肃纪查摆剖析材料
2014/10/10 职场文书
捐书仪式主持词
2015/07/04 职场文书
redis数据一致性的实现示例
2022/03/18 Redis
Python matplotlib绘制条形统计图 处理多个实验多组观测值
2022/04/21 Python