web-pc项目中index页面分析
Posted ratels
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了web-pc项目中index页面分析相关的知识，希望对你有一定的参考价值。
先上html代码：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>何明胜的个人网站</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="description" content="欢迎来到何明胜的个人网站.本站主要用于记录和分享本人的学习心得和编程经验,并分享常见可复用代码、推荐书籍以及软件等资源.本站源码已托管github,欢迎访问：https://github.com/HelloHusen/web" /> <meta name="keywords" content="何明胜,何明胜的个人网站,何明胜的博客,一格的程序人生" /> <meta name="author" content="何明胜,一格"> <!-- 网站图标 --> <link rel="shortcut icon" href="/images/favicon.ico"> <!-- jQuery --> <script src="/plugins/jquery/js/jquery-3.2.1.min.js"></script> <!-- 最新更新文章简介 --> <link rel="stylesheet" href="/css/index/article-profile.css"> <!-- 最新更新文章简介 --> <link rel="stylesheet" href="/css/index/index.css"> <!-- 加载最新3篇博客 --> <script src="/js/index/latestblog.js"></script> <!-- 加载最近3篇代码 --> <script src="/js/index/latestcode.js"></script> <!-- js文件 --> <script src="/js/index/index.js"></script> </head> <body> <input id="menuBarNo" type="hidden" value="0" /> <div id="fh5co-page"> <!-- 左侧导航 --> <!-- 中间内容 --> <div id="fh5co-main"> <!-- 首页轮播 --> <div id="indexCarousel" class="carousel slide carousel-height carousel-margin"> <!-- 轮播（Carousel）指标 --> <ol class="carousel-indicators"> <li data-target="#indexCarousel" data-slide-to="0" class="active"></li> <li data-target="#indexCarousel" data-slide-to="1"></li> <li data-target="#indexCarousel" data-slide-to="2"></li> </ol> <!-- 轮播（Carousel）项目 --> <div class="carousel-inner"> <div class="item carousel-height active"> <img src="/images/carousel/casel-1.jpg" alt="First slide"> </div> <div class="item carousel-height"> <img src="/images/carousel/casel-2.jpg" alt="Second slide"> </div> <div class="item carousel-height"> <img src="/images/carousel/casel-3.jpg" alt="Third slide"> </div> </div> <!-- 轮播（Carousel）导航 --> <a class="left carousel-control" href="#indexCarousel" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#indexCarousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> <div class="fh5co-narrow-content article-box-div"> <h2 class="fh5co-heading article-bar" data-animate-effect="fadeInLeft">最近更新的博客</h2> <a href="/module/blog.hms" class="read-more-article"><span class="glyphicon glyphicon-hand-right"></span> 阅读更多博客</a> <div id="latestBlog" class="row"></div> </div> <hr class="index-hr" /> <div class="fh5co-narrow-content article-box-div"> <h2 class="fh5co-heading article-bar" data-animate-effect="fadeInLeft">最近更新的代码</h2> <a href="/module/code.hms" class="read-more-article"><span class="glyphicon glyphicon-hand-right"></span> 阅读更多代码</a> <div id="latestCode" class="row"></div> </div> <!-- 每日一言 --> <script src="https://api.lwl12.com/hitokoto/main/get?encode=js&charset=utf-8"></script> <div id="lwlhitokoto"> <script> lwlhitokoto(); </script> </div> </div> <!-- 右侧导航 --> </div> </body> </html>
再上javascript代码：
1 /** 2 * 首页 3 * 4 * @author 何明胜 5 * 6 * 2017年12月15日 7 */ 8 9 /** 加载插件 * */ 10 $.ajax({ 11 url : ‘/plugins/plugins.html‘, // 这里是静态页的地址 12 async : false, 13 type : ‘GET‘, // 静态页用get方法，否则服务器会抛出405错误 14 success : function(data) { 15 $($(‘head‘)[0]).find(‘script:first‘).after(data); 16 } 17 }); 18 19 $(function() { 20 /** 顶部导航栏 **/ 21 $.ajax({ 22 url : ‘/module/navigation/topbar.html‘, // 这里是静态页的地址 23 async : false, 24 type : ‘GET‘, // 静态页用get方法，否则服务器会抛出405错误 25 success : function(data) { 26 $(‘#menuBarNo‘).before(data); 27 } 28 }); 29 30 /** 登录控制 **/ 31 $.ajax({ 32 url : ‘/module/login/login.html‘, // 这里是静态页的地址 33 async : false, 34 type : ‘GET‘, // 静态页用get方法，否则服务器会抛出405错误 35 success : function(data) { 36 $(‘#menuBarNo‘).before(data); 37 } 38 }); 39 40 /** 左侧导航栏 **/ 41 $.ajax({ 42 url : ‘/module/navigation/leftbar.html‘, // 这里是静态页的地址 43 async : false, 44 type : ‘GET‘, // 静态页用get方法，否则服务器会抛出405错误 45 success : function(data) { 46 $(‘#fh5co-main‘).before(data); 47 } 48 }); 49 50 /** 右侧导航栏 **/ 51 $.ajax({ 52 url : ‘/module/navigation/rightbar.html‘, // 这里是静态页的地址 53 async : false, 54 type : ‘GET‘, // 静态页用get方法，否则服务器会抛出405错误 55 success : function(data) { 56 $(‘#fh5co-main‘).after(data); 57 } 58 }); 59 }); 60 61 $(document).ready(function() { 62 $(‘#indexCarousel‘).carousel({ 63 interval : 3000 64 });// 每隔3秒自动轮播 65 });
上述JS代码中，包含三个重要的函数 $.ajax( )、$(function() { })、$(document).ready(function() { }。
$.ajax() 方法通过 HTTP 请求加载远程数据，该方法是 jQuery 底层 AJAX 实现，简单易用的高层实现见 $.get, $.post 等。$.ajax() 返回其创建的 XMLHttpRequest 对象，大多数情况下无需直接操作该函数，除非需要操作不常用的选项，以获得更多的灵活性。
以上是关于web-pc项目中index页面分析的主要内容，如果未能解决你的问题，请参考以下文章
javascript UV Index Monitor App订阅PubNub并显示UV索引值。博文的代码片段。在这里查看项目：https：// githu
c_cpp UV Index Indicator订阅PubNub并使用颜色显示UV索引值。博文的代码片段。在这里查看项目：https：/