手机浏览 RSS 2.0 订阅 膘叔的简单人生 , 腾讯云RDS购买 | 超便宜的Vultr , 注册 | 登陆
浏览模式: 标准 | 列表2024年11月的文章

javascript获取随机颜色

标签云的时候,好象除了点击率高的字体会放的特别大外,点击率差不多的,往往都是采用不同的颜色来进行区分,如果页面上内容很少,我们还能手动控制一下。如果数据很多。。。黑黑,恐怕你只能随机了。

如果你想用javascript的随机,那么,司徒正美可是为你收集了不少方法哦,你可以挑一些作为自己的项目中的基本代码。

原文如下:

在制作饼图或标签云时,我们通常需要很多颜色,方法有二。一是准备一组漂亮的候选颜色,二是随机生成颜色。在数量很多或不明确时,我想后者就是唯一的出路了。谷歌了一下,整理如下,按由浅入深的顺序排列。

实现1
JavaScript代码
  1. var getRandomColor = function(){  
  2.   return  '#' +  
  3.     (function(color){  
  4.     return (color +=  '0123456789abcdef'[Math.floor(Math.random()*16)])  
  5.       && (color.length == 6) ?  color : arguments.callee(color);  
  6.   })('');  
  7. }  

随机生成6个字符然后再串到一起,闭包调用自身与三元运算符让程序变得内敛,初心者应该好好学习这种写法。

实现2
JavaScript代码
  1. var getRandomColor = function(){  
  2.   return (function(m,s,c){  
  3.     return (c ? arguments.callee(m,s,c-1) : '#') +  
  4.       s[m.floor(m.random() * 16)]  
  5.   })(Math,'0123456789abcdef',5)  
  6. }  

把Math对象,用于生成hex颜色值的字符串提取出来,并利用第三个参数来判断是否还继续调用自身。

实现3
JavaScript代码
  1. Array.prototype.map = function(fn, thisObj) {  
  2.   var scope = thisObj || window;  
  3.   var a = [];  
  4.   for ( var i=0, j=this.length; i < j; ++i ) {  
  5.     a.push(fn.call(scope, this[i], i, this));  
  6.   }  
  7.   return a;  
  8. };  
  9. var getRandomColor = function(){  
  10.   return '#'+'0123456789abcdef'.split('').map(function(v,i,a){  
  11.     return i>5 ? null : a[Math.floor(Math.random()*16)] }).join('');  
  12. }  

这个要求我们对数组做些扩展,map将返回一个数组,然后我们再用join把它的元素串成字符。

实现4
JavaScript代码
  1. var getRandomColor = function(){  
  2.   return '#'+Math.floor(Math.random()*16777215).toString(16);  
  3. }  

这个实现非常逆天,虽然有点小bug。我们知道hex颜色值是从#000000到#ffffff,后面那六位数是16进制数,相当于"0x000000" 到"0xffffff"。这实现的思路是将hex的最大值ffffff先转换为10进制,进行random后再转换回16进制。我们看一下,如何得到 16777215 这个数值的。

JavaScript代码
  1. alert(parseInt("0xffffff",16).toString(10));  

实现5
JavaScript代码
  1. var getRandomColor = function(){  
  2.   return '#'+(Math.random()*0xffffff<<0).toString(16);  
  3. }  

 

基本实现4的改进,利用左移运算符把0xffffff转化为整型。这样就不用记16777215了。由于左移运算符的优先级比不上乘号,因此随机后再左移,连Math.floor也不用了。

实现6
JavaScript代码
  1. var getRandomColor = function(){  
  2.   return '#'+(function(h){  
  3.     return new Array(7-h.length).join("0")+h  
  4.   })((Math.random()*0x1000000<<0).toString(16))  
  5. }  

修正上面版本的bug(无法生成纯白色与hex位数不足问题)。0x1000000相当0xffffff+1,确保会抽选到0xffffff。在闭包里我们处理hex值不足6位的问题,直接在未【应该是末】位补零。

实现7
JavaScript代码
  1. var getRandomColor = function(){  
  2.   return '#'+('00000'+(Math.random()*0x1000000<<0).toString(16)).slice(-6);  
  3. }  

这次在前面补零,连递归检测也省了。

上面版本生成颜色的范围算是大而全,但随之而来的问题是颜色不好看,于是实现8搞出来了。它生成的颜色相当鲜艳。

实现8
JavaScript代码
  1. var getRandomColor = function(){  
  2.     return "hsb(" + Math.random()  + ", 1, 1)";  
  3. }  

实际代码:

