Elio_21
Elio_21

简单零基础学会H5移动端滑动翻页效果

这篇文章教大家如何使用原生js和少量css3动画来实现HTML5的翻页效果，我会尽量讲得细一点，让零基础的同学也能学会这个简单的案例。

先来看下html的布局代码：
index.html

一个div包裹5个div ， 相当于5个不同的页面。


<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>移动端H5翻页案例title>
	<script type="text/javascript" src="js/index.js" >script>
	<script type="text/javascript" src="js/sp.js" >script>
	<link rel="stylesheet" type="text/css" href="css/index.css"/>
head>
<body>
		<div class="show">
			<div class="page">第一页div>
			<div class="page">第二页div>
			<div class="page">第三页div>
			<div class="page">第四页div>
			<div class="page">第五页div>
		div>
body>
html>

如果是手机端的话一定要加上第5、6行这两个标签，第五行的标签可以自适配手机的宽高 ，第六行可以使用当前浏览器版本所支持的最高级标准模式渲染。

简单零基础学会H5移动端滑动翻页效果_第1张图片

这是引用的文件， index.js是等下设置翻页的js代码 ，sp.js是适配不同尺寸的js代码（上个文章有教程），index.css就是设置样式和少量css3翻页动画的。

简单零基础学会H5移动端滑动翻页效果_第2张图片
布局效果图：

打开控制台 点击标红框的小手机即可调成移动端查看。

简单零基础学会H5移动端滑动翻页效果_第3张图片

这里默认使用iPhone6//7/8演示。

简单零基础学会H5移动端滑动翻页效果_第4张图片

下面再看看css样式代码：
index.css

*{
	padding: 0;
	margin: 0;
}

html,body{
	height: 100%;
}

/*大容器*/
.show{
	width: 23.437rem;
	height: 100%;
	overflow: hidden;
	margin: 0 auto;
	position: relative;
}

.page{
	width: 23.437rem;
	height: 100%;
	overflow: hidden;
	position: absolute;
	display: none;
	font-size: 50px;
	text-align: center;
}

/*设置每一页的背景色*/
.page:nth-child(1){
	display: block;
	background-color: pink;
}
.page:nth-child(2){
	
	background-color: gold;
}
.page:nth-child(3){

	background-color: seagreen;
}
.page:nth-child(4){

	background-color: peachpuff;
}
.page:nth-child(5){

	background-color:darkgrey;
}

.hide{
	display: none;
}

/*设置翻页的动画*/

.out_top{
	animation: out_top .5s linear both;
}
.in_top{
	animation: in_top .5s linear both;
}
.out_down{
	animation: out_down .5s linear both;
}
.in_down{
	animation: in_down .5s linear both;
}

/*当前页-->向上翻-->隐藏*/
@keyframes out_top{
	from{
		transform: translateY(0%);
	}
	to{
		transform: translateY(-100%);
	}
}
/*下一页-->向上翻-->显示*/
@keyframes in_top{
	from{
		transform: translateY(100%);
	}
	to{
		transform: translateY(0%);
	}
}
/*当前页-->向下拉-->隐藏*/
@keyframes out_down{
	from{
		transform: translateY(0%);
	}
	to{
		transform: translateY(100%);
	}
}
/*上一页-->向下拉-->显示*/
@keyframes in_down{
	from{
		transform: translateY(-100%);
	}
	to{
		transform: translateY(0%);
	}
}

一定要在包裹页面page的容器里面加上overflow: hidden; 超出画面隐藏，否则页面会乱，还要用定位固定在同一个锚点。
简单零基础学会H5移动端滑动翻页效果_第5张图片
先让每个页面都隐藏起来，利用nth-child()选择器给每个页面设置不同的背景颜色，利于分辨，最后让第一页显示出来。
简单零基础学会H5移动端滑动翻页效果_第6张图片
效果图如下：
简单零基础学会H5移动端滑动翻页效果_第7张图片
最后看一下js代码：
index.js

绝大部分代码我都添加了注释，方便看懂

var pages = document.getElementsByClassName('page');//获取页面的节点集合
var startY,endY,dis = 0; //第一次触碰的焦点 ，最后触碰的焦点 ，滑动距离
var index = 0;//页码

