这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要介绍了 JS 实现简单面向对象的颜色选择器, 以完整实例形式分析了 JavaScript 基于面向对象实现颜色选择器的具体步骤与实现技巧, 需要的朋友可以参考下
本文实例讲述了 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-Type" content="text/html; charset=gb2312" />
- <title>
- Untitled Document
- </title>
- </head>
- <body>
- <script type="text/JavaScript">
- < !--
- var colorPicker = function(idStr) {
- this.colorPool = ["#000000", "#993300", "#333300", "#003300", "#003366", "#000080", "#333399", "#333333", "#800000", "#FF6600", "#808000", "#008000", "#008080", "#0000FF", "#666699", "#808080", "#FF0000", "#FF9900", "#99CC00", "#339966", "#33CCCC", "#3366FF", "#800080", "#999999", "#FF00FF", "#FFCC00", "#FFFF00", "#00FF00", "#00FFFF", "#00CCFF", "#993366", "#CCCCCC", "#FF99CC", "#FFCC99", "#FFFF99", "#CCFFCC", "#CCFFFF", "#99CCFF", "#CC99FF", "#FFFFFF"];
- this.initialize(idStr);
- }
- colorPicker.prototype = {
- initialize: function(idStr) {
- var count = 0;
- var html = '';
- var self = this;
- html += '<table cellspacing="5" cellpadding="0" border="2" bordercolor="#000000" style="cursor:pointer;background:#ECE9D8" mce_style="cursor:pointer;background:#ECE9D8" >';
- // html+= '<tr><td align="center" colspan="8" width="160" height="20" id="currentColor" bgcolor="#ffffff">当前颜色</td></tr>';
- for (i = 0; i < 5; i++) {
- html += "<tr>";
- for (j = 0; j < 8; j++) {
- html += '<td align="center" width="20" height="20" style="background:' + this.colorPool[count] + '" mce_style="background:' + this.colorPool[count] + '" unselectable="on"> </td>';
- count++;
- }
- html += "</tr>";
- }
- html += '</table>';
- this.trigger = document.getElementById(idStr);
- this.div = document.createElement('div');
- this.div.innerHTML = html;
- var tds = this.div.getElementsByTagName('td');
- for (var i = 0,
- l = tds.length; i < l; i++) {
- tds[i].onclick = function() {
- self.setColor(this.style.backgroundColor);
- }
- }
- this.div.id = 'myColorPicker';
- this.trigger.parentNode.appendChild(this.div);
- this.div.style.position = 'absolute';
- this.div.style.left = this.trigger.offsetLeft + 'px'this.div.style.top = (this.trigger.clientHeight + this.trigger.offsetTop) + 'px';
- //this.hide();
- this.trigger.onclick = function() {
- if (self.div.style.display == 'none') {
- self.show();
- return false;
- } else {
- self.hide();
- return false;
- }
- }
- },
- setColor: function(c) {
- this.hide();
- document.getElementById('demo').style.backgroundColor = c //proEditor.setColor(c); //自己定义函数决定setColor的功能
- },
- hide: function() {
- this.div.style.display = 'none'
- },
- show: function() {
- this.div.style.display = 'block'
- }
- }
- // -->
- </script>
- <div>
- <a href="#" mce_href="#" onclick="initColorPicker();return false" id="demo"
- style="position:absolute;left:200px">
- 颜色选择
- </a>
- </div>
- <script type="text/javascript">
- < !--
- function initColorPicker() {
- picker = new colorPicker('demo');
- }
- // -->
- </script>
- </body>
- </html>
对于 JS 颜色工具感兴趣的朋友可参看本站在线工具:
希望本文所述对大家 JavaScript 程序设计有所帮助。
来源: http://www.phperz.com/article/17/0710/266221.html