XML/HTML代码
  1.    
  2. <!doctype html>  
  3. <html dir="ltr" lang="zh-CN">  
  4.   <head>  
  5.     <meta charset="utf-8"/>  
  6.     <meta http-equiv="X-UA-Compatible" content="IE=8">  
  7.     <title>初级饼图</title>  
  8.     <script src="http://bloghighlighter.googlecode.com/files/raphael-min.js" type="text/javascript" ></script>  
  9.     <script type="text/javascript" charset="utf-8">  
  10.   
  11.       var getRandomColor = function(){  
  12.         return "hsb(" +[ Math.random() ,Math.random(),1] +")";  
  13.       }  
  14.   
  15.       window.onload = function () {  
  16.         var paper = Raphael("canvas", 700, 700);  
  17.         paper.rect(0, 0, 640, 480,10).attr({fill: "#F2F1D7",stroke: "none"});//设置画板  
  18.   
  19.         function drawSector(cx,cy,r,paper,oc,startAngle){  
  20.           var angleplus = 360 * oc / 100,//360度乘以40%  
  21.           startAnglestartAngle = startAngle || 0,  
  22.           endAngle =startAngle+angleplus,  
  23.           rad = Math.PI / 180,  
  24.           x1 = cx + r * Math.cos(-startAngle * rad),  
  25.           x2 = cx + r * Math.cos(-endAngle * rad),  
  26.           y1 = cy + r * Math.sin(-startAngle * rad),  
  27.           y2 = cy + r * Math.sin(-endAngle * rad);  
  28.           var path = ["M", cx, cy, "L", x1, y1, "A", r, r, 0, +(endAngle - startAngle > 180), 0, x2, y2, "z"];  
  29.           pathpath = path.join(" ");  
  30.           paper.path({fill:getRandomColor()},path);  
  31.           return endAngle  
  32.         }  
  33.         var ocs = [40,25,17,10,8];  
  34.         for(var i=0,l=ocs.length,startAngle;i<l;i++){  
  35.           startAngle = drawSector(300,300,100,paper,ocs[i],startAngle);  
  36.         }  
  37.   
  38.       };  
  39.     </script>  
  40.     <style type="text/css" media="screen">  
  41.       #canvas {  
  42.         width: 700px;  
  43.         height: 700px;  
  44.       }  
  45.     </style>  
  46.     <title>初级饼图</title>  
  47.   </head>  
  48.   <body>  
  49.     <p>初级饼图</p>  
  50.     <div id="canvas"></div>  
  51.   </body>  
  52. </html>  

原文中,这段代码可以在页面执行,由于我的博客关系,没有实现这个功能,所以。。。只有显示原来的代码了。如果你需要运行它,可以复制下来再运行,当然也可去:http://www.cnblogs.com/rubylouvre/archive/2009/09/24/1572977.html,直接运行。。

 

初用thinkphp的widget

widget最早的应用应该是vista了。。但WEB上的就说不准谁是最早应用的。。。

ThinkPHP从很早的版本里就有支持了,但,我却一直没有用过,依稀记得yblog在用widget的时候,好象ThinkPHP那时候还没有正式支持。。

我这次使用,其实也算是个意外,在对thinksns二次开发的时候,有些页面需要经常重用,不得己,只能使用widget了。

随便看了一下,如果仅仅只是用来显示一些简单的页面,那么widget还是很方便的就能够被使用了。thinkphp2.0的手册中也有介绍。。

最简单的用法莫过于在Lib目录下,新建一个widget目录。然后放上一个class文件,最后附上一个基本同名的模版就行了。。

PHP代码
  1. <?php  
  2.   
  3. class RightSlideWidget extends Widget  
  4. {  
  5.     function render($data){  
  6.         return $data;  
  7.     }  
  8. }  
在同目录下放置一个RightSlide.html就行了。。该html的解析与你使用的模版引擎有关,一般情况下,还是使用TP的模版了。。

在正式的模版中使用【我是指使用TP的情况下】,直接{:W('RightSlide',array('data'=>1))}就可以了。

很简单吧。

Tags: thinkphp, widget

在FireBug控制台记录jQuery

这段内容其实是来自于昨天写的文章 jQuery选择器? 中帕兰映像的文章中的部分,主要是因为他很有用,所以就提出来。

再加上,昨天我也就列了一个大纲,没有全部转载,所以,贴出来还是有点必要的。。可以多学习一下这些先进的功能。

FireBug是我最喜欢用的一个浏览器扩展工具之一,这个工具可以让你快速的在可视化界面中了解当前页面的HTML+CSS+JavaScript,并在该工具下完成即时开发。作为jQuery或JavaScript开发人员,FireFox对于记录你的JavaScript代码也得到支持。

写入FireBug控制台的最简单方式就是:console.log("hello world");

 大小: 30.02 K
尺寸: 500 x 200
浏览: 1356 次
点击打开新窗口浏览全图

你也可以按照你希望的方式写一些参数:console.log(2,4,6,8,"foo",bar);

 

