这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要介绍了技术男用来对妹子表白的百度首页, 非常有创意、有意思, 需要的朋友可以参考下
有一天突发奇想,我要是能用我学的程序员技术给女朋友来表白的话,那岂不是高端大气上档次。
想到就立马去做,首先想到的是更改 hosts 文件,将浏览器的主页更改为自己设计的网页。
国内的女同学一般用百度首页,于是我就自己仿做了一个百度首页,具体的效果如下面:
是不是看起来高大上,当然最后我失败了,程序员怎么可能会有女朋友呢?
但是为了广大屌丝朋友的福利,我现在将这些代码给贴出来,就算有一个人成功了,我也是深藏功与名。
其中更改 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("http://files.phperz.com/file_images/article/201407/mylove.png")
- no-repeat center center;} #newYearEve .month-next{display: none!important;}
- #newYearEve .icon-newyear1{background: url("http://files.phperz.com/file_images/article/201407/mylove01.png")
- no-repeat center center;} #newYearEve li:hover{background: url("http://files.phperz.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("http://files.phperz.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="http://files.phperz.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="http://files.phperz.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="http://files.phperz.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>
来源: http://www.phperz.com/article/17/0720/275258.html