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文件,找 ...
随机推荐
- .net core 框架调用顺序
API -> AppSrv -> IRepository -> Repository ->
- web应用程序上传文件 超过了最大请求长度
具体问题如下图 具体问题描述:在web应用程序中,上传了200M的文件,出现了如上图的问题,上传较小文件的时候,没有任何的问题.但是,测试的能力,不容小觑,真真的会测试的很全面.测试到了这个问题,好吧 ...
- acm数论之旅--唯一分解定理
题目: 给出n,问n = b^p中p符合该等式的最大值 分析: 先求出所有n的质因子,然后对这m个质因子分类统计,比如 n = 36时,可以分成 2个2,2个3,然后求出所有这些基数的 最大公因数gc ...
- Jmeter-ServerAgent
You can specify the listening ports as arguments (0 disables listening), default is 4444: $ ./star ...
- [C++_QT] 代码中不能有中文的解决方案 换行符问题
#开始 今天开始入坑QT了 似乎是个高大上的东西,师傅一直建议我学这个 (如果用C++做界面的话) 配置好环境之后写了代码运行没问题 但是添加了中文字符之后就 die 了,这个问题的话 LInux上的 ...
- "exit"未定义标签 问题
找了两个多小时,最后才发现是版本问题.因为是网上下的代码,可能用的版本比较高,而我自己的是2.4.10版本的opencv,所以正确的代码应该是如下: CV_Error(CV_StsBadArg,&qu ...
- iframe onload事件触发两次
标准参考 关于 HTML 4.01 规范中 onload 内在事件说明:http://www.w3.org/TR/html401/interact/scripts.html#adef-onload 关 ...
- 大数据计算引擎之Flink Flink CEP复杂事件编程
原文地址: 大数据计算引擎之Flink Flink CEP复杂事件编程 复杂事件编程(CEP)是一种基于流处理的技术,将系统数据看作不同类型的事件,通过分析事件之间的关系,建立不同的时事件系序列库,并 ...
- 本地简单HTTP服务器
cd进要启动服务器的目录 python -m http.server 7800 (Python 3.x) python -m SimpleHTTPServer 7998 (Pyhton2.x)
- ROM, RAM, NVRAM and Flash Memory on Cisco Routers
当谈到路由器有多少内存以及哪些内存做什么时,有时人们会感到困惑. 您应该熟悉4个内存术语,在升级路由器的IOS之前应检查其中2个. 这些是以下内容: ROM:ROM代表只读存储器. 它存储System ...