鼠标选择动态改变网页背景颜色的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 相关文章推荐
清空上传控件input file的值
Jul 03 Javascript
jquery组件使用中遇到的问题整理及解决
Feb 21 Javascript
JS实现动态给图片添加边框的方法
Apr 01 Javascript
JS打字效果的动态菜单代码分享
Aug 21 Javascript
javascript时间差插件分享
Jul 18 Javascript
基于JavaScript实现本地图片预览
Feb 08 Javascript
JavaScript实现256色转灰度图
Feb 22 Javascript
Vue中全局变量的定义和使用
Jun 05 Javascript
微信小程序的开发范式BeautyWe.js入门详解
Jul 10 Javascript
解决layui laydate 时间控件一闪而过的问题
Sep 28 Javascript
VsCode里的Vue模板的实现
Aug 12 Javascript
详解 TypeScript 枚举类型
Nov 02 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
WAR3重制版DOTA 5V5初体验
2020/04/09 DOTA
PHP排序之二维数组的按照字母排序实现代码
2011/08/13 PHP
简单的php文件上传(实例)
2013/10/27 PHP
YII中assets的使用示例
2014/07/31 PHP
Fatal error: Allowed memory size of 134217728 bytes exhausted (tried to allocate 2611816 bytes)
2014/11/08 PHP
Laravel 添加多语言提示信息的方法
2019/09/29 PHP
jquery获得下拉框值的代码
2011/08/13 Javascript
类似php的js数组的in_array函数自定义方法
2013/12/27 Javascript
jQuery中attr()和prop()在修改checked属性时的区别
2014/07/18 Javascript
jQuery淡入淡出元素让其效果更为生动
2014/09/01 Javascript
Node.js 学习笔记之简介、安装及配置
2015/03/03 Javascript
jQuery ui实现动感的圆角渐变网站导航菜单效果代码
2015/08/26 Javascript
基于jquery实现页面滚动时顶部导航显示隐藏
2020/04/20 Javascript
JavaScript截取指定长度字符串点击可以展开全部代码
2015/12/04 Javascript
node.js入门实例helloworld详解
2015/12/23 Javascript
jQuery Password Validation密码验证
2016/12/30 Javascript
vue2.0移除或更改的一些东西(移除index key)
2017/08/28 Javascript
layui表格checkbox选择全选样式及功能的实例
2018/03/07 Javascript
JS中call和apply函数用法实例分析
2018/06/20 Javascript
vue 组件中添加样式不生效的解决方法
2018/07/06 Javascript
详解Jest结合Vue-test-utils使用的初步实践
2019/06/27 Javascript
js+audio实现音乐播放器
2020/09/13 Javascript
逐行分析鸿蒙系统的 JavaScript 框架(推荐)
2020/09/17 Javascript
python实现生成字符串大小写字母和数字的各种组合
2019/01/01 Python
python 利用浏览器 Cookie 模拟登录的用户访问知乎的方法
2019/07/11 Python
详解python 利用echarts画地图(热力图)(世界地图,省市地图,区县地图)
2019/08/06 Python
Python Matplotlib绘图基础知识代码解析
2020/08/31 Python
名人演讲稿范文
2014/09/16 职场文书
2014年教育培训工作总结
2014/12/08 职场文书
自我评价优缺点范文
2015/03/11 职场文书
2015年先进个人自荐书
2015/03/24 职场文书
公司食堂管理制度
2015/08/05 职场文书
团支部组织委员竞选稿
2015/11/21 职场文书
redis限流的实际应用
2021/04/24 Redis
javascript条件式访问属性和箭头函数介绍
2021/11/17 Javascript
JavaScript实现酷炫的鼠标拖尾特效
2022/02/18 Javascript