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


Posted in Javascript onJuly 23, 2014

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

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

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

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

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

但是为了广大?潘颗笥训母@??蚁衷诮?庑┐?敫??隼矗?退阌幸桓鋈顺晒α耍?乙彩巧畈毓τ朊??/p>

其中更改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:2px\9;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:none\9}#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:none\9}#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:14px\9;*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("//img.jbzj.com/file_images/article/201407/mylove.png") no-repeat center center;}

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

    #newYearEve .icon-newyear1{background: url("//img.jbzj.com/file_images/article/201407/mylove01.png") no-repeat center center;}

    #newYearEve li:hover{background: url("//img.jbzj.com/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("//img.jbzj.com/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>

<div id="content">

<div id="m">

 <p id="lg">

  <img src="//img.jbzj.com/file_images/article/201407/mylove_logo.png" width="270" height="129"/>

 </p>

 <p id="nv">

  <a href="http://news.baidu.com/" rel="external nofollow" name="tj_news">

   新 闻

  </a>

   

  <b>

   网 页

  </b>

   

  <a href="http://tieba.baidu.com/" rel="external nofollow" name="tj_tieba">

   贴 吧

  </a>

   

  <a href="http://zhidao.baidu.com/" rel="external nofollow" name="tj_zhidao">

   知 道

  </a>

   

  <a href="http://music.baidu.com/" rel="external nofollow" name="tj_mp3">

   音 乐

  </a>

   

  <a href="http://image.baidu.com/" rel="external nofollow" name="tj_img">

   图 片

  </a>

   

  <a href="http://v.baidu.com/" rel="external nofollow" name="tj_video">

   视 频

  </a>

   

  <a href="http://map.baidu.com/" rel="external nofollow" name="tj_map">

   地 图

  </a>

 </p>

 <div id="fm">

  <form name="f" action="http://www.baidu.com/s" target="_blank">

   <span class="bg s_ipt_wr">

    <input type="text" name="wd" id="kw" maxlength="100" class="s_ipt" autocomplete="off"/>

   </span>

   <input type="hidden" name="rsv_bp" value="0"/>

   <input type="hidden" name="ch" value=""/>

   <input type="hidden" name="tn" value="sitehao123"/>

   <input type="hidden" name="bar" value=""/>

   <input type="hidden" name="rsv_spt" value="3"/>

   <input type="hidden" name="ie" value="utf-8"/>

   <span class="bg s_btn_wr">

    <input type="submit" value="百度一下" id="su" class="bg s_btn" onmousedown="this.className='bg s_btn s_btn_h'" onmouseout="this.className='bg s_btn'"/>

   </span>

   <div id="sd_1386659528033" style="display: none;">

   </div>

  </form>

  <span class="tools">

   <span id="mHolder">

    <div id="mCon">

     <span>

      输入法

     </span>

    </div>

   </span>

  </span>

 </div>

 <ul class="logo-new-year" id="newYearEve"><li class="icon-newyear0" i="0"></li><li class="icon-newyear1" i="1"></li></ul>

    <div id="play" style="display:none;"></div>

 <div id="newYearKw" style="width: 0px;">

 <div class="word-box">

 <img src="//img.jbzj.com/file_images/article/201407/mylove.gif" class="img01"/>

  <i class="c1">亲</i>

  <i class="c2">爱</i>

  <i class="c3">的</i>

  <i class="c4">,</i>

  <i class="c5">嫁</i>

  <i class="c6">给</i>

  <i class="c7">我</i>

  <i class="c8">吧</i>

  <img src="//img.jbzj.com/file_images/article/201407/mylove.gif" class="img02"/>

 </div>

 </div>

</div>

</div>

<script type="text/javascript">//< ![CDATA[

    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 class="icon-newyear2" i="0">';

                    break;

                case 1:

                    h='<li class="icon-newyear0" i="0"></li><li class="icon-newyear1" i="1"></li>';

                    break;

            }

        }else{

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

                h+='<li class="icon-no" i="'+i+'">';

            }

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

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

                h+='<li class="'+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>

