setTimeout函数使用 - joygpwan - 博客园
随笔 - 46, 文章 - 1, 评论 - 1, 引用 - 0
node.js，说简单点，基于Google V8引擎的，运行在服务器端的JavaScript。
具有单线程、非阻塞IO、事件驱动等特性。
学习的这几天，感受最深的还是非阻塞IO。由于采用Google V8引擎，node.js可以异步处理数据，举个最简单的例子。
setTimeout(function(){console.log('5')},5000);
console.log('1');
function test(){
setTimeout(function(){console.log('2')},1000);
console.log('3');
setTimeout(function(){console.log('4')},2000);
如果是阻塞IO，程序按行顺序执行，每行执行完再去执行下一行。
运行结果为5，1，2，3，4。运行时间约为8000ms。
node.js采用非阻塞IO，程序按顺序执行，但并不等待当前代码执行完毕，即IO不阻塞。
[root@asxzy nodejs]# node test.js
运行结果为1，3，2，4，5。运行时间约为5000ms
这就是非阻塞IO所带来的好处，永远不会产生死锁，因为它本身没有锁机制。
同时，非阻塞IO也对变成带来的一些问题：
过程式编程中，有很多情况下是本句代码要求先前的代码执行完毕，如要调用之前处理的数据结果、和数据库交互等。
node.js中可以采用回调方式解决这个问题。
setTimeout(function(){console.log('5')},5000);
在执行完5000ms的Timeout之后，调用function(){console.log(&5&)}
很好理解了吧！！被误解的 Node.js
Node.js 被设计用来开发大规模高并发的网络应用，这种网络应用的瓶颈之一是在 I/O 的处理效率上。由于硬件及网络的限制，I/O 的速度往往是固定的，如何在此前提下尽可能处理更多的客户请求，提高 CPU 使用效率，便成了开发人员面临的最大问题。得益于基于事件驱动的编程模型，Node.js 使用单一的 Event loop 线程处理客户请求，将 I/O 操作分派至各异步处理模块，既解决了单线程模式下 I/O 阻塞的问题，又避免了多线程模式下资源分配及抢占的问题。至于使用 JavaScript 开发服务器端代码，这并不是什么新鲜事物，JavaScript 本来就是一种完备的编程语言，微软的 IIS 服务器很早就支持 JavaScript 在其中运行。本文将重点讲述 Node.js 基于事件的编程模型，并与传统的处理方式进行对比，帮助您更好的理解 Node.js。网络应用的性能瓶颈网络应用的性能瓶颈之一在于 I/O 处理上，下表来自 Node.js 的作者 Ryan Dahl 为 JSConf 大会所作的 ，对比了在不同介质上进行 I/O 操作所花费的 CPU 时间。您能够清楚的发现，访问磁盘及网络数据所花费的 CPU 时间是访问内存时的数十万倍，而现在的网络应用，却需要大量的访问磁盘及网络，比如数据库查询、访问互联网等。如何提高此时 CPU 的利用效率，便成了提升网络应用性能的关键。表 1. 不同介质下 I/O 操作花费对比I/OCPU Cycle
传统的处理方式单线程清单 1. 单线程下的阻塞式 I/O var result =
db.query("select * from T");
// 使用该查询结果上述代码描述了一个常见的案例，客户端发起一个 I/O 请求，然后等待服务器端返回 I/O 结果，结果返回后再对其进行操作，但这种请求常常需要很长时间（对于服务器的 CPU 处理能力来说）。这一过程中，服务器无法接受新的请求，即阻塞式 I/O。这种处理方式虽然简单，却不实用，尤其是面对大量请求的时候，简直就不可用。这种情景类似在火车站售票窗口排队买票，如果您在春节期间去北京火车站排队买过票，绝不会认为这是一种好的处理方式。庆幸的是，现在很少有服务器采取这种处理方式。多线程清单 2. 多线程下的阻塞式 I/O var result =
db.query("select * from T");
// 使用该查询结果该方式下，服务器为每个请求分配一个线程，所有任务均在该线程内执行，就像火车站多开了几个卖票窗口，处理效率高了许多。但就如读者看到的那样，在春节期间各个售票窗口前还是人满为患，为什么火车站不再多开一些售票窗口呢？当然是因为成本。线程也一样，服务器每创建一个线程，每个线程大概会占用 2M 的系统内存，而且线程之间的切换也会降低服务器的处理效率，基于成本的考虑，这种处理方式也有一定的局限性。然而，这却不是最主要的，主要的是开发多线程程序非常困难，容易出错。程序员需考虑死锁，数据不一致等问题，多线程的程序极难调试和测试。基本上在程序运行出错的时候，程序员才知道自己的程序有错误。而这种错误的代价往往又是巨大的，那些访问量巨大的电子商务网站时常会曝出价格错误等导致公司损失的新闻。事件驱动清单 3. 基于事件驱动的编程模型 db.query("select..", function (result) {
// 使用该查询结果
// 继续干其他的事
// ……上述代码的好处是：使用一个线程执行，客户发起 I/O 请求的同时传入一个函数，该函数会在 I/O 结果返回后被自动调用，而且该请求不会阻塞后续操作。就像电话订票，设想你一大早来到办公室，给火车站打个电话，将自己的票务信息，地址告诉对方，然后放下电话，泡杯茶，浏览一下网页，回复一下今天的电子邮件，你完全不用管火车票的事了，如果订到票，火车站会派快递公司按你电话中提到的联系方式送票给你。无疑，这是一种极其理想的处理方式。下图说明了这种编程模型，所有请求以及同时传入的回调函数均发送至同一线程，该线程通常叫做 Event loop 线程，该线程负责在 I/O 执行完毕后，将结果返回给回调函数。这里要注意的是 I/O 操作本身并不在该线程内执行，所以不会阻塞后续请求。图 1. Event loopNode.js 简介有了上面对于事件处理编程模型的介绍，Node.js 就很好理解了。Node.js 是采用事件处理编程模型的 JavaScript 平台，它允许程序员开发大规模高并发的网络应用。这个概念并不新鲜，在 Node.js 之前，很多语言都提供了类似的平台：Python 的 Twisted，Perl 的 AnyEvent，Ruby 的 EventMachine。Node.js 优于其他平台的另一个好处是所有的 I/O 操作都以异步方式实现，让程序员将主要精力放在应用的业务逻辑上。为什么选用 JavaScript事实上，在实现 Node.js 之初，作者 Ryan Dahl 并没有选择 JavaScript，他尝试过 C、Lua，皆因其欠缺一些高级语言的特性，如闭包、函数式编程，致使程序复杂，难以维护。而 JavaScript 则是支持函数式编程范型的语言，很好地契合了 Node.js 基于事件驱动的编程模型。加之 Google 提供的 V8 引擎，使 JavaScript 语言的执行速度大大提高。最终呈现在我们面前的就成了 Node.js，而不是 Node.c，Node.lua 或其他语言的实现。一个例子本文将在这里使用 Node.js 实现一个小型的 Web 应用，它将随机为用户显示一条谚语或名人名言，并允许浏览者添加自己喜欢的谚语。用 Node.js 开发 Web 应用非常简单，下面这段一百多行的代码就实现了一个完整的应用。如果您尚未安装好 Node.js，请登录其 查看详细安装说明。清单 4. 导入所需要的模块（proverbs.js） // 导入所需模块
var http = require("http");
var url = require("url");
var qs = require('querystring');首先需要导入该应用所需要的模块，其中 http 模块负责创建 Web 服务器及 HTTP 相关服务，url 模块负责解析 URL 地址，querystring 模块负责处理请求参数。清单 5. 数据存储（proverbs.js） // 这里为了方便使用了全局变量
var proverbs = [
"The turtle wins the race.",
"God hides in the details.",
"There are two ways to write error- only the third one works.",
"Perfect practice makes perfect."
];这里为了方便，使用全局变量 proverbs存储已有谚语，在正式的应用中，应该考虑使用文件或数据库存储。清单 6. 创建 Web 服务器（proverbs.js） // 创建一个 Web 服务器
http.createServer(onRequest).listen(8888);
console.log("server is running...");使用 Node.js 开发 Web 应用非常简单，甚至不用配置 Web 服务器，一行代码就创建成功一个 Web 服务器，同时传入一个回调函数，服务器创建成功后，代码并没有阻塞到那里，而是接着往下执行，这就是事件驱动模型的编程风格，在 Node.js 里将会大量采用这种方式。清单 7. 请求处理函数（proverbs.js） // 请求处理函数
function onRequest(request, response) {
var pathname = url.parse(request.url).
console.log("Reqeust for " + pathname + " received.");
if (pathname === "/" || pathname === "/index" || pathname === "/proverb") {
getProverb(response);
} else if (pathname === "/add") {
if (request.method.toLowerCase() == 'post') {
var body = '';
request.on('data', function(data) {
request.on('end', function() {
var POST = qs.parse(body);
add(POST.text, response);
addProverb(response);
response.writeHead(404, {
"Content-Type" : "text/plain"
response.write("404 Not found");
response.end();
}该函数负责分发请求，将接收到的 URL 根据规则转发至对应的请求处理模块。清单 8. GET 请求（proverbs.js） function getProverb(response) {
var body = '&html&'
+ '&head&'
+ '&meta http-equiv="Content-Type" content="text/ '
+ 'charset=UTF-8" /&'
+ '&/head&'
+ '&body style="font-size: 4line-height: 1.2; margin-top: 200;"&'
+ '&blockquote&'+ proverbs[Math.floor(Math.random()* proverbs.length)]
+ '&/blockquote&' + '&/body&'
+ '&/html&';
response.writeHead(200, {
"Content-Type" : "text/html"
response.write(body);
response.end();
}该函数负责处理 GET 请求，随机向用户返回一条谚语。细心的读者可能会发现该函数将 HTML，CSS 以及数据混在一起，显然不符合 MVC 的编程模式。Node.js 有很多第三方开发的模块，其中 就是一款优秀的 Web 开发框架，有兴趣的读者可以研究一下。清单 9. 用户输入表单（proverbs.js） function addProverb(response) {
var body = '&html&'
+ '&head&'
+ '&meta http-equiv="Content-Type" content="text/ '
+ 'charset=UTF-8" /&'
+ '&/head&'
+ '&body style="font-size: 4line-height: 1.2; margin-top: 200;"&'
+ '&form action="/add" method="post"&'
+ '&textarea name="text" rows="10" cols="60"&&/textarea&&p&'
+ '&input type="submit" value="Submit"
/&' + '&/form&' + '&/body&'
+ '&/html&';
response.writeHead(200, {
"Content-Type" : "text/html"
response.write(body);
response.end();
}该函数返回一个 HTML 表单，允许用户输入自己喜欢的谚语或格言。清单 10. POST 请求（proverbs.js） function add(proverb, response) {
proverbs.push(proverb);
var body = '&html&'
+ '&head&'
+ '&meta http-equiv="Content-Type" content="text/ '
+ 'charset=UTF-8" /&'
+ '&/head&'
+ '&body style="font-size: 4line-height: 1.2; margin-top: 200;"&'
+ '&blockquote&' + proverb + '&/blockquote&' + '&/body&'
+ '&/html&';
response.writeHead(200, {
"Content-Type" : "text/html"
response.write(body);
response.end();
}该函数负责用户的 POST 请求，将用户输入保存到服务器端，并返回给用户结果。结束语本文给大家介绍了基于事件的编程模型，这种编程模型正是 Node.js 这项最近流行技术的核心，希望读者能利用 Node.js 的优势，为自己的开发工作带来便利。
参考 官方主页，了解 Node.js。
：一个非常好的 Node.js 教程，同时介绍了 JavaScript 中的高级特性。
：一篇有助于理解 Node.js 的文章。
深入介绍了基于事件驱动的编程模型，并与传统的处理方式进行对比。
“”（developerWorks，2011 年 6 月）：你们中的许多人可能听说过新近出现的 Node.js，也许现在还在猜测它究竟是何物？Michael Abernethy 在本文中简要介绍了 Node 的作用及其当前局限性。“”（developerWorks，2011 年 8 月）：本文探讨 Node.js，这是一个用于 UNIX 类平台上 V8 JavaScript 引擎的事件驱动的 I/O 框架，设计这一框架的目的是为了编写可伸缩的网络程序，如 Web 服务器。本文通过一个完整的例子说明如何在 Node.js 中构建聊天服务器，分析了这个框架以及围绕它的生态系统（包括云计算产品），并对这个框架进行了总结。“”（developerWorks，2011 年 7 月）：node.js 是一个可以使用 JavaScript 开发服务器端应用的平台。它依托于 Google V8 JavaScript 引擎，并采用事件 I/O 的架构，可以用来创建高性能服务器。本文详细介绍了 node.js 的基本知识、模块化的结构、事件驱动的机制以及常用的模块。“”（developerWorks，2011 年 12 月）：Node.js 是一种激动人心的开发方式，可替代传统的 Java 并发性，只要有一个开放的心态和一点点 JavaScript 知识，就可以立即开始进行开发。：通过专门关于 Web 技术的文章和教程，扩展您在网站开发方面的技能。：这是有关 Ajax 编程模型信息的一站式中心，包括很多文档、教程、论坛、blog、wiki 和新闻。任何 Ajax 的新信息都能在这里找到。，这是有关 Web 2.0 相关信息的一站式中心，包括大量 Web 2.0 技术文章、教程、下载和相关技术资源。您还可以通过
栏目，迅速了解 Web 2.0 的相关概念。
添加或订阅评论，请先或。
有新评论时提醒我
static.content.url=/developerworks/js/artrating/SITE_ID=10Zone=Web developmentArticleID=788231ArticleTitle=被误解的 Node.jspublish-date=上次发的效果代码集合：
代码集合：
1.彩色文字墙[鼠标涟漪痕迹]
2.彩色旋转圆环
[模仿中间部分效果，
那个走路的孩子技术很简单，和以前的春分秋分Google的Doodles类似，就没有模仿，换成一个头像]
3.视屏拼图
4.百度地图api简单应用集合
5.财经数据
6.天气预报
[nodejs搭建,express框架,nodejs简单页面抓取,JS正则,canvas光晕效果]
7.打字效果
8.自动换色彩色文字
上次个人主页的截图：[服务器网速慢，加载耗些时间；尚未做做浏览器判断和浏览器大小变化后的自适应]
主页地址：
[主页：彩色文字墙，彩色旋转圆环]
[财经数据，之前是通过服务器去请求数据，现在直接由客户端请求数据]
[天气预报：PM2.5已经更新过，先看中国天气网的数据，没有在抓取美国大使馆的数据。尚未做地理判断和其他天气Canvas效果，只有光晕效果]
[简单打字效果]
[单html页面]
[百度地图api简单应用集合]
[视屏拼图：自己做的，canvas和video以及JS的集合效果]
[动态彩色文字]
单该能示例代码：
1.彩色文字墙[鼠标涟漪痕迹]：
2 $(function(){
var bgCanvas = new bgC();
bgCanvas.init(function(){
bgCanvas.doAnimate(bgCanvas);
8 function bgC(){
this.textArr = ["对象","Java","C#","ASP.NET","PHP","NODEJS","C","Python","Socket","RESTful","VBA","JavaScript","JQuery","GSAP","ExtJs","WebApp","Android","HTML5","CSS2","CSS3","SqlServer","Oracle","MySQL","SQLite","MongoDB","Struts","Spring","SSH","Seasar2","AOP","IoC","闭包","反射","代理"],
this.colorArr = [
{"fill":"rgba(255,0,0,0.1)","stroke":"rgba(0,0,255,0.3)"},
{"fill":"rgba(255,0,0,0.1)","stroke":"rgba(0,0,255,0.3)"},
{"fill":"rgba(0,0,255,0.1)","stroke":"rgba(255,0,0,0.3)"},
{"fill":"rgba(232,193,254,0.1)","stroke":"rgba(162,0,255,0.3)"},
{"fill":"rgba(254,199,121,0.1)","stroke":"rgba(255,150,0,0.3)"},
{"fill":"rgba(0,156,143,0.1)","stroke":"rgba(0,255,243,0.3)"},
{"fill":"rgba(216,136,108,0.1)","stroke":"rgba(255,66,0,0.3)"},
18 {"fill":"rgba(0,255,0,0.2)","stroke":"rgba(255,0,0,0.3)"}
this.parent = "body"//"#outDiv",
this.docH = 0,
this.docW = 0,
this.drawTop = -20,
this.drawLeft = -100,
this.maxLines=3,
this.lineH=0,
this.showLines=5,
this.cObj, //screen canvas
this.cC, //screen Context
this.cbObj, //back canvas
this.cbC, //back Context
this.circles = new Array(),
this.bigger = 1,
this.outter = 0.008,
this.lastFpsUpdateTime=new Date,
this.init = function(doAnimate){
this.me = this;
// single line height
this.docW = $(document).width();
this.docH = $(document).height();
// patten 1
//this.lineH = this.docH/this.showL
// patten 2
this.lineH = 150;
this.showLines = Math.ceil(this.docH/this.lineH);
//append mouse DOM canvas
$(this.parent).prepend($("&canvas id='cbObj' width="+this.docW+" height="+this.docH+"&&/canvas&").css({"display":"block","left":"0px","top":"0px"}));
// append screen DOM canvas
$(this.parent).prepend($("&canvas id='cObj' width="+this.docW+" height="+this.docH+"&&/canvas&").css({"position":"absolute","left":"0px","top":"0px"}));
// get canvas and context
this.cObj = document.getElementById('cObj');
this.cC = cObj.getContext('2d');
this.cbObj = document.getElementById('cbObj');
this.cbC = cbObj.getContext('2d');
//draw texts
this.drawTexts();
// onmousemove bound
this.Bind($(document), "mousemove", this.doMM, this);
// simple animation
//setInterval(this.doAnimate,500);
setInterval(doAnimate,10);
this.drawTexts = function(){
var maxLinesH = 0;
var maxLinesW = 0;
while(this.drawTop&this.docH){
maxLinesH = this.lineH;
while(this.drawLeft & this.docW){
// random lines
linesAll =
Math.round(Math.random()*(this.maxLines-1)+1);
// calc lines
var lines = new Array();
var oneLineH = this.lineH / linesA
for(i=0;i&linesAi++){
// random text
textI = Math.round(Math.random()*(this.textArr.length-1));
colorI = Math.round(Math.random()*(this.colorArr.length-1));
// calc max line width
textMetrics = this.cC.measureText(this.textArr[textI]);
maxLinesW = textMetrics.width&maxLinesW?textMetrics.width:maxLinesW;
//console.log(textMetrics);
// calc top and left
lineTop = this.drawTop + (i+0.5) * oneLineH;
// store information
lines.push({"text":this.textArr[textI],"color":this.colorArr[colorI],"top":lineTop,"font":Math.floor(oneLineH/(Math.random()*1.5+1))});
left = this.drawLeft + maxLinesW * 0.5;
this.drawText(lines,left);
this.drawLeft += maxLinesW;
this.drawLeft = 0;
this.drawTop += maxLinesH;
//console.log(this.drawTop);
this.drawText = function(lines,left){
//console.log(lines,left);
for(i=0;i&lines.i++){
this.cC.save();
//console.log(textI);
this.cC.font=lines[i].font+"px Georgia";
this.cC.textBaseline = 'middle';//设置文本的垂直对齐方式
this.cC.textAlign = 'center'; //设置文本的水平对对齐方式
this.cC.fillStyle = lines[i].color.
this.cC.strokeStyle = lines[i].color.
this.cC.fillText(lines[i].text, left,lines[i].top);
this.cC.strokeText(lines[i].text, left,lines[i].top);
this.cC.restore();
this.doMM = function(e){
this.circles.push(
'x':e.pageX,
'y':e.pageY,
'colorR':Math.floor(Math.random()*255),
'colorG':Math.floor(Math.random()*255),
'colorB':Math.floor(Math.random()*255),
this.doAnimate(this);
//console.log(this.circles);
this.doAnimate = function(thisObj){
thisObj.cbC.clearRect(0,0,thisObj.docW,thisObj.docH);
thisObj.cbC.save();
var delArr = new Array();
for(i=0;i&thisObj.circles.i++){
thisObj.circles[i].a -= thisObj.
thisObj.circles[i].r += thisObj.
thisObj.cbC.fillStyle = "rgba("+thisObj.circles[i].colorR+","+thisObj.circles[i].colorG+","+thisObj.circles[i].colorB+","+thisObj.circles[i].a+")";
thisObj.cbC.beginPath();
thisObj.cbC.arc(thisObj.circles[i].x,thisObj.circles[i].y,thisObj.circles[i].r,0,Math.PI*2,true);
thisObj.cbC.closePath();
thisObj.cbC.fill();
if(thisObj.circles[i].a&0.05){
delArr.push(i);
thisObj.cbC.restore();
for(j=delArr.length-1;j&=0;j--){
thisObj.circles.splice(j,1);
this.Bind = function (control, eventName, callBack, scope) {
if (!scope) { scope = }
$(control).bind(eventName, function () {
callBack.apply(scope, arguments);
下载示例：
2.彩色旋转圆环
overflow:hidden;
6 #outDiv{
position:relative;
height:<span style="background-color: #f5f5f5; color: #px;
width:<span style="background-color: #f5f5f5; color: #%;
overflow:hidden;
/*margin-top:30*/
16 #wheel-center{
background:transparent url("aaajpg.jpg") no-repeat center center;
width:<span style="background-color: #f5f5f5; color: #px;
height:<span style="background-color: #f5f5f5; color: #px;
position: absolute;
border-radius:<span style="background-color: #f5f5f5; color: #px;
margin-left: -170px;
margin-top: -170px;
/*-webkit-filter: blur(3px);*/
/*-webkit-filter: blur(1px);*/
29 #wheel-container-inner{
background:transparent url("gray.png") no-repeat center center;
width:<span style="background-color: #f5f5f5; color: #px;
height:<span style="background-color: #f5f5f5; color: #px;
position: absolute;
border-radius:<span style="background-color: #f5f5f5; color: #px;
margin-left: -215px;
margin-top: -215px;
40 .wheel-color-container{
width:<span style="background-color: #f5f5f5; color: #px;
height:<span style="background-color: #f5f5f5; color: #px;
position: absolute;
border-radius:<span style="background-color: #f5f5f5; color: #px;
margin-left: -215px;
margin-top: -215px;
/*background-position:125% 75%;*/
51 .wheel-color-orange{
background:transparent url("orange-right2.png") no-repeat;
background-position:<span style="background-color: #f5f5f5; color: #% top;
opacity:1;
transform:rotate(0deg);
58 .wheel-color-green{
background:transparent url("green-right2.png") no-repeat;
background-position:<span style="background-color: #f5f5f5; color: #% top;
opacity:0;
transform:rotate(0deg);
65 .wheel-color-purple{
background:transparent url("purple-right2.png") no-repeat;
background-position:<span style="background-color: #f5f5f5; color: #% top;
opacity:0;
transform:rotate(0deg);
72 .wheel-color-marine{
background:transparent url("marine-right2.png") no-repeat;
background-position:<span style="background-color: #f5f5f5; color: #% top;
opacity:0;
transform:rotate(0deg);
79 .wheel-color-red{
background:transparent url("red-right2.png") no-repeat;
background-position:<span style="background-color: #f5f5f5; color: #% top;
opacity:0;
transform:rotate(0deg);
86 .wheel-color-blue{
background:transparent url("blue-right2.png") no-repeat;
background-position:<span style="background-color: #f5f5f5; color: #% top;
opacity:0;
transform:rotate(0deg);
93 .wheel-color-gray{
background:transparent url("gray-right2.png") no-repeat;
background-position:<span style="background-color: #f5f5f5; color: #% top;
opacity:0;
transform:rotate(0deg);
101 .menu-tooltip-container{
width:30px;
height:30px;
position: absolute;
opacity:1;
margin-left: -15px;
margin-top: 0px;
112 .menu-tooltip-1{
margin-left: -15px;
margin-top: -255px;
/*background:url('1.png') no-*/
119 .menu-tooltip-2{
margin-left: 180px;
margin-top: -165px;
/*background:url('2.png') no-*/
126 .menu-tooltip-3{
margin-left: 225px;
margin-top: 40px;
/*background:url('3.png') no-*/
133 .menu-tooltip-4{
margin-left: 120px;
margin-top: 200px;
/*background:url('4.png') no-*/
140 .menu-tooltip-5{
margin-left: -140px;
margin-top: 200px;
/*background:url('5.png') no-*/
147 .menu-tooltip-6{
margin-left: -255px;
margin-top: 40px;
/*background:url('6.png') no-*/
154 .menu-tooltip-7{
margin-left: -210px;
margin-top: -165px;
/*background:url('7.png') no-*/
162 &/style&
163 &div id="outDiv"&
&div id="wheel-center" style="z-index:1;"&&/div&
&div id='wheel-container-inner'&&/div&
&div class='wheel-color-container wheel-color-orange'&&/div&
&div class='wheel-color-container wheel-color-green'&&/div&
&div class='wheel-color-container wheel-color-purple'&&/div&
&div class='wheel-color-container wheel-color-marine'&&/div&
&div class='wheel-color-container wheel-color-red'&&/div&
&div class='wheel-color-container wheel-color-blue'&&/div&
&div class='wheel-color-container wheel-color-gray'&&/div&
&div class='menu-tooltip-container menu-tooltip-1 tooltip-marine' data="menuMarine"&&img class="initImg" src="1.png" /&&/div&
&div class='menu-tooltip-container menu-tooltip-2 tooltip-red' data="menuRed"&&img class="initImg" src="2.png" /&&/div&
&div class='menu-tooltip-container menu-tooltip-3 tooltip-blue' data="menuBlue"&&img class="initImg" src="3.png" /&&/div&
&div class='menu-tooltip-container menu-tooltip-4 tooltip-gray' data="menuGray"&&img class="initImg" src="4.png" /&&/div&
&div class='menu-tooltip-container menu-tooltip-5 tooltip-orange' data="menuOrange"&&img class="initImg" src="5.png" /&&/div&
&div class='menu-tooltip-container menu-tooltip-6 tooltip-green' data="menuGreen"&&img class="initImg" src="6.png" /&&/div&
&div class='menu-tooltip-container menu-tooltip-7 tooltip-purple' data="menuPurple"&&img class="initImg" src="7.png" /&&/div&
180 &/div&
1 // calc center Point
2 var cenPoint = {x:0,y:0};
3 // cur mouse point
4 var curPoint = {x:0,y:0};
5 // curAngle
6 var curAngle = 0;
7 // 颜色数组
8 var color=[
name:"orange"
name:"green"
name:"purple"
name:"marine"
name:"red"
name:"blue"
name:"blue"
name:"gray"
50 var dataPot={
menuMarine : {
imgWay:"add",
imgL:"0px",
imgT:"0px",
divW:"20px",
divH:"20px",
divL:"5px",
divT:"5px",
arrW:"12px",
arrH:"20px",
arrL:"9px",/*d:270;l:4;t:5;;d:90;l:13;t:5;;d:180;l:9;t:10;;d:0;l:9;t:0*/
arrT:"10px",
arrDir:"180",
tipL: "-230px",
tipT: "28px",
tipH: "320px",
tipW: "500px",
potImg:"marine/quote1_hover.png",
bgColor:"rgb(101, 124, 178)",
src:"/test",
key1:"value1"
menuRed : {
imgWay:"add",
imgL:"0px",
imgT:"0px",
divW:"20px",
divH:"20px",
divL:"5px",
divT:"5px",
arrW:"12px",
arrH:"20px",
arrL:"9px",
arrT:"10px",
arrDir:"180",
tipL: "-500px",
tipT: "28px",
tipH: "283px",
tipW: "620px",
potImg:"red/quote1_hover.png",
bgColor:"rgb(127, 45, 42)",
src:"/weather",
key1:"value1"
menuBlue : {
imgWay:"add",
imgL:"0px",
imgT:"0px",
divW:"20px",
divH:"20px",
divL:"5px",
divT:"5px",
arrW:"12px",
arrH:"20px",
arrL:"4px",
arrT:"5px",
arrDir:"270",
tipL: "-508px",
tipT: "-205px",
tipH: "320px",
tipW: "500px",
potImg:"blue/quote2_hover.png",
bgColor:"rgb(120, 186, 211)",
src:"/print",
key1:"value1"
menuGray : {
imgWay:"add",
imgL:"0px",
imgT:"0px",
divW:"20px",
divH:"20px",
divL:"5px",
divT:"5px",
arrW:"12px",
arrH:"20px",
arrL:"9px",
arrT:"0px",
arrDir:"0",
tipL: "-400px",
tipT: "-322px",
tipH: "320px",
tipW: "500px",
potImg:"gray/quote1_hover.png",
bgColor:"rgb(88, 90, 96)",
src:"/links",
key1:"value1"
menuOrange : {
imgWay:"add",
imgL:"0px",
imgT:"0px",
divW:"20px",
divH:"20px",
divL:"5px",
divT:"5px",
arrW:"12px",
arrH:"20px",
arrL:"9px",
arrT:"0px",
arrDir:"0",
tipL: "-100px",
tipT: "-322px",
tipH: "320px",
tipW: "500px",
potImg:"orange/quote1_hover.png",
bgColor:"rgb(249, 154, 45)",
src:"/wait",
key1:"value1"
menuGreen : {
imgWay:"add",
imgL:"0px",
imgT:"0px",
divW:"20px",
divH:"20px",
divL:"5px",
divT:"5px",
arrW:"12px",
arrH:"20px",
arrL:"13px",
arrT:"5px",
arrDir:"90",
tipL: "18px",
tipT: "-230px",
tipH: "400px",
tipW: "670px",
potImg:"green/quote1_hover.png",
bgColor:"rgb(92, 159, 23)",
src:"/guess",
key1:"value1"
menuPurple : {
imgWay:"add",
imgL:"0px",
imgT:"0px",
divW:"20px",
divH:"20px",
divL:"5px",
divT:"5px",
arrW:"12px",
arrH:"20px",
arrL:"9px",
arrT:"10px",
arrDir:"180",
tipL: "-90px",
tipT: "28px",
tipH: "410px",
tipW: "600px",
potImg:"purple/quote1_hover.png",
bgColor:"rgb(101, 70, 101)",
src:"/map",
key1:"value1"
221 window.onload = function(){
$("#outDiv").height($(window).height());
$("#outDiv").css({"position":"absolute","left":"0px","top":"0px"});
// calc center Point
cenPoint.x = $("#outDiv").width() * 0.5 + $("#outDiv").offset().
cenPoint.y = $("#outDiv").height() * 0.5 + $("#outDiv").offset().
// init mouse point
curPoint.x = cenPoint.x;
curPoint.y = cenPoint.y;
// animation test
TweenLite.to(
$(".wheel-color-container"),
rotation:360
ease:Cubic.easeOut,
overwrite: true
// bind mousemove event
document.addEventListener("mousemove", docOnMM);
* doc mousemove event
252 function docOnMM(event){
// set curPoint
curPoint.x = event.pageX;
curPoint.y = event.pageY;
// repaint the center circle
paintCC();
* calc angle
* 当前的计算不好，太字面了
* 有时间的话，先改变坐标体系，这样看着更舒服吧
265 function calcAngle(){
// 象限差额角度
var addJD = 0;
// 是否需要进行角度计算
var calcJDFlg = false;
// 象限判断临时变量 xx:1,2,3,4
var xxX,xxY,
// 象限判断
xxX=(curPoint.x - cenPoint.x)&0 ? 1: ((curPoint.x - cenPoint.x==0)?0:-1);
xxY=(curPoint.y - cenPoint.y)&0 ? 1: ((curPoint.y - cenPoint.y==0)?0:-1);
if(xxX==0 && xxY==0){
angle = "NaN";
}else if(xxX==0){
if(xxY&0){
angle = 270;
angle = 90;
}else if(xxY==0){
if(xxX&0){
angle = 0;
angle = 180;
calcJDFlg = true;
if(xxX&0){
if(xxY&0){
addJD = 270;
addJD = 0;
if(xxY&0){
addJD = 180;
addJD = 90;
// 计算锐角
if(calcJDFlg){
// calc ruiJiao
var duiBian,linB
var a = cenP
var b = curP
var c = {x:cenPoint.x,y:curPoint.y};
duiBian = Math.abs(c.x-b.x);
linBian = Math.abs(c.y-a.y);
var huDu = Math.atan(duiBian/linBian);
var jiaoDu = huDu * (180 / Math.PI);
if(xx%2==0){
angle = addJD + jiaoDu;
angle = 90 + addJD - jiaoDu;
337 function paintCC(){
var angle = calcAngle();
var picName = "";
if(angle=="NaN"){
TweenLite.to(
$("#wheel-center"),
rotationY: (angle&270 || angle&90)? 180: 0
,onComplete:function(){
TweenLite.to(
$("#wheel-center"),
shortRotation: -1*((angle&270 || angle&90)? (angle+20): (angle-180-20))
// 判断显示颜色种别
color.forEach(function(item){
if(angle&=item.min && angle&item.max){
picName = item.
TweenLite.to(
$(".wheel-color-"+item.name),
opacity: 1
color.forEach(function(item){
if(picName!=item.name){
TweenLite.to(
$(".wheel-color-"+item.name),
opacity: 0
TweenLite.to(
$(".wheel-color-container"),
shortRotation: angle * -1
ease:Back.easeOut//Cubic
下载示例：
3.视屏拼图
以前博文：
由于浏览器升级后对video标签支持的一些小变更，如果不能播放，代码内需要在加载后添加播放操作
4.百度地图api简单应用集合
百度地图算然好用，但是地图上面的点[自带的地点对象]点击后弹出的窗口[路线查询，周边查询等]会弹出新页面，到他自己的网站去
用的一定不太爽，我就试着把那些东西给替换了。。。应该不算侵权把，毕竟那个[& 2015 Baidu]还留着。。。
百度地图key可以免费申请
var mapClick = {'lng':'','lat':''};
$(function(){
$('#opp').css('left',$('#allmap').offset().left+"px");
$('#result').hide();
$("#opp").height(50);
loadJScript();
//异步加载地图
function myFun(result){
var cityName = result.
//alert("当前定位城市:"+cityName);
$("#wxsSearch").val(cityName);
if(cityName!="全国" && cityName!=""){
map.setCenter(cityName);
$("#wxsDoSearch").click();
//百度地图API功能
function loadJScript() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://api./api?v=2.0&ak=yW4S1ZIFFRGfGv1PwYc8ZIHB&callback=onMapLoaded";
document.body.appendChild(script);
function onMapLoaded() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://api./library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js";
document.body.appendChild(script);
map = new BMap.Map("allmap");
// 创建Map实例
//var point = new BMap.Point(116.404, 39.915); // 创建点坐标
//map.centerAndZoom(point,15);
map.centerAndZoom("上海",15);
map.enableScrollWheelZoom();
//启用滚轮放大缩小
map.addEventListener("click", function(e){
//alert(e.point.lng + ", " + e.point.lat);
mapClick = {'lng':e.point.lng,'lat':e.point.lat};
$("#result").hide();
$("#opp").height(50);
//console.log(mapClick);
$("#wxsSearch").click(function(e){/*alert('a');*/$("#result").show();$("#opp").height(400);});
$("#showR").click(function(e){
if($("#result").is(":hidden")){
$("#result").show();$("#opp").height(400);
$("#result").hide();
$("#opp").height(50);
var ac1 = new BMap.Autocomplete(
//建立一个自动完成的对象
{"input" : "wxsSearch"
,"location" : map
ac1.addEventListener("onconfirm", function(e) {
//鼠标点击下拉列表后的事件
var _value = e.item.
myValue = _value.province +
_value.city +
_value.district +
_value.street +
//console.log(myValue);
$("#wxsSearch").val(myValue);
$('#wxsDoSearch').click(function(){
$("#result").html('').show();$("#opp").height(400);
var options = {
onSearchComplete: function(results){
//console.log('complete',local.getStatus(),BMAP_STATUS_SUCCESS);
// 判断状态是否正确
if (local.getStatus() == BMAP_STATUS_SUCCESS){
//var s = [];
var ulStr="&ul&";
for (var i = 0; i & results.getCurrentNumPois(); i ++){
var liStr = "&li onclick='doFindPL(this);' lat='%lat%' lng='%lng%'&&span class='liName'&%title%&/span&&br /&&span class='liAdd'&%address%&/span&&/li&";
liStr=liStr.replace(/\%lat%/g,results.getPoi(i).point.lat);
liStr=liStr.replace(/\%lng%/g,results.getPoi(i).point.lng);
liStr=liStr.replace(/\%title%/g,results.getPoi(i).title);
ulStr+=liStr.replace(/\%address%/g,results.getPoi(i).address);
//console.log(results.getPoi(i));
//s.push(results.getPoi(i).title + ", " + results.getPoi(i).address);
ulStr+= "&/ul&";
//console.log(ulStr);
$("#result").html(ulStr);
//document.getElementById("r-result").innerHTML = s.join("&br/&");
//console.log(s.join("&br/&"));
var local = new BMap.LocalSearch(map, options);
/*var local = new BMap.LocalSearch(map, {
renderOptions:{map: map}
//console.log('doSearch');
local.search($('#wxsSearch').val());
var myCity = new BMap.LocalCity();
myCity.get(myFun);
setInterval(removeBD,100);
function doFindPL(thisObj){
//创建检索信息窗口对象
var searchInfoWindow = null;
searchInfoWindow = new BMapLib.SearchInfoWindow(map, '地址：'+$($(thisObj).find(".liAdd")[0]).html(), {
: $($(thisObj).find(".liName")[0]).html(),
//height : 105,
: "result",
//检索结果面板
enableAutoPan : true,
//自动平移
searchTypes
BMAPLIB_TAB_SEARCH,
//周边检索
BMAPLIB_TAB_TO_HERE,
//到这里去
BMAPLIB_TAB_FROM_HERE //从这里出发
//var poi = new BMap.Point($(thisObj).attr('lat'),$(thisObj).attr('lng'));
var poi = new BMap.Point($(thisObj).attr('lng'),$(thisObj).attr('lat'));
var marker = new BMap.Marker(poi); //创建marker对象
//marker.enableDragging(); //marker可拖拽
marker.addEventListener("click", function(e){
searchInfoWindow.open(marker);
map.clearOverlays();
map.addOverlay(marker); //在地图中添加marker
map.panTo(poi);
mapClick.lng=$(thisObj).attr('lng');
mapClick.lat=$(thisObj).attr('lat');
function removeBD(){
//&input type="text" id="tangram-suggestion--TANGRAM__2x-input" autocomplete="off" style="height: 22 line-height: 22 padding: 0 margin: 0 border: 1px solid rgb(165, 172, 178); width: 85"&
$("input[org!=wxs][type=text]").each(function(index){
if($(this).attr("id")!=undefined)return;
var id="suggestId"+new Date().getTime();
var replaceBtn = "&input id='"+id+"' type='text' value='' style='"+
$(this).attr("style")+"' org='wxs' width='"+$(this).width()+"px'&";
$(this).parent().append($(replaceBtn));
$(this).remove();
var ac = new BMap.Autocomplete(
//建立一个自动完成的对象
{"input" : id
,"location" : map
ac.addEventListener("onconfirm", function(e) {
//鼠标点击下拉列表后的事件
var _value = e.item.
myValue = _value.province +
_value.city +
_value.district +
_value.street +
//console.log(myValue);
$("#"+id).val(myValue);
$("input[org!=wxs][type=button]").each(function(index){
if($(this).attr("id")!=undefined)return;
var valueBtn="";
if($(this).attr("value")=="导航")
valueBtn = "步行";
= $(this).attr("value");
var replaceBtn = "&input type='button' value='"+
valueBtn+"' style='"+
$(this).attr("style")+"' org='wxs' onclick='rBtnClick(this)'&";
$(this).parent().append($(replaceBtn));
$(this).remove();
$("input[org!=wxs][type=submit]").click(function(e){$('#result').show();$("#opp").height(400);});
$("input[org!=wxs][id^=BMapLib_]").click(function(e){$('#result').show();$("#opp").height(400);});
$("a[filter=query]").each(function(index){
var replaceBtn = "&a style='cursor:"+
$(this).attr("style")+"' onclick='rAClick(\""+$(this).html()+"\")'&"+$(this).html()+"&/a&";
$(this).parent().append($(replaceBtn));
$(this).remove();
$("a[filter=detailInfo]").each(function(index){
var replaceBtn = "&a style='"+
$(this).attr("style")+"'&"+$(this).html()+"&/a&";
$(this).parent().append($(replaceBtn));
$(this).remove();
$("a[filter=detailLink]").remove();
$("a[target=_blank]").remove();
$("img[title=发送到手机]").remove();
$(".tangram-suggestion").css('z-index','100');
if($("#result").is(":hidden")){
$("#showR").html("显示结果");
$("#showR").html("收起结果");
function rAClick(val){
map.clearOverlays();
var mPoint = new BMap.Point(mapClick.lng, mapClick.lat);
var circle = new BMap.Circle(mPoint,1000,{fillColor:"blue", strokeWeight: 1 ,fillOpacity: 0.3, strokeOpacity: 0.3});
map.addOverlay(circle);
var local =
new BMap.LocalSearch(map, {renderOptions: {map: map, autoViewport: false, panel: "result"}});
var bounds = getSquareBounds(circle.getCenter(),circle.getRadius());
local.searchInBounds(val,bounds);
$("#result").show();$("#opp").height(400);
function rBtnClick(thisObj){
map.clearOverlays();
if($(thisObj).parent().html().indexOf("起点")!=-1){
var text = $($(thisObj).parent().find("input[type=text]")[0]).val()
alert('起点：'+text+" BTN:"+$(thisObj).val());
var start = text,end = new BMap.Point(mapClick.lng, mapClick.lat);
if($(thisObj).val()=="公交"){
var transit = new BMap.TransitRoute(map, {
renderOptions: {map: map, panel: "result"},
onResultsHtmlSet : function(){$("#result").show();$("#opp").height(400);}
transit.search(start,end);
}else if($(thisObj).val()=="驾车"){
var driving = new BMap.DrivingRoute(map, {
renderOptions: {map: map, panel: "result"},
onResultsHtmlSet : function(){$("#result").show();$("#opp").height(400);}
driving.search(start, end);
}else if($(thisObj).val()=="步行"){
var walking = new BMap.WalkingRoute(map, {
renderOptions: {map: map, panel: "result"},
onResultsHtmlSet : function(){$("#result").show();$("#opp").height(400);}
walking.search(start, end);
}else if($(thisObj).parent().html().indexOf("终点")!=-1){
var text = $($(thisObj).parent().find("input[type=text]")[0]).val()
//alert('终点：'+text+" BTN:"+$(thisObj).val());
if($(thisObj).val()=="公交"){
var end = text,start = new BMap.Point(mapClick.lng, mapClick.lat);
var transit = new BMap.TransitRoute(map, {
renderOptions: {map: map, panel: "result"},
onResultsHtmlSet : function(){$("#result").show();$("#opp").height(400);}
transit.search(start,end);
}else if($(thisObj).val()=="驾车"){
var driving = new BMap.DrivingRoute(map, {
renderOptions: {map: map, panel: "result"},
onResultsHtmlSet : function(){$("#result").show();$("#opp").height(400);}
driving.search(start, end);
}else if($(thisObj).val()=="步行"){
var walking = new BMap.WalkingRoute(map, {
renderOptions: {map: map, panel: "result"},
onResultsHtmlSet : function(){$("#result").show();$("#opp").height(400);}
walking.search(start, end);
var text = $($(thisObj).parent().find("input[type=text]")[0]).val();
//alert('附近：'+text+" BTN:"+$(thisObj).val());
var mPoint = new BMap.Point(mapClick.lng, mapClick.lat);
var circle = new BMap.Circle(mPoint,1000,{fillColor:"blue", strokeWeight: 1 ,fillOpacity: 0.3, strokeOpacity: 0.3});
map.addOverlay(circle);
var local =
new BMap.LocalSearch(map, {renderOptions: {map: map, autoViewport: false, panel: "result"}});
var bounds = getSquareBounds(circle.getCenter(),circle.getRadius());
local.searchInBounds(text,bounds);
$("#result").show();$("#opp").height(400);
下载地址：
5.&财经数据
代码下载：
可以做个tab，配合
6.天气预报
[nodejs搭建,express框架,nodejs简单页面抓取,JS正则,canvas光晕效果]
在线：&[heroku服务器访问国内好像很慢。。。所以抓取页面也特别慢]
1)windows下nodejs搭建很简单
到nodeJS官网下载安装包，双击安装
会自动往path里追加node命令路径
nodejs入门：
如果遇到npm安装时报错，说什么npm不存在
只要在提示路径下新建npm文件夹就可以了
3)express安装：
npm下载express
用express命令安装即可
[使用 express -e 命令创建 express 项目,不同于3.x，4.x需要再安装express-generator]
目录结构会一起生成
4)express页面抓取代码片段
由于天气预报我是直接从网页上抓取[get方法]来的，需要下面代码：
routes/spider.js 发送请求与获取数据
1 var http = require('http');
3 module.exports =function(nPage, opt,resEncoding, fnSpiderData)
var req = http.request(opt, function(res)
res.setEncoding(resEncoding);
var g_data="";
res.on('data', function (chunk)
res.on('end', function()
console.log("do page " + nPage);
fnSpiderData(g_data,res.headers["content-type"], nPage);
req.on('error', function(e)
console.log('problem with request ' + opt.path + ' : ' + e.message);
req.end();
routes/index.js 路由+请求参数设置 片段
1 var spider = require('./spider');
3 app.get('/req/:getType/:returnType/:reqUrl',function(req,res){
//res.send("hello, req!\ngetType:"+req.params.getType+"\nreturnType:"+req.params.returnType+"\nURL:"+req.params.reqUrl);
* http get
console.log('got starting...');
console.log(':'+URL.parse(req.url).query+":");
var auth=new Buffer('代理用户名:代理密码').toString('base64'),
pathStr = req.params.reqUrl+(URL.parse(req.url).query!=null?"?"+URL.parse(req.url).query:"")
host:pathStr.match(/http[s]?:\/\/[^\\|\/]*/)[0].replace(/http[s]?:\/\//,''), //使用vpn代理时，是代理地址
port:80,//使用vpn代理时，是代理端口
method:'GET',
path:pathStr,
'Proxy-Authorization':'Basic '+auth,
'Host':pathStr.match(/http[s]?:\/\/[^\\|\/]*/)[0].replace(/http[s]?:\/\//,''),
"User-Agent":"Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.1 (KHTML, like Gecko) Chrome/21.0.1180.92 Safari/537.1 LBBROWSER",
"Referer":pathStr.match(/http[s]?:\/\/[^\\|\/]*/)[0].replace(/http[s]?:\/\//,'')
var resEncoding = '';
if(req.params.returnType!="img")
resEncoding = 'utf8';
resEncoding = 'binary';
spider(0,op,resEncoding,function(data,dataType,page){
if(req.params.returnType!="img")
console.log("not img:"+dataType);
res.send(data);
//'&img src="http://localhost:3000/req/getT/img/http:%2F%%2Fimg%2Fbdlogo.png" /&'
console.log("img:"+dataType);
res.writeHead(200, {"content-type":dataType});
res.write(data, "binary");//res.send(data);
//res.write(data);
res.end();
// end http get
前台js片段[使用正则匹配]：
1 function getData(){
var key = 1;
type: "GET",
url: "/req/getT/text/http:%2F%.cn%2Fweather%2F.shtml?_="+new Date().getTime(),
dataType:"text",
success: function(data){
var str = 'aabbazbbwwbbaa';
var arr =str.match(/.*bb/); //aabbazbbwwbb，贪婪的
console.log('1',arr);
var arr =str.match(/.*?bb/g); //aabb azbb wwbb 返回一个数组包含3个值，惰性的
console.log('2',arr);
//console.log('data',data);
var regEx;
var regEx1 = /&li class='dn.*' data-dn='7d1'&(.|\n)*?&\/li&/
var regEx2 = /&li class='dn.*' data-dn='7d2'&(.|\n)*?&\/li&/
var regEx3 = /&li class='dn.*' data-dn='7d3'&(.|\n)*?&\/li&/
var regEx4 = /&li class='dn.*' data-dn='7d4'&(.|\n)*?&\/li&/
var regEx5 = /&li class='dn.*' data-dn='7d5'&(.|\n)*?&\/li&/
for(i=1;i&6;i++){
eval("regEx = regEx"+i);
var r = data.match(regEx);
//console.log(r);
var dweek = r[0].match(/&h1&(.|\n)*?&\/h1&/gi);
//console.log(dweek);
var dday = r[0].match(/&h2&(.|\n)*?&\/h2&/gi);
//console.log(dday);
var dtq = r[0].match(/&p class="wea"&(.|\n)*?&\/p&/gi);
//console.log(dtq);
var dtemp1 = r[0].match(/&p class="tem tem1"&(.|\n)*?&\/p&/gmi);
//console.log(dtemp1);
var dtemp2 = r[0].match(/&p class="tem tem2"&(.|\n)*?&\/p&/gmi);
//console.log(dtemp2);
var df = r[0].match(/&p class="win"&(.|\n)*?&\/p&/gi);
//console.log('df',df);
var df2 = df[0].match(/&i&(.|\n)*?&\/i&/gi);
//console.log(df2);
var df1s,df1;
if(df.length&0){
df1s = df[0].match(/title=\"[^\"]*?\"/gi);
if(dweek!=null && 1&=dweek.length){
//console.log(delTag(dweek[0]));
$('.d'+i+'week').html(' '+delTag(dweek[0])+' ');
if(dday!=null && 1&=dday.length){
//console.log(delTag(dday[0]));
$('.d'+i+'day').html(' '+delTag(dday[0])+' ');
if(dtq!=null && 1&=dtq.length){
//console.log(delTag(dtq[0]));
$('.d'+i+'tq').html(' '+delTag(dtq[0])+' ');
$('.d'+i+'bg').css({
'background':'url(tq/big/'+changeToPic(delTag(dtq[0]),true)+'.png)',
'*background':'none',
'*filter':'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=tq/big/'+changeToPic(delTag(dtq[0]),true)+'.png)'
key = changeToPic(delTag(dtq[0]),true); // 效果
$('.d'+i+'bg').css({
'background':'url(tq/'+changeToPic(delTag(dtq[0]))+'.png)',
'*background':'none',
'*filter':'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=tq/'+changeToPic(delTag(dtq[0]))+'.png)'
if(dtemp1!=null && 1&=dtemp1.length && 1&=dtemp1.length){
//console.log(delTag(dtemp1[0]).replace('&C',''),delTag(dtemp2[0]));
$('.d'+i+'temp').html(delTag(dtemp1[0]).replace('&C','')+(delTag(dtemp1[0]).replace('&C','')==""?'':' ~ ')+(i==1?delTag(dtemp2[0]).replace('&C','')+"&sup&&C&/sup&":delTag(dtemp2[0])));
if(df1s!=null && 1&=df1s.length/2){
df1 = df1s[0].substring(7,df1s[0].length-1);
//console.log(df1);
if(df2!=null && 1&=df2.length){
//console.log(delTag(df2[0]));
$('.d'+i+'f').html(' '+(df1!=undefined?df1:'')+delTag(df2[0])+' ');
if(key == 1 ){
clearFlg();
drawSunFlg = true;
loadImg = 0;
drawSun();
做的比较潦草，记得css是直接用百度的
代码片段下载：
7.打字效果
以前看过做过记录，这回真正用时，发现以前的不太好用，还是需要稍稍改改
var charIndex = -1;
var stringLength = 0;
var inputT
function writeContent(init){
inputText = document.getElementById('contentToWrite').innerHTML;
if(charIndex==-1){
charIndex = 0;
stringLength = inputText.
var initString = document.getElementById('myContent').innerHTML;
initString = initString.replace(/&SPAN.*$/gi,"");
var theChar = inputText.charAt(charIndex);
var nextFourChars = inputText.substr(charIndex,4);
if(nextFourChars=='&BR&' || nextFourChars=='&br&'){
charIndex+=3;
charIndex = charIndex/1 +1;
$("#blink").remove();
$("#myContent").append(theChar+"&SPAN id='blink'&|&/SPAN&");
$("#myContent").scrollTop($("#myContent")[0].scrollHeight);
//windows.scrollTo(0,9999); //效果不好，应该使用jquery的append方法，然后再滚动到底部，这样画面不会有闪动
26 if(charIndex%2==1){
$('#blink').html("&");
$('#blink').html('|');
if(charIndex&=stringLength){
setTimeout('writeContent(false)',50);
blinkSpan();
function blinkSpan(){
if($('#blink').html()=="&"){
$('#blink').html("|");
$('#blink').html("&");
setTimeout('blinkSpan()',500);
完整下载地址：
8.自动换色彩色文字
网上搜到的不是太喜欢，还是得自己改改，加个阴影，加多点颜色，再加个动态
片段：[还是做成对象比较好。。。]
1 var message="敬请期待..." ;
2 var n=0;
3 function changeColor(){
$($(".word")[n]).css({"color":"rgb("+Math.round(Math.random()*255)+","+Math.round(Math.random()*255)+","+Math.round(Math.random()*255)+")","text-shadow":" 5px 5px 5px rgb("+Math.round(Math.random()*255)+","+Math.round(Math.random()*255)+","+Math.round(Math.random()*255)+")"});
if(n&=$(".word").length){
11 function start(c){
var content = "";
for(i=0;i&c.i++){
content +="&span class='word' style='color:rgb("+Math.round(Math.random()*255)+","+Math.round(Math.random()*255)+","+Math.round(Math.random()*255)+");text-shadow: 5px 5px 5px rgb("+Math.round(Math.random()*255)+","+Math.round(Math.random()*255)+","+Math.round(Math.random()*255)+");'&"+c.charAt(i)+"&/span&";
$("#myContent").append($(content));
setInterval("changeColor()",100);
19 start(message);
下载地址：
突然觉得怎么弄了那么个简单的主页。。。
日志博客用[]那个样子(我已经看完他的代码了，主页其实一点不难)
其余部分继续模仿[]那个样子
这样改多好
果然还是比较喜欢有创造性的工作
现在的工作。。。哎。。。
阅读(...) 评论()