<script Language="Javascript">
　　var text="";　　 day = new Date( );　　time = day.getHours( );
　　if (( time>=0) && (time < 7 ))
　　　　text="夜猫子，要注意身体哦!"
　　if (( time >= 7 ) && (time < 12))
　　　　text="早上好啊，今天心情不错吧!"
　　if (( time >= 12) && (time < 14))
　　　　text="午休时间，要保持睡眠哦!"
　　if (( time >=14) && (time < 18))
　　　　text="祝您下午工作愉快!" 
　　if ((time >= 18) && (time <= 22))
　　　　text="您又来了，可别忘了多回帖哦!"
　　if ((time >= 22) && (time < 24))
　　　　text="朋友，您应该休息了!"
　　document.write(text)
</script>

相关日志

• 备忘：如何在Zencart中添加Product Type
• 备忘：如何在zencart中添加Define Pages
• 在Google地图上标记地点
• dbanotes.net：Web前端优化最佳实践之内容篇
• CMS：Content Management System

function initialize() {
var latlng = new google.maps.LatLng(57.0442, 9.9116); //括号中即为经纬度信息，要修改
var settings = {
       zoom: 15, //缩放级别
       center: latlng,//将以上定义的经纬度居中放置
       mapTypeControl: true,//允许选择地图类型：地图、卫星、混合、地形4种类型。
	mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},//菜单类型：下拉、水平
	navigationControl: true,//缩放菜单控制
	navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
	mapTypeId: google.maps.MapTypeId.ROADMAP};//默认地图类型为地图
        var map = new google.maps.Map(document.getElementById("map_canvas"), settings);
        var companyPos = new google.maps.LatLng(57.0442, 9.9116);//定义companyPos的经纬度
      var companyMarker = new google.maps.Marker({
      position: companyPos,
      map: map,
      title:"Some title" 
  });

以上即为最简单的标记地图原型，示例。

进阶设置，即在地图上增加相应的图标（如企业标识，Logo等）及Description…
1、添加图标，在companyMarker继续添加元素。

var companyImage = new google.maps.MarkerImage('images/logo.png', //图标位置
	new google.maps.Size(100,50),//像素大小。
	new google.maps.Point(0,0),//此图标在地图上的锚定点相对于图标图像左上角的像素坐标。
	new google.maps.Point(50,50)
				);
 
var companyShadow = new google.maps.MarkerImage('images/logo_shadow.png',
	new google.maps.Size(130,50),
	new google.maps.Point(0,0),
	new google.maps.Point(65, 50));
 
var companyPos = new google.maps.LatLng(57.0442, 9.9116); //定义company的经纬度位置
var companyMarker = new google.maps.Marker({
	position: companyPos,
	map: map,
	icon: companyImage,//选择图标
	shadow: companyShadow,//图标的阴影图像网址
	title:"Høgenhaug",//标记提示
	zIndex: 3//同CSS
});

2、添加Description

var contentString = '<div id="content">'+
	'<div id="siteNotice">'+
	'</div>'+
	'<h1 id="firstHeading" class="firstHeading">Høgenhaug</h1>'+
	'<div id="bodyContent">'+
	'<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>'+
	'</div>'+
	'</div>';
var infowindow = new google.maps.InfoWindow({
	content: contentString
				});

完全地图原型，示例。

实践才是王道。链接：Google 地图 API文档

相关日志

• 我的谷歌地图
• 同城博客导航@Google Maps
• 通稿则一定要保存。
• 追一次潮 google chrome~~
• 转：Gtalk机器人帐号大全

Yahoo! 的 Exceptional Performance team 在 Web 前端方面作出了卓越的贡献。广为人知的优化规则也由 13 条到 14 条，再到 20 条，乃至现在的 34 条–真是与时俱进啊。最新的 34 条也针对不同的角度做了分类。

面向内容的优化规则目前有 10 条。

1. 尽量减少 HTTP 请求 (Make Fewer HTTP Requests)

作为第一条，可能也是最重要的一条。根据 Yahoo! 研究团队的数据分析，有很大一部分用户访问会因为这一条而取得最大受益。有几种常见的方法能切实减少HTTP请求：

• 1) 合并文件，比如把多个CSS文件合成一个；
• 2) CSS Sprites 利用 CSS background 相关元素进行背景图绝对定位；参见：CSS Sprites: Image Slicing’s Kiss of Death
• 3) 图像地图
• 4) 内联图象 使用 data: URL scheme 在实际的页面嵌入图像数据.

2. 减少 DNS 查找 (Reduce DNS Lookups)

必须明确的一点，DNS 查找的开销是很大的。另外，我倒是觉得这是 Yahoo! 所有站点的通病，Yahoo！主站点可能还不够明显，一些分站点，存在明显的类似问题。对于国内站点来说，如果过多的使用了站外的 Widget ，也很容易引起过多的 DNS 查找问题。

