页面载入中...

和 "颜色" 有关的文章

2008-06
19

用Bookmarklet创建Web安全颜色表格

最近在看 JavaScript 的一些基础知识,其中包括 bookmarklet 的相关资料。用 bookmarklet 创建 web 安全颜色表格是 bookmarklet 的一个应用,而且在以后的 web 配色中也可以当作参考。先解释两个概念吧。

什么是 Bookmarklet?

Bookmarklet 是在浏览器中的一种特殊的书签,或者用 IE 的叫法—“收藏夹”。一般的书签都是调用外部 URL,而它不同,它是对浏览器的 JavaScript 解释器的调用,执行指定的 JavaScript 程序。使用 bookmarklet 可以实现很多有用、有趣的功能,使浏览器成为更好用的工具。

Bookmarklet 的格式为 javascript:[code],即一个 JavaScript 伪协议限定符 + JavaScript 代码。最简单的例子当然还是 Hello World:

javascript:alert ('Hello World!');

一般来说,bookmarklet 都放在页面的 <a> 标签中,例如 <a href="javascript:alert ('Hello World!');">Hello World</a>Hello World)。一些有用的 bookmarklet 可以放在浏览器的书签中,新建书签的时候把 <a> 标签的 href 属性值塞进书签的地址中就可以了。

什么是 Web 安全颜色?

在远古时代,很多显示器都只支持256种颜色。除去 Windows 和 Mac 操作系统的40种保留颜色,还剩下216种颜色,它们是可以保证能够被正确显示的颜色,这216种颜色就叫 Web 安全颜色。

尽管现在显示器已经可以显示数百万种颜色,但是这216种 Web 安全颜色仍然是最经典的颜色,能保证所有的计算机在256色下运行时能够正确显示。

代码

用 bookmarklet 创建 web 安全颜色表格的代码如下:

javascript:
var i,j,k,l,t='<table width=800px>',c=new Array('00','33','66','99','CC','FF');
for(i=0;i<6;i++){
    
for(j=0;j<6;j++){
        
t+='<tr>';
        
for(k=0;k<6;k++){
            
l=c[i]+c[j]+c[k];
            
t+= j<3?
                
'<td height=30px bgcolor=#'+l+'><font color=white>#'+l+'</font></td>':
                
'<td height=30px bgcolor=#'+l+'>#'+l+'</td>'
        
}
        
t+='</tr>'
    
}
}
void(document.body.innerHTML=t+'</table>')

点击这里看演示(有点不爽的是不能通过后退回到上一个页面,只能刷新)

考虑到简便,以上的代码使用了很多 bgcolor、font 等非法的属性和标签,不符合 XHTML 标准。不过写页面 XHTML 代码的时候可不能这样哦,呵呵。