你也可以编写一个小扩展来记录jQuery对象到控制台:

JavaScript代码
  1. jQuery.fn.log = function (msg) {  
  2.     console.log("%s: %o", msg, this);  
  3.     return this;  
  4. };  

 

对于这个扩展,你可以直接使用.log()方法来记录当前对象到控制台。

JavaScript代码
  1. $('#some_div').find('li.source > input:checkbox')  
  2.     .log("sources to uncheck")  
  3.     .removeAttr("checked");  

---关于这段,很多人有转贴哦。

博客园的dudu在jQuery小组里也贴了:http://space.cnblogs.com/group/topic/34586/

看来有很多人关注这些,虽然我贴了。但我自己还没有测试。。。当然paste结束后,我就马上去测试了 。。。

163邮箱的一些技巧

做WEB开发的,总不可避免的会利用程序来发邮件。。
而163的邮局相对的比较完善,他提供了一些错误代码和一些其他帮助。
你看:163邮箱OutLook错误号解析一文中,就提到了很多代码,他增强了你在开发中的纠错能力:

一般常见错误代码
0x800C0131 可能是 Folders.dbx 档案属性错误或损坏.
0x800CCC00 身份验证(Authentication)未载入
0x800CCC01 认证(Certificate)内容错误
0x800CCC02 认证日期错误
0x800CCC03 使用者已联机
0x800CCC05 未联机到服务器
0x800CCC0A 邮件下载未完成
0x800CCC0B 服务器忙碌中
0x800CCC0D 找不到主机(检查你的SMTP服务器是不是设错)
0x800CCC0E 联机到服务器失败,无法与主机建立联机。等一段时间再试。
0x800CCC0F 服务器结束联机(对方服务器负荷过重)
0x800CCC10 服务器无法辨认此邮件地址
0x800CCC11 服务器无法辨认的 Mailing list
0x800CCC12 无法传送 Winsock request
0x800CCC13 无法接收 Winsock reply
0x800CCC14 无法起始 Winsock
0x800CCC15 无法开启 Windows Socket
0x800CCC16 无法辨认使用者账号,使用者账号错误
0x800CCC17 使用者中断操作
0x800CCC18 登入失败(例如:不需要安全密码认证登入,但却设了安全密码认证登入)
0x800CCC19 作业逾时
0x800CCC1A 无法以 SSL 建立联机
   
Winsock错误
0x800CCC40 Network subsystem 无法使用
0x800CCC41 Windows Sockets 不支持此应用程序
0x800CCC43 Bad address.
0x800CCC44 Windows Sockets 无法加载
0x800CCC45 Operation now in progress..
   
SMTP错误
0x800CCC60 不合法的回应
0x800CCC61 不明的错误代码
0x800CCC62 收到语法错误
0x800CCC63 语法参数不正确
0x800CCC64 指令不完整
0x800CCC65 不正确的指令序列
0x800CCC66 指令不完整
0x800CCC67 没有这个指令
0x800CCC68 邮件信箱被锁住或忙碌中
0x800CCC69 找不到邮件信箱
0x800CCC6A 处理要求错误
0x800CCC6B 邮件信箱不在此服务器上
0x800CCC6C 已无空间储存邮件
0x800CCC6D 已超过限制的储存容量上限
0x800CCC6E 不合法的邮件信箱名称
0x800CCC6F Transaction error,可能是服务器不接受你的邮件,请跟你的 ISP 联络。
0x800CCC78 邮件地址不正确,收件者被服务器拒绝,在属性里选中“我的服务器需要身份验证”即可。
0x800CCC79 Relay Denied:Outlook Express 的 SMTP 设定不正确,在属性里选中“我的服务器需要身份验证”即可。
0x800CCC7A 没有指定寄件者
0x800CCC7B 没有指定收件者
   
POP3错误
0x800CCC90 检查是否有使用该服务器的权限。或是否设了安全密码认证登入
0x800CCC91 使用者名称错误或找不到此使用者
0x800CCC92 账号、密码错误,请核实帐号和密码的输入是否正确。
0x800CCC93 无法解释响应
0x800CCC94 需要指令
0x800CCC95 服务器上已无邮件
0x800CCC96 没有邮件标记为要下载
0x800CCC97 Message ID 超出范围
   
NNTP错误  
0x800CCCA0 新闻服务器响应错误,可能你没有拥有可使用该服务器的权限。
0x800CCCA1 读取新闻群组失败
0x800CCCA2 要求服务器邮件清单失败
0x800CCCA3 无法显示清单
0x800CCCA4 无法开启群组
0x800CCCA5 服务器无此群组
0x800CCCA6 邮件不在服务器上
0x800CCCA7 找不到件标题
0x800CCCA8 找不到邮件本文
0x800CCCA9 无法发布到服务器上
0x800CCCAA 无法开启下封邮件
0x800CCCAB 无法显示日期
0x800CCCAC 无法显示标题
0x800CCCAD 无法显示 MIME 标题
0x800CCCAE 使用者名称或密码不正确
   
