`
amcucn
  • 浏览: 293788 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

自己用javascript写了一些代码,用来批量下载“绝影”博客上《疯狂的程序员》文章

阅读更多

近日,在拜读了“绝影”博客上《疯狂的程序员》连载文章后,感触颇深,从他的文章里找了自己的人生记忆,仿佛其中的主角就是自已…..

可是,由于白天要上班,晚上回家了也很晚,没多少空闲时间看,想来想去,最后决定将文章下下来,做成txt格式放到手机上看,反正每天上下班都有差不多两个小时,够我看的了。

问题来了,如果我是用手工的方式去一页一页的复制、粘贴。。。这工作量是不是也太大了,况且自己还身为一名“程序员”,感觉总有点怪怪的。又不想上网找那种可以下载网页的软件。最后想想,反正这难度应该不大,自己动手写个小程序试试,不成功也就当是练习练习吧。

接下来,开始分析需求。其实很简单,就是输入博客的网址,然后得到当前页面当中的所有文章的超链接,再根据这个链接去读取每篇文章的内容,把内容全部显示到一个网页里,然后就只需要复制一次就可以将所有的内容copy下来了。

 

开始写代码,这里碰到了一个问题,本想一次性将所有的链接全部得到,然后通过循环的方式去读取每个链接所对应的网页内容。可是当我真正去实现的时候出现了一个无法访问的错误,打开了一个CSDN用户登录页面。不知道是什么原因,猜想是人家网站不让你这样去弄吧,也没多想。此路不行,换条路。打开其中的一个链接,看了一下结构,发现每篇文章上面都有一个链接可以查看下一篇文章的内容,既然如此那我就可以通过读取这个链接得到下一篇文章的网页了。通过不断的循环,应该可以一直不断的得到后面的网页。

 

思路理清了,就开始写代码吧

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript">
        //获取网页内容,经过处理后将内容写入到指定的div当中
        function getPage(url){
            var xmlhttp = createXmlHttp();                      //获取xmlhttp对象
            var all_yk = document.getElementById("all_yk");    //得到用于保存网页的div
            if(url == null || url == "") {
                alert("网址不能为空!");
                return;
            }else {
                xmlhttp.open("GET",url,false);
                xmlhttp.send();
                if(xmlhttp.readyState ==4) {
                    if(xmlhttp.status != 200) {
                        alert("连接失败!");
                        return;
                    }else {
                        /*
                            这里通过xmlhttp对象读取了网页后,将内容写入到all_yk这个div当中,
                            这里面的内容其实就是包含所有内容的网页源代码。
                            由于div的样式已设置不显示,所以我们在网页是看不到的。
                         */
                        all_yk.innerHTML=xmlhttp.responseText;
                        //这个用来提取我们需要数据,获取文章的内容就看它了
                        getText();
                    }
                }
            }
        }

        //定义一个计数器,通过此计数器,我们可以设置要访问的级数
        var count=1;
        //从指定的div当中获取需要的数据
        function getText() {
            var temp_yk = document.getElementById("temp_yk");
            //下一页的超链接
            var nextHREF;
            if(document.getElementById("Post.ascx_ViewPost_PreviousAndNextEntriesUp")){
                /*
                    这里的id是通过分析网页源代码得到的,大家可以自己去查看博客上的网页源代码就知道了
                    得到了这个节点对象我们就可以缩小查找范围,只需要得到这个节点的第一个<a>元素的href属性
                    就可以获取下一篇文章的链接了,再将链接保存到变量当中,用于下一次getPage()方法的运行,
                    如此循环即可以不断的得到不同的文章内容
                 */
                 var nextURLS =document.getElementById("Post.ascx_ViewPost_PreviousAndNextEntriesUp");
                    nextHREF=nextURLS.getElementsByTagName("a")[0].getAttribute("href");
            }

            /*
             *这段代码用来获取我们需要的文章内容,同样通过分析源代码,所有的文章内容都位于一个id=csdnblog_content
              的div节点当中,我们只需要判断一下这个div是否存在,就知道有没有文章内容了。同理,再分析源码得知所有的文章每一段
               都位于一个<p>节点当中,而且这个<p>节点都一个相同的class属性,既然如此,那么我们可以通过获取当前页面当中的所有
               <p>节点,然后循环这个集合,判断其中的每一个节点的class属性是否等于“MsoNormal”,就可以得到文章的具体内容。
               最后将每一段内容添加到temp_yk这个div节点当中。如此循环就可以将我们需要的内容获取到了。
             */
            if(document.getElementById("csdnblog_content")){
                var allP = document.getElementsByTagName("p");
                for(var i=0;i<allP.length;i++) {
                    if(allP[i].className=="MsoNormal") {
                        temp_yk.innerHTML+=allP[i].innerHTML+"<br>";
                    }
                }
            }

            /*
                由于链接比较多,而且读取网页的速度不是很快,同时为避免出现假死机的现象,
                我们在这里设置了读取网页级数的数量。这个数量指的是从当前网页算起,向下
                读取多少次的数量。如本文是10,如果我是从第一章开始,则在读完了第10章后,
                程序不在运行
             */

            if(count <10) {
                  count++;
                //我们可以在这里设置一个标识,用来区分每一章的内容(可要,可不要)
                temp_yk.innerHTML+="**********************<p>";
                 getPage(nextHREF);
             }

        }

        //获取所有超链接
        function getAllHref(){
            var url = document.getElementById("url").value;
            getPage(url);   //读取当前页面当中的所有内容,然后进行分析
            var all_yk = document.getElementById("all_yk");
            var book_contents = document.getElementById("book-contents").innerHTML;
            all_yk.innerHTML=book_contents;
            var as =document.getElementsByTagName("a");
            for(var i=0;i<10;i++) {
                var nextUrl =as[i].getAttribute("href");
                getPage(nextUrl);
            }
        }

        function clearURL() {
            document.forms["getText"].reset();
            document.getElementById("all_yk").innerHTML="";
            //查看动态生成的源代码
            //document.write(document.documentElement.outerHTML);
        }

        //创建xmlhttp对象
        function createXmlHttp() {
{          var xhr;
            if (window.ActiveXObject)   // IE下创建XMLHTTPREQUEST
            {
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }
            else if (window.XMLHttpRequest)   // 其他浏览器创建XMLHTTPREQUEST
            {
                xhr = new XMLHttpRequest();
            }
            return xhr;
        }

}
    </script>

</head>
<body style="font-size:12px;">
<form action="test.html" name="getText">
<table align="center">
    <tr>
        <td>请输入要读取的网址:</td>
    </tr>
    <tr>
        <td><input type="text" id="url" size="90" name="url"><a href="#" onclick="getPage(url.value)" >读取</a>
            <input type="button" value="清空" onclick="clearURL()" id="clear"/></td>
    </tr>

</table> </form>
<!--用于临时保存网页内容,id名字没取好-->
<div id="all_yk" style="display:none;"></div>
<!--用于保存最后的结果内容,id名字没取好-->
<div id="temp_yk" style="display:block;"></div>
<!--临时保存下一篇文章的超链接-->
<div id="a_yk" style="display:none;"></div>

</body>

</html>

 

弄个效果图:



 

最后说明一下,附件当中的内容只有一个网页,直接使用IE打开即可,fireFox可能支持不太好。注意:不可以将此网页部署到一个web项目当中去运行。原因是:浏览器限制了javascript的跨域访问。另外,如果设置的级数过长,或者网速比较慢,程序运行的速度会慢一点,请耐心等待一会。

附上“绝影”的博客:http://crazypro.hi.csdn.net/ 这本书还是不错,值得我们当程序员的看看

 

 

注:我现在只是一个菜鸟,还望高手多指点一二。谢谢!

 

 

  • 大小: 482.3 KB
2
0
分享到:
评论
2 楼 amcucn 2008-12-15  
vb2005xu 写道

JS代码有误,老报错: 网址不能为null


建议你仔细查看一下代码,我这边是没问题的!

1 楼 vb2005xu 2008-12-15  
JS代码有误,老报错: 网址不能为null

相关推荐

    基于JavaScript实现的程序员表白爱心代码(2套)

    基于JavaScript实现的程序员表白爱心代码(2套) 基于JavaScript实现的程序员表白爱心代码(2套) 基于JavaScript实现的程序员表白爱心代码(2套) 基于JavaScript实现的程序员表白爱心代码(2套) 基于JavaScript实现的...

    个人博客html+css+JavaScript完整代码

    在个人博客中,CSS可以用来设定背景颜色、字体样式、边距和填充、布局模式(如网格或流式布局),以及响应式设计,确保博客在不同设备上都能良好显示。CSS3还提供了更多的特效,如阴影、渐变、过渡和动画,以增加...

    Javascript特效代码大全 程序员常用的网页特效

    在"Javascript特效代码大全"这个资源中,程序员可以找到许多实用的JavaScript代码示例,帮助提升网页的用户体验和视觉吸引力。 1. **基础概念**: JavaScript主要运行在浏览器环境中,通过DOM(文档对象模型)操作...

    程序员送给女友的基于JavaScript的高端3D相册源码.zip

    程序员送给女友的基于JavaScript的高端3D相册源码程序员送给女友的基于JavaScript的高端3D相册源码程序员送给女友的基于JavaScript的高端3D相册源码程序员送给女友的基于JavaScript的高端3D相册源码程序员送给女友的...

    程序员常用JavaScript特效

    本文将深入探讨一些程序员常用的JavaScript特效及其背后的原理。 首先,我们来谈谈JavaScript基础。JavaScript是一种解释型、弱类型、基于原型的对象导向语言,它主要在浏览器环境中运行,用于处理用户交互、操作...

    程序员之表白代码

    在IT行业中,程序员不仅以编写代码为日常,也常常利用技术来表达个人情感,比如“程序员之表白代码”。这个主题通常涉及到将编程语言与创意相结合,以独特的方式向心仪的人传达爱意。在这个实例中,“紫色背景恋爱...

    程序员常用的javascript特效

    JavaScript,作为全球最广泛使用的编程语言之一,是每一个程序员,特别是前端开发者必须掌握的重要技能。在JavaScript中,特效的创建是提升用户体验的关键因素。本文将深入探讨JavaScript在创建各种特效时涉及的技术...

    HTML+javaScript实现程序员表白.zip

    JavaScript还可以用来创建动画效果,如心跳动画、闪烁的文字等,让表白页面更加生动有趣。 结合情人节这一特殊情境,这个项目可能包含了一些定制化的功能,比如定时在特定时间(如情人节当天)弹出表白对话框,或者...

    8套 程序员表白代码

    这些代码通常是用各种编程语言编写的,用来展示程序员的创意和对技术的热爱,同时也表达了他们对另一半的深情厚谊。 在Web开发领域,程序员表白代码往往涉及到HTML、CSS、JavaScript等前端技术,也可能包含PHP、...

    520程序员前端表白代码,使用 HTML、CSS 和 JavaScript 编写一段浪漫的代码,用于表达爱意

    - 用户可以根据自己的需求对代码进行定制,例如修改文字内容、颜色、字体大小等,以实现个性化的效果。随机变换文字颜色,增加视觉吸引力、背景效果营造浪漫的夜空氛围、按钮点击播放烟花动画和背景音乐。 - 希望有...

    程序员博客blog免费html5模板

    这种模板可能包含响应式设计,确保在各种设备上都能正常显示,因为程序员博客通常需要跨平台兼容性,以适应不同的浏览环境。 【描述】:“简洁 程序员 博客 blog 个人 个人主页 技术博客 bootstrap” 描述中提到的...

    基于Javascript的个人博客网站设计源码

    这是一个基于Javascript的个人博客网站设计,使用Javascript和CSS语言开发,包含217个文件。主要文件类型包括106个Pug模板文件、45个Stylus样式文件、31个JavaScript文件、15个YAML配置文件、6个Markdown文档、5个...

    使用JavaScript实现Web程序中多个文本框的批量选择、批量修改

    最近,我使用纯Javascript实现了一个批量修改文本框中的数据的功能,拖动鼠标即可选择页面上(包括GridView中)多个文本框,然后会自动弹出对话框要求用户输入新值。实现方法对TextBox没有侵入性,也不需要修改现有...

    程序员向妹子表白专用代码

    这种代码可能是用不同的编程语言编写的,比如Python、JavaScript、Ruby或Java等,它们通过计算、输出或者交互式的方式,来传达程序员的心意。 表白代码通常会包含一些特殊的元素,例如数字序列(如爱的数字1314,...

    程序员代码表白-爱你一辈子.zip

    在IT行业中,程序员们以其独特的创意和编程技巧来表达情感,"程序员代码表白-爱你一辈子.zip"就是一个典型的例子。这个压缩包文件包含了程序员们用代码来传递爱意的方式,让我们一起深入探究其中蕴含的IT知识。 ...

    JavaScript代码生成器

    "setup.exe"文件通常是Windows平台上的安装程序,用于将JavaScript代码生成器软件安装到用户的计算机上。安装过程中,它会处理所有必要的文件复制、注册表设置和依赖项安装。 "PCHome_download.html"可能是一个下载...

    程序员个人博客模板.zip

    使用此模板,程序员可以快速建立自己的在线博客,展示技术文章和个人成就,同时吸引其他开发者进行交流。下面将详细阐述这个模板的特点、使用的框架和技术,以及可能的学习路径。 首先,这个模板主要基于layui前端...

    程序员表白代码,写上自己想说的话表白她吧

    标题中的“程序员表白代码”指的是使用编程语言创作的一种表达情感的方式。在IT行业中,程序员们经常利用他们的技术技能,如编写HTML、CSS、JavaScript等,来制作独特且富有创意的表白页面。这样的代码通常会包含...

    前端程序员表白页面代码

    这个名为"前端程序员表白页面代码"的项目,显然旨在利用这些技术为程序员提供一个独特的方式来向心爱的人表达情感。这个创意结合了浪漫与技术,通过编程语言将爱情的表达变得特别。 首先,我们可以假设这个表白页面...

Global site tag (gtag.js) - Google Analytics