技术男用来对妹子表白的百度首页_Javascript教程-查字典教程网

技术男用来对妹子表白的百度首页

摘要：有一天突发奇想，我要是能用我学的程序员技术给女朋友来表白的话，那岂不是高端大气上档次。想到就立马去做，首先想到的是更改hosts文件，将浏览...

有一天突发奇想，我要是能用我学的程序员技术给女朋友来表白的话，那岂不是高端大气上档次。

想到就立马去做，首先想到的是更改hosts文件，将浏览器的主页更改为自己设计的网页。

国内的女同学一般用百度首页，于是我就自己仿做了一个百度首页，具体的效果如下面：

技术男用来对妹子表白的百度首页1

是不是看起来高大上，当然最后我失败了，程序员怎么可能会有女朋友呢？

但是为了广大屌丝朋友的福利，我现在将这些代码给贴出来，就算有一个人成功了，我也是深藏功与名。

其中更改hosts文件的步骤请自行百度，这里为止不够就不详解了。

自己写的百度源码：

复制代码代码如下:

<style>

html,body{height:100%}html{overflow-y:auto}#wrapper{position:relative;_position:;min-height:100%}#content{padding-bottom:100px;text-align:center}#ftCon{height:100px;position:absolute;bottom:44px;text-align:center;width:100%;margin:0

auto;z-index:0;overflow:hidden}#ftConw{width:720px;margin:0 auto}

body{font:12px arial;text-align:left;background:#fff}

body,p,form,ul,li{margin:0;padding:0;list-style:none}

body,form,#fm{position:relative}td{text-align:left}img{border:0}a{color:#00c}a:active{color:#f60}

.bg{background-image:url(http://s1.bdstatic.com/r/www/cache/static/global/img/icons_aea40f46.png);background-repeat:no-repeat;_background-image:url(http://s1.bdstatic.com/r/www/cache/static/global/img/icons_cfa0bb3b.gif)}

.c-icon{display:inline-block;width:14px;height:14px;vertical-align:text-bottom;font-style:normal;overflow:hidden;background:url(http://s1.bdstatic.com/r/www/cache/static/global/img/icons_aea40f46.png)no-repeat 0 0;_background-image:url(http://s1.bdstatic.com/r/www/cache/static/global/img/icons_cfa0bb3b.gif)}.c-icon-triangle-down-blue{background-position:-480px

-24px}.c-icon-chevron-unfold2{background-position:-504px -24px}#u{color:#999;padding:4px

10px 5px 0;text-align:right}#u a{margin:0 5px}#u .reg{margin:0}#m{width:720px;margin:0

auto}#nv a,#nv b,.btn,#lk{font-size:14px}#fm{padding-left:130px;text-align:left;z-index:1}input{border:0;padding:0}#nv{height:19px;font-size:16px;margin:0

0 4px;text-align:left;text-indent:137px}.s_ipt_wr{width:468px;height:30px;display:inline-block;margin-right:5px;background-position:0

-288px;border:1px solid #b6b6b6;border-color:#9a9a9a #cdcdcd #cdcdcd #9a9a9a;vertical-align:top}.s_ipt{width:458px;height:22px;font:14px/22px

arial;margin:5px 0 0 7px;background:#fff;outline:0;-webkit-appearance:none}.s_btn{width:95px;height:32px;padding-top:2px9;font-size:14px;background-color:#ddd;background-position:0

-240px;cursor:pointer}.s_btn_h{background-position:-240px -240px}.s_btn_wr{width:97px;height:34px;display:inline-block;background-position:-120px

-240px;*position:relative;z-index:0;vertical-align:top}#lg img{vertical-align:top;margin-bottom:3px}#lk{margin:33px

0}#lk span{font:14px "宋体"}#lm{height:60px;line-height:15px}#lh{margin:16px

0 5px;word-spacing:3px}.tools{position:absolute;top:-4px;*top:10px;right:7px}#mHolder{width:62px;position:relative;z-index:296;display:none}#mCon{height:18px;line-height:18px;position:absolute;cursor:pointer}#mCon