//获取第一次触碰屏幕的焦点startY的事件
document.addEventListener('touchstart',function(e){
	var touch = e.touches[0];
	startY = touch.pageY;
})

//获取最后触摸的焦点endY , 算出滑动屏幕的距离dis的事件
document.addEventListener('touchmove',function(e){
	var touch = e.touches[0];
	endY = touch.pageY;
	dis = startY - endY;
})

//滑动事件结束 如果手指滑动距离大于150 并且正向则执行pageTop函数 -->向上滑动翻页
//滑动事件结束 如果手指滑动距离大于150 方向为负则执行pageDown函数 -->向下滑动翻页
//翻页完毕 执行qingling函数 进行数值清零
document.addEventListener('touchend',function(e){
	if(Math.abs(dis)>150){
		if(dis>0){
			pageTop(index);
			qingling();
		}else{
			pageDown(index);
			qingling();
		}
	}
})

//向上翻页并添加翻页动画的样式
function pageTop(n){
	if(n<pages.length-1){
		n++;
		index++;
		
//  		这个定时器的作用执行此函数一秒后  本页面添加一个隐藏的样式  随后滑走
		setTimeout(function(){
			pages[n-1].classList.add('hide');
		},1000)
		
		pages[n-1].classList.add('out_top');
		pages[n-1].classList.remove('in_top','out_down','in_down');
		pages[n].classList.add('in_top');
		pages[n].classList.remove('out_top','out_down','in_down');
		pages[n].style.display = 'block';
	}
}

//向下翻页并添加翻页动画的样式
function pageDown(n){
	if(n>0){
		n--;
		index--;
		
		setTimeout(function(){
			pages[n+1].classList.add('hide');
		},1000)
		
		pages[n+1].classList.add('out_down');
		pages[n+1].classList.remove('in_top','out_top','in_down');
		pages[n].classList.add('in_down');
		pages[n].classList.remove('out_top','out_down','in_top');
	}
}

//使相关参数清零
function qingling(){
	startY = 0;
	endY = 0;
	dis = 0;
}

touchstart ,touchmove touchend这些都是触碰事件的固定参数，就像onclick这样, addEventListener(‘事件类型’，要执行的函数)

简单零基础学会H5移动端滑动翻页效果_第8张图片
最后的效果：

视频演示

简单零基础学会H5移动端滑动翻页效果_第9张图片
代码不是很多，但是这个案例很实用，大家可以尝试理解背一下，可以直接套用的
等下我会把完整的项目包发上来，大家可以免费下载学习。

点击免费下载完整项目包

