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代码：
/**
* 首页
*
* @author 何明胜
*
* 2017年12月15日
*/
/** 加载插件 * */
$.ajax({
url : '/plugins/plugins.html', // 这里是静态页的地址
async : false,
type : 'GET', // 静态页用get方法，否则服务器会抛出405错误
success : function(data) {
$($('head')[0]).find('script:first').after(data);
}
});
$(function() {
/** 顶部导航栏 **/
$.ajax({
url : '/module/navigation/topbar.html', // 这里是静态页的地址
async : false,
type : 'GET', // 静态页用get方法，否则服务器会抛出405错误
success : function(data) {
$('#menuBarNo').before(data);
}
});
/** 登录控制 **/
$.ajax({
url : '/module/login/login.html', // 这里是静态页的地址
async : false,
type : 'GET', // 静态页用get方法，否则服务器会抛出405错误
success : function(data) {
$('#menuBarNo').before(data);
}
});
/** 左侧导航栏 **/
$.ajax({
url : '/module/navigation/leftbar.html', // 这里是静态页的地址
async : false,
type : 'GET', // 静态页用get方法，否则服务器会抛出405错误
success : function(data) {
$('#fh5co-main').before(data);
}
});
/** 右侧导航栏 **/
$.ajax({
url : '/module/navigation/rightbar.html', // 这里是静态页的地址
async : false,
type : 'GET', // 静态页用get方法，否则服务器会抛出405错误
success : function(data) {
$('#fh5co-main').after(data);
}
});
});
$(document).ready(function() {
$('#indexCarousel').carousel({
interval : 3000
});// 每隔3秒自动轮播
});
上述JS代码中，包含三个重要的函数 $.ajax( )、$(function() { })、$(document).ready(function() { }。
$.ajax() 方法通过 HTTP 请求加载远程数据，该方法是 jQuery 底层 AJAX 实现，简单易用的高层实现见 $.get, $.post 等。$.ajax() 返回其创建的 XMLHttpRequest 对象，大多数情况下无需直接操作该函数，除非需要操作不常用的选项，以获得更多的灵活性。
$(function() { })是简写，$(function() { });=$(document).ready(function() { })，用来在DOM加载完成（文档载入完毕）之后执行一系列预先定义好的函数。与window.onload = function() { }很像，但是执行的时间不一样 ，$(function() { });是页面框架（页面DOM）加载完成就执行，window.onload = function() { }是页面中所有内容（页面DOM和图片）加载完成才执行。
web-pc项目中index页面分析的更多相关文章
- web项目中实现页面跳转的两种方式
<a href="javascript:"></a>跳转在网页本身,URL不改变 <a href="#"></a> ...
- Web API项目中使用Area对业务进行分类管理
在之前开发的很多Web API项目中,为了方便以及快速开发,往往把整个Web API的控制器放在基目录的Controllers目录中,但随着业务越来越复杂,这样Controllers目录中的文件就增加 ...
- MVC模式在Java Web应用程序中的实例分析
MVC在软件架构中是一种比较重要的架构思想,已经被广泛的应用在实际的java web项目开发中,我们所要了解和掌握的是mvc的架构思想和使用mvc模式来分析和解决问题的方法.当然相同或不同的项目都有各 ...
- abp web.mvc项目中的菜单加载机制
abp中的菜单加载机制 在abp中菜单的定义与我们传统写的框架不一样,它是在编写代码的时候配置,而我们一般写的通用权限管理系统中,是后期在后台界面中添加的.这一点有很大不同.abp关于菜单的定义及管理 ...
- Vue编写的页面部署到springboot网站项目中出现页面加载不全问题
问题描述: 在用Vue脚手架 编写出一个页面之后, 部署到后台项目中, 因为做的是一个页面 按理来说 怎么都能够在服务器上运行 , 我也在自己的node环境测试 , 在同学的springboot上运行 ...
- 在ASP.NET Web API项目中使用Hangfire实现后台任务处理
当前项目中有这样一个需求:由前端用户的一个操作,需要触发到不同设备的消息推送.由于推送这个具体功能,我们采用了第三方的服务.而这个服务调用有时候可能会有延时,为此,我们希望将消息推送与用户前端操作实现 ...
- 在asp.net web form项目中添加webapi接口
我有一个支付宝服务网关是ASP.NET WEB FORM项目,但是最近这个网关需要对外提供几个接口,想了下,使用web api比较合适,实现很简单,GO 1,首先添加一个文件夹名字叫App_Start ...
- Maven项目中pom文件分析
pom英文全称: project object model 1.概述 pom.xml文件描述了maven项目的基本信息,比如groupId,artifactId,version等.也可以对maven项 ...
- 在.net core web api项目中安装swagger展示api接口（相当于生成api文档）
1, 建立或打开项目后,在“程序包管理器控制台”中执行以下命令添加包引用: Install-Package Swashbuckle.AspNetCore 2,在项目中打开Startup.cs文件,找 ...
随机推荐
- requests使用小结（不定期更新）
request是python的第三方库,使用上比urllib和urllib2要更方便. 0x01 使用session发送:能保存一条流中获取的cookie,并自动添加到http头中 s = reque ...
- php 接口获取公网ip并获取天气接口信息
<?php function get_ip(){ //判断服务器是否允许$_SERVER if(isset($_SERVER)){ if(isset($_SERVER['HTTP_X_FORWA ...
- Mysql主从复制，双主热备
Mysql主从复制: 主从复制: 主机准备工作: 开启bin.Log 注意:server-id 是唯一的值 重启mysql:service mysql restart 查看是否开启成功: 查看当前状 ...
- Dataguard单机—>单机
本演示案例所用环境: primary Standby OS Hostname CHINA-DB1 CHINA-DB2 OS Version SUSE Linux Enterprise Server 1 ...
- Redis注册成服务
注册服务 redis-server.exe –-service-install redis.windows.conf 删除服务 redis-server –-service-uninstall 开启服 ...
- C语言：根据以下公式计算s，s=1+1/(1+2)+1/(1+2+3)+...+1/(1+2+3+...+n) -在形参s所指字符串中寻找与参数c相同的字符，并在其后插入一个与之相同的字符，
//根据一下公式计算s,并将计算结果作为函数返回值,n通过形参传入.s=1+1/(1+2)+1/(1+2+3)+...+1/(1+2+3+...+n) #include <stdio.h> ...
- 「POI2010」Bridges
传送门 Luogu团队题链接 解题思路 首先二分答案,然后在所有边权小于二分值的边和所有点组成的图中判欧拉回路. 由于可能出现混合图,所以要用到网络流. 把所有无向边钦定一个方向,那么原图就是一个有向 ...
- JavaSE复习~运算符与表达式
运算符 运算符:进行特定操作的符号 表达式:用运算符进行操作的式子 算术运算符 首先是加减乘除:+.-.*./还有取余:% 整数进行算术操作得到的还是整数,例如整数使用 / 得到的是整数(商的整数部分 ...
- 《掌握融资必备知识》---创业学习---训练营第一课---HHR---
一,<开始学习> 1,四个思考题: (1)从你决定开始融资,到你拿到钱,你都需要经历哪些环节? (2)你知道投资机构内部的工作流程吗? (3)融资最好的时机是什么时候? (4)创投圈的专业 ...
- Spring Boot Web 开发@Controller @RestController 使用教程
在 Spring Boot 中,@Controller 注解是专门用于处理 Http 请求处理的,是以 MVC 为核心的设计思想的控制层.@RestController 则是 @Controller ...