js 颜色选择器(兼容firefox)_页面背景

复制代码 代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>颜色选择器</title>
<style type="text/css">
body{
    text-align:center;
}
</style>
</head>
<body>
<p>
<script type="text/javascript" language="javascript">
<!--
var ColorHex=new Array('00','33','66','99','CC','FF')
var SpColorHex=new Array('FF0000','00FF00','0000FF','FFFF00','00FFFF','FF00FF')
var current=null
function initcolor(evt)
{
var colorTable=''
for (i=0;i<2;i++)
{
for (j=0;j<6;j++)
{
colorTable=colorTable+'<tr height=15>'
colorTable=colorTable+'<td width=15 style="background-color:#000000">'
if (i==0){
colorTable=colorTable+'<td width=15 style="cursor:pointer;background-color:#'+ColorHex[j]+ColorHex[j]+ColorHex[j]+'" onclick="doclick(this.style.backgroundColor)">'}
else{
colorTable=colorTable+'<td width=15 style="cursor:pointer;background-color:#'+SpColorHex[j]+'" onclick="doclick(this.style.backgroundColor)">'}
colorTable=colorTable+'<td width=15 style="background-color:#000000">'
for (k=0;k<3;k++)
{
for (l=0;l<6;l++)
{
colorTable=colorTable+'<td width=15 style="cursor:pointer;background-color:#'+ColorHex[k+i*3]+ColorHex[l]+ColorHex[j]+'" onclick="doclick(this.style.backgroundColor)">'
}
}
}
}
colorTable='<table border="0" cellspacing="0" cellpadding="0" style="border:1px #000000 solid;border-bottom:none;border-collapse: collapse;width:337px;" bordercolor="000000">'
+'<tr height=20><td colspan=21 bgcolor=#ffffff style="font:12px tahoma;padding-left:2px;">'
         +'<span style="float:left;color:#999999;">搜索吧|为站长提供专业知识搜索</span>'
         +'<span style="float:right;padding-right:3px;cursor:pointer;" onclick="colorclose()">×关闭</span>'
+'</td></table>'
+'<table border="1" cellspacing="0" cellpadding="0" style="border-collapse: collapse" bordercolor="000000" style="cursor:pointer;">'
+colorTable+'</table>';
document.getElementById("colorpane").innerHTML=colorTable;
var current_x = document.getElementById("inputcolor").offsetLeft;
var current_y = document.getElementById("inputcolor").offsetTop;
//alert(current_x + "-" + current_y)
document.getElementById("colorpane").style.left = current_x + "px";
document.getElementById("colorpane").style.top = current_y + "px";
}
function doclick(obj){
    alert(obj);
}
function colorclose(){
    document.getElementById("colorpane").style.display = "none";
    //alert("ok");
}
function coloropen(){
    document.getElementById("colorpane").style.display = "";
}
window.onload = initcolor;
</script>
</p>
<p> </p>
<p> </p>
<p> </p>
<p>
<input type="button" value="颜色选择" onclick="coloropen(event)" id="inputcolor" />
</p>
<p>  </p>
<div id="colorpane" style="position:absolute;z-index:999;display:none;"></div>
</body>
</html>

时间: 2024-12-24 20:22:54

js 颜色选择器(兼容firefox)_页面背景的相关文章

js实现点击图片改变页面背景图的方法

 这篇文章主要介绍了js实现点击图片改变页面背景图的方法,实例分析了javascript操作css与图片的技巧,具有一定参考借鉴价值,需要的朋友可以参考下     本文实例讲述了js实现点击图片改变页面背景图的方法.分享给大家供大家参考.具体实现方法如下:   代码如下: <html> <head> <title>点击图片即改变页面的背景图片</title> </head> <body bgcolor="#FFFFFF"

js实现点击图片改变页面背景图的方法_javascript技巧

本文实例讲述了js实现点击图片改变页面背景图的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <title>点击图片即改变页面的背景图片</title> </head> <body bgcolor="#FFFFFF" leftmargin="0" marginwidth="0"> <script language=&qu

JS时间选择器 兼容IE6,7,8,9_时间日期

在线演示: http://demo.jb51.net/js/2012/js_date/ 复制代码 代码如下: <html> <head> <title>Js日期选择器并自动加入到输入框中</title> <meta http-equiv="content-Type" content="text/html;charset=gb2312"> <script type="text/javascri

js网页中弹出小窗口,页面背景逐渐变为半透明

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

百度 popup.js 完美修正版非常的不错 脚本之家推荐_页面背景

原因是在html中加上文档类型(DOCTYPE)后判断屏幕坐标出错,网络上也有解决方法,就是去掉文档类型,这种治标不治本的方法我觉得很不合理,本人花了点时间修改了一下.经测试ie6.ie7.firefox2.0.firefox3.0 是没有任何问题的,其他的我没有测试.改后的压缩文件多了2KB左右,现在为16.2 KB.在目前的网络带宽下还是比较合理的.如果有需要我可以提供popup.js注释版.请相信博主是有分享精神的. 历史版本说明: V1.0.0 2008.07 从百度空间下载popup.

js实现的跟随鼠标移动的时钟效果(中英文日期显示)_页面背景

中文日期限制 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 英文日期显示: '); document.write('

网页打开自动最大化的js代码_页面背景

代码1:最常用的代码,比较简单 复制代码 代码如下: <script language="javascript"> self.moveto(0,0) self.resizeto(screen.availwidth,screen.availheight) </script> 代码2: 以下代码放在<head></head>之间: 复制代码 代码如下: <script language=″javascript″> <!--f

JS+CSS实现的一种交互体验 表单页面_页面背景

原始密码: 新的密码: (密码长度为6~20字节.不修改请留空) 重复密码: 邮箱设置: (我们不会给您发送任何垃圾邮件.)

仿3721首页模块拖曳移动效果js代码[可拖曳层移动层]_页面背景

[清除记录]    [添加记录] 关闭 编辑 锁定 缩小