鼠标选择动态改变网页背景颜色的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 相关文章推荐
javascript学习笔记(十二) RegExp类型介绍
Jun 20 Javascript
Jquery利用mouseenter和mouseleave实现鼠标经过弹出层且可以点击
Feb 12 Javascript
jQuery取得设置清空select选择的文本与值
Jul 08 Javascript
JS实现六位字符密码输入器功能
Aug 19 Javascript
JS对HTML表格进行增删改操作
Aug 22 Javascript
基于Vue2的移动端开发环境搭建详解
Nov 03 Javascript
支持移动端原生js轮播图
Feb 16 Javascript
js实现图片放大展示效果
Aug 30 Javascript
Node.Js中实现端口重用原理详解
May 03 Javascript
使用Node.js写一个代码生成器的方法步骤
May 10 Javascript
vue实现滑动到底部加载更多效果
Oct 27 Javascript
vue Treeselect下拉树只能选择第N级元素实现代码
Aug 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
Blitz templates 最快的PHP模板引擎
2010/04/06 PHP
基于wordpress主题制作的具体实现步骤
2013/05/10 PHP
深入apache host的配置详解
2013/06/09 PHP
浅析Dos下运行php.exe,出现没有找到php_mbstring.dll 错误的解决方法
2013/06/29 PHP
php记录代码执行时间(实现代码)
2013/07/05 PHP
php操作xml
2013/10/27 PHP
重新认识php array_merge函数
2014/08/31 PHP
php实现将数组转换为XML的方法
2015/03/09 PHP
Laravel 中获取上一篇和下一篇数据
2015/07/27 PHP
CI框架集成Smarty的方法分析
2016/05/17 PHP
JQuery 学习技巧总结
2010/05/21 Javascript
javascript与CSS复习(《精通javascript》)
2010/06/29 Javascript
JavaScript中创建对象和继承示例解读
2014/02/12 Javascript
js+html5实现canvas绘制圆形图案的方法
2015/06/05 Javascript
Jquery 效果使用详解
2015/11/23 Javascript
各种选择框jQuery的选中方法(实例讲解)
2017/06/27 jQuery
layer.open弹层查看缩略图的原图,自适应大小的实例
2019/09/05 Javascript
JavaScript实现好看的跟随彩色气泡效果
2020/02/06 Javascript
Bootstrap简单实用的表单验证插件BootstrapValidator用法实例详解
2020/03/29 Javascript
详细分析vue表单数据的绑定
2020/07/20 Javascript
Python3实战之爬虫抓取网易云音乐的热门评论
2017/10/09 Python
django之跨表查询及添加记录的示例代码
2018/10/16 Python
在python环境下运用kafka对数据进行实时传输的方法
2018/12/27 Python
Django数据库连接丢失问题的解决方法
2018/12/29 Python
对python函数签名的方法详解
2019/01/22 Python
Python实现KNN(K-近邻)算法的示例代码
2019/03/05 Python
Python批量安装卸载1000个apk的方法
2020/04/10 Python
Python matplotlib画图时图例说明(legend)放到图像外侧详解
2020/05/16 Python
HTML5 manifest离线缓存的示例代码
2018/08/08 HTML / CSS
创伤外科专业推荐信范文
2013/11/19 职场文书
企业项目策划书
2014/01/11 职场文书
《那片绿绿的爬山虎》教学反思
2014/02/27 职场文书
《你在为谁工作》心得体会(共8篇)
2016/01/20 职场文书
教师培训学习心得体会
2016/01/21 职场文书
人生一定要学会的三样东西:放下、忘记、珍惜
2019/08/21 职场文书
React列表栏及购物车组件使用详解
2021/06/28 Javascript