鼠标选择动态改变网页背景颜色的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 相关文章推荐
Extjs中常用表单介绍与应用
Jun 07 Javascript
Javascript/Jquery——简单定时器的多种实现方法
Jul 03 Javascript
IE浏览器下PNG相关功能
Jul 05 Javascript
jQuery实现信息提示框(带有圆角框与动画)效果
Aug 07 Javascript
JS实现Fisheye效果动感放大菜单代码
Oct 21 Javascript
sso跨域写cookie的一段js脚本(推荐)
May 25 Javascript
JavaScript比较当前时间是否在指定时间段内的方法
Aug 02 Javascript
Node.js console控制台简单用法分析
Jan 04 Javascript
mpvue+vant app搭建微信小程序的方法步骤
Feb 11 Javascript
element-ui 中使用upload多文件上传只请求一次接口
Jul 19 Javascript
layui-select动态选中值的例子
Sep 23 Javascript
vue路由切换之淡入淡出的简单实现
Oct 31 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中防止SQL注入攻击和XSS攻击的两个简单方法
2010/04/15 PHP
详解php的魔术方法__get()和__set()使用介绍
2012/09/19 PHP
详解php中反射的应用
2016/03/15 PHP
PHP+fiddler抓包采集微信文章阅读数点赞数的思路详解
2019/12/20 PHP
JavaScript 组件之旅(三):用 Ant 构建组件
2009/10/28 Javascript
基于jQuery的淡入淡出可自动切换的幻灯插件
2010/08/24 Javascript
js常用排序实现代码
2010/12/28 Javascript
20个非常棒的 jQuery 幻灯片插件和教程分享
2011/08/23 Javascript
JS判断当前日期是否大于某个日期的实现代码
2012/09/02 Javascript
js实现在字符串中提取数字
2013/11/05 Javascript
jquery实现select选中行、列合计示例
2014/04/25 Javascript
JavaScript实现的浮动层框架用法实例分析
2015/10/10 Javascript
JSON与XML的区别对比及案例应用
2016/11/11 Javascript
JavaScript简介_动力节点Java学院整理
2017/06/26 Javascript
AngularJS对动态增加的DOM实现ng-keyup事件示例
2018/03/12 Javascript
NodeJS实现不可逆加密与密码密文保存的方法
2018/03/16 NodeJs
基于mpvue小程序使用echarts画折线图的方法示例
2019/04/24 Javascript
小程序关于请求同步的总结
2019/05/05 Javascript
vue使用recorder.js实现录音功能
2019/11/22 Javascript
原生JavaScript之es6中Class的用法分析
2020/02/23 Javascript
解决vue一个页面中复用同一个echarts组件的问题
2020/07/19 Javascript
VUE中V-IF条件判断改变元素的样式操作
2020/08/09 Javascript
在Django框架中编写Context处理器的方法
2015/07/20 Python
python中json格式数据输出的简单实现方法
2016/10/31 Python
tensorflow 获取模型所有参数总和数量的方法
2018/06/14 Python
scikit-learn线性回归,多元回归,多项式回归的实现
2019/08/29 Python
Python中使用gflags实例及原理解析
2019/12/13 Python
Django Admin后台添加数据库视图过程解析
2020/04/01 Python
scrapy处理python爬虫调度详解
2020/11/23 Python
初一体育教学反思
2014/01/29 职场文书
大学班级计划书
2014/04/29 职场文书
党的群众路线教育实践活动调研报告
2014/11/03 职场文书
党校团干班培训心得体会
2016/01/06 职场文书
mysql timestamp比较查询遇到的坑及解决
2021/11/27 MySQL
HTML中的表单元素介绍
2022/02/28 HTML / CSS
手写Spirit防抖函数underscore和节流函数lodash
2022/03/22 Javascript