[JS,NodeJs]个人网站效果代码集合
上次发的个人网站效果代码集合：
代码集合：
1.彩色文字墙[鼠标涟漪痕迹]
2.彩色旋转圆环
[模仿http://www.moma.org/interactives/exhibitions/2012/centuryofthechild/中间部分效果，
那个走路的孩子技术很简单，和以前的春分秋分Google的Doodles类似，就没有模仿，换成一个头像]
3.视屏拼图
4.百度地图api简单应用集合
5.财经数据
6.天气预报
[nodejs搭建,express框架,nodejs简单页面抓取,JS正则,canvas光晕效果]
7.打字效果
8.自动换色彩色文字
---
上次个人主页的截图：[服务器网速慢，加载耗些时间；尚未做做浏览器判断和浏览器大小变化后的自适应]
主页地址：wangxinsheng.herokuapp.com
[主页：彩色文字墙，彩色旋转圆环]
[财经数据，之前是通过服务器去请求数据，现在直接由客户端请求数据]
[天气预报：PM2.5已经更新过，先看中国天气网的数据，没有在抓取美国大使馆的数据。尚未做地理判断和其他天气Canvas效果，只有光晕效果]
[简单打字效果]
[单html页面]
[百度地图api简单应用集合]
[视屏拼图：自己做的，canvas和video以及JS的集合效果]
[动态彩色文字]
---
单该能示例代码：
1.彩色文字墙[鼠标涟漪痕迹]：
js:
var bgCanvas;
$(function(){
var bgCanvas = new bgC();
bgCanvas.init(function(){
bgCanvas.doAnimate(bgCanvas);
});
});
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)"},
{"fill":"rgba(0,255,0,0.2)","stroke":"rgba(255,0,0,0.3)"}
],
this.parent = "body"//"#outDiv",
this.me;
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.showLines;
// 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 / linesAll;
for(i=0;i<linesAll;i++){
// 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.length;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.fill;
this.cC.strokeStyle = lines[i].color.stroke;
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),
'a':0.5,
'r':1
});
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.length;i++){
thisObj.circles[i].a -= thisObj.outter;
thisObj.circles[i].r += thisObj.bigger;
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 = window; }
$(control).bind(eventName, function () {
callBack.apply(scope, arguments);
});
}
}
下载示例：
http://download.csdn.net/detail/wangxsh42/8411845
---
2.彩色旋转圆环
html:
<style>
body{
margin:0;
overflow:hidden;
}
#outDiv{
position:relative;
top:0px;
left:0px;
margin:0;
height:430px;
width:100%;
overflow:hidden;
/*margin-top:30px;*/
}
#wheel-center{
background:transparent url("aaajpg.jpg") no-repeat center center;
width:340px;
height:340px;
position: absolute;
border-radius:170px;
left:50%;
top:50%;
margin-left: -170px;
margin-top: -170px;
/*-webkit-filter: blur(3px);*/
/*-webkit-filter: blur(1px);*/
}
#wheel-container-inner{
background:transparent url("gray.png") no-repeat center center;
width:430px;
height:430px;
position: absolute;
border-radius:215px;
left:50%;
top:50%;
margin-left: -215px;
margin-top: -215px;
}
.wheel-color-container{
width:430px;
height:430px;
position: absolute;
border-radius:215px;
left:50%;
top:50%;
margin-left: -215px;
margin-top: -215px;
/*background-position:125% 75%;*/
}
.wheel-color-orange{
background:transparent url("orange-right2.png") no-repeat;
background-position:100% top;
opacity:1;
transform:rotate(0deg); }
.wheel-color-green{
background:transparent url("green-right2.png") no-repeat;
background-position:100% top;
opacity:0;
transform:rotate(0deg); }
.wheel-color-purple{
background:transparent url("purple-right2.png") no-repeat;
background-position:100% top;
opacity:0;
transform:rotate(0deg); }
.wheel-color-marine{
background:transparent url("marine-right2.png") no-repeat;
background-position:100% top;
opacity:0;
transform:rotate(0deg); }
.wheel-color-red{
background:transparent url("red-right2.png") no-repeat;
background-position:100% top;
opacity:0;
transform:rotate(0deg); }
.wheel-color-blue{
background:transparent url("blue-right2.png") no-repeat;
background-position:100% top;
opacity:0;
transform:rotate(0deg); }
.wheel-color-gray{
background:transparent url("gray-right2.png") no-repeat;
background-position:100% top;
opacity:0;
transform:rotate(0deg); } .menu-tooltip-container{
width:30px;
height:30px;
position: absolute;
opacity:1;
left:50%;
top:0px;
margin-left: -15px;
margin-top: 0px;
} .menu-tooltip-1{
left:50%;
top:50%;
margin-left: -15px;
margin-top: -255px;
/*background:url('1.png') no-repeat center center;*/
}
.menu-tooltip-2{
left:50%;
top:50%;
margin-left: 180px;
margin-top: -165px;
/*background:url('2.png') no-repeat center center;*/
}
.menu-tooltip-3{
left:50%;
top:50%;
margin-left: 225px;
margin-top: 40px;
/*background:url('3.png') no-repeat center center;*/
}
.menu-tooltip-4{
left:50%;
top:50%;
margin-left: 120px;
margin-top: 200px;
/*background:url('4.png') no-repeat center center;*/
}
.menu-tooltip-5{
left:50%;
top:50%;
margin-left: -140px;
margin-top: 200px;
/*background:url('5.png') no-repeat center center;*/
}
.menu-tooltip-6{
left:50%;
top:50%;
margin-left: -255px;
margin-top: 40px;
/*background:url('6.png') no-repeat center center;*/
}
.menu-tooltip-7{
left:50%;
top:50%;
margin-left: -210px;
margin-top: -165px;
/*background:url('7.png') no-repeat center center;*/
} </style>
<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>
</div>
js:
// calc center Point
var cenPoint = {x:0,y:0};
// cur mouse point
var curPoint = {x:0,y:0};
// curAngle
var curAngle = 0;
// 颜色数组
var color=[
{
min:235,
max:270,
name:"orange"
},
{
min:170,
max:235,
name:"green"
},
{
min:110,
max:170,
name:"purple"
},
{
min:70,
max:110,
name:"marine"
},
{
min:20,
max:70,
name:"red"
},
{
min:330,
max:360,
name:"blue"
},
{
min:0,
max:20,
name:"blue"
},
{
min:270,
max:330,
name:"gray"
}
];
var dataPot={
menuMarine : {
imgWay:"add",
imgW:30,
imgH:30,
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",
imgW:30,
imgH:30,
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",
imgW:30,
imgH:30,
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",
imgW:30,
imgH:30,
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",
imgW:30,
imgH:30,
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",
imgW:30,
imgH:30,
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",
imgW:30,
imgH:30,
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"
} };
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().left;
cenPoint.y = $("#outDiv").height() * 0.5 + $("#outDiv").offset().top; // init mouse point
curPoint.x = cenPoint.x;
curPoint.y = cenPoint.y; // animation test
TweenLite.to(
$(".wheel-color-container"),
2,
{
css: {
rotation:360
},
ease:Cubic.easeOut,
overwrite: true
}
);
// bind mousemove event
document.addEventListener("mousemove", docOnMM);
} /*
* doc mousemove event
*/
function docOnMM(event){
// set curPoint
curPoint.x = event.pageX;
curPoint.y = event.pageY;
// repaint the center circle
paintCC();
} /*
* calc angle
* 当前的计算不好，太字面了
* 有时间的话，先改变坐标体系，这样看着更舒服吧
*/
function calcAngle(){
// 角度
var angle;
// 象限差额角度
var addJD = 0;
// 是否需要进行角度计算
var calcJDFlg = false;
// 象限判断临时变量 xx:1,2,3,4
var xxX,xxY,xx; // 象限判断
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;
}else{
angle = 90;
}
}else if(xxY==0){
if(xxX>0){
angle = 0;
}else{
angle = 180;
}
}else{
calcJDFlg = true;
if(xxX>0){
if(xxY>0){
addJD = 270;
xx = 4;
}else{
addJD = 0;
xx = 1;
}
}else{
if(xxY>0){
addJD = 180;
xx = 3;
}else{
addJD = 90;
xx = 2;
}
}
} // 计算锐角
if(calcJDFlg){
// calc ruiJiao
var duiBian,linBian;
var a = cenPoint;
var b = curPoint;
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;
}else{
angle = 90 + addJD - jiaoDu;
}
} return angle;
} /*
* paint the center circle;
*/
function paintCC(){
var angle = calcAngle();
var picName = "";
if(angle=="NaN"){
// 圆点
}else{
// 头像
TweenLite.to(
$("#wheel-center"),
0.3,
{
css: {
rotationY: (angle>270 || angle<90)? 180: 0
}
,onComplete:function(){
TweenLite.to(
$("#wheel-center"),
0.5,
{
css:{
shortRotation: -1*((angle>270 || angle<90)? (angle+20): (angle-180-20))
}
}
);
}
}
);
// 判断显示颜色种别
color.forEach(function(item){
if(angle>=item.min && angle<item.max){
picName = item.name; TweenLite.to(
$(".wheel-color-"+item.name),
0.5,
{
css: {
opacity: 1
}
}
);
}
});
color.forEach(function(item){
if(picName!=item.name){
TweenLite.to(
$(".wheel-color-"+item.name),
0.3,
{
css: {
opacity: 0
}
}
);
}
}); // 旋转
TweenLite.to(
$(".wheel-color-container"),
1.5,
{
css: {
shortRotation: angle * -1
},
ease:Back.easeOut//Cubic
}
);
}
}
下载示例：
http://download.csdn.net/detail/wangxsh42/8411843
---
3.视屏拼图
以前博文：http://www.cnblogs.com/wangxinsheng/articles/3800710.html
由于浏览器升级后对video标签支持的一些小变更，如果不能播放，代码内需要在加载后添加播放操作
下载：http://download.csdn.net/detail/wangxsh42/7530147
---
4.百度地图api简单应用集合
百度地图算然好用，但是地图上面的点[自带的地点对象]点击后弹出的窗口[路线查询，周边查询等]会弹出新页面，到他自己的网站去
用的一定不太爽，我就试着把那些东西给替换了。。。应该不算侵权把，毕竟那个[© 2015 Baidu]还留着。。。
百度地图key可以免费申请
代码：
js代码段
var mapClick = {'lng':'','lat':''};
var map;
$(function(){
$('#opp').css('left',$('#allmap').offset().left+"px");
$('#result').hide();
$("#opp").height(50);
loadJScript(); //异步加载地图
})
function myFun(result){
var cityName = result.name;
//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.map.baidu.com/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.map.baidu.com/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);
}else{
$("#result").hide();
$("#opp").height(50);
}
});
var ac1 = new BMap.Autocomplete( //建立一个自动完成的对象
{"input" : "wxsSearch"
,"location" : map
});
ac1.addEventListener("onconfirm", function(e) { //鼠标点击下拉列表后的事件
var _value = e.item.value;
myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
//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(), {
title : $($(thisObj).find(".liName")[0]).html(), //标题
//width : 290, //宽度
//height : 105, //高度
panel : "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: 22px; line-height: 22px; padding: 0px; margin: 0px; border: 1px solid rgb(165, 172, 178); width: 85px;">
$("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.value;
myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
//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 = "步行";
}else{
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:pointer;"+
$(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("显示结果");
}else{
$("#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);
}
}else{
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);
}
}
下载地址：
http://download.csdn.net/detail/wangxsh42/8412387
5. 财经数据
http://www.cnblogs.com/wangxinsheng/p/4260726.html
代码下载：
http://files.cnblogs.com/files/wangxinsheng/financial.rar
可以做个tab，配合财经新闻
http://www.cnblogs.com/wangxinsheng/p/4251228.html
6.天气预报
[nodejs搭建,express框架,nodejs简单页面抓取,JS正则,canvas光晕效果]
在线：http://wangxinsheng.herokuapp.com/weather [heroku服务器访问国内好像很慢。。。所以抓取页面也特别慢]
效果图：
1)windows下nodejs搭建很简单
到nodeJS官网下载安装包，双击安装
会自动往path里追加node命令路径
nodejs入门：http://www.cnblogs.com/wangxinsheng/articles/4056086.html
2)关于npm
http://www.cnblogs.com/wangxinsheng/articles/4056877.html
如果遇到npm安装时报错，说什么npm不存在
只要在提示路径下新建npm文件夹就可以了
3)express安装：
npm下载express
用express命令安装即可
[使用 express -e 命令创建 express 项目,不同于3.x，4.x需要再安装express-generator]
目录结构会一起生成
4)express页面抓取代码片段
由于天气预报我是直接从网页上抓取[get方法]来的，需要下面代码：
routes/spider.js 发送请求与获取数据
var http = require('http');
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)
{
g_data+=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 路由+请求参数设置 片段
var spider = require('./spider');
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:"")
op={
host:pathStr.match(/http[s]?:\/\/[^\\|\/]*/)[0].replace(/http[s]?:\/\//,''), //使用vpn代理时，是代理地址
port:80,//使用vpn代理时，是代理端口
method:'GET',
path:pathStr,
headers:{
'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';
}else{
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%2Fwww.baidu.com%2Fimg%2Fbdlogo.png" />'
else{
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片段[使用正则匹配]：
function getData(){
var key = 1;
$.ajax({
type: "GET",
url: "/req/getT/text/http:%2F%2Fwww.weather.com.cn%2Fweather%2F101020100.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>/gi;
var regEx2 = /<li class='dn.*' data-dn='7d2'>(.|\n)*?<\/li>/gi;
var regEx3 = /<li class='dn.*' data-dn='7d3'>(.|\n)*?<\/li>/gi;
var regEx4 = /<li class='dn.*' data-dn='7d4'>(.|\n)*?<\/li>/gi;
var regEx5 = /<li class='dn.*' data-dn='7d5'>(.|\n)*?<\/li>/gi;
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])+' ');
if(i==1){
$('.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); // 效果
}else{
$('.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是直接用百度的
代码片段下载：
http://download.csdn.net/detail/wangxsh42/8412449
7.打字效果
以前看过做过记录，这回真正用时，发现以前的不太好用，还是需要稍稍改改
效果图：
代码段：
var charIndex = -1;
var stringLength = 0;
var inputText;
function writeContent(init){
if(init){
inputText = document.getElementById('contentToWrite').innerHTML;
}
if(charIndex==-1){
charIndex = 0;
stringLength = inputText.length;
}
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>'){
theChar = '<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方法，然后再滚动到底部，这样画面不会有闪动
if(charIndex%2==1){
$('#blink').html(" ");
}else{
$('#blink').html('|');
} if(charIndex<=stringLength){
setTimeout('writeContent(false)',50);
}else{
blinkSpan();
}
}
function blinkSpan(){
if($('#blink').html()==" "){
$('#blink').html("|");
}else{
$('#blink').html(" ");
}
setTimeout('blinkSpan()',500);
}
完整下载地址：
http://download.csdn.net/detail/wangxsh42/8412479
8.自动换色彩色文字
在线：http://wangxinsheng.herokuapp.com/wait
效果
网上搜到的不是太喜欢，还是得自己改改，加个阴影，加多点颜色，再加个动态
片段：[还是做成对象比较好。。。]
var message="敬请期待..." ;
var n=0;
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){
n=0;
}else{
n++;
}
}
function start(c){
var content = "";
for(i=0;i<c.length;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);
}
start(message);
下载地址：
http://download.csdn.net/detail/wangxsh42/8412507
----
突然觉得怎么弄了那么个简单的主页。。。
日志博客用[fff]那个样子(我已经看完他的代码了，主页其实一点不难)
其余部分继续模仿[moma.org]那个样子
这样改多好
果然还是比较喜欢有创造性的工作
现在的工作。。。哎。。。
[JS,NodeJs]个人网站效果代码集合的更多相关文章
- Nodejs学习笔记（七）--- Node.js + Express 构建网站简单示例
目录 前言 新建项目.建立数据库以及其它准备工作 新建express + ejs 项目:sampleEjs 创建数据库 修改package.json文件,安装session和mysql模块 样式和JQ ...
- Nodejs学习笔记（六）--- Node.js + Express 构建网站预备知识
目录 前言 新建express项目并自定义路由规则 如何提取页面中的公共部分? 如何提交表单并接收参数? GET 方式 POST 方式 如何字符串加密? 如何使用session? 如何使用cookie ...
- Nodejs学习笔记（七）—Node.js + Express 构建网站简单示例
前言 上一篇学习了一些构建网站会用到的一些知识点:https://www.cnblogs.com/flyingeagle/p/9192936.html 这一篇主要结合前面讲到的知识,去构建一个较为完整 ...
- Nodejs学习笔记（六）—Node.js + Express 构建网站预备知识
前言 前面经过五篇Node.js的学习,基本可以开始动手构建一个网站应用了,先用这一篇了解一些构建网站的知识! 主要是些基础的东西... 如何去创建路由规则.如何去提交表单并接收表单项的值.如何去给密 ...
- JS组件Bootstrap实现弹出框和提示框效果代码
这篇文章主要介绍了JS组件Bootstrap实现弹出框和提示框效果代码,对弹出框和提示框感兴趣的小伙伴们可以参考一下 前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编 ...
- 【干货】教你如何利用fullPage.js以及move.js插件打造高端大气的网站效果！
前言: 如今我们经常能见到全屏网站,尤其是国外网站.这些网站用几幅很大的图片或色块做背景,再添加一些简单的内容,显得格外的高端大气上档次. 在学习过jQuery插件之后,才发现之前的很多网站特效完全可 ...
- Nodejs学习笔记（十五）--- Node.js + Koa2 构建网站简单示例
目录 前言 搭建项目及其它准备工作 创建数据库 创建Koa2项目 安装项目其它需要包 清除冗余文件并重新规划项目目录 配置文件 规划示例路由,并新建相关文件 实现数据访问和业务逻辑相关方法 编写mys ...
- [转]Nodejs学习笔记（十五）--- Node.js + Koa2 构建网站简单示例
本文转自:https://www.cnblogs.com/zhongweiv/p/nodejs_koa2_webapp.html 目录 前言 搭建项目及其它准备工作 创建数据库 创建Koa2项目 安装 ...
- Nodejs学习笔记（十五）—Node.js + Koa2 构建网站简单示例
前言 前面一有写到一篇Node.js+Express构建网站简单示例:http://www.cnblogs.com/zhongweiv/p/nodejs_express_webapp.html 这篇还 ...
随机推荐
- 超微 X9DRL-iF 服务器主板简介 BIOS相关图解
超微 X9DRL-iF 服务器主板简介 BIOS相关图解 板载串口阵列相关简介 网烁信息805 发布时间:2012-6-15 21:10:09 浏览数:2745 随着Intel E5至强的 ...
- 使用 AFNetworking 进行 XML 和 JSON 数据请求
(1)XML 数据请求 使用 AFNetworking 中的 AFHTTPRequestOperation 和 AFXMLParserResponseSerializer,另外结合第三方框架 XMLD ...
- Ubuntu主题美化--使用WPS风格
五一就这么过去了,我也没有出去玩,一个人闲的蛋疼,无聊就把ubuntu美化一下. 闲话不多说,先看效果: 壁纸是我自己制作的的,如果喜欢另存一下下面这张图设置成背景就可以了,分辨率是1366x768. ...
- LDPC编译码基本原理
LDPC编译码基本原理 学习笔记 V1.1 2015/02/18 LDPC编译码基本原理 概述 本文是个人针对LDPC的学习笔记,主要针对LDPC译码算法做了简要的总结.该版本主要致力 ...
- ruby -- 进阶学习（四）paperclip上传中文命名图片
Paperclip -- 上传中文命名图片 使用Paperclip和ImageMagick插件来处理图片的时候,上传非中文命名的图片时,只要把配置写好就没问题 if you need to ...
- Device eth0 does not seem to be present, delaying initialization.转载
昨天在vm里面克隆了个虚拟机,克隆之后,启动了网卡起不来,已启动就报 Device eth0 does not seem to be present, delaying initialization. ...
- 【转载】SHELL字符串处理技巧（${}、##、%%）
转载自:http://www.cnblogs.com/pmars/archive/2013/02/17/2914444.html 在SHELL编程中,经常要处理一些字符串变量.比如,计算长度啊.截取子 ...
- Thrift在Windows及Linux平台下的安装和使用示例
本文章也同时发表在个人博客Thrift在Windows及Linux平台下的安装和使用示例上. thrift介绍 Apache Thrift 是 Facebook 实现的一种高效的.支持多种编程语言的R ...
- 继续谈论XSS
这篇文章基于上篇谈论XSS ,想说下自己工作过程中遇到的xss的问题. 易出现XSS的场景 1 jsonp 说说jsonp 中也有说过,jsonp其实是很容易出现安全问题的.由于jsonp的callb ...
- 转载：全球首个微信小程序（应用号）开发教程！通宵吐血赶稿，每日更新！
微信应用号(小程序,「应用号」的新称呼)终于来了! 目前还处于内测阶段,微信只邀请了部分企业参与封测.想必大家都关心应用号的最终形态到底是什么样子?怎样将一个「服务号」改造成为「小程序」? 我们暂时以 ...