你可能感兴趣的:(前端,javascript,html,html5,css,js)

  • 前端小食堂 | Day17 - 前端安全の金钟罩 喵爪排序 前端安全状态模式
    ️今日盾牌：XSS/CSRF攻防全解析1.XSS防御の三重结界//危险操作：直接渲染未过滤内容document.getElementById('content').innerHTML=userInput;//✅安全姿势一：文本转义constescapeHTML=(str)=>{constmap={'&':'&','':'>','"':'"',"'":'''};ret
  • 前端面试 请叫我子鱼 编程语言笔试面试程序员webinterview
    前端面试之道JS基础知识点及常考面试题原始（Primitive）类型面试题：原始类型有哪几种？null是对象嘛？在JS中，存在着6种原始值，分别是：booleannullundefinednumberstringsymbol首先原始类型存储的都是值，是没有函数可以调用的对象（Object）类型面试题：对象类型和原始类型的不同之处？函数参数是对象会发生什么问题？在JS中，除了原始类型那么其他的都是对
  • chokidar - chokidar 初识（初识案例演示、初识案例解读、初识案例测试） 我命由我12345 Node.js简化库编程node.jsjsjavascript前端框架前端npmhtml5
    一、chokidar1、chokidar概述chokidar是一个用于监视文件系统变化的Node.js库chokidar提供了一种简单、高效的方式来监视文件和目录的创建、修改、删除等操作chokidar是是fs.watch和fs.watchFile方法的增强版，解决了它们在一些平台上的不一致性和局限性2、chokidar的特点跨平台的支持：chokidar在Windows、Linux、macOS上
  • Vue前端实现多个条件表格搜索 1724580787 前端vue.jsjavascript
    文章目录操作实现效果测试json数据搜索栏条件过滤完成搜索表格栏完整代码操作实现效果在vue文件中通过js代码完成多条件搜索符合条件的table数据，本文使用了element-ui组件创建表格。效果如下图所示：测试json数据[{"test1":"","test2":"","test3":"","test4":""}...//这里只展示一条数据]搜索栏条件过滤完成搜索computed计算方法监视t
  • adb 如何导出手机的文件 风继续吹.. 工具类Uni-Appadb智能手机uniappsqlite
    目录1.开启USB调试2.连接设备3.启动ADB4.导出文件使用adbpull命令5.可视化工具预览adb（AndroidDebugBridge）是Android开发中常用的一个工具，它允许开发者通过电脑与Android设备进行通信。如果你想通过adb导出手机上的文件，你可以按照以下步骤业务需求:前端通过使用uni-app的sqlite(关系型数据库系统),存储了大量的机密数据在手机上,直接通过代
  • Spring Boot 集成 Kafka 消息发送方案 weixin_43833540 springbootkafka
    一、引言在SpringBoot项目中，Kafka是常用的消息队列，可实现高效的消息传递。本文介绍三种在SpringBoot中使用Kafka发送消息的方式，分析各自优缺点，并给出对应的pom.xml依赖。二、依赖引入在pom.xml中添加以下依赖：org.springframework.kafkaspring-kafka3.0.8org.jsonjson20231013若要进行测试，可添加sprin
  • Kafka 的消息压缩机制：优化存储与传输的利器 阿贾克斯的黎明 javalinqc#java
    目录Kafka的消息压缩机制：优化存储与传输的利器一、消息压缩机制的重要意义1.减少存储成本2.提升网络传输效率二、Kafka常用的消息压缩算法1.GZIP压缩2.Snappy压缩3.前端展示压缩状态（Vue3+TS）在消息中间件的大家族中，Kafka以其卓越的性能而备受瞩目。其中，Kafka的消息压缩机制是一项非常重要的特性，它就像是一个高效的“压缩包”，在不损失数据内容的前提下，有效减少数据的
  • H5 毛玻璃个人简约引导页源码 caslncas 源码html5
    源码名称：毛玻璃个人简约引导页源码源码介绍：一款毛玻璃引导页源码，可以大量添加旗下站点和友情链接。手机端、电脑端背景自适应。需求环境：H5下载地址：https://www.changyouzuhao.cn/11921.html
  • Django系列教程（15）——上传文件 l软件定制开发工作室 Django教程djangookhttppython
    目录Django文件上传需要考虑的重要事项Django文件上传的3种常见方式项目创建与设置创建模型URLConf配置使用一般表单上传文件使用ModelForm上传文件Django文件上传需要考虑的重要事项文件或图片一般通过表单进行。用户在前端点击文件上传，然后以POST方式将数据和文件提交到服务器。服务器在接收到POST请求后需要将其存储在服务器上的某个地方。Django默认的存储地址是相对于根目
  • @Autowired 和 @Resource 注解的区别 在努力的韩小豪 springspringbootjava-eejava
    前言@Autowired和Resource是Spring中用于依赖注入的注解，但两者在实现机制和使用方式上有显著差异。主要区别1.来源不同@Autowired：由Spring框架提供（org.springframework.beans.factory.annotation），与Spring强耦合。@Resource：由JSR-250规范定义（javax.annotation.Resource），属
  • 【业务场景实战】JWT实现用户登录 仰望-星空~~ java
    在我们平时登录注册的过程中，我们的信息都会由浏览器发送给后端进行处理，然后再插入到数据库中，下次我们进行登录的时候，只需要输入用户名和密码就可以登录成功进入网站进行操作了。但个人信息暴露在大众面前这是极其不安全的，对于我们的隐私，我们并不希望被别人知道。所以我们在登录的时候，浏览器中进行传递的数据有些是会脱敏、有些是需要进行加密之后才能进行传递的。一、JWT简介JWT（全称JSONWEBToken
  • 第二章 EXI协议原理与实现--7.8 测试ISO15118-20命令 快活林高老大 ISO15118EXI
    7EfficientXML编解码库7.8测试ISO15118-20命令编解码现在开始使用EfficientXML的库测试ISO15118-20命令的编解码是否正确，是否与EXICodec.jar的结果一致。在本书的附录B中罗列了ISO15118-20的所有命令（json、xml、exi），感兴趣的读者可以使用这些命令自己进行编解码验证。编写测试程序mytest20-all.c，对15118-2命令
  • VUE-Element-UI：select-tree johnrui FrontEndvue.js
    一、概述本文主要是在Element-UI+VUE框架下，利用el-select、el-tree组件实现了下拉框多选、回显的效果，如下图：二、实例代码1.HTML代码2.JS代码varvm=newVue({el:'#app',data:{mineStatus:"",mineStatusValue:[],remarksItemCheckedList:[],//回显数据["A","B"]remarksI
  • 优秀的前端框架 johnrui FrontEndweb
    soybean-admin:https://gitcode.com/gh_mirrors/soy/soybean-adminsoybean-admin(演示):https://elp.soybeanjs.cn/home
  • Springboot List集合的校验方式 johnrui springbootlist后端
    pom.xml引入org.hibernate.validatorhibernate-validator6.2.0.Finalorg.springframework.bootspring-boot-starter-validation校验实体类注解@Data@NoArgsConstructor@AllArgsConstructor@JsonIgnoreProperties(ignoreUnknown
  • 浏览器渲染流程 前端岳大宝 前端核心知识总结前端javascript
    以下是关于浏览器渲染流程的系统梳理，涵盖基础原理、关键阶段、性能优化及进阶知识，帮助我们深入理解现代浏览器如何将代码转换为用户可见的像素：一、核心渲染流程（CriticalRenderingPath）浏览器渲染流程分为六个核心阶段，决定页面首次加载和更新的性能：1.构建DOM（DocumentObjectModel）过程：解析HTML生成DOM树（逐步解析，遇到可能阻塞）。阻塞因素：未添加asyn
  • 网页版 123 分身数字人源码搭建，OEM贴牌 18538162800=余 音视频矩阵
    在数字化时代的浪潮下，数字人技术蓬勃发展，网页版123分身数字人源码搭建为众多开发者和企业提供了实现个性化数字人应用的可能。本文将深入探讨其技术开发过程，从底层架构到关键技术实现，全方位解析如何构建一个功能强大的网页版数字人系统。技术架构设计前端展示层HTML5与CSS3：构建数字人的可视化界面，实现流畅的动画效果和交互元素。利用CSS3的过渡、动画属性，为数字人的动作、表情变化提供细腻的视觉呈现
  • 入门 Canvas：Web 绘图的强大工具 Hopebearer_ 前端es6javascriptcanva可画
    文章目录入门Canvas：Web绘图的强大工具一、Canvas简介二、Canvas的基本用法（一）绘制基本图形（二）绘制文本三、Canvas的应用场景（一）数据可视化（二）游戏开发（三）图像编辑四、Canvas的动画效果五、Canvas的优势与局限性（一）优势（二）局限性六、总结入门Canvas：Web绘图的强大工具在Web开发的广阔天地中，为了满足用户对丰富、交互性强的体验的不断追求，前端技术持
  • 红宝书第十一讲：超易懂版「ES6类与继承」零基础教程：用现实例子+图解实现 kovlistudio 前端es6javascript开发语言前端学习
    红宝书第十一讲：超易懂版「ES6类与继承」零基础教程：用现实例子+图解实现资料取自《JavaScript高级程序设计（第5版）》。查看总目录：红宝书学习大纲一、ES6类的核心语法：把事物抽象成“模板”想象你要设计一款「动物养成游戏」，需要创建多种动物对象。ES6的class就是一个代码模板：//基础类（Animal是模板，有名称和吃东西方法）classAnimal{constructor(name
  • 探索HTML5 Canvas的无限可能：一个丰富多彩的开源项目 黎情卉Desired
    探索HTML5Canvas的无限可能：一个丰富多彩的开源项目去发现同类优质开源项目:https://gitcode.com/在这个充满活力的数字时代，JavaScript、HTML和CSS已经成为构建互动式网页体验的核心技术。今天，我们向您推荐一个独特而有趣的开源项目，它将这些技术结合在一起，创造出一系列生动活泼的可视化元素，包括时钟、计时器、地图、国际象棋、温度计等，让您在学习和实践中感受HTM
  • 学术PPT模板_院士_国家科学技术奖_杰青基金_长江学者特聘教授_校企联聘长江_重点研发_优青_青长_青拔ppt制作案例 WordinPPT_2025 学术答辩PPTpptpowerpoint
    学术PPT模板院士_国家科学技术奖_杰青基金_长江学者特聘教授_校企联聘长江_重点研发_优青_青长_青拔/杰出青年科学基金答辩PPT模板wordinppt.com/gjjq.html国自然项目。“杰青”也成为国内仅次于两院院士的第二层次高端人才，是科学领域评判创新潜力与学术水平的权威标尺。2025年起，将国家杰出青年科学基金项目更名为青年科学基金项目（A类）。/长江学者答辩PPT模板wordinp
  • Vue 3 事件总线详解：构建组件间高效通信的桥梁 A-Kamen vue.js前端javascript
    Vue3事件总线详解：构建组件间高效通信的桥梁为什么需要事件总线？使用mitt实现事件总线1.安装mitt2.创建事件总线3.在组件中使用事件总线发送端组件（例如ComponentA.vue）接收端组件（例如ComponentB.vue）自定义实现事件总线总结在复杂的前端应用中，组件之间的通信往往需要一种灵活且解耦的方式。传统的Vue2中，我们常使用全局事件总线来实现这种通信，但在Vue3中，由于
  • TinyMCE插件是否支持Word图片的直接复制与web上传？ 2501_90694782 umeditor粘贴wordueditor粘贴wordueditor复制wordueditor上传word图片ueditor导入wordueditor导入pdfueditor导入ppt
    要求：开源，免费，技术支持编辑器：TinyMCE前端：vue,vue2-cli,vue3-cli后端：java,jsp,springboot,asp.net,php,asp,.netcore,.netmvc,.netform功能：导入Word,导入Excel,导入PPT(PowerPoint),导入PDF,复制粘贴word,导入微信公众号内容,web截屏平台：Windows,macOS,Linux
  • 探索HTML5 Canvas：创造动态与交互性网页内容的强大工具 A-Kamen html5前端html
    探索HTML5Canvas：创造动态与交互性网页内容的强大工具引言在HTML5的众多新特性中，Canvas无疑是最引人注目的元素之一。它为网页设计师和开发者提供了一个通过JavaScript和HTML直接在网页上绘制图形、图像以及进行动画处理的画布。Canvas的灵活性和强大功能，使得它成为创造动态、交互性网页内容的首选工具。本文将深入探讨HTML5Canvas的基本用法、应用场景以及如何利用它来
  • Next：Error: Image with src “https://via.placeholder.com/50“ is missing required “height“ property. dingcho 前端SEOreact前端mui
    在Next.js中使用next/image组件时，需要同时提供width和height属性，或者使用fill属性。你遇到的错误提示表明缺少height属性，下面是修正后的代码：setIsLoading(false)}onError={()=>setIsLoading(false)}/>
  • 【JavaWeb学习Day25】 quo-te JavaWebvue黑马
    Web前端实战ElementPlus什么是ElementPlusElementPlus：是饿了么团队研发的，基于Vue3，面向设计师和开发者的组件库。组件：组成网页的部件，例如超链接、按钮、图片、表格、表单、分页条等等。官网：一个Vue3UI框架|ElementPlus快速入门准备工作：1.创建vue项目2.参照官方文档，安装ElementPlus组件库（在当前工程的目录下）：npminstall
  • JS获取URL中参数值的4种方法 夕阳_醉了 javascript前端html
    方法1：现代浏览器都支持URL和URLSearchParams对象，可以很方便地从URL中提取参数//假设当前URL为"https://example.com/?name=John&age=30"consturl=newURL(window.location.href);//或者你可以直接传入一个URL字符串constname=url.searchParams.get('name');//"Joh
  • 企业微信机器人与DeepSeek结合实现交互的应用案例 老胖闲聊 办公自动化企业微信机器人交互
    以下是一个结合企业微信机器人与深度求索（Deepseek）AIGC模型的交互式应用实现示例，包含完整代码及逐行注释：1.实现架构用户消息->企业微信服务器->自建服务端->DeepseekAPI->处理响应->返回企业微信群2.完整实现代码（deepseek_wechat_bot.py）#-*-coding:utf-8-*-importosimportjsonimportrequestsfromf
  • Js 获取url的参数值 程序猿老罗 前端前端javascript
    Js获取url的参数值，支持获取中文的值。//获取url中的参数值functiongetUrlParam(name){name=name.replace(/[\[\]]/g,"\\$&");varregex=newRegExp("[?&]"+name+"(=([^&#]*)|&|#|$)");varresults=regex.exec(window.location.href);if(!resul
  • Sass：深度解析与实战应用 QQ828929QQ sass前端css
    在前端开发的浪潮中，CSS预处理器因其强大的功能和灵活性而备受推崇。其中，Sass（SyntacticallyAwesomeStylesheets）无疑是这些预处理器中的佼佼者。本文将深入解析Sass的核心概念、语法特性以及实战应用，并通过代码样例展示其强大的功能。Sass是什么？Sass（SyntacticallyAwesomeStylesheets）是一种CSS预处理器，它允许我们使用变量、嵌
  • SQL的各种连接查询 xieke90 UNION ALLUNION外连接内连接JOIN
    一、内连接   概念：内连接就是使用比较运算符根据每个表共有的列的值匹配两个表中的行。                 内连接（join 或者inner join ）       SQL语法：       select * fron
  • java编程思想--复用类 百合不是茶 java继承代理组合final类
          复用类看着标题都不知道是什么,再加上java编程思想翻译的比价难懂,所以知道现在才看这本软件界的奇书   一:组合语法:就是将对象的引用放到新类中即可     代码:     package com.wj.reuse; /** * * @author Administrator 组
  • [开源与生态系统]国产CPU的生态系统 comsci cpu
          计算机要从娃娃抓起...而孩子最喜欢玩游戏....       要让国产CPU在国内市场形成自己的生态系统和产业链,国家和企业就不能够忘记游戏这个非常关键的环节....       投入一些资金和资源,人力和政策,让游
  • JVM内存区域划分Eden Space、Survivor Space、Tenured Gen，Perm Gen解释 商人shang jvm内存
    jvm区域总体分两类，heap区和非heap区。heap区又分：Eden Space（伊甸园）、Survivor Space(幸存者区)、Tenured Gen（老年代-养老区）。 非heap区又分：Code Cache(代码缓存区)、Perm Gen（永久代）、Jvm Stack(java虚拟机栈)、Local Method Statck(本地方法栈)。 HotSpot虚拟机GC算法采用分代收
  • 页面上调用 QQ oloz qq
    <A href="tencent://message/?uin=707321921&amp;Site=有事Q我&amp;Menu=yes">   <img style="border:0px;" src=http://wpa.qq.com/pa?p=1:707321921:1></a>
  • 一些问题 文强chu 问题
    1.eclipse 导出 doc  出现“The Javadoc command does not exist.” javadoc command 选择 jdk/bin/javadoc.exe 2.tomcate 配置 web 项目 ..... SQL:3.mysql  * 必须得放前面 否则  select&nbs
  • 生活没有安全感 小桔子 生活孤独安全感
           圈子好小，身边朋友没几个，交心的更是少之又少。在深圳，除了男朋友，没几个亲密的人。不知不觉男朋友成了唯一的依靠，毫不夸张的说，业余生活的全部。现在感情好，也很幸福的。但是说不准难免人心会变嘛，不发生什么大家都乐融融，发生什么很难处理。我想说如果不幸被分手(无论原因如何)，生活难免变化很大，在深圳，我没交心的朋友。明
  • php 基础语法 aichenglong php 基本语法
    1 .1 php变量必须以$开头 <?php $a=” b”; echo ?> 1 .2 php基本数据库类型 Integer  float/double Boolean string 1 .3 复合数据类型 数组array和对象 object 1 .4 特殊数据类型  null 资源类型(resource)    $co
  • mybatis tools 配置详解 AILIKES mybatis
    MyBatis Generator中文文档 MyBatis Generator中文文档地址： http://generator.sturgeon.mopaas.com/ 该中文文档由于尽可能和原文内容一致，所以有些地方如果不熟悉，看中文版的文档的也会有一定的障碍，所以本章根据该中文文档以及实际应用，使用通俗的语言来讲解详细的配置。 本文使用Markdown进行编辑，但是博客显示效
  • 继承与多态的探讨 百合不是茶 JAVA面向对象 继承 对象
    继承 extends   多态 继承是面向对象最经常使用的特征之一：继承语法是通过继承发、基类的域和方法 //继承就是从现有的类中生成一个新的类，这个新类拥有现有类的所有extends是使用继承的关键字：     在A类中定义属性和方法； class A{ //定义属性 int age； //定义方法 public void go
  • JS的undefined与null的实例 bijian1013 JavaScriptJavaScript
    <form name="theform" id="theform"> </form> <script language="javascript"> var a alert(typeof(b)); //这里提示undefined if(theform.datas
  • TDD实践（一） bijian1013 java敏捷TDD
    一.TDD概述         TDD：测试驱动开发，它的基本思想就是在开发功能代码之前，先编写测试代码。也就是说在明确要开发某个功能后，首先思考如何对这个功能进行测试，并完成测试代码的编写，然后编写相关的代码满足这些测试用例。然后循环进行添加其他功能，直到完全部功能的开发。     
  • [Maven学习笔记十]Maven Profile与资源文件过滤器 bit1129 maven
    什么是Maven Profile Maven Profile的含义是针对编译打包环境和编译打包目的配置定制，可以在不同的环境上选择相应的配置，例如DB信息，可以根据是为开发环境编译打包，还是为生产环境编译打包，动态的选择正确的DB配置信息   Profile的激活机制 1.Profile可以手工激活，比如在Intellij Idea的Maven Project视图中可以选择一个P
  • 【Hive八】Hive用户自定义生成表函数(UDTF) bit1129 hive
    1. 什么是UDTF   UDTF，是User Defined Table-Generating Functions，一眼看上去，貌似是用户自定义生成表函数，这个生成表不应该理解为生成了一个HQL Table， 貌似更应该理解为生成了类似关系表的二维行数据集   2. 如何实现UDTF 继承org.apache.hadoop.hive.ql.udf.generic
  • tfs restful api 加auth 2.0认计 ronin47
    　　目前思考如何给tfs的ngx-tfs api增加安全性。有如下两点： 　　一是基于客户端的ip设置。这个比较容易实现。 　　二是基于OAuth2.0认证，这个需要lua，实现起来相对于一来说，有些难度。 　　现在重点介绍第二种方法实现思路。 　　 前言：我们使用Nginx的Lua中间件建立了OAuth2认证和授权层。如果你也有此打算，阅读下面的文档，实现自动化并获得收益。SeatGe
  • jdk环境变量配置 byalias javajdk
    进行java开发，首先要安装jdk，安装了jdk后还要进行环境变量配置： 1、下载jdk（http://java.sun.com/javase/downloads/index.jsp），我下载的版本是：jdk-7u79-windows-x64.exe 2、安装jdk-7u79-windows-x64.exe 3、配置环境变量：右击"计算机"-->&quo
  • 《代码大全》表驱动法-Table Driven Approach-2 bylijinnan java
    package com.ljn.base; import java.io.BufferedReader; import java.io.FileInputStream; import java.io.InputStreamReader; import java.util.ArrayList; import java.util.Collections; import java.uti
  • SQL 数值四舍五入 小数点后保留2位 chicony 四舍五入
    1.round() 函数是四舍五入用，第一个参数是我们要被操作的数据，第二个参数是设置我们四舍五入之后小数点后显示几位。 2.numeric 函数的2个参数，第一个表示数据长度，第二个参数表示小数点后位数。 例如： 　　select   cast(round(12.5,2)   as   numeric(5,2))  
  • c++运算符重载 CrazyMizzz C++
    一、加+，减-，乘*，除/ 的运算符重载 Rational operator*(const Rational &x) const{ return Rational(x.a * this->a); } 在这里只写乘法的，加减除的写法类似 二、<<输出,>>输入的运算符重载      &nb
  • hive DDL语法汇总 daizj hive修改列DDL修改表
    hive DDL语法汇总 １、对表重命名 hive> ALTER TABLE table_name RENAME TO new_table_name;   2、修改表备注 hive> ALTER TABLE table_name SET TBLPROPERTIES ('comment' = new_comm
  • jbox使用说明 dcj3sjt126com Web
    参考网址：http://www.kudystudio.com/jbox/jbox-demo.html jBox v2.3 beta [ 点击下载]  技术交流QQGroup：172543951 100521167 [2011-11-11] jBox v2.3 正式版 - [调整&修复] IE6下有iframe或页面有active、applet控件
  • UISegmentedControl 开发笔记 dcj3sjt126com
      //    typedef NS_ENUM(NSInteger, UISegmentedControlStyle) {     //        UISegmentedControlStylePlain,     // large plain   &
  • Slick生成表映射文件 ekian scala
    Scala添加SLICK进行数据库操作，需在sbt文件上添加slick-codegen包 "com.typesafe.slick" %% "slick-codegen" % slickVersion 因为我是连接SQL Server数据库，还需添加slick-extensions，jtds包 "com.typesa
  • ES-TEST gengzg test
    package com.MarkNum; import java.io.IOException; import java.util.Date; import java.util.HashMap; import java.util.Map; import javax.servlet.ServletException; import javax.servlet.annotation
  • 为何外键不再推荐使用 hugh.wang mysqlDB
    表的关联，是一种逻辑关系，并不需要进行物理上的“硬关联”，而且你所期望的关联，其实只是其数据上存在一定的联系而已，而这种联系实际上是在设计之初就定义好的固有逻辑。 在业务代码中实现的时候，只要按照设计之初的这种固有关联逻辑来处理数据即可，并不需要在数据库层面进行“硬关联”，因为在数据库层面通过使用外键的方式进行“硬关联”，会带来很多额外的资源消耗来进行一致性和完整性校验，即使很多时候我们并不
  • 领域驱动设计 julyflame VODAO设计模式DTOpo
    概念： VO（View Object）：视图对象，用于展示层，它的作用是把某个指定页面（或组件）的所有数据封装起来。 DTO（Data Transfer Object）：数据传输对象，这个概念来源于J2EE的设计模式，原来的目的是为了EJB的分布式应用提供粗粒度的数据实体，以减少分布式调用的次数，从而提高分布式调用的性能和降低网络负载，但在这里，我泛指用于展示层与服务层之间的数据传输对
  • 单例设计模式 hm4123660 javaSingleton单例设计模式懒汉式饿汉式
           单例模式是一种常用的软件设计模式。在它的核心结构中只包含一个被称为单例类的特殊类。通过单例模式可以保证系统中一个类只有一个实例而且该实例易于外界访问，从而方便对实例个数的控制并节约系统源。如果希望在系统中某个类的对象只能存在一个，单例模式是最好的解决方案。      &nb
  • logback zhb8015 loglogback
    一、logback的介绍      Logback是由log4j创始人设计的又一个开源日志组件。logback当前分成三个模块：logback-core,logback- classic和logback-access。logback-core是其它两个模块的基础模块。logback-classic是log4j的一个 改良版本。此外logback-class
  • 整合Kafka到Spark Streaming——代码示例和挑战 Stark_Summer sparkstormzookeeperPARALLELISMprocessing
    作者Michael G. Noll是瑞士的一位工程师和研究员，效力于Verisign，是Verisign实验室的大规模数据分析基础设施（基础Hadoop）的技术主管。本文，Michael详细的演示了如何将Kafka整合到Spark Streaming中。 期间， Michael还提到了将Kafka整合到 Spark Streaming中的一些现状，非常值得阅读，虽然有一些信息在Spark 1.2版
  • spring-master-slave-commondao 王新春 DAOspringdataSourceslavemaster
    互联网的web项目，都有个特点：请求的并发量高，其中请求最耗时的db操作，又是系统优化的重中之重。 为此，往往搭建 db的 一主多从库的 数据库架构。作为web的DAO层，要保证针对主库进行写操作，对多个从库进行读操作。当然在一些请求中，为了避免主从复制的延迟导致的数据不一致性，部分的读操作也要到主库上。（这种需求一般通过业务垂直分开，比如下单业务的代码所部署的机器，读去应该也要从主库读取数
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他