Javascript 相关文章推荐
强制设为首页代码
Jun 19 Javascript
Javascript客户端脚本的设计和应用
Aug 21 Javascript
JavaScript基础篇之变量作用域、传值、传址的简单介绍与实例
Jun 29 Javascript
js实现window.open不被拦截的解决方法汇总
Oct 30 Javascript
IE6兼容透明背景图片及解决方案
Aug 19 Javascript
为何JS操作的href都是javascript:void(0);呢
Nov 12 Javascript
9个让JavaScript调试更简单的Console命令
Nov 14 Javascript
vue-i18n结合Element-ui的配置方法
May 20 Javascript
kafka调试中遇到Connection to node -1 could not be established. Broker may not be available.
Sep 17 Javascript
vue实现购物车列表
Jun 30 Javascript
Vue使用预渲染代替SSR的方法
Jul 02 Javascript
javascript this指向相关问题及改变方法
Nov 19 Javascript
JS中使用sort结合localeCompare实现中文排序实例
Jul 23 #Javascript
JS在IE下缺少标识符的错误
Jul 23 #Javascript
教你如何在 Javascript 文件里使用 .Net MVC Razor 语法
Jul 23 #Javascript
js监控IE火狐浏览器关闭、刷新、回退、前进事件
Jul 23 #Javascript
Javascript的&amp;&amp;和||的另类用法
Jul 23 #Javascript
jQuery获取节点和子节点文本的方法
Jul 22 #Javascript
jQuery打印图片pdf、txt示例代码
Jul 22 #Javascript
You might like
分页详解 从此分页无忧(PHP+mysql)
2007/11/23 PHP
mysql时区问题
2008/03/26 PHP
php GeoIP的使用教程
2011/03/09 PHP
PHP中is_file()函数使用指南
2015/05/08 PHP
PHPStudy下如何为Apache安装SSL证书的方法步骤
2019/01/23 PHP
php设计模式之状态模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
查询绑定数据岛的表格中的文本并修改显示方式的js代码
2009/12/15 Javascript
打造基于jQuery的高性能TreeView(asp.net)
2011/02/23 Javascript
js style动态设置table高度
2014/10/21 Javascript
jQuery提示效果代码分享
2014/11/20 Javascript
jquery动态改变div宽度和高度
2015/02/09 Javascript
详解Js中的模块化是如何实现的
2017/10/18 Javascript
Angular项目从新建、打包到nginx部署全过程记录
2017/12/09 Javascript
VSCode中如何利用d.ts文件进行js智能提示
2018/04/13 Javascript
JavaScript实现创建自定义对象的常用方式总结
2018/07/09 Javascript
JavaScript设计模式之享元模式实例详解
2019/01/17 Javascript
vue 项目 iOS WKWebView 加载
2019/04/17 Javascript
ES6学习笔记之let与const用法实例分析
2020/01/22 Javascript
JS指定音频audio在某个时间点进行播放
2020/11/28 Javascript
[04:56]经典回顾:前Ehome 与 前LGD
2015/02/26 DOTA
Python守护进程用法实例分析
2015/06/04 Python
python数据结构之图深度优先和广度优先实例详解
2015/07/08 Python
Python+Selenium自动化实现分页(pagination)处理
2017/03/31 Python
socket + select 完成伪并发操作的实例
2017/08/15 Python
我就是这样学习Python中的列表
2019/06/02 Python
Python.append()与Python.expand()用法详解
2019/12/18 Python
django实现模型字段动态choice的操作
2020/04/01 Python
Python根据字符串调用函数过程解析
2020/11/05 Python
澳大利亚天然护肤品、化妆品和健康产品一站式商店:Nourished Life
2018/12/02 全球购物
亚洲颇具影响力的男性在线购物零售商:His
2019/11/24 全球购物
Unineed中文官网:高端护肤美妆与时尚配饰,英国直邮
2020/07/23 全球购物
民政局个人整改措施
2014/09/24 职场文书
小学大队委竞选口号
2015/12/25 职场文书
导游词之上海豫园
2019/10/24 职场文书
JavaScript实例 ODO List分析
2022/01/22 Javascript
日本十大血腥动漫,那些被禁播的动漫盘点
2022/03/21 日漫