RAS错误
0x800CCCC2 未安装拨号网络
0x800CCCC3 找不到拨号网络
0x800CCCC4 拨号网络错误
0x800CCCC5 Connectoid 坏或遗失
0x800CCCC6 取得拨号设定时错误
   
IMAP错误
0x800CCCD1 登入失败
0x800CCCD2 Message tagged
0x800CCCD3 Invalid response to request.
0x800CCCD4 语法错误
0x800CCCD5 不是 IMAP 服务器
0x800CCCD6 Buffer 已超过上限
0x800CCCD7 Recovery error
0x800CCCD8 数据不完整
0x800CCCD9 联机被拒
0x800CCCDA 不明的回应
0x800CCCDB User ID 已更改
0x800CCCDC User ID 指令失败
0x800CCCDD Unexpected disconnect
0x800CCCDE Invalid server state
0x800CCCDF 无法认证客户端


而对于那些喜欢手动查看从邮件服务器到网易MX服务器的SMTP的记录的朋友,163邮箱的帮助也做了介绍:

  利用telnet手工模拟一次smtp会话过程,能提供许多有用的信息,从而帮助我们迅速定位您的问题。下面这个手工smtp会话测试过程可以在多个操作系统下运行,包括Windows、Unix和Linux。
2nn开头的返回码,表示会话是正常的;而5nn或者4nn开头的返回码则表示有错误发生。

  利用telnet来模拟一次完整的发信,下面是具体步骤:
·打开一个命令窗口,键入:telnet 163mx01.mxmail.netease.com 25,这条命令将建立一个到我们163邮件服务器的连接;
·键入:HELO yourdomain.com 这里的yourdomain.com指您的域名;
·键入:MAIL FROM:< you@yourdomain.com >(邮箱名需要用<>括起来),这里的you@yourdomain.com指您们域的一个邮箱名;
·键入:RCPT TO:< postmaster >(邮箱名需要用<>括起来),这将发信到我们的postmaster邮箱;
·键入:DATA;
·输入邮件的信头和正文; 
Received: (from you@yourdomain.com) by yourdomain.com 
FROM:< you@yourdomain.com>(无需空格)
TO:< postmaster>(无需空格)
SUBJECT: yourdomain.com to netease
(空行)
Hi!
It's from yourdomain.com. Just a test.Bye.
·新起一个空行,键入:. 然后按回车,这将结束整封信,并发送给服务器。

  范例(模拟从126.com服务器向网易163.com发起smtp会话)如下图:

大小: 54.64 K
尺寸: 500 x 346
浏览: 1531 次
点击打开新窗口浏览全图


  当然:该测试过程必须在发信服务器上进行。

jQuery选择器?

现在javascript的框架越来越多,但被人关注的也就那么几个,这几天博客园上也有不少文章来介绍和学习jQuery,有司徒正美的深入jQuery源码系列,也有很多人写的基础学习,当然也有应用类的,插件类的。。formValidator好象首发就是在博客园哦。

昨天在博客园上看到有人在写着jQuery的选择器的文章,地址为:http://www.cnblogs.com/bynet/archive/2009/11/30/1613635.html,其实,在网上有这么一个页面,专门用来让你测试的,http://codylindley.com/jqueryselectors/,它非常酷,而且能够在线免费使用,当然你也能下来到本地离线使用。这个测试页面包含复杂的HTML组合字段,然后你能尝试预定义使用各种jQuery选择器。如果这还不够你也可以自定义选择器。你还可以尝试着一些优化代码。。。

帕兰映像就收集了一些优化的代码:http://paranimage.com/14-tips-to-improve-jquery-code/
有14条哦,建议去原页面查看。我这里只列一下标题

  1. 测试并提升你的jQuery选择器水平

  2. 测试jQuery包装集是否包含某些元素

  3. 从jquery.org读取jQuery最新版本

  4. 存储数据

  5. jQuery手册常备身边

  6. 在FireBug控制台记录jQuery

  7. 尽可能使用ID选择器

  8. 善于利用jQuery链

  9. 绑定jQuery函数到$(window).load事件

  10. 使用jQuery链来限定选择器,让你的代码更简洁更优雅

  11. 使用回调函数同步效果

  12. 学会使用自定义选择器

  13. 预加载图片

  14. 将你的代码测试完好

好象,帕兰也是从别的地方贴过来的
英文原文:More jQuery and General Javascript Tips to Improve Your Code
中文译文:了解更多jQuery技巧来提高你的代码/彬GO