3. 避免重定向 (Avoid Redirects)

不是绝对的避免，尽量减少。另外，应该注意一些不必要的重定向。比如对 Web 站点子目录的后面添加个 / (Slash) ，就能有效避免一次重定向。http://www.dbanotes.net/arch 与 http://www.dbanotes.net/arch/ 二者之间是有差异的。如果是 Apache 服务器，通过配置 Alias 或mod_rewrite 或是 DirectorySlash 能够消除这个问题。

4. 使得 Ajax 可缓存 (Make Ajax Cacheable)

响应时间对 Ajax 来说至关重要，否则用户体验绝对好不到哪里去。提高响应时间的有效手段就是 Cache 。其它的一些优化规则对这一条也是有效的。

5. 延迟载入组件 (Post-load Components)

6. 预载入组件 (Preload Components)

上面两条严格说来，都是属于异步这个思想灵活运用的事儿。

7. 减少 DOM 元素数量 (Reduce the Number of DOM Elements)

8. 切分组件到多个域 (Split Components Across Domains)

主要的目的是提高页面组件并行下载能力。但不要跨太多域名，否则就和第二条有些冲突了。

9. 最小化 iframe 的数量 (Minimize the Number of iframes)

熟悉SEO 的朋友知道 iframe 是SEO 的大忌。针对前端优化来说 iframe 有其好处，也有其弊端，一分为二看问题吧。

10. 杜绝 http 404 错误 (No 404s)

对页面链接的充分测试加上对 Web 服务器 error 日志的不断跟踪能有效减少 404 错误，亦能提升用户体验。值得一提的是，CSS 与 Java Script 引起的 404 错误因为定位稍稍”难”一点而往往容易被忽略。

这是内容篇的 10 条。应该说具体引导性的内容还不够详细。逐渐会根据自己的理解补充上来。

相关日志

• 按时间显示提示语
• 在Google地图上标记地点
• IIS6 实现301重定向
• 47 Javascript plugins
• 20个CSS和网页设计相关领域的站点

Image Zoom and Popup

Lightbox

You’re probably very familiar with Lightbox — a light Javascript used to display overlay images on the current page. The original Lightbox
was released in 2005. Since then, there are many scripts released with
similar features using different approaches and Javascript libraries.

jQuery lightBox Plugin

This is exactly the same as Lightbox JS, but written on top of jQuery library.

Thickbox

Thickbox is a jQuery plugin that is very similar to Lightbox, but
comes with more features. It allows you to display: single image,
multiple images, inline content, iframed content, or content served
through AJAX in a hybrid modal.

Note: Web Designer Wall uses Thickbox to display the gallery images and tutorial demos.

Highslide JS

Highslide JS serves the same purposes as Thickbox, but it has the zoom effect and allows you to drag the overlay window.

FancyBox

FancyBox is a jQuery plugin that is designed to replace the overused
Lightbox. It has similar features, but better transition effects (the
design is Mac-like).

jQZoom

jQZoom allows you to show a magnified image of the thumbnail. This
technique is commonly used in eCommerce websites (check out the Gap site for a sample).

Gallery and Slideshow

Slideshow 2! for Mootools

Slideshow 2! is a javascript class for Mootools 1.2 to stream and animate the presentation of images on your website.

SmoothGallery

Using mootools v1.11, this javascript gallery and slideshow system
allows you to have simple and smooth (cross-fading…) image galleries,
slideshows, showcases and other cool stuff on your website.

jQuery Galleria

Galleria is a javascript image gallery written in jQuery. It loads
the images one by one from an unordered list and displays thumbnails
when each image is loaded. It will create thumbnails for you if you
choose so, scaled or unscaled, centered and cropped inside a fixed
thumbnail box defined by CSS.

Noobslide

NoobSlide is a MooTools class that lets you create timed slideshows and sliding panels. Visit the website to view the demos.

Product Slider (demo)

This shows a demonstration of a slider widget from the jQuery UI library used to create the product slider as seen on the Apple – Mac website.

Carousel

jCarousel

jCarousel is a jQuery plugin for controlling a list of items in
horizontal or vertical order. The items, which can be static HTML
content or loaded with (or without) AJAX, can be scrolled back and
forth (with or without animation).

YUI Carousel Component

The carousel component manages a list of content (HTML LI elements
within a UL) that can be displayed horizontally or vertically. The
content can be scrolled back and forth with or without animation. The
content can reference static HTML content or the list items can be
created dynamically on-the-fly (with or without Ajax).

DynamicDrive – Carousel Slideshow