span{color:#00c;cursor:default;display:block}#mCon .hw{text-decoration:underline;cursor:pointer;display:inline-block}#mCon

.pinyin{display:inline-block}#mCon .c-icon-chevron-unfold2{margin-left:5px}#mMenu

a{width:100%;height:100%;display:block;line-height:22px;text-indent:6px;text-decoration:none;filter:none9}#mMenu,#user

ul{box-shadow:1px 1px 2px #ccc;-moz-box-shadow:1px 1px 2px #ccc;-webkit-box-shadow:1px

1px 2px #ccc;filter:progid:DXImageTransform.Microsoft.Shadow(Strength=2,Direction=135,Color="#cccccc")9}#mMenu{width:56px;border:1px

solid #9b9b9b;list-style:none;position:absolute;right:27px;top:28px;display:none;background:#fff}#mMenu

a:hover{background:#ebebeb}#mMenu .ln{height:1px;background:#ebebeb;overflow:hidden;font-size:1px;line-height:1px;margin-top:-1px}#cp,#cp

a{color:#666}#seth{display:none;background:url(#default#homepage)}#setf{display:none}#sekj{margin-left:14px}#shouji{margin-right:14px}#u

.last{margin-right:0}#u .un{font-weight:bold;margin-right:5px}#u ul{width:100%;background:#fff;border:1px

solid #9b9b9b}#u li{height:25px}#u li a{width:100%;height:25px;line-height:25px;display:block;text-align:left;text-decoration:none;text-indent:6px;margin:0;filter:none9}#u

li a:hover{background:#ebebeb}#u li.nl{border-top:1px solid #ebebeb}#user_center{position:relative;display:inline-block}#user_center

.user_center_btn{margin-right:5px}.userMenu{width:64px;position:absolute;right:7px;_right:2px;top:15px;top:14px9;*top:15px;padding-top:4px;display:none;*background:#fff}#user{position:relative;display:inline-block}

</style>

<style>

我的logo样式

#m{position: relative;padding: 50px 0 0 0;}

#newYearEve{height:15px;position: absolute;top:250px;left:130px;width:510px;}

#newYearEve li{cursor: pointer;width:20px;height:15px;margin:0 21px 0 0;float: left;}

#newYearEve .icon-newyear0{background: url("http://files.jb51.net/file_images/article/201407/mylove.png") no-repeat center center;}

#newYearEve .month-next{display: none!important;}

#newYearEve .icon-newyear1{background: url("http://files.jb51.net/file_images/article/201407/mylove01.png") no-repeat center center;}

#newYearEve li:hover{background: url("http://files.jb51.net/file_images/article/201407/mylove.gif") no-repeat -0 0; }

#m{position: relative;}

#play{position: absolute;top:135px;left:348px;width:25px;height:25px;cursor: pointer;}

#newYearEve .icon-newyear2,#newYearEve .icon-newyear1:hover{background: url("http://files.jb51.net/file_images/article/201407/mylove01.png") no-repeat center center;}

#newYearKw {color:#e203a9;position:absolute;top:212px;left:135px;width:300px;height:20px;color:#897883;z-index:100;font-family: "微软雅黑";text-align:left;font-weight: 700;font-size: 16px;overflow: hidden;}

#newYearKw i,#newYearKw img{font-style: normal;position:absolute;width:20px;height:20px;top:0;}

#newYearKw .img01{left:0px;}

#newYearKw .img02{left:180px;}

#newYearKw .c1{color:#e203a9;left:20px;}

#newYearKw .c2{color:#e203a9;left:40px;}

#newYearKw .c3{color:#b60175;left:60px;}

#newYearKw .c4{color:#b60175;left:80px;}

#newYearKw .c5{color:#f460af;left:100px;}

#newYearKw .c6{color:#f460af;left:120px;}

#newYearKw .c7{color:#fd98a5;left:140px;}

#newYearKw .c8{color:#fec8db;left:160px;}

#newYearKw .c9{color:#fec8db;left:180px;}

#newYearKw .c11{color:#fec8db;}

#newYearKw .c12{color:#fec8db;}

#newYearKw .c13{color:#fec8db;}

#newYearKw .c14{color:#fec8db;}

.word-box{position:relative;width:300px;height:20px;}

</style>

</p>

新闻

</a>

<b>

网页

</b>

贴吧

</a>

知道

</a>

音乐

</a>

图片

</a>

视频

</a>

地图

</a>

</p>

<span>

</span>

<span>

</span>

</div>

</form>

<span>

<span>

输入法

</span>

</div>

</span>

</div>

<div>

</div>

var newYearEve = newYearEve||{};

newYearEve.DOM = document;

newYearEve.box=newYearEve.DOM.getElementById("newYearEve");

newYearEve.kw=newYearEve.DOM.getElementById("kw");

newYearEve.newYearKw=newYearEve.DOM.getElementById("newYearKw");

//newYearEve.logo=newYearEve.DOM.getElementById("lg");

//newYearEve.playDOM=newYearEve.DOM.getElementById("play");

newYearEve.num=-1;

newYearEve.time=0;

newYearEve.wordWidth = 300;

newYearEve.wordW = 0;

newYearEve.newDay=false;

newYearEve.dataArr = [{

keyword : "2012年5月18日第一次见面你给我的感觉有些特别"

}, {

keyword : "2012年6月5日我们在一起了,从此这个平淡的日子对我们有了特殊的意义"

}, {

keyword : "2012年8月20日第一次吵架让你伤心了对不起"

}, {

keyword : "2012年10月1日香格里拉属于我们的第一次旅行"

}, {

keyword : "2012年12月24日平安夜我们一起做了棵圣诞树"

}, {

keyword : "2013年2月14日第一个情人节虽然俗气还是送了玫瑰给你"

}, {

keyword : "2013年3月17日陪你过的第一个生日"

}, {

keyword : "2013年6月1日一起过儿童节也很开心"

}, {

keyword : "2013年6月5日一周年纪念日感谢有你陪在身边的一年"

}, {

keyword : "2013年8月4日带你去吃我的家乡菜，看你吃得好开心"

}, {

keyword : "2013年9月19日中秋节第一次见你爸妈有点紧张"

}, {

keyword : "2013年12月31日希望以后每一次都是我陪你跨年。。。"

}

];

newYearEve.createHtml = function(num){

var h = '';

var n = 1;

num=num-0;

if(num<n+1){

switch(num){

case 0:

h='<li i="0">';

break;

case 1:

h='<li i="0"></li><li i="1"></li>';

break;

}

}else{

for(var i = 0 ;i < num-n;i++){

h+='<li i="'+i+'">';

}

for(var i = num-n;i < num+1;i++ ){

var c = 'icon-newyear'+(i+n-num);

h+='<li+c+'" i="'+i+'">';

}

if( newYearEve.box){

newYearEve.box.innerHTML=h;

}

newYearEve.kw.value= newYearEve.dataArr[num].keyword;

}

newYearEve.animate = function () {

if (newYearEve.num < 11) {

newYearEve.num++;

newYearEve.createHtml(this.num);

}

newYearEve.time = setTimeout(function () {

if (newYearEve.num < 11) {

newYearEve.animate();

} else {

newYearEve.kw.value="";

newYearEve.box.innerHTML="";

newYearEve.wordAnimate();

}

}, 3000);

}

newYearEve.wordAnimate = function(){

if(newYearEve.wordW<newYearEve.wordWidth){

newYearEve.wordW=newYearEve.wordW+1;

newYearEve.newYearKw.style.width=newYearEve.wordW+"px";

setTimeout( function(){

newYearEve.wordAnimate();},16);

}else{

newYearEve.rePlay();

}

newYearEve.rePlay = function(num){

newYearEve.time=setTimeout(function(){

newYearEve.wordW=0;

newYearEve.newYearKw.style.width=newYearEve.wordW+"px";

newYearEve.kw.value="";

newYearEve.num=-1;

newYearEve.box.innerHTML="";

newYearEve.animate();

},3000);

}

newYearEve.box.onclick=function(event){

var e = event.target||event.srcElement;

var i = e.getAttribute("i");

if(i!==null){

newYearEve.newYearKw.style.width="0px";

newYearEve.kw.value= newYearEve.dataArr[i].keyword;

newYearEve.clickNum = i;

newYearEve.createHtml(newYearEve.clickNum);

clearTimeout( newYearEve.time);

newYearEve.time=setTimeout(function(){

//newYearEve.createHtml(newYearEve.num);

newYearEve.num=newYearEve.num==11? 10:newYearEve.num;

newYearEve.animate();

//newYearEve.kw.value= newYearEve.user||"";

},3000)

}

newYearEve.animate();

//newYearEve.wordAnimate();

// ]]></script>

【技术男用来对妹子表白的百度首页】相关文章：

★ 详解AngularJS中的http拦截

★ Javascript 事件捕获的备忘(setCapture,captureEvents)

★ jquery实现图片左右切换的方法

★ js动态创建及移除div的方法

★ javascript用函数实现对象的方法

★ JS实现简单路由器功能的方法

★ JQuery中属性过滤选择器用法

★ Js的Array数组对象详解

★ js实现鼠标划过给div加透明度的方法

★ JS验证IP，子网掩码，网关和MAC的方法

上一篇： JS中使用sort结合localeCompare实现中文排序实例

下一篇： Extjs根据条件设置表格某行背景色示例

学习工具