NI_NE
NI_NE

大斌的HTML5历程

简单的HTML5小游戏

  • 拼图小游戏
    • 准备图片
    • 操作步骤
    • 拼图源码

拼图小游戏

准备图片

大斌的HTML5历程_第1张图片

操作步骤

1.桌面建立一个txt文档
2.将源码复制到文档
3.将文档后缀名改为.html
4.将名为nine.jpg的图片和html文档放置同一个文件夹下
5.完成。

拼图源码

<html>
<head>
<meta charset="utf-8">
<title>自制拼图游戏</title>
<link rel="stylesheet" href="pintu.css">

<style type="text/css">
#container{
	background-color: aliceblue;
	width: 600px;
	padding: 20px;
	margin: auto;
	text-align: center;
	box-shadow: 10px 10px 15px pink;
	/*水平方向偏移量，垂直方向偏移，阴影宽度，阴影颜色*/
}
body{
	background-color: silver;/*页面背景为银色*/
}
#timeBOx{
	margin: 10px 0;
	font-size: 18px;
}
button{
	width: 200px;
	height: 50px;
	margin: 10px 0;
	border: 0;
	outline: none;
	font-size: 25px;
	font-weight: bold;
	color: #E40AC8;
	background-color: pink;
}/*无边框效果，*/
/*鼠标悬浮样式*/
button:hover{
	background-color: aqua;
}
</style>

</head>
<body>

<div id="container">
  <h3>拼图游戏</h3>
  <hr />
  <!--游戏时间-->
  <div id="timeBOx"> 共计时间：<span id="time">00:00:00</span> </div>
  <!--游戏画布-->

  <canvas id="mynine" width="300" height="300" style="border: 1px solid"> 对不起您的浏览器不支持HTML5画布API。</canvas>
  <div>
    <button onclick="restartGame()">重新开始</button>
  </div>
</div>

<script>
	var c=document.getElementById('mynine');//获取画布对象
	var ctx=c.getContext('2d');//获取2D的context对象
	var num=[[00,01,02],[10,11,12],[20,21,22]];//定义初始方块位置
	var w=100;//定义拼图小方块的边长
	var time=document.getElementById("time");
	var h=0,m=0,s=0;//初始化时分秒
	var timer=setInterval("getCurrentTime()",1000);//每隔1000毫秒刷新时间
	
	function getCurrentTime(){
		//将时分秒转化为整数
		s=parseInt(s);
		m=parseInt(m);
		h=parseInt(h);
		//每秒变量s先自增1
		s++;
		if(s==60){//60秒后归零，m++
			s=0;
			m++;
		}
		if(m==60){
			m=0;
			h++;
		}
		//修改时分秒的显示效果，保持两位数
		if(s<10) s="0"+s;
		if(m<10) m="0"+m;
		if(h<10) h="0"+h;
		//将当前计时的时间显示在屏幕上
		time.innerHTML=h+":"+m+":"+s;	
	}
	//声明拼图的图片来源
	var img=new Image();
	img.src="nine.jpg";
	//图片加载
	img.onload=function(){
		//游戏相关代码	
		generateNum();//打乱拼图
		drawCanvas();//画布上绘制图片
	}
	function generateNum(){
		//循环50次进行打乱拼图
		for(var i=0;i<50;i++){
			//随机抽取数
			var i1=Math.round(Math.random()*2);
			var j1=Math.round(Math.random()*2);
			var i2=Math.round(Math.random()*2);
			var j2=Math.round(Math.random()*2);
			//对调他们的位置
			var temp=num[i1][j1];
			num[i1][j1]=num[i2][j2];
			num[i2][j2]=temp;	
		}
	}	
	//绘制拼图
	function drawCanvas(){
		ctx.clearRect(0,0,300,300);//清空画布
		//使用双重for绘制3X3拼图
		for(var i=0;i<3;i++){
			for(var j=0;j<3;j++){
				if(num[i][j]!=22){
					//获取第几行第几列
					var row=parseInt(num[i][j]/10);
					var col=num[i][j]%10;
					//在画布的相关位置绘图
					ctx.drawImage(img,col*w,row*w,w,w,j*w,i*w,w,w);
				}	
			}
		}
	}
	//监听鼠标单击事件
	c.onmousedown=function(e){
		//获取画布边界
		var bound=c.getBoundingClientRect();
		//获取鼠标在画布上的坐标位置(x,y)
		var x=e.pageX-bound.left;
		var y=e.pageY-bound.top;
		//将xy换成几行几列
		var row=parseInt(y/w);
		var col=parseInt(x/w);
		//如果单击的不是空白区域
		if(num[row][col]!=22){
			detectBox(row,col);//移动单击的方块
			drawCanvas();//重新绘制画布
			//检查游戏是否成功
			var isWin=checkWin();
			if(isWin){//游戏成功
				clearInterval(timer);//清除计时器
				ctx.drawImage(img,0,0);//绘制完整图片
				ctx.font="bold 68px serif";//字体serif,68号字，加粗
				ctx.fillStyle="blue";//填充蓝色
				ctx.fillText("游戏成功！",20,150);	
			}	
		}
	}
	//移动单击的方块
	function detectBox(i,j){
		if(i>0){//如果单击的方块不在最上面一行
			if(num[i-1][j]==22){//空白方块在当前方块上方
				//交换位置
				num[i-1][j]=num[i][j];
				num[i][j]=22;
				return;
			}
		}
		if(i<2){//如果单击的方块不在最下面一行
			if(num[i+1][j]==22){//空白方块在当前方块下方
				//交换位置
				num[i+1][j]=num[i][j];
				num[i][j]=22;
				return;
			}
		}
		if(j>0){//如果单击的方块不在最左边一行
			if(num[i][j-1]==22){//空白方块在当前方块左边
				//交换位置
				num[i][j-1]=num[i][j];
				num[i][j]=22;
				return;
			}
		}
		if(j<2){//如果单击的方块不在最右边一行
			if(num[i][j+1]==22){//空白方块在当前方块右边
				//交换位置
				num[i][j+1]=num[i][j];
				num[i][j]=22;
				return;
			}
		}
	}
	//判断游戏是否胜利
	function checkWin(){
		for(var i=0;i<3;i++){
			for(var j=0;j<3;j++){
				if(num[i][j]!=i*10+j){
					return false;
				}
			}
		}
		return true;
	}
	//重新开始游戏
	function restartGame(){
		clearInterval(timer);//清除计时器
		//时间清零
		s=0;m=0;h=0;
		getCurrentTime();//重新开始时间
		timer=setInterval("getCurrentTime()",1000);
		generateNum();//重新打乱拼图顺序
		drawCanvas();//绘制拼图
	}
	</script>
