我以我的JS发誓
我以我的解释器宣告
将世界上所有的HTML汇聚
将世界上应有之css样式改变
集中所有的解释器和JS
将这网页为我所用
the Teleport Ultra
倾听我内心的愿望
让它实现吧!
原网页网址:https://granbluefantasy.jp/
模仿网页网址:http://yh.yxdesu.xyz/(再次感谢我的朋友YXDS帮助,网页挂靠在他的服务器上)
由于码云限制了我上传文件的速率,所以文件还没有上传完。
现在的rar压缩文件为https://gitee.com/stonetuskboar/zabivaka/attach_files
本次作业我向王涵[1]进行了请教,向凌龙[2]进行了学习,使用了The Teleport Ultra软件对GranBlueFantasy网站进行了拷贝,相关技术与拷贝忍者李宇浩相似[3]。
1,原网页截图
这是原官网的首页
这是我做的,改了几个图,减少了几个元素,修改了图片指向的链接。
这是原官网页的世界背景介绍
这是我改的(有彩蛋)
这是网页相关
这是我自己写的
这是官网的battle界面
这是莎士比亚名著!
这是官网的theatre界面
这是我自己改的(图片可以点击?)
以上就是作业的全部内容了,做这个网页花了我两天的时间,从五点半下课后就在宿舍枯坐,对着Visual Code面壁思过。让我下课后不能撩妹,不能打游戏,不能看剧,让我凭空生了许多惆怅。
2,源文件源代码介绍
common存放了网页的css样式,一些通用的图片文件,js代码。
font是字体,data是一些没用的旧文件。images存放了首页的图片文件、
system,theatre,world是几个子页面的相关html和图片。
index是首页的html,about this site是网页相关。
总代码量过长,因此只放上index文件。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset=UTF-8"UTF-8" /> <meta http-equiv="x-ua-compatible" content="IE=Edge" > <title>第二次软件工程作业</title> <meta name="description" content="第二次作业的网站,拷贝至granblue fantasy官网,拷贝忍者zabivaka在此。" /> <meta name="keywords" content="第二次软件工程作业又到了提交的时间,余昊能否赶在交稿时间之前做完作业?" /> <meta property="og:title" content="ZABIVAKA FANTASY|Zabivaka" /> <meta property="og:description" content="原网站为granblue fantasy官网。" /> <meta property="og:type" content="game" /> <meta property="og:image" content="http://granbluefantasy.jp/common/images/ogimage.jpg" /> <meta property="og:url" content="http://granbluefantasy.jp/" /> <link rel="icon" type="image/gif" href="/common/images/favicon.png"> <link href="common/css/common.css-20181019.css" tppabs="https://granbluefantasy.jp/common/css/common.css?20181019" rel="stylesheet" type="text/css"> <link href="common/css/jquery.mCustomScrollbar.css" tppabs="https://granbluefantasy.jp/common/css/jquery.mCustomScrollbar.css" rel="stylesheet" type="text/css"> <link href="common/js/vendor/fancybox/jquery.fancybox.css" tppabs="https://granbluefantasy.jp/common/js/vendor/fancybox/jquery.fancybox.css" rel="stylesheet" type="text/css"> <!--[if lte IE 9]> <link href="common/css/ie.css" tppabs="https://granbluefantasy.jp/common/css/ie.css" rel="stylesheet" type="text/css"> <![endif]--> <script type="text/javascript" src="../ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" tppabs="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript" src="common/js/vendor/jquery.easing-1.3.pack.js" tppabs="https://granbluefantasy.jp/common/js/vendor/jquery.easing-1.3.pack.js"></script> <script type="text/javascript" src="common/js/vendor/jquery.mousewheel-3.0.4.pack.js" tppabs="https://granbluefantasy.jp/common/js/vendor/jquery.mousewheel-3.0.4.pack.js"></script> <script type="text/javascript" src="common/js/vendor/jquery.mCustomScrollbar.concat.min.js" tppabs="https://granbluefantasy.jp/common/js/vendor/jquery.mCustomScrollbar.concat.min.js"></script> <script type="text/javascript" src="common/js/vendor/fancybox/jquery.fancybox.pack.js" tppabs="https://granbluefantasy.jp/common/js/vendor/fancybox/jquery.fancybox.pack.js"></script> <script type="text/javascript" src="common/js/vendor/jquery.cookie.js" tppabs="https://granbluefantasy.jp/common/js/vendor/jquery.cookie.js"></script> <script type="text/javascript" src="common/js/app.js" tppabs="https://granbluefantasy.jp/common/js/app.js"></script> <script type="text/javascript" src="common/js/app.view-top.js-20170115" tppabs="https://granbluefantasy.jp/common/js/app.view-top.js?20170115"></script> <!--[if lt IE 9]> <script src="../html5shiv.googlecode.com/svn/trunk/html5.js" tppabs="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <script src="../ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js" tppabs="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script> <![endif]--> <!--[if lte IE 9]> <script type="text/javascript" src="common/js/ie9-textshadow.js" tppabs="https://granbluefantasy.jp/common/js/ie9-textshadow.js"></script> <![endif]--> <script> function googleplus_win(){ var htmlscope = window.open( 'https://plusone.google.com/_/+1/confirm?url='+encodeURIComponent('index.htm'/*tpa=http://granbluefantasy.jp/*/), '', 'toolbar=0, status=0, width=500, height=600' ); } </script> <script src="../apis.google.com/js/plusone.js" tppabs="https://apis.google.com/js/plusone.js"> {lang:'ja',parsetags:'explicit'} </script> <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','../www.google-analytics.com/analytics.js'/*tpa=https://www.google-analytics.com/analytics.js*/,'ga'); ga('create', 'UA-46301458-1', '404.php'/*tpa=https://granbluefantasy.jp/granbluefantasy.jp*/); ga('send', 'pageview'); ga('create', 'UA-97198934-6', 'auto', {'name': 'llTracker'}); ga('404.php'/*tpa=https://granbluefantasy.jp/llTracker.send*/, 'pageview'); </script> </head> <body id="page-top" class="cat-top"> <div id="fb-root"></div> <script> (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "../connect.facebook.net/ja_JP/all.js#xfbml=1"/*tpa=https://connect.facebook.net/ja_JP/all.js#xfbml=1*/; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); </script> <div id="animation_bg"></div> <header id="site_header"> <div id="cygames_logo"><a href="http://yh.yxdesu.xyz/" target="_blank"><img src="common/images/cygames_logo.png" alt="Zabivaka" width="60" height="18"></a></div> <nav id="global_nav"> <ul class="clearfix"> <li id="gnav_01" class="active"> <a href="index.php.htm" tppabs="https://granbluefantasy.jp/index.php"> <img src="common/images/gnav_01.png" tppabs="https://granbluefantasy.jp/common/images/gnav_01.png" alt="TOP" width="70" height="50"> <img src="common/images/gnav_01_ov.png" tppabs="https://granbluefantasy.jp/common/images/gnav_01_ov.png" alt="TOP" width="70" height="50" class="over"> </a> </li><!-- --><li id="gnav_03"> <a href="world/index.php.htm" tppabs="https://granbluefantasy.jp/world/index.php"> <img src="common/images/gnav_03.png" tppabs="https://granbluefantasy.jp/common/images/gnav_03.png" alt="WORLD" width="98" height="50"> <img src="common/images/gnav_03_ov.png" tppabs="https://granbluefantasy.jp/common/images/gnav_03_ov.png" alt="WORLD" width="98" height="50" class="over"> </a> </li><!-- --><li id="gnav_04"> <a href="system/index.php.htm" tppabs="https://granbluefantasy.jp/system/index.php"> <img src="common/images/gnav_04.png" tppabs="https://granbluefantasy.jp/common/images/gnav_04.png" alt="SYSTEM" width="105" height="50"> <img src="common/images/gnav_04_ov.png" tppabs="https://granbluefantasy.jp/common/images/gnav_04_ov.png" alt="SYSTEM" width="105" height="50" class="over"> </a> </li><!-- --><li id="gnav_05"> <a href="theatre/index.php.htm" tppabs="https://granbluefantasy.jp/theatre/index.php"> <img src="common/images/gnav_05.png" tppabs="https://granbluefantasy.jp/common/images/gnav_05.png" alt="THEATRE" width="120" height="50"> <img src="common/images/gnav_05_ov.png" tppabs="https://granbluefantasy.jp/common/images/gnav_05_ov.png" alt="THEATRE" width="120" height="50" class="over"> </a> </li><!-- --><li id="gnav_06"> <a > <img src="common/images/gnav_06.png" tppabs="https://granbluefantasy.jp/common/images/gnav_06.png" alt="INTERVIEW" width="134" height="50"> <img src="common/images/gnav_06_ov.png" tppabs="https://granbluefantasy.jp/common/images/gnav_06_ov.png" alt="INTERVIEW" width="134" height="50" class="over"> </a> </li><!-- --><li id="gnav_07"> <a > <img src="common/images/gnav_07.png" tppabs="https://granbluefantasy.jp/common/images/gnav_07.png" alt="MEDIA" width="90" height="50"> <img src="common/images/gnav_07_ov.png" tppabs="https://granbluefantasy.jp/common/images/gnav_07_ov.png" alt="MEDIA" width="90" height="50" class="over"> </a> </li> </li><!-- --><li id="gnav_09"> <a target="_blank"> <img src="common/images/gnav_09.png" tppabs="https://granbluefantasy.jp/common/images/gnav_09.png" alt="CHANNEL" width="120" height="50"> <img src="common/images/gnav_09_ov.png" tppabs="https://granbluefantasy.jp/common/images/gnav_09_ov.png" alt="CHANNEL" width="120" height="50" class="over"> </a> </li> </ul> </nav> </header> <div id="change_contents"> <article id="top"> <h1><img src="images/logo.png" alt="GRANBLUE FANTASY グランブルーファンタジー" width="273" height="187"></h1> <section id="links_content" class="box_style_01 clearfix"> <div class="tab" style="position:relative; top: 115px;"><a href="javascript:void(0);"><span class="hide">LINKS</span></a></div> <div class="content"> <a target="_blank" style="display: inline-block; -moz-box-shadow: 0 0 8px rgba(32, 59, 89, 0.5);-webkit-box-shadow: 0 0 8px rgba(32, 59, 89, 0.5);box-shadow: 0 0 8px rgba(32, 59, 89, 0.5);"> <img src="images/linktab_playnow.png" alt="今すぐゲームをプレイ!"> </a> <span style="font-size: 12px; margin-bottom: 7px; display: block;">※在虚构的网页里到处乱点的人脑袋一定有问题。</span> <a target="_blank" style="display: inline-block; -moz-box-shadow: 0 0 8px rgba(32, 59, 89, 0.5);-webkit-box-shadow: 0 0 8px rgba(32, 59, 89, 0.5);box-shadow: 0 0 8px rgba(32, 59, 89, 0.5); margin-bottom: 15px;"> <img src="images/linktab_playdmm.png" alt="DMM版ををプレイ!"> </a> <hr> <div> <div style="display: inline-block; width: 155px; position: relative; top: 13px; "> <a target="_blank"> <img src="images/linktab_qr_smartphone.png" alt="スマホからプレイ!" style="vertical-align: inherit;"> </a> </div> <ul style="display: inline-block; margin-top: 10px; margin-bottom: 5px; border-left: 1px solid #ddd; padding-left: 35px;"> <li style="margin-bottom: 10px;"><a target="_blank"><img src="images/linktab_qr_appstore.png" alt="iOS App Store"></a></li> <li><a target="_blank"><img src="images/linktab_qr_googleplay.png" alt="Android Google Play"></a></li> </ul> </div> <hr> <ul class="linktab_qrlist clearfix"> <li><a target="_blank" href="https://space.bilibili.com/866742" class="change_contents_trigger"><img src="images/to_andapp_logo.png" alt="AndApp"></a></li> <li><a target="_blank" href="https://space.bilibili.com/866742" class="change_contents_trigger" style="position: relative; left: -25px;"><img src="images/to_andapp.png" alt="iOS App Store"></a></li> </ul> </div> </section> <div id="news_content" class="clearfix"> <div class="banner popup-banner"> <a href="https://www.fromsoftware.jp/jp/" target="_blank"> <img src="images/kyogra_banner_off.jpg" alt="今日からはじめるグラブル" width="253" height="80" rollover class="box_style_02"> </a> </div> <div class="banner"> <a href="https://www.naughtydog.com/" target="_blank"> <img src="images/banner_relink_off.jpg" width="253" height="80" rollover class="box_style_02"> </a> </div> <div class="banner"> <a href="https://www.gcores.com/" " target="_blank"> <img src="images/banner_fes2018_off.png" " alt="" width="253" height="80" rollover class="box_style_02"> </a> </div> <div class="banner"> <a href="https://www.taleworlds.com/" target="_blank"> <img src="images/banner_links_off.png" alt="永远不可能完成的游戏" width="253" height="80" rollover class="box_style_02"> </a> </div> <section class="clearfix"> <div class="tab"><a href="javascript:void(0);"><span class="hide">NEWS</span></a></div> <div class="content" id="top_news_list"> <dl> <dt>2019.03.28</dt><dd><div class="inner new"><a " class="change_contents_trigger">zabivaka出生19周年特别号</a></div></dd> <dt>2019.03.25</dt><dd><div class="inner no_new"><a class="change_contents_trigger">「アキラ」4巻発売のお知らせ</a></div></dd> <dt>2019.03.22</dt><dd><div class="inner no_new"><a class="change_contents_trigger">只狼全球发售!</a></div></dd> <dt>2019.03.15</dt><dd><div class="inner no_new"><a class="change_contents_trigger">我选到软件工程课了!</a></div></dd> <dt>2019.03.8</dt><dd><div class="inner no_new"><a class="change_contents_trigger">鬼泣5全球发售!</a></div></dd> </dl> </div> </section> </div> </article> </div> <footer id="site_footer" class="clearfix"> <div id="copyright" class="text_style_03">© Zabivaka, Inc.</div> <div id="site_footer_r"> <div id="site_footer_r_inner"> <nav id="site_footer_nav"> <a href="about_this_site.php.htm" class="text_style_03 change_contents_trigger">网页相关</a> </nav> </div><!-- //#site_footer_r_inner --> </div><!-- //#site_footer_r --> </footer><!-- //#site_footer --> <script type="text/javascript"> (function () { var tagjs = document.createElement("script"); var s = document.getElementsByTagName("script")[0]; tagjs.async = true; tagjs.src = "../s.yjtag.jp/tag.js#site=BN9XBzy,jdvwBAD"/*tpa=https://s.yjtag.jp/tag.js#site=BN9XBzy,jdvwBAD*/; s.parentNode.insertBefore(tagjs, s); }()); </script> <noscript> <iframe src="../b.yjtag.jp/iframe-c=BN9XBzy,jdvwBAD" tppabs="https://b.yjtag.jp/iframe?c=BN9XBzy,jdvwBAD" width="1" height="1" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe> </noscript> <!-- Logicad Code --> <script type="text/javascript">var smnAdvertiserId = '00005631';</script> <script type="text/javascript" src="../cd.ladsp.com/script/pixel.js" tppabs="https://cd.ladsp.com/script/pixel.js"></script> <!-- End Logicad Code --> <!-- Facebook Pixel Code --> <script> !function(f,b,e,v,n,t,s) {if(f.fbq)return;n=f.fbq=function(){n.callMethod? n.callMethod.apply(n,arguments):n.queue.push(arguments)}; if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0'; n.queue=[];t=b.createElement(e);t.async=!0; t.src=v;s=b.getElementsByTagName(e)[0]; s.parentNode.insertBefore(t,s)}(window, document,'script', 'https://connect.facebook.net/en_US/fbevents.js'); fbq('init', '393546927697506'); fbq('track', 'PageView'); </script> <noscript><img height="1" width="1" style="display:none" src="../www.facebook.com/tr-id=393546927697506&ev=PageView&noscript=1" tppabs="https://www.facebook.com/tr?id=393546927697506&ev=PageView&noscript=1" /></noscript> <!-- End Facebook Pixel Code --> <!-- Twitter universal website tag code --> <script> !function(e,t,n,s,u,a){e.twq||(s=e.twq=function(){s.exe?s.exe.apply(s,arguments):s.queue.push(arguments); },s.version='1.1',s.queue=[],u=t.createElement(n),u.async=!0,u.src='../static.ads-twitter.com/uwt.js'/*tpa=https://static.ads-twitter.com/uwt.js*/, a=t.getElementsByTagName(n)[0],a.parentNode.insertBefore(u,a))}(window,document,'script'); // Insert Twitter Pixel ID and Standard Event data below twq('init','nx82h'); twq('track','PageView'); </script> <!-- End Twitter universal website tag code --> <!-- GDN Code --> <script type="text/javascript"> /* <![CDATA[ */ var google_conversion_id = 855467393; var google_custom_params = window.google_tag_params; var google_remarketing_only = true; /* ]]> */ </script> <script type="text/javascript" src="../www.googleadservices.com/pagead/conversion.js" tppabs="https://www.googleadservices.com/pagead/conversion.js"> </script> <noscript> <div style="display:inline;"> <img height="1" width="1" style="border-style:none;" alt="" src="../googleads.g.doubleclick.net/pagead/viewthroughconversion/855467393/-guid=ON&script=0.gif" tppabs="https://googleads.g.doubleclick.net/pagead/viewthroughconversion/855467393/?guid=ON&script=0"/> </div> </noscript> <!-- End GDN Code --> <!-- Yahoo Code for your Target List --> <script type="text/javascript" language="javascript"> /* <![CDATA[ */ var yahoo_retargeting_id = 'E0PU4KJGBP'; var yahoo_retargeting_label = ''; var yahoo_retargeting_page_type = ''; var yahoo_retargeting_items = [{item_id: '', category_id: '', price: '', quantity: ''}]; /* ]]> */ </script> <script type="text/javascript" language="javascript" src="../b92.yahoo.co.jp/js/s_retargeting.js" tppabs="https://b92.yahoo.co.jp/js/s_retargeting.js"></script> <!-- End Yahoo Code for your Target List --> <!-- i-Mobile code --> <script type="text/javascript"> imobile_adv_sid = "20135"; imobile_adv_cq = "entry=2"; </script> <script type="text/javascript" src="../spcnv.i-mobile.co.jp/script/adv.js" tppabs="https://spcnv.i-mobile.co.jp/script/adv.js"></script> <!-- End i-Mobile code --> </body> </html>
其他html文件和index较为类似,不多赘述。
四、技术细节
下面将要着重讲一下这个作业的实现过程,啪啪啪啪啪啪!
使用Teleport Ulitra这个软件可以爬到目标网站的所有源文件,包括但不限于html,css,js,图片,视频等。
如下图所示
当然了,这个软件只能爬到你自己实际上可以访问到的网址,你不能爬霍格沃兹官方网站,不能爬内网,不能爬PornHub。(如果借助一些科学工具,其实也是可以爬到的。)
拿到源文件之后就可以为所欲为了。
省略200个字。
[1]王涵,2019年3月26日,23:17:44
[2]软件工程第二次作业——模仿实现主流网页,凌龙,https://www.cnblogs.com/linglong9068/p/10575529.html
[3]拷贝忍者西西卡,上一秒你的网页很秀,这一秒就是我的网页了。