[JS,NodeJs]个人网站效果代码集合

  1 var bgCanvas;
  2 $(function(){
  3     var bgCanvas = new bgC();
  4     bgCanvas.init(function(){
  5         bgCanvas.doAnimate(bgCanvas);
  6     });
  7 });
  8 function bgC(){
  9     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","闭包","反射","代理"],
 10     this.colorArr = [
 11         {"fill":"rgba(255,0,0,0.1)","stroke":"rgba(0,0,255,0.3)"},
 12         {"fill":"rgba(255,0,0,0.1)","stroke":"rgba(0,0,255,0.3)"},
 13         {"fill":"rgba(0,0,255,0.1)","stroke":"rgba(255,0,0,0.3)"},
 14         {"fill":"rgba(232,193,254,0.1)","stroke":"rgba(162,0,255,0.3)"},
 15         {"fill":"rgba(254,199,121,0.1)","stroke":"rgba(255,150,0,0.3)"},
 16         {"fill":"rgba(0,156,143,0.1)","stroke":"rgba(0,255,243,0.3)"},
 17         {"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)"}
 19     ],
 20     this.parent = "body"//"#outDiv",
 21     this.me;
 22     this.docH = 0,
 23     this.docW = 0,
 24     this.drawTop = -20,
 25     this.drawLeft = -100,
 26     this.maxLines=3,
 27     this.lineH=0,
 28     this.showLines=5,
 29     this.cObj, //screen canvas
 30     this.cC, //screen Context
 31     this.cbObj, //back canvas
 32     this.cbC, //back Context
 33     this.circles = new Array(),
 34     this.bigger = 1,
 35     this.outter = 0.008,
 36     this.lastFpsUpdateTime=new Date,
 37     this.init = function(doAnimate){
 38         this.me = this;
 39         // single line height
 40         this.docW = $(document).width();
 41         this.docH = $(document).height();
 42         // patten 1
 43         //this.lineH = this.docH/this.showLines;
 44         // patten 2
 45         this.lineH = 150;
 46         this.showLines = Math.ceil(this.docH/this.lineH);
 47 
 48         //append mouse DOM canvas
 49         $(this.parent).prepend($("<canvas id=‘cbObj‘ width="+this.docW+" height="+this.docH+"></canvas>").css({"display":"block","left":"0px","top":"0px"}));
 50         // append screen DOM canvas
 51         $(this.parent).prepend($("<canvas id=‘cObj‘ width="+this.docW+" height="+this.docH+"></canvas>").css({"position":"absolute","left":"0px","top":"0px"}));
 52         // get canvas and context
 53         this.cObj = document.getElementById(‘cObj‘);
 54         this.cC = cObj.getContext(‘2d‘);
 55         this.cbObj = document.getElementById(‘cbObj‘);
 56         this.cbC = cbObj.getContext(‘2d‘);
 57 
 58         //draw texts
 59         this.drawTexts();
 60 
 61         // onmousemove bound
 62         this.Bind($(document), "mousemove", this.doMM, this);
 63 
 64         // simple animation
 65         //setInterval(this.doAnimate,500);
 66         setInterval(doAnimate,10);
 67     },
 68     this.drawTexts = function(){
 69         var maxLinesH = 0;
 70         var maxLinesW = 0;
 71         while(this.drawTop<this.docH){
 72             maxLinesH = this.lineH;
 73             while(this.drawLeft < this.docW){
 74                 // random lines
 75                 linesAll =  Math.round(Math.random()*(this.maxLines-1)+1);
 76                 // calc lines
 77                 var lines = new Array();
 78                 var oneLineH = this.lineH / linesAll;
 79                 for(i=0;i<linesAll;i++){
 80                     // random text
 81                     textI = Math.round(Math.random()*(this.textArr.length-1));
 82                     colorI = Math.round(Math.random()*(this.colorArr.length-1));
 83 
 84                     // calc max line width
 85                     textMetrics = this.cC.measureText(this.textArr[textI]);
 86                     maxLinesW = textMetrics.width>maxLinesW?textMetrics.width:maxLinesW;
 87                     //console.log(textMetrics);
 88 
 89                     // calc top and left
 90                     lineTop = this.drawTop + (i+0.5) * oneLineH;
 91 
 92                     // store information
 93                     lines.push({"text":this.textArr[textI],"color":this.colorArr[colorI],"top":lineTop,"font":Math.floor(oneLineH/(Math.random()*1.5+1))});
 94                 }
 95                 left = this.drawLeft + maxLinesW * 0.5;
 96                 this.drawText(lines,left);
 97                 this.drawLeft += maxLinesW;
 98             }
 99             this.drawLeft = 0;
100             this.drawTop += maxLinesH;
101             //console.log(this.drawTop);
102         }
103     },
104     this.drawText = function(lines,left){
105         //console.log(lines,left);
106         for(i=0;i<lines.length;i++){
107             this.cC.save();
108             //console.log(textI);
109 
110             this.cC.font=lines[i].font+"px Georgia";
111             this.cC.textBaseline = ‘middle‘;//设置文本的垂直对齐方式
112             this.cC.textAlign = ‘center‘; //设置文本的水平对对齐方式
113             this.cC.fillStyle = lines[i].color.fill;
114             this.cC.strokeStyle = lines[i].color.stroke;
115             this.cC.fillText(lines[i].text, left,lines[i].top);
116             this.cC.strokeText(lines[i].text, left,lines[i].top);
117 
118             this.cC.restore();
119         }
120     },
121     this.doMM = function(e){
122         this.circles.push(
123         {
124             ‘x‘:e.pageX,
125             ‘y‘:e.pageY,
126             ‘colorR‘:Math.floor(Math.random()*255),
127             ‘colorG‘:Math.floor(Math.random()*255),
128             ‘colorB‘:Math.floor(Math.random()*255),
129             ‘a‘:0.5,
130             ‘r‘:1
131         });
132         this.doAnimate(this);
133         //console.log(this.circles);
134     },
135     this.doAnimate = function(thisObj){
136         
137         thisObj.cbC.clearRect(0,0,thisObj.docW,thisObj.docH);
138         thisObj.cbC.save();
139         var delArr = new Array();
140         for(i=0;i<thisObj.circles.length;i++){
141             thisObj.circles[i].a -= thisObj.outter;
142             thisObj.circles[i].r += thisObj.bigger;
143             thisObj.cbC.fillStyle = "rgba("+thisObj.circles[i].colorR+","+thisObj.circles[i].colorG+","+thisObj.circles[i].colorB+","+thisObj.circles[i].a+")";
144             
145             thisObj.cbC.beginPath();
146             thisObj.cbC.arc(thisObj.circles[i].x,thisObj.circles[i].y,thisObj.circles[i].r,0,Math.PI*2,true);
147             thisObj.cbC.closePath();
148             thisObj.cbC.fill();
149             if(thisObj.circles[i].a<0.05){
150                 delArr.push(i);
151             }
152         }
153         thisObj.cbC.restore();
154         for(j=delArr.length-1;j>=0;j--){
155             thisObj.circles.splice(j,1);
156         }
157         
158     },
159     this.Bind = function (control, eventName, callBack, scope) {
160         if (!scope) { scope = window; }
161         $(control).bind(eventName, function () {
162             callBack.apply(scope, arguments);
163         });
164     }
165 }

  1 <style>
  2 body{
  3     margin:0;
  4     overflow:hidden;
  5 }
  6 #outDiv{
  7     position:relative;
  8     top:0px;
  9     left:0px;
 10     margin:0;
 11     height:430px;
 12     width:100%;
 13     overflow:hidden;
 14     /*margin-top:30px;*/
 15 }
 16 #wheel-center{
 17     background:transparent url("aaajpg.jpg") no-repeat center center;
 18     width:340px;
 19     height:340px;
 20     position: absolute;
 21     border-radius:170px;
 22     left:50%;
 23     top:50%;
 24     margin-left: -170px;
 25     margin-top: -170px;
 26     /*-webkit-filter: blur(3px);*/
 27     /*-webkit-filter: blur(1px);*/
 28 }
 29 #wheel-container-inner{
 30     background:transparent url("gray.png") no-repeat center center;
 31     width:430px;
 32     height:430px;
 33     position: absolute;
 34     border-radius:215px;
 35     left:50%;
 36     top:50%;
 37     margin-left: -215px;
 38     margin-top: -215px;
 39 }
 40 .wheel-color-container{
 41     width:430px;
 42     height:430px;
 43     position: absolute;
 44     border-radius:215px;
 45     left:50%;
 46     top:50%;
 47     margin-left: -215px;
 48     margin-top: -215px;
 49     /*background-position:125% 75%;*/
 50 }
 51 .wheel-color-orange{
 52     background:transparent url("orange-right2.png") no-repeat;
 53     background-position:100% top;
 54     opacity:1;
 55     transform:rotate(0deg);
 56 
 57 }
 58 .wheel-color-green{
 59     background:transparent url("green-right2.png") no-repeat;
 60     background-position:100% top;
 61     opacity:0;
 62     transform:rotate(0deg);
 63 
 64 }
 65 .wheel-color-purple{
 66     background:transparent url("purple-right2.png") no-repeat;
 67     background-position:100% top;
 68     opacity:0;
 69     transform:rotate(0deg);
 70 
 71 }
 72 .wheel-color-marine{
 73     background:transparent url("marine-right2.png") no-repeat;
 74     background-position:100% top;
 75     opacity:0;
 76     transform:rotate(0deg);
 77 
 78 }
 79 .wheel-color-red{
 80     background:transparent url("red-right2.png") no-repeat;
 81     background-position:100% top;
 82     opacity:0;
 83     transform:rotate(0deg);
 84 
 85 }
 86 .wheel-color-blue{
 87     background:transparent url("blue-right2.png") no-repeat;
 88     background-position:100% top;
 89     opacity:0;
 90     transform:rotate(0deg);
 91 
 92 }
 93 .wheel-color-gray{
 94     background:transparent url("gray-right2.png") no-repeat;
 95     background-position:100% top;
 96     opacity:0;
 97     transform:rotate(0deg);
 98 
 99 }