</body>
</html>

你可能感兴趣的:(html5,html5小游戏)

  • DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计 网页设计期末网页作业html静态网页html5期末大作业网页设计web大作业
    ️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
  • 关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业javascripthtmlcss旅游风景
    ⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
  • HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动 二挡起步 web前端期末大作业web设计网页规划与设计htmlcssjavascriptdreamweaver前端
    Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
  • python简单好玩的编程代码,python有哪些好玩的代码 2301_81900439 pygamepython开发语言
    大家好，小编来为大家解答以下问题，20行python代码的入门级小游戏，python有什么好玩的代码嘛，今天让我们一起来看看吧！哈喽铁子们表弟最近在学Python，总是跟我抱怨很枯燥无味，其实，他有没有认真想过，可能是自己学习姿势不对？比方说，可以通过打游戏来学编程！今天给大家分享100个Python小游戏，一定要收藏！1、简易飞机大战飞机大战相信大家都玩过吧，非常简单有意思的游戏，咱们通过Pyt
  • h5小游戏定制开发 红匣子实力推荐
    随着科技的不断发展，移动互联网已经成为人们生活中不可或缺的一部分。在这个背景下，H5小游戏应运而生，为人们带来了丰富的娱乐体验。H5小游戏定制开发作为一种新兴的游戏开发方式，正逐渐受到市场的关注和青睐。那么，什么是H5小游戏定制开发呢？它又具有哪些特点和优势呢？让我们一起来深入了解一下。首先，我们来了解一下H5小游戏的基本概念。H5小游戏是一种基于HTML5技术的游戏，可以在移动端、PC端等多平台
  • 手机小游戏开发 红匣子实力推荐
    随着智能手机的普及，手机小游戏已经成为人们日常生活中不可或缺的一部分。从简单的消除游戏到复杂的策略游戏，手机小游戏为玩家提供了丰富的娱乐体验。本文将为您介绍手机小游戏开发的基本概念、工具和技术。开发-联系电话：13642679953（微信同号）1.游戏类型手机小游戏可以分为多种类型，如益智游戏、休闲游戏、动作游戏、策略游戏等。开发者可以根据自己的兴趣和技能选择合适的游戏类型进行开发。2.开发工具手
  • HTML5概述 WFIT~SKY Web前端html5前端html
    1.HTML概述1.1HTML定义HTML超文本标记语言，其中超文本是链接，标记也叫标签（即带尖括号的文本）。1.2HTML基本骨架HTML基本骨架是网页模板。网页的标题网页的内容html：整个网页head：网页头部，存放给浏览器看的代码，例如CSSbody：网页主体，存放给用户看的代码，例如文字、图片title：网页标题1.3HTML关系父子关系（嵌套）兄弟关系（并列）2.HTML开发环境2.1
  • HTML添加文字 若无心_. HTMLhtml5
    一、创建HTML5文档基本标签//定义文档类型//定义HTML文档//定义关于文档的信息文档标题//定义文档的标题//定义文档的字符编码//定义文档的主体二、文字相关标签1.标题文字-标签可定义标题。定义最大的标题。定义最小的标题。Document这是标题1这是标题2这是标题3这是标题4这是标题5这是标题62.文本段落Document这次会晤的主题是“金砖国家在非洲：在第四次工业革命中共谋包容增长
  • 【拖拽】自定义拖拽图标 风露_
    一、知识点设置被拖拽的元素draggable为true(HTML5新特性)关键方法：voiddataTransfer.setDragImage(img,xOffset,yOffset);注意点：Note:Ifthe[Element]isanexisting[HTMLElement],itneedstobevisibleintheviewportinordertobeshownasadragfeed
  • 【C语言编程】【小游戏】【俄罗斯方块】 星毅要努力 c语言开发语言学习游戏
    #include#include#include#include#include#include#defineWIDTH12#defineHEIGHT18#defineBUFFER_WIDTH(WIDTH*2+20)#defineBUFFER_HEIGHT(HEIGHT+2)charfield[HEIGHT][WIDTH]={0};intscore=0;charbuffer[BUFFER_HEIG
  • Cocos2d、Cocos2dx、Cocos Creator、Cocos Studio的区别 Thomas游戏圈
    一、Cocos2d和Cocos2dx的区别【开发语言】：Cocos2d是Object-C写的，Cocos2dx是C++写的，支持使用C++、Lua或Java进行开发。【运行平台】：Cocos2d只能在IOS下运行，Cocos2dx是跨平台的，适配iOS、Android、HTML5、Windows和Mac系统，功能侧重于原生移动平台。点击链接加入群聊【Unity/Cocos交流群】【国籍】：Coco
  • web前端达到什么水平，才能找到工作？ cj瑾瑜 前端htmljavascriptcsscss3
    一、前端是什么？前端即网站前台部分，也叫前端开发，运行在PC端，移动端等浏览器上展现给用户浏览的网页。随着互联网技术的发展，HTML5，CSS3，前端框架的应用，跨平台响应式网页设计能够适应各种屏幕分辨率，完美的动效设计，给用户带来极高的用户体验。（核心技术：HTML、CSS、JavaScript）核心技术是前端开发中最基本也是最必须的三个技能。前端的开发中，在页面的布局时，HTML将元素进行定义
  • 2018.09.28 Betty丽丽
    财富目标：9月轻松愉快地显化一万二的财富目标，活在丰盛喜悦之中！计划：1.三大良田2.帮助业力伙伴3.帮助这个世界需要帮助的人行动：1.种下分享智慧的好种子，帮助一个有财富方面匮乏的朋友去做冥想，清理他的负面情绪，让他感受到内心的平和与喜悦，他看到了自己金色的财富之花盛开，非常棒！图片发自App2.种下肯定他人赞美他人的好种子，给班级的同学们带来了一个小游戏叫做iamhappy，让同学们都很开心！
  • 华为OD机试 - 单词搜索（Python） AsiaFT. Py华为OD机试AB卷算法python华为od
    题目描述找到它是一个小游戏，你需要在一个矩阵中找到给定的单词。假设给定单词HELLOWORD，在矩阵中只要能找到H->E->L->L->O->W->O->R->L->D连成的单词，就算通过。注意区分英文字母大小写，并且您只能上下左右行走，不能走回头路。输入描述输入第1行包含两个整数n、m(0
  • HTML5（六）canvas 矩形、路径、画板功能 祝名
    一.绘制矩形1.什么是canvascanvas标签相当于一个画板；canvas的宽高不要用css去定义，直接在标签中用属性写；2.obj=c.getContext('2d');获得2d绘画环境（相当于铺了一层画布）绘画图像的操作都会在obj这个绘画环境中存储；3.绘画方法及样式x,y为坐标样例：二.canvas路径1.方法2.样例cv.lineJoin='round';//边界类型为弧形三.画板功
  • NOIP2021 T1 报数 aWty_ 题解算法
     传送门：NOIP2021T1题目大意报数游戏是一个广为流传的休闲小游戏。参加游戏的每个人要按一定顺序轮流报数，但如果下一个报的数是7的倍数，或十进制表示中含有数字7，就必须跳过这个数，否则就输掉了游戏。在一个风和日丽的下午，刚刚结束SPC20nn比赛的小r和小z闲得无聊玩起了这个报数游戏。但在只有两个人玩的情况下计算起来还是比较容易的，因此他们玩了很久也没分出胜负。此时小z灵光一闪，决定把这个游
  • HTML5中的数据存储sessionStorage、localStorage 阿立聊代码 HTML实战html5前端html
    第8章HTML5中的数据存储之前通常使用Cookie存储机制将数据保存在用户的客户端。H5增加了两种全新的数据存储方式：WebStroage和WebSQLDatabase.前者用于临时或永久保存客户端少量数据，后者是客户端本地化的一套数据库系统。8.1WebStorage存储简介WebStorageAPI分为会话数据和长期数据，相应的API分为两类：sessionStorage(保存会话数据)lo
  • 【Python游戏】贪吃蛇升级版——双人贪吃蛇小游戏 | 附带源码 彳余大胆 Python游戏python游戏pygame
    前言之前做过一个单人版的贪吃蛇，所以常常就是我只能看着别人玩，或者别人看着我玩，却没法两个人一起愉快地玩耍。由此产生了做一个可以双人玩的贪吃蛇想法，并且从小时候一直到现在，之前python还没有那么火的时候，就在网上看过一些用python写游戏的教程。后来系统地学了一下python，就打算将双人贪吃蛇安排上了。相关文件想学Python的小伙伴可以关注小编的公众号【Python日志】有很多的资源可以
  • Python小游戏——雷霆战机 星和月 pygamepython开发语言
    importpygameimportrandom#初始化pygame.init()#定义游戏窗口大小window_width=800window_height=600#创建游戏窗口window=pygame.display.set_mode((window_width,window_height))pygame.display.set_caption("雷霆战机")#加载图片player_img=
  • html5carousel图片轮播,全面解析Bootstrap中Carousel轮播的使用方法 RemusrickCat
    本文实例为大家全面的解析了Bootstrap中Carousel的使用方法，供大家参考，具体内容如下源码文件：Carousel.scssCarousel.js实现原理：隐藏所有要显示的元素，然后指定当前要显示的为block，宽、高自适应源码分析：1、Html结构：主要分为以四个部分1.1、容器：最外层div，需要一个data-ride=”carousel”来指定为轮播放插件，并且提供一个Id，方便圆
  • 【Web前端技术 02】深入探索HTML5：标签全解析与案例演示！ wcyd Web前端技术前端html5html
    深入探索HTML5：标签全解析与案例演示！大家好！在上一篇文章中，我们对HTML5有了一个基本的了解。今天，我们将更深入地探索HTML5，全面介绍各种标签及其应用。从基础标签到新增标签，从文档结构到格式标签，我们将一一解析，并提供丰富的案例演示。准备好了吗？让我们开始吧！️HTML5基础结构首先，让我们回顾一下HTML5的基本结构。HTML5文档的结构就像一座房子的蓝图，指导我们如何构建网页。下面
  • HTML5中`＜span＞`标签深入解析 软考鸭 html5html5前端html
    引言在HTML5中，标签是一个行内元素，用于对文档中的一小部分文本或内容进行分组，以便于应用CSS样式或JavaScript脚本。与块级元素（如）不同，不会打断文本的流动，而是与其内容一起在同一行内显示。本文将深入解析标签的定义、用法、属性以及在实际开发中的应用。定义与用法标签是一个无语义的行内容器，用于包裹文档中的一部分内容，而不改变文档的结构。它通常与CSS和JavaScript结合使用，以实
  • 高手粉丝还原《无敌破坏王2》中的休闲游戏《松饼和奶昔》 爱游戏的萌博士
    大家还记得《无敌破坏王2：大闹互联网》吗？这部华特·迪士尼影片公司出品的动画电影已经上映了一段时间了。这部《无敌破坏王》的续作，依旧维持了高水准，电影中很多细节都给大家留下了深刻的印象。博士今天想说的是电影中出现的那款小游戏《Pancakes&Milkshakes》！动画中出现的这款游戏《Pancakes&Milkshakes》，中文可以叫做《兔子吃松饼，猫咪喝奶昔》。因为游戏中左边的兔子就是一直
  • 决战《三字经》小游戏程序文档 力江 游戏程序pythonpygamepip
    游戏简介“决战《三字经》”是一个基于Python编写的小游戏程序，旨在帮助玩家通过互动方式学习《三字经》中的内容。玩家需要控制上升的文字块，与下降的文字块碰撞并正确排序，以获得分数。游戏功能读取《三字经》文本文件：程序会读取预先准备的《三字经》文本文件，将其中的内容用于游戏中生成文字块。生成当前段落：根据游戏进度，程序会生成当前需要排序的文字块段落，供玩家操作。处理文字块碰撞：玩家控制上升的文字块
  • 学习编程的第五天，打卡-DAY5（2024/9/11） 不做悲观主义 学习c#
    一、收获今天学习了分支和循环，试着设计了一款猜字小游戏，很有成就感！！有需要改进的地方请各位大佬指出，感谢！二、猜字小游戏代码#include#include#includevoidmenu(){printf("*************************\n");printf("****1->开始游戏****\n");printf("****0->退出游戏****\n");printf("
  • 在家就能赚钱的小游戏，让你轻松实现财务自由！ 多职猫
    在家就能赚钱的小游戏，让你轻松实现财务自由！你是否曾经想过，是否有一种方法可以在家中赚钱，轻松实现财务自由？是否渴望摆脱乏味的日常工作，拥有更多的自由时间和金钱来追求梦想？如果你答案是肯定的，那么这篇文章将为你揭示一个令人兴奋的机会，让你在家中通过小游戏赚取财富。推荐一篇找兼职必看的免费教程：《手机兼职，300-500/天，一单一结，大量要人》，在这里可以找到各种视频编辑兼职，游戏试玩兼职，文本配
  • HTML5 `＜button＞` 标签深入全面解析 软考鸭 html5html5前端html
    引言在HTML5中，标签用于定义一个可点击的按钮，它是创建交互式网页的重要元素之一。与相比，标签提供了更多的灵活性和样式化的可能性。本文将深入解析HTML5中的标签，详细介绍其属性、样式以及实际应用。标签的基本用法标签内部可以放置内容，如文本、图像或其他HTML元素。这使得标签比更加灵活。点击我在这个简单的例子中，我们创建了一个普通的按钮，其上的文本是“点击我”。标签的属性标签支持多种属性，用于定
  • HTML5之基础、元信息标签 Programmer.杨 前端技术-HTMLhtmlmetaheadtitle标签
    标签声明位于文档中最前面的位置，处于标签之前。声明不是一个HTML标签，它是告知Web浏览器该页面使用了哪种HTML版本（规范），浏览器用此版本（规范）对该文档进行解析，渲染。可声明的DTD有三种：分别是严格版本（strict）、过渡版本（transitional）、以及基于框架的版本（frameset），若文档不遵循其DTD规范，则此文档中的代码不但不能通过代码校验，并且有可能无法正常显示。文档
  • HTML5中`＜ul＞`标签深入全面解析 软考鸭 html5html5前端html
    在HTML5的广阔天地里，标签作为无序列表的代言人，扮演着举足轻重的角色。它不仅能够整洁地罗列信息，还通过丰富的属性和样式选项，为网页设计师提供了无限的创意空间。本文将深入剖析标签的内核，详细解读其属性与样式，助力你打造更加精致、功能强大的网页。一、标签基础概览，即UnorderedList（无序列表）的缩写，用于在网页中展示一系列无特定顺序的项目。每个项目由（ListItem，列表项）标签包裹，
  • HTML5全面知识点 A_cot htmlhtml5前端框架前端
    HTML（HyperTextMarkupLanguage）是构建网页的基础语言。以下是全面的HTML知识点：一、HTML基础概念定义：HTML是一种用于描述网页结构的标记语言，通过各种标签来定义网页的内容和布局。版本历史：从HTML的早期版本发展到现在的HTML5，功能不断增强，支持更多的多媒体和交互特性。二、HTML文档结构声明：用于告诉浏览器文档类型是HTML5。标签：整个HTML文档的根元素
  • Java开发中，spring mvc 的线程怎么调用？ 小麦麦子 springmvc
    今天逛知乎，看到最近很多人都在问spring mvc 的线程http://www.maiziedu.com/course/java/ 的启动问题，觉得挺有意思的，那哥们儿问的也听仔细，下面的回答也很详尽，分享出来，希望遇对遇到类似问题的Java开发程序猿有所帮助。 问题：     在用spring mvc架构的网站上，设一线程在虚拟机启动时运行，线程里有一全局
  • maven依赖范围 bitcarter maven
    1.test 测试的时候才会依赖，编译和打包不依赖，如junit不被打包 2.compile 只有编译和打包时才会依赖 3.provided 编译和测试的时候依赖，打包不依赖，如：tomcat的一些公用jar包 4.runtime 运行时依赖，编译不依赖 5.默认compile 依赖范围compile是支持传递的，test不支持传递 1.传递的意思是项目A，引用
  • Jaxb org.xml.sax.saxparseexception : premature end of file darrenzhu xmlprematureJAXB
    如果在使用JAXB把xml文件unmarshal成vo(XSD自动生成的vo)时碰到如下错误： org.xml.sax.saxparseexception : premature end of file 很有可能时你直接读取文件为inputstream，然后将inputstream作为构建unmarshal需要的source参数。InputSource inputSource = new In
  • CSS Specificity 周凡杨 html权重Specificitycss
      有时候对于页面元素设置了样式，可为什么页面的显示没有匹配上呢？ because specificity CSS 的选择符是有权重的，当不同的选择符的样式设置有冲突时，浏览器会采用权重高的选择符设置的样式。     规则：   HTML标签的权重是1 Class 的权重是10 Id 的权重是100
  • java与servlet g21121 servlet
    servlet 搞java web开发的人一定不会陌生，而且大家还会时常用到它。 下面是java官方网站上对servlet的介绍： java官网对于servlet的解释 写道 Java Servlet Technology Overview Servlets are the Java platform technology of choice for extending and enha
  • eclipse中安装maven插件 510888780 eclipsemaven
    1.首先去官网下载 Maven： http://www.apache.org/dyn/closer.cgi/maven/binaries/apache-maven-3.2.3-bin.tar.gz 下载完成之后将其解压， 我将解压后的文件夹：apache-maven-3.2.3， 并将它放在 D:\tools目录下， 即 maven 最终的路径是：D:\tools\apache-mave
  • jpa@OneToOne关联关系 布衣凌宇 jpa
    Nruser里的pruserid关联到Pruser的主键id，实现对一个表的增删改，另一个表的数据随之增删改。 Nruser实体类 //***************************************************************** @Entity @Table(name="nruser") @DynamicInsert @Dynam
  • 我的spring学习笔记11-Spring中关于声明式事务的配置 aijuans spring事务配置
    这两天学到事务管理这一块，结合到之前的terasoluna框架，觉得书本上讲的还是简单阿。我就把我从书本上学到的再结合实际的项目以及网上看到的一些内容，对声明式事务管理做个整理吧。我看得Spring in Action第二版中只提到了用TransactionProxyFactoryBean和<tx:advice/>,定义注释驱动这三种，我承认后两种的内容很好，很强大。但是实际的项目当中
  • java 动态代理简单实现 antlove javahandlerproxydynamicservice
    dynamicproxy.service.HelloService package dynamicproxy.service; public interface HelloService { public void sayHello(); }   dynamicproxy.service.impl.HelloServiceImpl package dynamicp
  • JDBC连接数据库 百合不是茶 JDBC编程JAVA操作oracle数据库
             如果我们要想连接oracle公司的数据库，就要首先下载oralce公司的驱动程序，将这个驱动程序的jar包导入到我们工程中;   JDBC链接数据库的代码和固定写法;     1,加载oracle数据库的驱动;     &nb
  • 单例模式中的多线程分析 bijian1013 javathread多线程java多线程
    谈到单例模式，我们立马会想到饿汉式和懒汉式加载，所谓饿汉式就是在创建类时就创建好了实例，懒汉式在获取实例时才去创建实例，即延迟加载。 饿汉式： package com.bijian.study; public class Singleton { private Singleton() { } // 注意这是private 只供内部调用 private static
  • javascript读取和修改原型特别需要注意原型的读写不具有对等性 bijian1013 JavaScriptprototype
            对于从原型对象继承而来的成员，其读和写具有内在的不对等性。比如有一个对象A，假设它的原型对象是B，B的原型对象是null。如果我们需要读取A对象的name属性值，那么JS会优先在A中查找，如果找到了name属性那么就返回；如果A中没有name属性，那么就到原型B中查找name，如果找到了就返回；如果原型B中也没有
  • 【持久化框架MyBatis3六】MyBatis3集成第三方DataSource bit1129 dataSource
    MyBatis内置了数据源的支持，如：   <environments default="development"> <environment id="development"> <transactionManager type="JDBC" /> <data
  • 我程序中用到的urldecode和base64decode,MD5 bitcarter cMD5base64decodeurldecode
    这里是base64decode和urldecode，Md5在附件中。因为我是在后台所以需要解码： string Base64Decode(const char* Data,int DataByte,int& OutByte) { //解码表 const char DecodeTable[] = { 0, 0, 0, 0, 0, 0
  • 腾讯资深运维专家周小军：QQ与微信架构的惊天秘密 ronin47
    社交领域一直是互联网创业的大热门，从PC到移动端，从OICQ、MSN到QQ。到了移动互联网时代，社交领域应用开始彻底爆发，直奔黄金期。腾讯在过去几年里，社交平台更是火到爆，QQ和微信坐拥几亿的粉丝，QQ空间和朋友圈各种刷屏，写心得，晒照片，秀视频，那么谁来为企鹅保驾护航呢？支撑QQ和微信海量数据背后的架构又有哪些惊天内幕呢？本期大讲堂的内容来自今年2月份ChinaUnix对腾讯社交网络运营服务中心
  • java-69-旋转数组的最小元素。把一个数组最开始的若干个元素搬到数组的末尾，我们称之为数组的旋转。输入一个排好序的数组的一个旋转，输出旋转数组的最小元素 bylijinnan java
    public class MinOfShiftedArray { /** * Q69 旋转数组的最小元素 * 把一个数组最开始的若干个元素搬到数组的末尾，我们称之为数组的旋转。输入一个排好序的数组的一个旋转，输出旋转数组的最小元素。 * 例如数组{3, 4, 5, 1, 2}为{1, 2, 3, 4, 5}的一个旋转，该数组的最小值为1。 */ publ
  • 看博客，应该是有方向的 Cb123456 反省看博客
    看博客，应该是有方向的:  我现在就复习以前的，在补补以前不会的，现在还不会的，同时完善完善项目，也看看别人的博客.  我刚突然想到的:  1.应该看计算机组成原理，数据结构，一些算法，还有关于android,java的。  2.对于我，也快大四了，看一些职业规划的，以及一些学习的经验，看看别人的工作总结的.    为什么要写
  • [开源与商业]做开源项目的人生活上一定要朴素,尽量减少对官方和商业体系的依赖 comsci 开源项目
         为什么这样说呢？  因为科学和技术的发展有时候需要一个平缓和长期的积累过程，但是行政和商业体系本身充满各种不稳定性和不确定性，如果你希望长期从事某个科研项目，但是却又必须依赖于某种行政和商业体系，那其中的过程必定充满各种风险。。。       所以，为避免这种不确定性风险，我
  • 一个 sql优化 （[精华] 一个查询优化的分析调整全过程！很值得一看 ） cwqcwqmax9 sql
    见   http://www.itpub.net/forum.php?mod=viewthread&tid=239011 Web翻页优化实例 提交时间: 2004-6-18 15:37:49      回复    发消息  环境： Linux ve
  • Hibernat and Ibatis dashuaifu Hibernateibatis
    Hibernate  VS  iBATIS 简介 Hibernate 是当前最流行的O/R mapping框架，当前版本是3.05。它出身于sf.net，现在已经成为Jboss的一部分了 iBATIS 是另外一种优秀的O/R mapping框架，当前版本是2.0。目前属于apache的一个子项目了。 相对Hibernate“O/R”而言，iBATIS 是一种“Sql Mappi
  • 备份MYSQL脚本 dcj3sjt126com mysql
    #!/bin/sh # this shell to backup mysql #[email protected] (QQ:1413161683 DuChengJiu) _dbDir=/var/lib/mysql/ _today=`date +%w` _bakDir=/usr/backup/$_today [ ! -d $_bakDir ] && mkdir -p
  • iOS第三方开源库的吐槽和备忘 dcj3sjt126com ios
    转自 ibireme的博客   做iOS开发总会接触到一些第三方库，这里整理一下，做一些吐槽。   目前比较活跃的社区仍旧是Github，除此以外也有一些不错的库散落在Google Code、SourceForge等地方。由于Github社区太过主流，这里主要介绍一下Github里面流行的iOS库。   首先整理了一份 Github上排名靠
  • html wlwmanifest.xml eoems htmlxml
    所谓优化wp_head()就是把从wp_head中移除不需要元素，同时也可以加快速度。 步骤： 加入到function.php remove_action('wp_head', 'wp_generator'); //wp-generator移除wordpress的版本号，本身blog的版本号没什么意义，但是如果让恶意玩家看到，可能会用官网公布的漏洞攻击blog remov
  • 浅谈Java定时器发展 hacksin java并发timer定时器
    java在jdk1.3中推出了定时器类Timer,而后在jdk1.5后由Dou Lea从新开发出了支持多线程的ScheduleThreadPoolExecutor，从后者的表现来看，可以考虑完全替代Timer了。 Timer与ScheduleThreadPoolExecutor对比： 1.    Timer始于jdk1.3,其原理是利用一个TimerTask数组当作队列
  • 移动端页面侧边导航滑入效果 ini jqueryWebhtml5cssjavascirpt
    效果体验：http://hovertree.com/texiao/mobile/2.htm可以使用移动设备浏览器查看效果。效果使用到jquery-2.1.4.min.js，该版本的jQuery库是用于支持HTML5的浏览器上，不再兼容IE8以前的浏览器，现在移动端浏览器一般都支持HTML5，所以使用该jQuery没问题。HTML文件代码： <!DOCTYPE html> <h
  • AspectJ+Javasist记录日志 kane_xie aspectjjavasist
    在项目中碰到这样一个需求，对一个服务类的每一个方法，在方法开始和结束的时候分别记录一条日志，内容包括方法名，参数名+参数值以及方法执行的时间。   @Override public String get(String key) { // long start = System.currentTimeMillis(); // System.out.println("Be
  • redis学习笔记 MJC410621 redisNoSQL
    1)nosql数据库主要由以下特点：非关系型的、分布式的、开源的、水平可扩展的。 1，处理超大量的数据 2，运行在便宜的PC服务器集群上， 3，击碎了性能瓶颈。 1)对数据高并发读写。 2)对海量数据的高效率存储和访问。 3)对数据的高扩展性和高可用性。 redis支持的类型： Sring 类型 set name lijie get name lijie set na
  • 使用redis实现分布式锁 qifeifei
    在多节点的系统中，如何实现分布式锁机制，其中用redis来实现是很好的方法之一，我们先来看一下jedis包中，有个类名BinaryJedis,它有个方法如下：   public Long setnx(final byte[] key, final byte[] value) { checkIsInMulti(); client.setnx(key, value); ret
  • BI并非万能，中层业务管理报表要另辟蹊径 张老师的菜 大数据BI商业智能信息化
           BI是商业智能的缩写，是可以帮助企业做出明智的业务经营决策的工具，其数据来源于各个业务系统，如ERP、CRM、SCM、进销存、HER、OA等。        BI系统不同于传统的管理信息系统，他号称是一个整体应用的解决方案，是融入管理思想的强大系统：有着系统整体的设计思想，支持对所有
  • 安装rvm后出现rvm not a function 或者ruby -v后提示没安装ruby的问题 wudixiaotie function
    1.在~/.bashrc最后加入 [[ -s "$HOME/.rvm/scripts/rvm" ]] && source "$HOME/.rvm/scripts/rvm"  2.重新启动terminal输入：   rvm use ruby-2.2.1 --default  把当前安装的ruby版本设为默
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他