Carousel Slideshow is a fabulous DHTML script for the showcasing of
images on your site. It displays images in a 3D, carousel fashion.

iCarousel – MooTools

iCarousel is an open source (free) javascript tool for creating
carousel like widgets. You can use iCarousel as news ticker/scroller or
image gallery slider.

Panel Slider

Coda Slider Plugin

Coda Slider is a jQuery plugin that imitates the panel sliding effects as seen on the Coda website.

jQuery Coda Slide Tutorial (demo)

This is a tutorial from jQuery For Designers to show you how to create the Coda panel slider.

Sliding Tabs (demo)

Sliding Tabs is a mootools 1.11 plugin which adds a pretty neat
effect. It’s a clone of something seen on Panic Software’s Coda site,
which in turn was very similar to a widget used in the iTunes Music
Store.

Tabs

jQuery UI Tabs

jQuery Tabs is a powerful and flexible jQuery plugin that lets you create customizable tab navigation (highly recommended).

jQuery Tabs Tutorial (demo)

Another awesome tutorial from jQueryForDesigners.com to show you how to create a basic tab navigation with jQuery.

MooTabs

MooTabs is a tiny(3kb) class for MooTools. As the name suggests, its
main purpose is to help out with the creation of simple tab navigation.

Sliding Tabs Tutorial (demo)

A tutorial from Nettuts.com to show you how to create a sliding tab with jQuery.

Scroll to Anchor

jQuery ScrollTo (demo)

A very flexible jQuery plugin that lets you create scrolling
animation to any position of a web page with customizable erasing and
speed options.

SmoothScroll (demo)

A simple MooTools script that creates smooth scrolling to anchors on a web page.

Animated Scrolling with jQuery

Learning jQuery shows you how to create an animated “scroll to anchor” with just a few lines of code.

Tooltips

jTips (demo)

A customizable jQuery plugin that displays tooltip popup — with either static html text or Ajax content.

jQuery Tooltip Plugin (demo)

Another nice Tooltip plugin.

Tooltip and Image Preview (demo)

A very simple jQuery script that displays tooltip and image preview (I use it on Best Web Gallery).

Accordion

jQuery Accordion (demo)

This plugin creates an accordion menu. It works with nested lists, definition lists, or just nested divs.

Apple.com Sidebar Accordion (demo)

jQueryForDesigner.com shows you how to create the accordion slider as seen on the Apple website.

MooTools Accordion

The Accordion gives you a fancy way to show only the content you really need.

MooTools Image Menu

Image Menu is a MooTools plugin that creates the horizontal accordion image menu.

Flash and Image Text Replacement

sIFR 3 (demo)

sIFR is meant to replace short passages of plain browser text with
text rendered in your typeface of choice, regardless of whether or not
your users have that font installed on their systems. It accomplishes
this by using a combination of javascript, CSS, and Flash.

jQuery sIFR (demo)

A jQuery plugin that does the sIFR for you.

FLIR (demo)

Facelift Image Replacement is an image replacement script that
dynamically generates image representations of text on your web page in
fonts that otherwise might not be visible to your visitors. The
generated image will be automatically inserted into your web page via
Javascript and visible to all modern browsers.

CSS Stylesheet Switcher

A List Apart – Alternative Style

The original stylesheet switcher by Paul Sowden. Believe it or not,
this trick was invented in 2001 (not a modern trick after all).

Switch Stylesheets with jQuery (demo)

Stylesheet switcher with jQuery.

MooTools Styleswitcher (demo)

CSS stylesheet switcher with MooTools.

Form Styling

FancyForm – MooTools (demo)

A MooTools plugin that replaces the browser default checkboxes and radio buttons with custom styles.

PrettyCheckboxes – jQuery

Same as FancyForm, but using jQuery library.

jQuery Selectbox Plugin (demo)

A simple plugin that allows you to replace the form select list with custom styles.

Custom Checkboxes, Radio Buttons, Select Lists

Give your form a complete makeover with this Javascript and CSS.

jQuery Form Input Example Plugin (demo)

A jQuery plugin that gives user hints on what to enter in the input fields.

Unobtrusive Slider Control V2 (demo)

This script lets you create custom slider controls associated with input fields.

More Form styling links at Noupe.com/css/form-elements…

Form Validation

jQuery Validate (demo)

A very plugin that allows you to build client-side validation and Ajax form.

MooTools Validate

A MooTools form validation plugin (similar to jQuery Validate).

JSValidate (demo)

JSValidate is a form validator that utilizes aspects of prototype
and scriptaculous to bring you a simple to execute, non-intrusive
javascript form validator. With minimal setup, your forms can be
processing clean data in no time at all.

相关日志

• 按时间显示提示语
• 在Google地图上标记地点
• dbanotes.net：Web前端优化最佳实践之内容篇