100 
101 .menu-tooltip-container{
102     width:30px;
103     height:30px;
104     position: absolute;
105     opacity:1;
106     left:50%;
107     top:0px;
108     margin-left: -15px;
109     margin-top: 0px;
110 }
111 
112 .menu-tooltip-1{
113     left:50%;
114     top:50%;
115     margin-left: -15px;
116     margin-top: -255px;
117     /*background:url(‘1.png‘) no-repeat center center;*/
118 }
119 .menu-tooltip-2{
120     left:50%;
121     top:50%;
122     margin-left: 180px;
123     margin-top: -165px;
124     /*background:url(‘2.png‘) no-repeat center center;*/
125 }
126 .menu-tooltip-3{
127     left:50%;
128     top:50%;
129     margin-left: 225px;
130     margin-top: 40px;
131     /*background:url(‘3.png‘) no-repeat center center;*/
132 }
133 .menu-tooltip-4{
134     left:50%;
135     top:50%;
136     margin-left: 120px;
137     margin-top: 200px;
138     /*background:url(‘4.png‘) no-repeat center center;*/
139 }
140 .menu-tooltip-5{
141     left:50%;
142     top:50%;
143     margin-left: -140px;
144     margin-top: 200px;
145     /*background:url(‘5.png‘) no-repeat center center;*/
146 }
147 .menu-tooltip-6{
148     left:50%;
149     top:50%;
150     margin-left: -255px;
151     margin-top: 40px;
152     /*background:url(‘6.png‘) no-repeat center center;*/
153 }
154 .menu-tooltip-7{
155     left:50%;
156     top:50%;
157     margin-left: -210px;
158     margin-top: -165px;
159     /*background:url(‘7.png‘) no-repeat center center;*/
160 }
161 
162 </style>
163 <div id="outDiv">
164     <div id="wheel-center" style="z-index:1;"></div>
165     <div id=‘wheel-container-inner‘></div>
166     <div class=‘wheel-color-container wheel-color-orange‘></div>
167     <div class=‘wheel-color-container wheel-color-green‘></div>
168     <div class=‘wheel-color-container wheel-color-purple‘></div>
169     <div class=‘wheel-color-container wheel-color-marine‘></div>
170     <div class=‘wheel-color-container wheel-color-red‘></div>
171     <div class=‘wheel-color-container wheel-color-blue‘></div>
172     <div class=‘wheel-color-container wheel-color-gray‘></div>
173     <div class=‘menu-tooltip-container menu-tooltip-1 tooltip-marine‘ data="menuMarine"><img class="initImg" src="1.png" /></div>
174     <div class=‘menu-tooltip-container menu-tooltip-2 tooltip-red‘ data="menuRed"><img class="initImg" src="2.png" /></div>
175     <div class=‘menu-tooltip-container menu-tooltip-3 tooltip-blue‘ data="menuBlue"><img class="initImg" src="3.png" /></div>
176     <div class=‘menu-tooltip-container menu-tooltip-4 tooltip-gray‘ data="menuGray"><img class="initImg" src="4.png" /></div>
177     <div class=‘menu-tooltip-container menu-tooltip-5 tooltip-orange‘ data="menuOrange"><img class="initImg" src="5.png" /></div>
178     <div class=‘menu-tooltip-container menu-tooltip-6 tooltip-green‘ data="menuGreen"><img class="initImg" src="6.png" /></div>
179     <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=[
  9             {
 10                 min:235,
 11                 max:270,
 12                 name:"orange"
 13             },
 14             {
 15                 min:170,
 16                 max:235,
 17                 name:"green"
 18             },
 19             {
 20                 min:110,
 21                 max:170,
 22                 name:"purple"
 23             },
 24             {
 25                 min:70,
 26                 max:110,
 27                 name:"marine"
 28             },
 29             {
 30                 min:20,
 31                 max:70,
 32                 name:"red"
 33             },
 34             {
 35                 min:330,
 36                 max:360,
 37                 name:"blue"
 38             },
 39             {
 40                 min:0,
 41                 max:20,
 42                 name:"blue"
 43             },
 44             {
 45                 min:270,
 46                 max:330,
 47                 name:"gray"
 48             }
 49           ];
 50 var dataPot={
 51     menuMarine : {
 52         imgWay:"add",
 53         imgW:30,
 54         imgH:30,
 55         imgL:"0px",
 56         imgT:"0px",
 57         divW:"20px",
 58         divH:"20px",
 59         divL:"5px",
 60         divT:"5px",
 61         arrW:"12px",
 62         arrH:"20px",
 63         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*/
 64         arrT:"10px",
 65         arrDir:"180",
 66         tipL: "-230px",
 67         tipT: "28px",
 68         tipH: "320px",
 69         tipW: "500px",
 70         potImg:"marine/quote1_hover.png",
 71         bgColor:"rgb(101, 124, 178)",
 72         src:"/test",
 73         key1:"value1"
 74     },
 75     menuRed : {
 76         imgWay:"add",
 77         imgW:30,
 78         imgH:30,
 79         imgL:"0px",
 80         imgT:"0px",
 81         divW:"20px",
 82         divH:"20px",
 83         divL:"5px",
 84         divT:"5px",
 85         arrW:"12px",
 86         arrH:"20px",
 87         arrL:"9px",
 88         arrT:"10px",
 89         arrDir:"180",
 90         tipL: "-500px",
 91         tipT: "28px",
 92         tipH: "283px",
 93         tipW: "620px",
 94         potImg:"red/quote1_hover.png",
 95         bgColor:"rgb(127, 45, 42)",
 96         src:"/weather",
 97         key1:"value1"
 98     },
 99     menuBlue : {
100         imgWay:"add",
101         imgW:30,
102         imgH:30,
103         imgL:"0px",
104         imgT:"0px",
105         divW:"20px",
106         divH:"20px",
107         divL:"5px",
108         divT:"5px",
109         arrW:"12px",
110         arrH:"20px",
111         arrL:"4px",
112         arrT:"5px",
113         arrDir:"270",
114         tipL: "-508px",
115         tipT: "-205px",
116         tipH: "320px",
117         tipW: "500px",
118         potImg:"blue/quote2_hover.png",
119         bgColor:"rgb(120, 186, 211)",
120         src:"/print",
121         key1:"value1"
122     },
123     menuGray : {
124         imgWay:"add",
125         imgW:30,
126         imgH:30,
127         imgL:"0px",
128         imgT:"0px",
129         divW:"20px",
130         divH:"20px",
131         divL:"5px",
132         divT:"5px",
133         arrW:"12px",
134         arrH:"20px",
135         arrL:"9px",
136         arrT:"0px",
137         arrDir:"0",
138         tipL: "-400px",
139         tipT: "-322px",
140         tipH: "320px",
141         tipW: "500px",
142         potImg:"gray/quote1_hover.png",
143         bgColor:"rgb(88, 90, 96)",
144         src:"/links",
145         key1:"value1"
146     },
147     menuOrange : {
148         imgWay:"add",
149         imgW:30,
150         imgH:30,
151         imgL:"0px",
152         imgT:"0px",
153         divW:"20px",
154         divH:"20px",
155         divL:"5px",
156         divT:"5px",
157         arrW:"12px",
158         arrH:"20px",
159         arrL:"9px",
160         arrT:"0px",
161         arrDir:"0",
162         tipL: "-100px",
163         tipT: "-322px",
164         tipH: "320px",
165         tipW: "500px",
166         potImg:"orange/quote1_hover.png",
167         bgColor:"rgb(249, 154, 45)",
168         src:"/wait",
169         key1:"value1"
170     },
171     menuGreen : {
172         imgWay:"add",
173         imgW:30,
174         imgH:30,
175         imgL:"0px",
176         imgT:"0px",
177         divW:"20px",
178         divH:"20px",
179         divL:"5px",
180         divT:"5px",
181         arrW:"12px",
182         arrH:"20px",
183         arrL:"13px",
184         arrT:"5px",
185         arrDir:"90",
186         tipL: "18px",
187         tipT: "-230px",
188         tipH: "400px",
189         tipW: "670px",
190         potImg:"green/quote1_hover.png",
191         bgColor:"rgb(92, 159, 23)",
192         src:"/guess",
193         key1:"value1"
194     },
195     menuPurple : {
196         imgWay:"add",
197         imgW:30,
198         imgH:30,
199         imgL:"0px",
200         imgT:"0px",
201         divW:"20px",
202         divH:"20px",
203         divL:"5px",
204         divT:"5px",
205         arrW:"12px",
206         arrH:"20px",
207         arrL:"9px",
208         arrT:"10px",
209         arrDir:"180",
210         tipL: "-90px",
211         tipT: "28px",
212         tipH: "410px",
213         tipW: "600px",
214         potImg:"purple/quote1_hover.png",
215         bgColor:"rgb(101, 70, 101)",
216         src:"/map",
217         key1:"value1"
218     }
219 
220 };
221 window.onload = function(){
222     $("#outDiv").height($(window).height());
223     $("#outDiv").css({"position":"absolute","left":"0px","top":"0px"});
224 
225     // calc center Point
226     cenPoint.x = $("#outDiv").width() * 0.5 + $("#outDiv").offset().left;
227     cenPoint.y = $("#outDiv").height() * 0.5 + $("#outDiv").offset().top;
228 
229     // init mouse point
230     curPoint.x = cenPoint.x;
231     curPoint.y = cenPoint.y;
232 
233     // animation test
234     TweenLite.to(
235         $(".wheel-color-container"),
236         2,
237         {
238             css: {
239                 rotation:360
240             },
241             ease:Cubic.easeOut,
242             overwrite: true
243         }
244     );
245     // bind mousemove event
246     document.addEventListener("mousemove", docOnMM);
247 }
248 
249 /*
250  * doc mousemove event
251  */
252 function docOnMM(event){
253     // set curPoint
254     curPoint.x = event.pageX;
255     curPoint.y = event.pageY;
256     // repaint the center circle
257     paintCC();
258 }
259 
260 /*
261  * calc angle
262  * 当前的计算不好，太字面了
263  * 有时间的话，先改变坐标体系，这样看着更舒服吧
264  */
265 function calcAngle(){
266     // 角度
267     var angle;
268     // 象限差额角度
269     var addJD = 0;
270     // 是否需要进行角度计算
271     var calcJDFlg = false;
272     // 象限判断临时变量 xx:1,2,3,4
273     var xxX,xxY,xx;
274     
275     // 象限判断
276     xxX=(curPoint.x - cenPoint.x)>0 ? 1: ((curPoint.x - cenPoint.x==0)?0:-1);
277     xxY=(curPoint.y - cenPoint.y)>0 ? 1: ((curPoint.y - cenPoint.y==0)?0:-1);
278     if(xxX==0 && xxY==0){
279         angle = "NaN";
280     }else if(xxX==0){
281         if(xxY>0){
282             angle = 270;
283         }else{
284             angle = 90;
285         }
286     }else if(xxY==0){
287         if(xxX>0){
288             angle = 0;
289         }else{
290             angle = 180;
291         }
292     }else{
293         calcJDFlg = true;
294         if(xxX>0){
295             if(xxY>0){
296                 addJD = 270;
297                 xx = 4;
298             }else{
299                 addJD = 0;
300                 xx = 1;
301             }
302         }else{
303             if(xxY>0){
304                 addJD = 180;
305                 xx = 3;
306             }else{
307                 addJD = 90;
308                 xx = 2;
309             }
310         }
311     }
312 
313     // 计算锐角
314     if(calcJDFlg){
315         // calc ruiJiao
316         var duiBian,linBian;
317         var a = cenPoint;
318         var b = curPoint;
319         var c = {x:cenPoint.x,y:curPoint.y};
320         duiBian = Math.abs(c.x-b.x);
321         linBian = Math.abs(c.y-a.y);
322         var huDu = Math.atan(duiBian/linBian);
323         var jiaoDu = huDu * (180 / Math.PI);
324         if(xx%2==0){
325             angle = addJD + jiaoDu;
326         }else{
327             angle = 90 + addJD - jiaoDu;
328         }
329     }
330 
331     return angle;
332 }
333 
334 /*
335  * paint the center circle;
336  */
337 function paintCC(){
338     var angle = calcAngle();
339     var picName = "";
340     if(angle=="NaN"){
341         // 圆点
342     }else{
343         // 头像
344         TweenLite.to(
345             $("#wheel-center"),
346             0.3,
347             {
348                 css: {
349                     rotationY: (angle>270 || angle<90)? 180: 0
350                 }
351                 ,onComplete:function(){
352                     TweenLite.to(
353                         $("#wheel-center"),
354                         0.5,
355                         {
356                             css:{
357                                 shortRotation: -1*((angle>270 || angle<90)? (angle+20): (angle-180-20))
358                             }
359                         }
360                     );
361                 }
362             }
363         );
364         // 判断显示颜色种别
365         color.forEach(function(item){
366             if(angle>=item.min && angle<item.max){
367                 picName = item.name;
368                 
369                 TweenLite.to(
370                     $(".wheel-color-"+item.name),
371                     0.5,
372                     {
373                         css: {
374                             opacity: 1
375                         }
376                     }
377                 );
378             }
379         });
380         color.forEach(function(item){
381             if(picName!=item.name){
382                 TweenLite.to(
383                     $(".wheel-color-"+item.name),
384                     0.3,
385                     {
386                         css: {
387                             opacity: 0
388                         }
389                     }
390                 );
391             }
392         });
393 
394         // 旋转
395         TweenLite.to(
396             $(".wheel-color-container"),
397             1.5,
398             {
399                 css: {
400                     shortRotation: angle * -1
401                 },
402                 ease:Back.easeOut//Cubic
403             }
404         );
405     }
406 }

  1     var mapClick = {‘lng‘:‘‘,‘lat‘:‘‘};
  2     var map;
  3     $(function(){
  4         $(‘#opp‘).css(‘left‘,$(‘#allmap‘).offset().left+"px");
  5         $(‘#result‘).hide();
  6         $("#opp").height(50);
  7         loadJScript();  //异步加载地图
  8     })
  9     
 10     function myFun(result){
 11         var cityName = result.name;
 12         //alert("当前定位城市:"+cityName);
 13         $("#wxsSearch").val(cityName);
 14         if(cityName!="全国" && cityName!=""){
 15             map.setCenter(cityName);
 16             $("#wxsDoSearch").click();
 17         }
 18     }
 19 
 20     //百度地图API功能
 21     function loadJScript() {
 22         var script = document.createElement("script");
 23         script.type = "text/javascript";
 24         script.src = "http://api.map.baidu.com/api?v=2.0&ak=yW4S1ZIFFRGfGv1PwYc8ZIHB&callback=onMapLoaded";
 25         document.body.appendChild(script);
 26     }
 27     function onMapLoaded() {
 28         var script = document.createElement("script");
 29         script.type = "text/javascript";
 30         script.src = "http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js";
 31         document.body.appendChild(script);
 32 
 33         map = new BMap.Map("allmap");            // 创建Map实例
 34         //var point = new BMap.Point(116.404, 39.915); // 创建点坐标
 35         //map.centerAndZoom(point,15);
 36 
 37         map.centerAndZoom("上海",15);
 38         map.enableScrollWheelZoom();                 //启用滚轮放大缩小
 39 
 40         map.addEventListener("click", function(e){
 41             //alert(e.point.lng + ", " + e.point.lat);
 42             mapClick = {‘lng‘:e.point.lng,‘lat‘:e.point.lat};
 43             $("#result").hide();
 44             $("#opp").height(50);
 45             //console.log(mapClick);
 46         });
 47         $("#wxsSearch").click(function(e){/*alert(‘a‘);*/$("#result").show();$("#opp").height(400);});
 48         $("#showR").click(function(e){
 49             if($("#result").is(":hidden")){
 50                 $("#result").show();$("#opp").height(400);
 51             }else{
 52                 $("#result").hide();
 53                 $("#opp").height(50);
 54             }
 55         });
 56         var ac1 = new BMap.Autocomplete(    //建立一个自动完成的对象
 57             {"input" : "wxsSearch"
 58             ,"location" : map
 59         });
 60         ac1.addEventListener("onconfirm", function(e) {    //鼠标点击下拉列表后的事件
 61             var _value = e.item.value;
 62             myValue = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
 63             //console.log(myValue);
 64             $("#wxsSearch").val(myValue);
 65         });
 66         $(‘#wxsDoSearch‘).click(function(){
 67             $("#result").html(‘‘).show();$("#opp").height(400);
 68             var options = {
 69                 onSearchComplete: function(results){
 70                 //console.log(‘complete‘,local.getStatus(),BMAP_STATUS_SUCCESS);
 71                     // 判断状态是否正确
 72                     if (local.getStatus() == BMAP_STATUS_SUCCESS){
 73                         //var s = [];
 74                         var ulStr="<ul>";
 75                         for (var i = 0; i < results.getCurrentNumPois(); i ++){
 76                             var liStr = "<li onclick=‘doFindPL(this);‘ lat=‘%lat%‘ lng=‘%lng%‘><span class=‘liName‘>%title%</span><br /><span class=‘liAdd‘>%address%</span></li>";
 77                             liStr=liStr.replace(/\%lat%/g,results.getPoi(i).point.lat);
 78                             liStr=liStr.replace(/\%lng%/g,results.getPoi(i).point.lng);
 79                             liStr=liStr.replace(/\%title%/g,results.getPoi(i).title);
 80                             ulStr+=liStr.replace(/\%address%/g,results.getPoi(i).address);
 81                             //console.log(results.getPoi(i));
 82                             //s.push(results.getPoi(i).title + ", " + results.getPoi(i).address);
 83                         }
 84                         ulStr+= "</ul>";
 85                         //console.log(ulStr);
 86                         $("#result").html(ulStr);
 87                         //document.getElementById("r-result").innerHTML = s.join("<br/>");
 88                         //console.log(s.join("<br/>"));
 89                     }
 90                 }
 91             };
 92             var local = new BMap.LocalSearch(map, options);
 93             /*var local = new BMap.LocalSearch(map, {
 94                 renderOptions:{map: map}
 95             });*/
 96             //console.log(‘doSearch‘);
 97             local.search($(‘#wxsSearch‘).val());
 98         });
 99         
100         var myCity = new BMap.LocalCity();
101         myCity.get(myFun);
102 
103         setInterval(removeBD,100);
104     }
105     function doFindPL(thisObj){
106         //创建检索信息窗口对象
107         var searchInfoWindow = null;
108         searchInfoWindow = new BMapLib.SearchInfoWindow(map, ‘地址：‘+$($(thisObj).find(".liAdd")[0]).html(), {
109                 title  : $($(thisObj).find(".liName")[0]).html(),      //标题
110                 //width  : 290,             //宽度
111                 //height : 105,              //高度
112                 panel  : "result",         //检索结果面板
113                 enableAutoPan : true,     //自动平移
114                 searchTypes   :[
115                     BMAPLIB_TAB_SEARCH,   //周边检索
116                     BMAPLIB_TAB_TO_HERE,  //到这里去
117                     BMAPLIB_TAB_FROM_HERE //从这里出发
118                 ]
119             });
120         //var poi = new BMap.Point($(thisObj).attr(‘lat‘),$(thisObj).attr(‘lng‘));
121         var poi = new BMap.Point($(thisObj).attr(‘lng‘),$(thisObj).attr(‘lat‘));
122         var marker = new BMap.Marker(poi); //创建marker对象
123         //marker.enableDragging(); //marker可拖拽
124         marker.addEventListener("click", function(e){
125             searchInfoWindow.open(marker);
126         });
127         map.clearOverlays();
128         map.addOverlay(marker); //在地图中添加marker
129         map.panTo(poi);
130         mapClick.lng=$(thisObj).attr(‘lng‘);
131         mapClick.lat=$(thisObj).attr(‘lat‘);
132     }
133     function removeBD(){
134         //<input type="text" id="tangram-suggestion--TANGRAM__2x-input" autocomplete="off" style="height: 22px; line-height: 22px; padding: 0px; margin: 0px; border: 1px solid rgb(165, 172, 178); width: 85px;">
135         $("input[org!=wxs][type=text]").each(function(index){
136             if($(this).attr("id")!=undefined)return;
137             var id="suggestId"+new Date().getTime();
138             var replaceBtn = "<input id=‘"+id+"‘ type=‘text‘ value=‘‘ style=‘"+
139             $(this).attr("style")+"‘ org=‘wxs‘ width=‘"+$(this).width()+"px‘>";
140             $(this).parent().append($(replaceBtn));
141             $(this).remove();
142 
143             var ac = new BMap.Autocomplete(    //建立一个自动完成的对象
144                 {"input" : id
145                 ,"location" : map
146             });
147             ac.addEventListener("onconfirm", function(e) {    //鼠标点击下拉列表后的事件
148                 var _value = e.item.value;
149                 myValue = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
150                 //console.log(myValue);
151                 $("#"+id).val(myValue);
152             });
153         });
154         $("input[org!=wxs][type=button]").each(function(index){
155             if($(this).attr("id")!=undefined)return;
156             var valueBtn="";
157             if($(this).attr("value")=="导航")
158             {
159                 valueBtn = "步行";
160             }else{
161                 valueBtn  = $(this).attr("value");
162             }
163             var replaceBtn = "<input type=‘button‘ value=‘"+
164             valueBtn+"‘ style=‘"+
165             $(this).attr("style")+"‘ org=‘wxs‘ onclick=‘rBtnClick(this)‘>";
166             $(this).parent().append($(replaceBtn));
167             $(this).remove();
168         });
169         $("input[org!=wxs][type=submit]").click(function(e){$(‘#result‘).show();$("#opp").height(400);});
170         $("input[org!=wxs][id^=BMapLib_]").click(function(e){$(‘#result‘).show();$("#opp").height(400);});
171         $("a[filter=query]").each(function(index){
172             var replaceBtn = "<a style=‘cursor:pointer;"+
173             $(this).attr("style")+"‘ onclick=‘rAClick(\""+$(this).html()+"\")‘>"+$(this).html()+"</a>";
174             $(this).parent().append($(replaceBtn));
175             $(this).remove();
176         });
177         $("a[filter=detailInfo]").each(function(index){
178             var replaceBtn = "<a style=‘"+
179             $(this).attr("style")+"‘>"+$(this).html()+"</a>";
180             $(this).parent().append($(replaceBtn));
181             $(this).remove();
182         });
183         $("a[filter=detailLink]").remove();
184         $("a[target=_blank]").remove();
185         $("img[title=发送到手机]").remove();
186         $(".tangram-suggestion").css(‘z-index‘,‘100‘);
187         if($("#result").is(":hidden")){
188             $("#showR").html("显示结果");
189         }else{
190             $("#showR").html("收起结果");
191         }
192     }
193     function rAClick(val){
194         map.clearOverlays();
195         var mPoint = new BMap.Point(mapClick.lng, mapClick.lat);
196         var circle = new BMap.Circle(mPoint,1000,{fillColor:"blue", strokeWeight: 1 ,fillOpacity: 0.3, strokeOpacity: 0.3});
197         map.addOverlay(circle);
198         var local =  new BMap.LocalSearch(map, {renderOptions: {map: map, autoViewport: false, panel: "result"}});  
199         var bounds = getSquareBounds(circle.getCenter(),circle.getRadius());
200         local.searchInBounds(val,bounds);
201         $("#result").show();$("#opp").height(400);
202     }
203     function rBtnClick(thisObj){
204         map.clearOverlays();
205         if($(thisObj).parent().html().indexOf("起点")!=-1){
206             var text = $($(thisObj).parent().find("input[type=text]")[0]).val()
207             alert(‘起点：‘+text+" BTN:"+$(thisObj).val());
208             var start = text,end = new BMap.Point(mapClick.lng, mapClick.lat);
209             if($(thisObj).val()=="公交"){
210                 var transit = new BMap.TransitRoute(map, {
211                     renderOptions: {map: map, panel: "result"}, 
212                     onResultsHtmlSet : function(){$("#result").show();$("#opp").height(400);} 
213                 });
214                 transit.search(start,end);
215             }else if($(thisObj).val()=="驾车"){
216                 var driving = new BMap.DrivingRoute(map, {
217                     renderOptions: {map: map, panel: "result"}, 
218                     onResultsHtmlSet : function(){$("#result").show();$("#opp").height(400);}
219                 });
220                 driving.search(start, end);
221             }else if($(thisObj).val()=="步行"){
222                 var walking = new BMap.WalkingRoute(map, {
223                     renderOptions: {map: map, panel: "result"}, 
224                     onResultsHtmlSet : function(){$("#result").show();$("#opp").height(400);}
225                 });
226                 walking.search(start, end);
227             }
228         }else if($(thisObj).parent().html().indexOf("终点")!=-1){
229             var text = $($(thisObj).parent().find("input[type=text]")[0]).val()
230             //alert(‘终点：‘+text+" BTN:"+$(thisObj).val());
231             if($(thisObj).val()=="公交"){
232                 var end = text,start = new BMap.Point(mapClick.lng, mapClick.lat);
233                 var transit = new BMap.TransitRoute(map, {
234                     renderOptions: {map: map, panel: "result"}, 
235                     onResultsHtmlSet : function(){$("#result").show();$("#opp").height(400);}
236                 });
237                 transit.search(start,end);
238             }else if($(thisObj).val()=="驾车"){
239                 var driving = new BMap.DrivingRoute(map, {
240                     renderOptions: {map: map, panel: "result"}, 
241                     onResultsHtmlSet : function(){$("#result").show();$("#opp").height(400);}
242                 });
243                 driving.search(start, end);
244             }else if($(thisObj).val()=="步行"){
245                 var walking = new BMap.WalkingRoute(map, {
246                     renderOptions: {map: map, panel: "result"}, 
247                     onResultsHtmlSet : function(){$("#result").show();$("#opp").height(400);}
248                 });
249                 walking.search(start, end);
250             }
251         }else{
252             var text = $($(thisObj).parent().find("input[type=text]")[0]).val();
253             //alert(‘附近：‘+text+" BTN:"+$(thisObj).val());
254             var mPoint = new BMap.Point(mapClick.lng, mapClick.lat);
255             var circle = new BMap.Circle(mPoint,1000,{fillColor:"blue", strokeWeight: 1 ,fillOpacity: 0.3, strokeOpacity: 0.3});
256             map.addOverlay(circle);
257             var local =  new BMap.LocalSearch(map, {renderOptions: {map: map, autoViewport: false, panel: "result"}});  
258             var bounds = getSquareBounds(circle.getCenter(),circle.getRadius());
259             local.searchInBounds(text,bounds);
260             $("#result").show();$("#opp").height(400);
261         }
262     }

 1 var http = require(‘http‘);
 2 
 3 module.exports =function(nPage, opt,resEncoding, fnSpiderData)
 4 {
 5  var req = http.request(opt, function(res) 
 6  {
 7   res.setEncoding(resEncoding);
 8 
 9   var g_data="";
10   res.on(‘data‘, function (chunk) 
11   {
12    g_data+=chunk;
13   });
14 
15   res.on(‘end‘, function()
16   {
17    console.log("do page " + nPage);
18    fnSpiderData(g_data,res.headers["content-type"], nPage);  
19   });
20  });
21 
22  req.on(‘error‘, function(e) 
23  {
24   console.log(‘problem with request ‘ + opt.path + ‘ : ‘ + e.message);
25  });
26 
27  req.end();
28 }

 1 var spider = require(‘./spider‘);
 2 
 3 app.get(‘/req/:getType/:returnType/:reqUrl‘,function(req,res){
 4     //res.send("hello, req!\ngetType:"+req.params.getType+"\nreturnType:"+req.params.returnType+"\nURL:"+req.params.reqUrl);
 5     /**
 6     * http get
 7     */
 8 
 9     console.log(‘got starting...‘);
10     console.log(‘:‘+URL.parse(req.url).query+":");
11     var auth=new Buffer(‘代理用户名:代理密码‘).toString(‘base64‘),
12     pathStr = req.params.reqUrl+(URL.parse(req.url).query!=null?"?"+URL.parse(req.url).query:"")
13     op={
14         host:pathStr.match(/http[s]?:\/\/[^\\|\/]*/)[0].replace(/http[s]?:\/\//,‘‘), //使用vpn代理时，是代理地址
15         port:80,//使用vpn代理时，是代理端口
16         method:‘GET‘,
17         path:pathStr,
18         headers:{
19             ‘Proxy-Authorization‘:‘Basic ‘+auth,
20             ‘Host‘:pathStr.match(/http[s]?:\/\/[^\\|\/]*/)[0].replace(/http[s]?:\/\//,‘‘),
21             "User-Agent":"Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.1 (KHTML, like Gecko) Chrome/21.0.1180.92 Safari/537.1 LBBROWSER",
22             "Referer":pathStr.match(/http[s]?:\/\/[^\\|\/]*/)[0].replace(/http[s]?:\/\//,‘‘)
23         }
24     }
25     var resEncoding = ‘‘;
26     if(req.params.returnType!="img")
27     {
28         resEncoding = ‘utf8‘;
29     }else{
30         resEncoding = ‘binary‘;
31     }
32     spider(0,op,resEncoding,function(data,dataType,page){
33         if(req.params.returnType!="img")
34         {
35             console.log("not img:"+dataType);
36             res.send(data);
37         }
38         //‘<img src="http://localhost:3000/req/getT/img/http:%2F%2Fwww.baidu.com%2Fimg%2Fbdlogo.png" />‘
39         else{
40             console.log("img:"+dataType);
41             res.writeHead(200, {"content-type":dataType});
42             res.write(data, "binary");//res.send(data);
43             //res.write(data);
44             res.end();
45         }
46     });
47     // end http get
48 
49 });

 1 function getData(){
 2     var key = 1;
 3     $.ajax({
 4         type: "GET",
 5         url: "/req/getT/text/http:%2F%2Fwww.weather.com.cn%2Fweather%2F101020100.shtml?_="+new Date().getTime(),
 6         dataType:"text",
 7         success: function(data){
 8             /*
 9             var str = ‘aabbazbbwwbbaa‘;
10             var arr =str.match(/.*bb/); //aabbazbbwwbb，贪婪的
11             console.log(‘1‘,arr);
12             var arr =str.match(/.*?bb/g); //aabb azbb wwbb 返回一个数组包含3个值，惰性的
13             console.log(‘2‘,arr);
14             */
15             //console.log(‘data‘,data);
16             var regEx;
17             var regEx1 = /<li class=‘dn.*‘ data-dn=‘7d1‘>(.|\n)*?<\/li>/gi;
18             var regEx2 = /<li class=‘dn.*‘ data-dn=‘7d2‘>(.|\n)*?<\/li>/gi;
19             var regEx3 = /<li class=‘dn.*‘ data-dn=‘7d3‘>(.|\n)*?<\/li>/gi;
20             var regEx4 = /<li class=‘dn.*‘ data-dn=‘7d4‘>(.|\n)*?<\/li>/gi;
21             var regEx5 = /<li class=‘dn.*‘ data-dn=‘7d5‘>(.|\n)*?<\/li>/gi;
22             for(i=1;i<6;i++){
23                 eval("regEx = regEx"+i);
24                 var r = data.match(regEx);
25                 //console.log(r);
26                 var dweek = r[0].match(/<h1>(.|\n)*?<\/h1>/gi);
27                 //console.log(dweek);
28                 var dday = r[0].match(/<h2>(.|\n)*?<\/h2>/gi);
29                 //console.log(dday);
30                 var dtq = r[0].match(/<p class="wea">(.|\n)*?<\/p>/gi);
31                 //console.log(dtq);
32                 var dtemp1 = r[0].match(/<p class="tem tem1">(.|\n)*?<\/p>/gmi);
33                 //console.log(dtemp1);
34                 var dtemp2 = r[0].match(/<p class="tem tem2">(.|\n)*?<\/p>/gmi);
35                 //console.log(dtemp2);
36                 var df = r[0].match(/<p class="win">(.|\n)*?<\/p>/gi);
37                 //console.log(‘df‘,df);
38                 var df2 = df[0].match(/<i>(.|\n)*?<\/i>/gi);
39                 //console.log(df2);
40                 var df1s,df1;
41                 if(df.length>0){
42                     df1s = df[0].match(/title=\"[^\"]*?\"/gi);
43                 }
44                 if(dweek!=null && 1<=dweek.length){
45                     //console.log(delTag(dweek[0]));
46                     $(‘.d‘+i+‘week‘).html(‘ ‘+delTag(dweek[0])+‘ ‘);
47                 }
48                 if(dday!=null && 1<=dday.length){
49                     //console.log(delTag(dday[0]));
50                     $(‘.d‘+i+‘day‘).html(‘ ‘+delTag(dday[0])+‘ ‘);
51                 }
52                 if(dtq!=null && 1<=dtq.length){
53                     //console.log(delTag(dtq[0]));
54                     $(‘.d‘+i+‘tq‘).html(‘ ‘+delTag(dtq[0])+‘ ‘);
55                     if(i==1){
56                         $(‘.d‘+i+‘bg‘).css({
57                         ‘background‘:‘url(tq/big/‘+changeToPic(delTag(dtq[0]),true)+‘.png)‘,
58                         ‘*background‘:‘none‘,
59                         ‘*filter‘:‘progid:DXImageTransform.Microsoft.AlphaImageLoader(src=tq/big/‘+changeToPic(delTag(dtq[0]),true)+‘.png)‘
60                         });
61                         key = changeToPic(delTag(dtq[0]),true); // 效果
62                     }else{
63                         $(‘.d‘+i+‘bg‘).css({
64                         ‘background‘:‘url(tq/‘+changeToPic(delTag(dtq[0]))+‘.png)‘,
65                         ‘*background‘:‘none‘,
66                         ‘*filter‘:‘progid:DXImageTransform.Microsoft.AlphaImageLoader(src=tq/‘+changeToPic(delTag(dtq[0]))+‘.png)‘
67                         });
68                     }
69                 }
70                 if(dtemp1!=null && 1<=dtemp1.length && 1<=dtemp1.length){
71                     //console.log(delTag(dtemp1[0]).replace(‘°C‘,‘‘),delTag(dtemp2[0]));
72                     $(‘.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])));
73                 }
74                 if(df1s!=null && 1<=df1s.length/2){
75                     df1 = df1s[0].substring(7,df1s[0].length-1);
76                     //console.log(df1);
77                 }
78                 if(df2!=null && 1<=df2.length){
79                     //console.log(delTag(df2[0]));
80                     $(‘.d‘+i+‘f‘).html(‘ ‘+(df1!=undefined?df1:‘‘)+delTag(df2[0])+‘ ‘);
81                 }
82                 if(key == 1 ){
83                     clearFlg();
84                     drawSunFlg = true;
85                     loadImg = 0;
86                     drawSun();
87                 }
88             }
89         }
90     });
91 }

 1     var charIndex = -1;
 2     var stringLength = 0;
 3     var inputText;
 4     function writeContent(init){
 5     if(init){
 6         inputText = document.getElementById(‘contentToWrite‘).innerHTML;
 7     }
 8         if(charIndex==-1){
 9             charIndex = 0;
10             stringLength = inputText.length;
11         }
12         var initString = document.getElementById(‘myContent‘).innerHTML;
13         initString = initString.replace(/<SPAN.*$/gi,"");
14         
15         var theChar = inputText.charAt(charIndex);
16            var nextFourChars = inputText.substr(charIndex,4);
17            if(nextFourChars==‘<BR>‘ || nextFourChars==‘<br>‘){
18                theChar  = ‘<BR>‘;
19                charIndex+=3;
20            }
21         charIndex = charIndex/1 +1;
22         $("#blink").remove();
23         $("#myContent").append(theChar+"<SPAN id=‘blink‘>|</SPAN>");
24         $("#myContent").scrollTop($("#myContent")[0].scrollHeight);
25         //windows.scrollTo(0,9999); //效果不好，应该使用jquery的append方法，然后再滚动到底部，这样画面不会有闪动
26 if(charIndex%2==1){
27              $(‘#blink‘).html("&nbsp;");
28         }else{
29              $(‘#blink‘).html(‘|‘);
30         }
31                 
32         if(charIndex<=stringLength){
33             setTimeout(‘writeContent(false)‘,50);
34         }else{
35             blinkSpan();
36         }  
37     }
38     function blinkSpan(){
39         if($(‘#blink‘).html()=="&nbsp;"){
40             $(‘#blink‘).html("|");
41         }else{
42             $(‘#blink‘).html("&nbsp;");
43         }
44         setTimeout(‘blinkSpan()‘,500);
45     }

 1 var message="敬请期待..." ;
 2 var n=0;
 3 function changeColor(){
 4     $($(".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)+")"});
 5     if(n>=$(".word").length){
 6         n=0;
 7     }else{
 8         n++;
 9     }
10 }
11 function start(c){
12     var content = "";
13     for(i=0;i<c.length;i++){
14         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>";
15     }
16     $("#myContent").append($(content));
17     setInterval("changeColor()",100);
18 }
19 start(message);