摘要：使用 JavaScript 中的定时器和 CSS3 中的圆角矩形，我们可以实现内容载入时的转圈动画。看下面的代码：<!DOCTYPE html><html> <head><title>内容载入时的转圈动画</title><style type="text/css">#loaddiv span { position: absolute; width: 4px; height: 4px; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-
阅读全文
04 2012 档案
摘要：在 CSS3 中，可以用 border-radius 属性实现圆角矩形。最简单的例子如下：width: 200px;height: 100px;border-radius: 20px;border: 1px solid;如果将 border-radius 的值设为一个正方形边长的一半，就得到一个圆形：width: 160px;height: 160px;border-radius: 80px;border: 1px solid;实际上， 圆角矩形四个角的圆弧半径可以不一样，我们可以用 border-top-left-radius，border-top-right-radius，border-b
阅读全文
摘要：JavaScript 的定时器函数有 setTimeout 和 setInterval 这两个。setTimeout 函数用于延迟若干时间后执行某个函数或某段代码，而 setInterval 函数用于每隔一段时间执行某个函数或某段代码。它们的参数如下：var timeoutID = window.setTimeout(func, delay[, param1, param2, ...]); // 执行某个函数var timeoutID = window.setTimeout(code, delay); // 执行某段代码var intervalID = window.setInterval(f
阅读全文
摘要：在 JavaScript 中，一个函数的执行过程分为两个阶段：（1）建立执行环境；（2）执行函数代码。在建立执行环境（execution context）的阶段，函数将初始化各种变量，并将它们记录在一个内部的变量对象（variable object）中。记录在该变量对象中的变量依次有下面三种：（a）函数的实际参数；（b）内部的函数声明；（c）内部的变量定义。这个阶段结束之后前面两种变量有了具体的值，而最后一种变量的值总是 undefined。在执行函数代码阶段，当函数执行到 var 语句时，这种变量才有了具体的值。例如：function hello(a) { alert(a+b()); //.
阅读全文
摘要：要查找 DOM 中的某种节点元素，主要有 getElementById，getElementsByClassName，getElementsByTagName 和querySelectorAll 这几个方法可用。其中 getElementById 和 getElementsByTagName 方法各个浏览器都支持；而getElementsByClassName 方法 IE9 之前不支持，querySelectorAll 方法 IE8 之前以及 Firefox 3.5 之前不支持。在不支持 getElementsByClassName 方法的浏览器中可以自己编写函数来实现这个功能，例如：func
阅读全文
摘要：CSS 中的 white-space 属性用于指定空白和换行的处理方式，适用于所有元素。它的取值有如下这些：normal合并连续空白符，换行符也作为空白符，而且自动折行，这是默认值。nowrap合并连续空白符，换行符也作为空白符，而且不自动折行。pre-line合并连续空白符，保留换行符处的换行，而且自动折行。pre保留所有空白符，保留换行符处的换行，而且不自动折行，类似于<pre>元素的行为。pre-wrap保留所有空白符，保留换行符处的换行，而且自动折行。例如，这个博客左侧栏的“阅读排行榜”和“评论排行榜”部分，默认情形每个 <li> 元素是自动折行的，然后在个人定
阅读全文
摘要：DOM 中的 appendChild 和 insertBefore 用于插入某个节点的子节点。其中 appendChild 用于在最后一个子节点之后添加新节点，例如：var showarea = document.getElementById("showarea");var node = document.createElement("div");node.innerHTML = "this is a new node";showarea.appendChild(node);而 insertBefore 用于在某个子节点之前插入新节点
阅读全文
摘要：每个浏览器都有它自己的用户代理（user agent）字符串，里面包含了浏览器和操作系统等信息。通过使用这个字符串，我们可以处理跨浏览器的差异。用户代理字符串保存在 JavaScript 的 navigator.userAgent 变量中。我们先来看看各个主流浏览器在各个平台的用户代理字符串的例子。1. IE 和 IE Mobile 浏览器系统平台浏览器用户代理字符串WindowsIE 9Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; WOW64; Trident/5.0)WindowsIE 10Mozilla/5.0 (compatibl
阅读全文
摘要：类似于动态加载 JS 文件的情形，动态加载 CSS 文件也是可以的，例如：var loadStyles = function(url) { var link = document.createElement("link"); link.rel = "stylesheet"; link.type = "text/css"; link.href = url; var head = document.getElementsByTagName("head")[0]; head.appendChild(link);};如果需
阅读全文
摘要：稍微复杂的网站中，肯定要用到许多 JavaScript 文件。一般来说，在 HTML 页面中应该只加载基本的 JS 文件，以使得页面能够尽快地显示出来。然后在页面载入完毕之后，利用 onload 事件再载入其它 JS 文件。动态加载 JS 文件的方法很简单，可以用下面的函数来实现：var loadScript = function(url) { var script = document.createElement("script"); script.type = "text/javascript"; script.src = url; document
阅读全文
摘要：JavaScript 中的单态模式或称单例模式（singleton pattern），是指只有一个实例。常见的一些 JavaScript 框架例如 jQuery 和 YUI 等，应该就只有一个实例。最简单的单态模式可以用对象来实现，例如：var singleton = { myvar: 'public variable', myfun: function() { return 'public function' };};上述这种方法定义的属性和方法都是公有的，如果还需要有私有属性和方法，可以用函数来实现。例如：var singleton = (function(
阅读全文
摘要：现在，直接在网页中指定存放在网络中的字体是可能的，这就是所谓的 Web Fonts。首先我们来看看都有那些网络字体格式是浏览器支持的：（1）TrueType 格式，文件后缀为 ttf。这是常用矢量字体中最古老的一种。（2）OpenType 格式，文件后缀为 otf。这是 TrueType 字体格式的替代版。（3）EOT 格式，文件后缀为 eot。全名 Embedded Open Type，是微软针对网络情形改进的字体格式。（4）WOFF 格式，文件后缀为 woff。全名 Web Open Font Format，是 Mozilla 基金会在 2009 年推出的字体格式，很快 Firefox 3
阅读全文
摘要：更新：大部分浏览器的最新版本都支持通过 Blob 来保存本地文件，具体方法见这里。前一篇已经总结了在浏览器中打开本地文件的方法，现在接着总结保存本地文件的方法，同样以保存 textarea 的内容到本地文件为例。首先还是 IE，IE 的 document.execCommand 函数中可以使用 SaveAs 参数来将当前网页保存到本地文件。我们利用 iframe 就可以实现保存 textarea 内容到文件的目的。例子如下：<html><body><textarea id="areaid">hello this!</textarea
阅读全文
摘要：更新：大部分浏览器的最新版本都支持通过 FileReader 来打开本地文件，具体方法见这里。为着安全起见，在 JavaScript 中是不允许直接访问本地文件的。但有时候又需要打开和保存本地文件，在目前的情况之下就只能用一些特殊的方法来实现了。最麻烦的是，这些方法大多都不能适 用于各个主要浏览器，很费事但也只能如此。这一篇总结一下各种打开本地文件的方法，下一篇总结保存本地文件的方法。首先是 IE 浏览器。IE 有自己独有的 ActiveX，实现文件的是容易的。在下面的例子中，首先选择好要打开的文件路径名，点击"Read"按钮后将把该文件的内容读入 textarea 区域：
阅读全文
摘要：一、左右三栏布局前面所述的左右双栏布局的实现方法，嵌套地使用可以得到各种左右三栏布局，但是这样看起来有些啰嗦。因此，最好还是用直接的方式实现三栏布局。对于三栏布局，依照左中右是固定还是流动来划分，同样有各种情形：（1）固定-固定-固定；（2）固定-固定-流动；（3）固定-流动-固定；（4）固定-流动-流动；（5）流动-固定-流动；（6）流动-流动-流动。这些布局方式的一个流动指占用剩余的宽度，二个或三个流动指按指定比例分配剩余的宽度。和双栏的情况类似，布局（1）和（6）各部分都使用同样的长度单位，是最简单的，我们只需要用元素的 float 属性就可以实现了。类似地，布局（2）和（3）中只有一个
阅读全文
摘要：用 CSS 可以比较简单地实现各种双栏布局，这里以左右双栏布局为例。双栏布局包括如下四种：（1）左右均为固定宽度；（2）左右均为比例宽度；（3）左边为固定宽度右边为浮动宽度；（4）右边为固定宽度左边为浮动宽度。（1）左右均为固定宽度：这种情形比较简单。CSS内容如下：#left { width: 300px;}#right { width: 700px; float: left;}（2）左右均为比例宽度：这种情形也简单，CSS内容如下：#left { width: 30%;}#right { width: 70%; float: left;}注意左右的宽度比例之和最好不...
阅读全文
摘要：要制作网页，首先必不可少的是了解文档对象模型（DOM）。DOM 就是对网页的各个元素之间的包含关系以及每个元素的属性的描述，例如<html> <head> <title>Hello This!</title> </head><body> <h1>Header</h1> <div> <p>Paragraph</p> </div></body></html>对于一个网页文档来说，html 是最顶级的元素，它包含 head 和 bod
阅读全文
摘要：在设置网页中元素的比例长度时，需要注意先设置好它的所有父元素的长度。比如下面的代码将无法将一个 div 的高度设为100%：<html><head> <style type="text/css"> div { height: 100%; background: green; } </style></head><body> <div>Hello This!</div></body></html>这是因为，div 的父元素 html 和 body 的高度没有设
阅读全文
摘要：在处理网页时，浏览器将一个元素放置在哪里，首先需要看该元素的显示类型。主要的类型有块级元素(block)和内联元素(inline)两种。块级元素默认将会单独一行显示，且宽度是其所在容器的100%。而内联元素和其它元素在同一行显示，其大小由里面的内容确定，不能指定。各种元素的默认显示类型都是不一样的，比如 div 元素是块级元素，而 span 是内联元素。如果需要改变显示类型，可以在CSS中用 display: block; 或 display: inline; 来改变。块级元素比如 div 的位置可以有更加自由的调整。首先，可以使用浮动(float)属性将它和其它元素在同一行显示。float
阅读全文
摘要：网页中元素的大小和边距，主要由 width, height, margin, border, padding 这些属性来设置。width 和 height 是指的宽度和高度，可以设置为度量长度，比例长度或者自动(auto)。例如：<div id="one" style="width:120px; height:80px">hello one</div><div id="two" style="width:12%; height:8%">hello two</div>
阅读全文
摘要：制作网页时首先遇到的经常就是各种长度单位的问题，现在总结一下。点（point），有时翻译为磅，简写为pt，是绝对长度的单位，规定1英寸等于72点，即1in = 72pt。像素（pixel），简写为px，经常说的屏幕分辨率就是用这个单位来衡量的。px 是相对长度的单位，实际的长度由下面的 DPI 决定。DPI（dots per inch）或者 PPI（pixels per inch），每英寸的像素数目，即 1in = DPI px。DPI 可以在操作系统里设置，在 Windows 中默认 DPI 为96，也可以改为 120，在 MacOS 中默认 DPI 为 72。因此我们就有 1px = 1p
阅读全文
浙公网安备 33010602011771号