您的位置：首页 > Web前端 > JavaScript

js颜色选择器的两种实现直接上代码（代码里有一种，附件里是另一种）

2015-07-19 00:00 645 查看

<!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: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){

document.getElementById("color").value=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>

<input id="color" type="hidden">

</body>

</html>

版权声明：本文为博主原创文章，未经博主允许不得转载。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航