demo.htm

来自「一个js开发的颜色选择器」· HTM 代码 · 共 42 行

HTM
42 行
字号 
<!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>
 <title>ColorJack: DHTML Color Picker</title>
 <link href="plugin.css" rel="stylesheet" type="text/css" />
 <script src="plugin.js" type="text/JavaScript"></script>
</head>
<body>
<div id="plugin" onmousedown="HSVslide('drag','plugin',event)" style="TOP: 140px; LEFT: 430px; Z-INDEX: 20;">
 <div id="plugHEX" onmousedown="stop=0; setTimeout('stop=1',100);">F1FFCC</div><div id="plugCLOSE" onmousedown="toggle('plugin')">X</div><br>
 <div id="SV" onmousedown="HSVslide('SVslide','plugin',event)" title="Saturation + Value">
  <div id="SVslide" style="TOP: -4px; LEFT: -4px;"><br /></div>
 </div>
 <form id="H" onmousedown="HSVslide('Hslide','plugin',event)" title="Hue">
  <div id="Hslide" style="TOP: -7px; LEFT: -8px;"><br /></div>
  <div id="Hmodel"></div>
 </form>
</div>

<!--Sample DIV to show selected color -->
<div id="colorbox" style="width: 300px; height: 200px; border: 1px solid gray; padding: 10px; background-color: #F1FFCC">
<a href="http://www.mudcube.com/code/DHTML_Color_Picker.php">DHTML Color Picker</a><br>Free to use on your own projects<br /><br />
This version featured on <a href="http://www.dynamicdrive.com">Dynamic Drive</a>
</div>


<script type="text/javascript">

//*** CUSTOMIZE mkcolor() function below to perform the desired action when the color picker is being dragged/ used
//*** Parameter "v" contains the latest color being selected
function mkColor(v){
//** In this case, just update DIV with ID="colorbox" so its background color reflects the chosen color
$S('colorbox').background='#'+v;
}

loadSV(); updateH('F1FFCC');

</script>

<p><a href="javascript:toggle('plugin')">Show/ hide Color Picker</a></p>
</body>
</html>

demo.htm - 源码说明

本页面展示了「一个js开发的颜色选择器」中的 demo.htm 源码文件，采用 HTM 编程语言编写，共 42 行代码。您可以在线阅读完整代码内容，也可以返回资源详情页下载完整源码包进行本地学习和开发。

虫虫下载站收录了大量与选择器相关的技术资源，包括源代码、技术文档、电路图等，是电子工程师和嵌入式开发者的专业学习平台。

⌨️ 快捷键说明

复制代码Ctrl + C
搜索代码Ctrl + F
全屏模式F11
增大字号Ctrl + =
减小字号Ctrl + -
显示快捷键?