javascript笔记：推荐使用“百度统计”并且拷贝百度统计的前端框架
本篇博文讲两件事情，一个是推荐在博客园经常写博客的童鞋们一个很棒的工具--“百度统计”，另一个是“拷贝百度统计”的页面框架。
首先讲第一个事情，我的博客里有不少文章都是讲“用户行为分析”的，虽然现在不做这个方向的项目，但是对它的兴趣不减，所以我今天在自己博客里部署了百度的用户行为分析系统“百度统计”的采集脚本，感受的确是很棒，使用了百度统计后我发现我更能和看过我博客的童鞋们进行互动了。
下面我截取几张图片让大家感受下效果：
如图01：
如图02：
（注释：1.PV（page view）即页面浏览量，或点击量，通常是衡量一个网络新闻频道或网站甚至一条网络新闻的主要指标。
2.UV(独立访客)：即Unique Visitor,访问您网站的一台电脑客户端为一个访客。00:00-24:00内相同的客户端只被计算一次。）
全部来源展示页面：
大家看到，浏览我博客的人几乎都是通过搜索引擎找到我的文章
搜索关键字页面：
呵呵，这里我们可以看到那些人对什么技术感兴趣。
使用“百度统计”后，感觉它的页面做的很不错，如是有了“抠出”它页面代码的想法。
火影里有个拷贝忍者旗木卡卡西，这里我要做回页面拷贝程序员了。
很多童鞋都有种错误的感觉，觉得做页面很简单，因此他们也常常认为获取页面源代码是件很容易的事情,只要点击查看源代码的菜单就行，但是查看源代码所获取的代码是不是我们程序员真的想要，真的能拿来用的代码，这个不尽然，不信这点的朋友可以自己尝试下。下面是我的“抠出”百度统计的前端源码：
首先还是目录结构：
main.css代码：
View Code
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { border: 0 none; font: ; margin: 0; padding: 0; } body { background:url(../images/aside_bg.png) repeat-y scroll 0 0 transparent; min-width: 1263px; } body { font-family: Arial,'宋体'; font-size: 12px; } body { line-height: 1; } a { color: #0965B8; cursor: pointer; text-decoration: none; } a:hover { text-decoration: underline; } img { vertical-align: middle; } label { vertical-align: middle; } ol, ul { list-style: none outside none; } label input { margin-right: 2px; } select, input { font-size: 12px; vertical-align: middle; } input { margin: 0; padding: 0; } .header-wrapper { background-color: #115FB6; background-image: url(../images/common-2382d36869c24837e0e6c1d2188cf698.png); background-position: left 0; background-repeat: repeat-x; } .header-wrapper .header { background-repeat: no-repeat; height: 50px; } .header-wrapper .logo { position: absolute; width: 150px; } .header-wrapper .logo img { height: 50px; width: 150px; } .header-wrapper .top-nav { color: #75A8D8; height: 24px; line-height: 22px; margin-right: 32px; text-align: right; } .header-wrapper .top-nav span.version { background-color: #0C5192; margin-right: 8px; padding: 0 8px; } .header-wrapper .top-nav span.version a { margin: 0; } .header-wrapper .top-nav a.new-version-guide { color: #FFFFCC; } .header-wrapper .top-nav span.version .sep { margin: 0 5px; } .header-wrapper .top-nav a { color: #B5D4F2; margin: 0 8px; } .header-wrapper .top-nav .more-hover .more { background-color: #E7F2FC; border: 2px solid #1162BA; left: 0; margin-left: 2px; padding: 0 5px; top: 0; } .header-wrapper .top-nav .more-hover a.more-arrow { background-image: url("../images/common-2382d36869c24837e0e6c1d2188cf698.png"); background-position: right -99px; } .header-wrapper .top-nav .more-hover .more li { display: block; } .header-wrapper .top-nav .more-hover .more a { margin: 0; } .header-wrapper .top-nav .more-hover .more a, .header-wrapper .top-nav .more-hover .more a .new-count { color: #0965B8; } .header-wrapper .top-nav .account { color: #B5D4F2; } .header-wrapper .top-nav .more-nav { display: inline-block; position: relative; z-index: 11; } .header-wrapper .top-nav .more-nav a.more-arrow { background-image: url("../images/common-2382d36869c24837e0e6c1d2188cf698.png"); background-position: right -70px; background-repeat: no-repeat; padding-right: 10px; } .header-wrapper .top-nav .more { position: absolute; } .header-wrapper .top-nav .more li { display: none; line-height: 18px; list-style-position: outside; padding-bottom: 4px; text-align: left; } .site-selector { color: gray; float: right; margin-right: 40px; width: 200px; } .selector { background-image: url("../images/common-2382d36869c24837e0e6c1d2188cf698.png"); background-position: left -1418px; background-repeat: repeat-x; cursor: pointer; position: relative; z-index: 10; } .arrow { display: inline-block; float: left; height: 10px; width: 9px; } .selector .arrow { background-image: url("../images/common-2382d36869c24837e0e6c1d2188cf698.png"); background-position: left -1458px; background-repeat: no-repeat; float: right; height: 20px; width: 18px; } .selector:hover .arrow { background-image: url("../images/common-2382d36869c24837e0e6c1d2188cf698.png"); background-position: left -1498px; } .site-selector .text { float: left; width: 158px; } .selector .text { display: inline-block; height: 20px; line-height: 20px; overflow: hidden; padding: 0 2px; position: relative; vertical-align: top; } .site-selector .options li.hover .is-not-default, .site-selector a.is-not-default { background-image: url("../images/common-2382d36869c24837e0e6c1d2188cf698.png"); background-position: left -2015px; } .site-selector .options li.hover .is-not-default:hover, a.is-not-default:hover { background-image: url("../images/common-2382d36869c24837e0e6c1d2188cf698.png"); background-position: left -2051px; } .site-selector .set-default { display: inline-block; height: 16px; padding: 0; position: absolute; right: 20px; top: 3px; width: 17px; } .site-selector .options { left: 0; max-height: 300px; overflow-y: auto; top: 20px; width: 198px; } .options { background-color: white; border: 1px solid #83B1E4; line-height: 25px; max-height: 260px; overflow-x: hidden; overflow-y: auto; padding: 2px 0; position: absolute; z-index: 1; } .layer { position: absolute; z-index: 1; } .header-wrapper .view-tab { float: left; margin-left: 150px; } .header-wrapper .view-tab a.setting-selected, .header-wrapper .view-tab a.report-selected, .header-wrapper .view-tab a.setting-selected:hover, .header-wrapper .view-tab a.report-selected:hover { background-image: url("../images/common-2382d36869c24837e0e6c1d2188cf698.png"); background-position: left -220px; color: #1873C8; cursor: default; text-decoration: none; } .header-wrapper .view-tab a { background-image: url("../images/common-2382d36869c24837e0e6c1d2188cf698.png"); background-position: left -128px; background-repeat: no-repeat; color: White; display: inline-block; font-weight: bolder; height: 26px; line-height: 26px; margin-right: 3px; width: 85px; } .header-wrapper .view-tab a:hover { background-image: url("../images/common-2382d36869c24837e0e6c1d2188cf698.png"); background-position: left -174px; } .header-wrapper .view-tab a.report-selected .icon { background-image: url("../images/common-2382d36869c24837e0e6c1d2188cf698.png"); background-position: left -386px; background-repeat: no-repeat; } .header-wrapper .view-tab a .icon { display: inline-block; float: left; height: 26px; margin-right: 14px; width: 30px; } .header-wrapper .view-tab a.setting .icon { background-image: url("../images/common-2382d36869c24837e0e6c1d2188cf698.png"); background-position: left -266px; background-repeat: no-repeat; } .top-report-nav { color: #75A8D8; float: left; height: 26px; line-height: 26px; margin-left: 5px; position: relative; z-index: 10; } .l { float: left; } .top-report-nav a { color: #B5D4F2; margin: 0 10px; } .top-report-nav a.setting { background-image: url("../images/common-2382d36869c24837e0e6c1d2188cf698.png"); background-position: left -2405px; background-repeat: no-repeat; display: inline-block; height: 26px; margin-left: 0; margin-right: 0; width: 17px; } .top-report-nav a.setting:hover { background-image: url("../images/common-2382d36869c24837e0e6c1d2188cf698.png"); background-position: left -2485px; background-repeat: no-repeat; } .top-report-nav span.recommend-reports-blank { background-image: url("../images/common-2382d36869c24837e0e6c1d2188cf698.png"); background-position: left -2447px; background-repeat: no-repeat; display: inline-block; height: 22px; line-height: 22px; margin-left: 10px; padding-left: 87px; } .top-report-nav .recommend-reports-box { background-color: #EEEEEE; border: 1px solid #83B1E4; height: 460px; line-height: 1.5; padding: 2px; position: absolute; right: 0; top: 26px; width: 170px; } .top-report-nav .recommend-reports-box .title { color: #999999; } .top-report-nav .recommend-reports-box p { line-height: 2; } .top-report-nav .recommend-reports-box span.red { color: #FF0000; } .red { color: red; } .top-report-nav .recommend-reports-box .recommend-reports-content { background-color: #FFFFFF; border: 1px solid #ABADB3; height: 380px; overflow-y: auto; } .top-report-nav .recommend-reports-box .recommend-reports-content .nav label { color: #000000; padding-left: 20px; } .top-report-nav .recommend-reports-box .recommend-reports-content .nav label input { display: inline-block; height: 20px; line-height: 20px; } .top-report-nav .recommend-reports-box .recommend-reports-content .nav li a.open { background-image: url("../images/common-2382d36869c24837e0e6c1d2188cf698.png"); background-position: left -2527px; background-repeat: no-repeat; color: #333333; display: block; font-weight: bolder; line-height: 30px; margin: 0; padding-left: 20px; } .top-report-nav .recommend-reports-box .recommend-reports-operations { height: 63px; } .top-report-nav .recommend-reports-box p { line-height: 2; } .top-report-nav .recommend-reports-box .recommend-reports-operations a.selected { background-color: #73B1E0; color: #FFFFFF; font-weight: bold; padding: 2px 5px; } .top-report-nav .recommend-reports-box .recommend-reports-operations a { color: #0965B8; margin: 0 5px; } .top-report-nav a.selected { font-weight: bolder; } .r { float: right; } a.button { background-image: url("../images/common-2382d36869c24837e0e6c1d2188cf698.png"); background-position: left -1075px; background-repeat: repeat-x; border-color: #B1AFB0 #8C8C8C; border-style: solid; border-width: 1px; color: black; display: inline-block; text-decoration: none; } .top-report-nav .recommend-reports-box .recommend-reports-operations a span { color: #000000; margin: 0 5px; } a.button span, a.button input { background: none repeat scroll 0 0 transparent; border: medium none; cursor: pointer; display: inline-block; height: 20px; line-height: 20px; padding: 0 6px; } .site-selector .options li a { white-space: normal; } .options li a { color: #333333; display: block; padding: 0 10px; white-space: nowrap; } .site-selector .options li .set-default { background-image: none; right: 3px; top: 4px; } .site-selector .options li.hover { background-color: #DBE4FF; } .clearfix:after { clear: both; content: "."; display: block; height: 0; visibility: hidden; } .clearfix { display: block; } .clearfix { display: inline-block; } .aside { position: absolute; width: 149px; } .misc { float: right; width: 40px; } .main { margin-left: 160px; margin-right: 40px; } .aside .nav li.selected { background-color: #EA764F; border-right: 4px solid #E3563A; } .aside .nav li.selected a { color: white; font-weight: bolder; } .aside .nav li a { color: #6191D4; display: inline-block; height: 29px; line-height: 29px; padding-left: 30px; } .aside .nav li a.open { background-color: #E2EDFB; background-image: url("../images/common-2382d36869c24837e0e6c1d2188cf698.png"); background-position: left -533px; background-repeat: no-repeat; color: #0965B8; display: block; font-weight: bolder; height: 30px; line-height: 30px; padding-left: 20px; } .aside .nav li .new { background-image: url("../images/common-2382d36869c24837e0e6c1d2188cf698.png"); background-position: left -508px; background-repeat: no-repeat; display: inline-block; height: 10px; margin-left: 6px; overflow: hidden; vertical-align: text-bottom; width: 22px; } .aside .helper-center { background-color: #EDF5ED; border: 1px solid #BDDEB2; margin: 51px auto auto; width: 140px; } .aside .helper-center .title { background-color: #CCF2CC; color: #0965B8; font-weight: bolder; line-height: 30px; padding-left: 20px; } .aside .helper-center .title a { color: #0C7823; } .aside .helper-center .text-wrapper { background-image: url("../images/common-2382d36869c24837e0e6c1d2188cf698.png"); background-position: left -613px; background-repeat: no-repeat; display: inline-block; height: 22px; margin: 8px 0 8px 3px; } .aside .helper-center .text-wrapper .text { background-color: transparent; border-width: 0; padding: 4px; vertical-align: super; width: 82px; } input.text { padding: 2px; } .gray { color: gray; } .aside .helper-center .text-wrapper a.button { vertical-align: top; } .aside .nav li a.close { background-color: #E2EDFB; background-image: url("../images/common-2382d36869c24837e0e6c1d2188cf698.png"); background-position: left -573px; background-repeat: no-repeat; color: #0965B8; display: block; font-weight: bolder; height: 30px; line-height: 30px; margin-bottom: 1px; padding-left: 20px; } .main div.content { min-height: 500px; min-width:1063px; padding-top: 13px; } div.title-bar { height: 20px; line-height: 20px; margin-bottom: 13px; width:100%; position: relative; } div.title-bar div.tool-bar a.send-report { background-image: url("../images/common-2382d36869c24837e0e6c1d2188cf698.png"); background-position: left -1907px; background-repeat: no-repeat; padding-left: 18px; padding-right: 20px; } div.title-bar div.tool-bar a { display: inline-block; height: 20px; line-height: 20px; } div.title-bar div.tool-bar a.download-report { background-image: url("../images/common-2382d36869c24837e0e6c1d2188cf698.png"); background-position: left -1961px; background-repeat: no-repeat; padding-left: 11px; } div.title-bar h1 { color: #333333; font-size: 14px; font-weight: bolder; padding: 0; } div.title-bar div.date { color: #5F3333; display: inline; font-size: 14px; white-space: nowrap; } div.title-bar a.report-help { background-image: url("../images/common-2382d36869c24837e0e6c1d2188cf698.png"); background-position: left -1880px; background-repeat: no-repeat; display: inline-block; height: 20px; margin-left: 5px; padding-right: 14px; text-decoration: none; } div.report-tip { position: relative; } .report-tip, .indicator-tip { cursor: help; } div.report-tip div.tip-arrow { background-image: url("../images/common-2382d36869c24837e0e6c1d2188cf698.png"); background-position: left -1586px; background-repeat: no-repeat; height: 5px; left: 67px; position: absolute; top: -5px; width: 9px; } div.report-tip div.report-tip-content { background: url("../images/xx1.gif") repeat-y scroll 70% 0 #E9F5EC; border-bottom: 1px solid #BBDFC3; border-top: 2px solid #BBDFC3; cursor: default; margin-bottom: 10px; padding: 10px; } div.report-tip div.report-tip-content table.report-tip-table { width: 100%; } div.report-tip div.report-tip-content table.report-tip-table div.left-content { padding-right: 60px; } div.report-tip div.report-tip-content table.report-tip-table p.text { color: #ACD2B5; font-weight: bolder; } div.report-tip div.report-tip-content table.report-tip-table p { line-height: 1.5; } div.report-tip div.report-tip-content table.report-tip-table p.label { color: #4E7156; } div.report-tip div.report-tip-content table.report-tip-table div.right-content { padding-left: 20px; } div.report-tip div.report-tip-content table.report-tip-table .text-wrapper .text { height: 20px; line-height: 20px; margin-right: 5px; padding: 0; width: 155px; } div.report-tip div.report-tip-content table.report-tip-table .text-wrapper a.button { vertical-align: middle; } div.control-bar-wrapper { height: 30px; position: relative; z-index: 1; } div.control-bar-wrapper div.control-bar { background-image: url("../images/common-2382d36869c24837e0e6c1d2188cf698.png"); background-position: left -1601px; background-repeat: repeat-x; height: 22px; line-height: 22px; padding: 4px 0; width: 100%; z-index: 2999; } div.control-bar-wrapper div.control-bar div.date-select-bar { padding-left: 20px; } div.control-bar-wrapper div.control-bar div.date-select-bar a { color: #0965B8; display: inline-block; height: 18px; line-height: 18px; padding: 2px 0; } div.control-bar-wrapper div.control-bar span.seprator { color: #0965B8; display: inline-block; padding: 0 10px; text-align: center; width: 10px; } div.control-bar-wrapper div.control-bar div.date-select-bar a.cur { background-color: #73B1E0; color: #FFFFFF; font-weight: bold; padding: 2px 5px; } div.control-bar-wrapper div.control-bar input.text { background-color: transparent; border: 0 none; color: #0965B8; cursor: pointer; font-family: Arial; font-size: 12px; height: 18px; line-height: 18px; padding: 2px 0; width: 150px; } div.control-bar-wrapper div.control-bar input.compare-date { margin: 0 4px; padding: 0; } div.control-bar-wrapper div.control-bar div.scroll-bar { margin-right: 10px; } div.control-bar-wrapper div.control-bar div.scroll-bar span.open { background-image: url("../images/common-2382d36869c24837e0e6c1d2188cf698.png"); background-position: left -1701px; background-repeat: no-repeat; display: inline-block; } div.control-bar-wrapper div.control-bar div.scroll-bar span.scroll { background-image: url("../images/common-2382d36869c24837e0e6c1d2188cf698.png"); background-position: left -1641px; background-repeat: no-repeat; cursor: pointer; display: inline-block; height: 22px; margin: 0; padding: 0; text-decoration: none; width: 20px; } .misc .feedback { margin-left: 7px; position: fixed; top: 300px; } .misc .feedback a { background-image: url("../images/common-2382d36869c24837e0e6c1d2188cf698.png"); background-position: left -655px; background-repeat: no-repeat; display: block; height: 111px; width: 22px; } .misc .back-to-top { bottom: 10px; margin-left: 7px; position: fixed; } .misc .back-to-top a { background-image: url("../images/common-2382d36869c24837e0e6c1d2188cf698.png"); background-position: left -917px; background-repeat: no-repeat; display: block; height: 59px; width: 22px; } .body{ min-width:1263px; } div.section { margin-top: 10px; width:100%; } .section { margin-bottom: 10px; } .tabs { position: relative; } .tabs ul { border-bottom: 1px solid #E4EEFB; width:100%; } .tabs ul li.selected { -moz-border-bottom-colors: none; -moz-border-image: none; -moz-border-left-colors: none; -moz-border-right-colors: none; -moz-border-top-colors: none; background-color: White; background-image: url("../images/common-2382d36869c24837e0e6c1d2188cf698.png"); background-position: left -2350px; background-repeat: repeat-x; border-color: #E4EEFB; border-style: solid; border-width: 1px 1px 0; bottom: -1px; line-height: 24px; position: relative; } .tabs ul li { -moz-border-bottom-colors: none; -moz-border-image: none; -moz-border-left-colors: none; -moz-border-right-colors: none; -moz-border-top-colors: none; background-color: #E2EDFB; border-color: white; border-style: solid; border-width: 1px 1px 0; float: left; height: 25px; line-height: 25px; margin-right: 5px; padding: 0 10px; } .tabs ul li a { display: inline-block; } .tabs ul li.selected a { border-color: white; color: black; } .tabs .download-words-container { background: none repeat scroll 0 0 transparent; float: right; } .tabs .download-words-container a { border: medium none; display: inline; padding: 0; } .tabs ul li a.download-words { background-image: url("../images/option-arrow-down.gif"); background-position: right 6px; background-repeat: no-repeat; display: inline-block; line-height: 16px; margin-left: 10px; padding: 0 10px 0 0; } table.summary { background-color: #FDF2EF; border-bottom: 1px solid #F1F1F1; border-collapse: separate; border-top: 1px solid #F1F1F1; width: 100%; } table.summary tr td { border-bottom: 1px solid white; border-right: 1px solid #E4E4E4; border-top: 1px solid white; line-height: 1.2; padding: 8px 30px; text-align: left; } table.summary tr td span.text { color: #999999; line-height: 24px; } a.help { background-image: url("../images/option-arrow-down.gif"); background-position: left -1155px; background-repeat: no-repeat; display: inline-block; text-decoration: none; width: 16px; } table.summary tr td span.value { color: #333333; font-size: 20px; } table.summary tr td.last { border-right: medium none; } table { border-collapse: collapse; border-spacing: 0; } .filter-tabs ul { border-width: 0; } .filter-tabs ul li { background-color: transparent; } .filter-tabs ul li a { border-width: 0; color: #999999; } .tabs .close { background-image: url("../images/option-arrow-down.gif"); background-position: left -2389px; background-repeat: no-repeat; }
main.js代码：
View Code
$(document).ready(function(){ //官方博客 下拉菜单 hover 事件 $("#MoreNav").hover( function(){ $(this).addClass("more-hover"); }, function(){ $(this).removeClass("more-hover"); } ); //移动统计 下拉菜单 hover 事件 $("#MoreNav2").hover( function(){ $(this).addClass("more-hover"); }, function(){ $(this).removeClass("more-hover"); } ); // 头部下拉点击事件 $("#xj_arrowclose_01").toggle( function(){ $(this).addClass("selected"); $("#SiteList").removeClass("xj_haveorno_display"); }, function(){ $(this).removeClass("selected"); $("#SiteList").addClass("xj_haveorno_display"); } ); $("#xj_sitrlist_li").hover( function(){ $(this).addClass("hover"); },function(){ $(this).removeClass("hover"); } ); $("#xj_addcybaogao").toggle( function(){ $("#RecommendReportsBox").removeClass("xj_haveorno_display"); }, function(){ $("#RecommendReportsBox").addClass("xj_haveorno_display"); } ); // 左侧主菜单折叠事件 $(".recordable").toggle( function(){ $(this).removeClass("open"); $(this).addClass("close"); $("#" + $(this).attr("id") + " ~ ul").attr("style","display:none"); }, function(){ $(this).addClass("open"); $(this).removeClass("close"); $("#" + $(this).attr("id") + " ~ ul").attr("style",""); } ); // 左侧子菜单点击事件 $("a[id^='xj_leftcdchild']").bind("click",function(evt){ $("a[id^='xj_leftcdchild']").parent().removeClass("selected"); $("#" + evt.target.id).parent().addClass("selected"); }); });
baidudemo01.html代码：
View Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Baidu Tongji Demo</title> </head> <link type="text/css" href="css/main.css" rel="stylesheet"></link> <script type="text/javascript" src="js/jquery-1.7.1.js"></script> <script type="text/javascript" src="js/main.js"></script> <style type="text/css"> .xj_haveorno_display{ display:none; } </style> <body> <!-- 百度统计页面的头部 --> <div id="Top" class="header-wrapper"> <div class="header"> <!-- 百度统计页面的logo --> <div class="logo"> <a href="#"> <img alt="百度统计" src="images/logo.png"/> </a> </div> <div class="top-nav"> <span class="version"> <a memo="{id:'top_30guide'}" class="new-version-guide trackable" href="javascript:void(0);"> 3.0版介绍 </a> <span class="sep"> | </span> <a memo="{id:'top_old'}" class="trackable" href="javascript:void(0);"> 回到2.0版 </a> </span> <span class="account"> sharpxiajun </span> <!-- 官方博客 下拉菜单 --> <div class="more-nav" id="MoreNav"> <a memo="{id:'top_blog'}" class="more-arrow trackable" target="_blank" href="javascript:void(0);"> 官方博客 </a> <ul class="more"> <li> <a memo="{id:'top_blog'}" class="more-arrow trackable" target="_blank" href="javascript:void(0);"> 官方博客 </a> </li> <li> <a memo="{id:'top_diz'}" class="trackable" target="_blank" href="javascript:void(0);"> 讨论区 </a> </li> <li> <a memo="{id:'top_cont'}" class="trackable" target="_blank" href="javascript:void(0);"> 联系我们 </a> </li> </ul> </div> | <!-- 移动统计 下拉菜单 --> <div class="more-nav" id="MoreNav2"> <a memo="{id:'top_mobapp'}" class="more-arrow trackable" target="_blank" href="javascript:void(0);"> 移动统计 </a> <ul class="more"> <li> <a memo="{id:'top_mobapp'}" class="more-arrow trackable" target="_blank" href="javascript:void(0);"> 移动统计 </a> </li> <li> <a memo="{id:'top_union'}" class="trackable" target="_blank" href="javascript:void(0);"> 百度联盟 </a> </li> </ul> </div> | <a memo="{id:'top_help'}" class="trackable" target="_blank" href="javascript:void(0);"> 帮助 </a> | <a href="javascript:void(0);"> 退出 </a> </div> <div id="SiteListContainer" class="selector site-selector"> <div layer=".site-selector .options" class="arrow close" id="xj_arrowclose_01"> </div> <div title="www.cnblogs.com/sharpxiajun" layer=".site-selector .options" class="text"> www.cnblogs.com/sharpxiajun </div> <a class="set-default is-not-default" data="1811106" id="SetCurrentDefaultSite" title="设为默认网站" href="javascript:void(0)"> </a> <ul id="SiteList" class="options layer xj_haveorno_display"> <li id="xj_sitrlist_li"> <a title="www.cnblogs.com/sharpxiajun" href="javascript:void(0);"> www.cnblogs.com/sharpxiajun </a> <a title="设为默认网站" class="set-default is-not-default" data="1811106" href="javascript:void(0)"> </a> </li> </ul> </div> <div class="view-tab"> <a memo="{id:'top_rep_tab'}" class="report-selected trackable" href="javascript:void(0);"> <span class="icon"> </span> 报告 </a> <a memo="{id:'top_rep_set'}" class="setting trackable" href="javascript:void(0);"> <span class="icon"> </span> 设置 </a> </div> <div class="top-report-nav"> <div id="RecommendReports" class="recommend-reports l"> <a memo="{id:'top_rep_0'}" class="trackable" href="javascript:void(0);"> 搜索词 </a> | <a memo="{id:'top_rep_1'}" class="trackable" href="javascript:void(0);"> 页面点击图 </a> | <a memo="{id:'top_rep_2'}" class="trackable" href="javascript:void(0);"> SEO建议 </a> | <a memo="{id:'top_rep_3'}" class="trackable" href="javascript:void(0);"> 百度索引量查询 </a> </div> <!-- 图标用户可看到推荐报告，不能设置 --> <a memo="{id:'top_rep_set'}" id="xj_addcybaogao" layer=".recommend-reports-box" class="setting trackable" title="添加常用报告" > </a> <span class="recommend-reports-blank" style=" display:none;" id="RecommendReportBlank"> </span> <div id="RecommendReportsBox" class="recommend-reports-box layer bg-iframe xj_haveorno_display"> <p class="title"> 选择常用报告(最多 <span class="red"> 4 </span> 项) </p> <div id="RecommendReportsContent" class="recommend-reports-content"> <ul class="nav"> <li> <label for="RecommendReport1"> <input type="checkbox" value="1" title="网站概况" name="recommend-report" id="RecommendReport1"> 网站概况 </label> </li> <li> <a class="open" href="javascript:void(0);"> 趋势分析 </a> <ul> <li> <label for="RecommendReport3"> <input type="checkbox" value="3" title="最新访客" name="recommend-report" id="RecommendReport3"> 最新访客 </label> </li> <li> <label for="RecommendReport4"> <input type="checkbox" value="4" title="今日统计" name="recommend-report" id="RecommendReport4"> 今日统计 </label> </li> <li> <label for="RecommendReport5"> <input type="checkbox" value="5" title="昨日统计" name="recommend-report" id="RecommendReport5"> 昨日统计 </label> </li> <li> <label for="RecommendReport6"> <input type="checkbox" value="6" title="最近30天" name="recommend-report" id="RecommendReport6"> 最近30天 </label> </li> </ul> </li> <li> <a class="open" href="javascript:void(0);"> 来源分析 </a> <ul> <li> <label for="RecommendReport8"> <input type="checkbox" value="8" title="全部来源" name="recommend-report" id="RecommendReport8"> 全部来源 </label> </li> <li> <label for="RecommendReport9"> <input type="checkbox" value="9" title="搜索引擎" name="recommend-report" id="RecommendReport9"> 搜索引擎 </label> </li> <li> <label for="RecommendReport10"> <input type="checkbox" value="10" title="搜索词" checked="true" name="recommend-report" id="RecommendReport10"> 搜索词 </label> </li> <li> <label for="RecommendReport11"> <input type="checkbox" value="11" title="外部链接" name="recommend-report" id="RecommendReport11"> 外部链接 </label> </li> <li> <label for="RecommendReport58"> <input type="checkbox" value="58" title="百度移动搜索" name="recommend-report" id="RecommendReport58"> 百度移动搜索 </label> </li> </ul> </li> <li> <a class="open" href="javascript:void(0);"> 网页分析 </a> <ul> <li> <label for="RecommendReport13"> <input type="checkbox" value="13" title="受访页面" name="recommend-report" id="RecommendReport13"> 受访页面 </label> </li> <li> <label for="RecommendReport14"> <input type="checkbox" value="14" title="访问入口" name="recommend-report" id="RecommendReport14"> 访问入口 </label> </li> </ul> </li> <li> <a class="open" href="javascript:void(0);"> 访客分析 </a> <ul> <li> <label for="RecommendReport16"> <input type="checkbox" value="16" title="地域分布" name="recommend-report" id="RecommendReport16"> 地域分布 </label> </li> <li> <label for="RecommendReport17"> <input type="checkbox" value="17" title="系统环境" name="recommend-report" id="RecommendReport17"> 系统环境 </label> </li> <li> <label for="RecommendReport18"> <input type="checkbox" value="18" title="新老访客" name="recommend-report" id="RecommendReport18"> 新老访客 </label> </li> <li> <label for="RecommendReport19"> <input type="checkbox" value="19" title="访客属性" name="recommend-report" id="RecommendReport19"> 访客属性 </label> </li> <li> <label for="RecommendReport20"> <input type="checkbox" value="20" title="忠诚度" name="recommend-report" id="RecommendReport20"> 忠诚度 </label> </li> </ul> </li> <li> <a class="open" href="javascript:void(0);"> 定制分析 </a> <ul> <li> <label for="RecommendReport22"> <input type="checkbox" value="22" title="页面点击图" checked="true" name="recommend-report" id="RecommendReport22"> 页面点击图 </label> </li> <li> <label for="RecommendReport23"> <input type="checkbox" value="23" title="子目录" name="recommend-report" id="RecommendReport23"> 子目录 </label> </li> <li> <label for="RecommendReport24"> <input type="checkbox" value="24" title="转化路径" name="recommend-report" id="RecommendReport24"> 转化路径 </label> </li> <li> <label for="RecommendReport25"> <input type="checkbox" value="25" title="页面上下游" name="recommend-report" id="RecommendReport25"> 页面上下游 </label> </li> <li> <label for="RecommendReport26"> <input type="checkbox" value="26" title="指定广告跟踪" name="recommend-report" id="RecommendReport26"> 指定广告跟踪 </label> </li> </ul> </li> <li> <a class="open" href="javascript:void(0);"> 优化分析 </a> <ul> <li> <label for="RecommendReport28"> <input type="checkbox" value="28" title="SEO建议" checked="true" name="recommend-report" id="RecommendReport28"> SEO建议 </label> </li> <li> <label for="RecommendReport29"> <input type="checkbox" value="29" title="搜索词排名" name="recommend-report" id="RecommendReport29"> 搜索词排名 </label> </li> <li> <label for="RecommendReport30"> <input type="checkbox" value="30" title="百度索引量查询" checked="true" name="recommend-report" id="RecommendReport30"> 百度索引量查询 </label> </li> <li> <label for="RecommendReport31"> <input type="checkbox" value="31" title="网站速度诊断" name="recommend-report" id="RecommendReport31"> 网站速度诊断 </label> </li> <li> <label for="RecommendReport32"> <input type="checkbox" value="32" title="升降榜" name="recommend-report" id="RecommendReport32"> 升降榜 </label> </li> </ul> </li> </ul> </div> <div class="recommend-reports-operations"> <p> <a href="javascript:void(0)" id="RecommendReportsDefault" class="selected"> 系统默认推荐 </a> </p> <div class="r"> <a class="button confirm" href="javascript:void(0);"> <span> 确定 </span> </a> <a href="javascript:void(0);" class="cancel"> 取消 </a> </div> </div> </div> </div> </div> </div> <!-- 页面主体 --> <div class="body clearfix"> <!-- 左侧菜单 --> <div class="aside"> <ul class="nav"> <li class="selected"> <a id="xj_leftcdchild_01" memo="{id:'1',type:'menu',global:1,status:''}" href="javascript:void(0);"> 网站概况 </a> </li> <li class=""> <a id="xj_leftcaidan_01" memo="{id:'2',type:'menu',global:1,status:'1'}" href="javascript:void(0);" class="recordable open"> 趋势分析 </a> <ul style=""> <li class=""> <a id="xj_leftcdchild_02" href="javascript:void(0);"> 最新访客 </a> <span class="normal"> </span> </li> <li class=""> <a id="xj_leftcdchild_03" href="javascript:void(0);"> 今日统计 </a> <span class="normal"> </span> </li> <li class=""> <a id="xj_leftcdchild_04" href="javascript:void(0);"> 昨日统计 </a> <span class="normal"> </span> </li> <li class=""> <a id="xj_leftcdchild_05" href="javascript:void(0);"> 最近30天 </a> <span class="normal"> </span> </li> </ul> </li> <li class=""> <a id="xj_leftcaidan_02" memo="{id:'7',type:'menu',global:1,status:''}" href="javascript:void(0);" class="recordable open"> 来源分析 </a> <ul> <li class=""> <a id="xj_leftcdchild_06" href="javascript:void(0);"> 全部来源 </a> <span class="normal"> </span> </li> <li class=""> <a id="xj_leftcdchild_07" href="javascript:void(0);"> 搜索引擎 </a> <span class="normal"> </span> </li> <li class=""> <a id="xj_leftcdchild_08" href="javascript:void(0);"> 搜索词 </a> <span class="normal"> </span> </li> <li class=""> <a id="xj_leftcdchild_09" href="javascript:void(0);"> 外部链接 </a> <span class="normal"> </span> </li> <li class=""> <a id="xj_leftcdchild_10" href="javascript:void(0);"> 百度移动搜索 </a> <span class="new"> </span> </li> </ul> </li> <li class=""> <a id="xj_leftcaidan_03" memo="{id:'12',type:'menu',global:1,status:''}" href="javascript:void(0);" class="recordable open"> 网页分析 </a> <ul> <li class=""> <a id="xj_leftcdchild_11" href="javascript:void(0);"> 受访页面 </a> <span class="normal"> </span> </li> <li class=""> <a id="xj_leftcdchild_12" href="javascript:void(0);"> 访问入口 </a> <span class="normal"> </span> </li> </ul> </li> <li class=""> <a id="xj_leftcaidan_04" memo="{id:'15',type:'menu',global:1,status:''}" href="javascript:void(0);" class="recordable open"> 访客分析 </a> <ul> <li class=""> <a id="xj_leftcdchild_13" href="javascript:void(0);"> 地域分布 </a> <span class="normal"> </span> </li> <li class=""> <a id="xj_leftcdchild_14" href="javascript:void(0);"> 系统环境 </a> <span class="normal"> </span> </li> <li class=""> <a id="xj_leftcdchild_15" href="javascript:void(0);"> 新老访客 </a> <span class="normal"> </span> </li> <li class=""> <a id="xj_leftcdchild_16" href="javascript:void(0);"> 访客属性 </a> <span class="normal"> </span> </li> <li class=""> <a id="xj_leftcdchild_17" href="javascript:void(0);"> 忠诚度 </a> <span class="normal"> </span> </li> </ul> </li> <li class=""> <a id="xj_leftcaidan_05" memo="{id:'21',type:'menu',global:1,status:''}" href="javascript:void(0);" class="recordable open"> 定制分析 </a> <ul> <li class=""> <a id="xj_leftcdchild_18" href="javascript:void(0);"> 页面点击图 </a> <span class="normal"> </span> </li> <li class=""> <a id="xj_leftcdchild_19" href="javascript:void(0);"> 子目录 </a> <span class="normal"> </span> </li> <li class=""> <a id="xj_leftcdchild_20" href="javascript:void(0);"> 转化路径 </a> <span class="new"> </span> </li> <li class=""> <a id="xj_leftcdchild_21" href="javascript:void(0);"> 页面上下游 </a> <span class="normal"> </span> </li> <li class=""> <a id="xj_leftcdchild_22" href="javascript:void(0);"> 指定广告跟踪 </a> <span class="normal"> </span> </li> </ul> </li> <li class=""> <a id="xj_leftcaidan_06" memo="{id:'27',type:'menu',global:1,status:''}" href="javascript:void(0);" class="recordable open"> 优化分析 </a> <ul> <li class=""> <a id="xj_leftcdchild_23" href="javascript:void(0);"> SEO建议 </a> <span class="normal"> </span> </li> <li class=""> <a id="xj_leftcdchild_24" href="javascript:void(0);"> 搜索词排名 </a> <span class="new"> </span> </li> <li class=""> <a id="xj_leftcdchild_25" href="javascript:void(0);"> 百度索引量查询 </a> <span class="normal"> </span> </li> <li class=""> <a id="xj_leftcdchild_26" href="javascript:void(0);"> 网站速度诊断 </a> <span class="new"> </span> </li> <li class=""> <a id="xj_leftcdchild_27" href="javascript:void(0);"> 升降榜 </a> <span class="normal"> </span> </li> </ul> </li> </ul> <div class="helper-center"> <div class="title"> <a memo="{id:'nav_help_link'}" class="trackable" target="_blank" href="javascript:void(0);"> 帮助中心 </a> </div> <form class="text-wrapper" action="javascript:void(0);" target="_blank" method="post"> <input type="text" id="Help" value="输入您的问题" name="keyword" autocomplete="off" class="text gray"> <a href="javascript:void(0)" class="button"> <input type="submit" value="查询" memo="{id:'nav_help_sea'}" class="trackable"> </a> </form> </div> </div> <div class="misc"> <div class="feedback" id="Feedback"> <a href="javascript:void(0);" target="_blank" class="trackable" memo="{id:'feedba'}"> </a> </div> <div class="back-to-top" id="BackToTop" style="display:none"> <a href="#Top" class="trackable" memo="{id:'back2top'}"> </a> </div> </div> <div class="main"> <div class="content clearfix"> <div class="title-bar clearfix"> <div class="tool-bar r" id="ToolBar"> <a memo="{id:'masend'}" class="send-report trackable" id="SendReport" href="javascript:void(0);"> 发送 </a> <a memo="{id:'doload'}" class="download-report trackable" id="DownloadReport" href="javascript:void(0);"> 下载 </a> </div> <h1 class="l"> 搜索词 </h1> <div class="date l" id="Date"> (2012/08/05~2012/08/06) </div> <a href="javascript:void(0);" class="report-help close l" id="ReportTipIco" title="点击可查看报告详细帮助"> </a> </div> <div style="display:none;" id="ReportTip" class="report-tip"> <div class="tip-arrow" style="left: 214px;"> </div> <div class="report-tip-content"> <table class="report-tip-table"> <tbody> <tr> <td width="70%" valign="top"> <div class="left-content l"> <p class="text"> 本报告助您分析： </p> <p class="label"> 网民在各类搜索引擎上通过哪些搜索词找到并访问了您网站。助您及时了解网民的关注点，以及哪些搜索词给您网站带来了更多有效访客，从而优化搜索推广提词方案。 </p> </div> </td> <td width="30%" valign="middle"> <div class="l right-content"> <div class="quesstions"> <p class="text"> 常见问题： </p> <p class="label"> <a target="_blank" href="javascript:void(0);"> 搜索词（分搜索引擎）报告能告诉我哪些信息？ </a> </p> </div> <div class="search"> <form class="text-wrapper" action="http://yingxiao.baidu.com/support/tongji/?module=default&controller=index&action=search" target="_blank" method="post"> <input type="text" id="ReportHelp" value="更多问题请在这里查询..." name="keyword" autocomplete="off" class="text gray"> <a href="javascript:void(0)" class="button"> <input type="submit" value="查询"> </a> </form> </div> </div> </td> </tr> </tbody> </table> </div> </div> <div id="ControlBarWrapper" class="control-bar-wrapper"> <div id="ControlBar" class="control-bar bg-iframe"> <div id="DateSelectBar" class="l date-select-bar"> <a memo="{id:'time_tody'}" class="trackable" href="#00"> 今天 </a> <span class="seprator"> | </span> <a memo="{id:'time_yest'}" class="trackable cur" href="#-1"> 昨天 </a> <span class="seprator"> | </span> <a memo="{id:'time_week'}" class="trackable" href="#-6"> 最近7天 </a> <span class="seprator"> | </span> <a memo="{id:'time_month'}" class="trackable" href="#-29"> 最近30天 </a> <span class="seprator"> | </span> </div> <div class="l time-select-bar"> <input value="自定义时间段" id="DateSelect" memo="{id:'time_selt'}" class="text trackable" readonly="readonly" onfocus="javascript:this.blur();"> <input type="checkbox" class="compare-date" id="CompareDate"> <input value="与其他时间段对比" id="CompareDateSelect" memo="{id:'time_consel'}" class="text trackable" readonly="readonly" onfocus="javascript:this.blur();"> </div> <div class="r scroll-bar"> <span memo="{id:'Scroll',type:'scroll',global:1}" class="scroll open recordable" title="设置随屏滚动" id="Scroll"> </span> </div> </div> </div> <div class="section" id="SourceTabs"> <div class="tabs"> <ul class="clearfix"> <li class="selected"> <a href="javascript:void(0);"> 按搜索引擎 </a> </li> <li> <a href="javascript:void(0);"> 按指标分类 </a> </li> <li class="download-words-container"> <a class="subscribe-words" id="SubscribeWords" href="javascript:void(0)"> 预订全部搜索词 </a> <a class="download-words" layer="#FileList" href="javascript:void(0)" id="DownloadWords" style="display:none;"> 下载全部搜索词数据包（至 <span id="EndSubscribe"> </span> ） </a> </li> </ul> </div> </div> <div class="section" id="Summary"> <table class="summary"> <tbody> <tr> <td> <span class="text"> 总搜索次数 <a class="help" data="total_search_count" href="javascript:void(0)"> </a> </span> <br> <span class="value"> 86 </span> </td> <td> <span class="text"> 百度 <a class="help" data="search_engine_baidu" href="javascript:void(0)"> </a> </span> <br> <span class="value"> 76.74% </span> </td> <td> <span class="text"> Google <a class="help" data="search_engine_g" href="javascript:void(0)"> </a> </span> <br> <span class="value"> 20.93% </span> </td> <td> <span class="text"> 搜狗 <a class="help" data="search_engine_sogou" href="javascript:void(0)"> </a> </span> <br> <span class="value"> 2.33% </span> </td> <td> <span class="text"> 其他 <a class="help" data="search_engine_other" href="javascript:void(0)"> </a> </span> <br> <span class="value"> 0% </span> </td> <td class="last"> <span class="text"> 占比 <a class="help" data="search_ratio" href="javascript:void(0)"> </a> </span> <br> <span class="value"> 100% </span> </td> </tr> </tbody> </table> </div> </div> </div> </div> </body> </html>
效果图：
下载链接：
http://files.cnblogs.com/sharpxiajun/BAIDUTONGJI.zip
百度的页面做的不错，希望有天我能在自己的项目中使用到这些代码。