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小游戏)

  • 农场种蔬菜赚钱小游戏有哪些 五大可以赚钱的小游戏APP 氧惠帮朋友一起省
    喜欢种菜吗？我特意带来农场种蔬菜赚钱小游戏排行榜2022，线上汇集了超多模拟种菜玩法，玩家可以免费种植赚钱哦！每天都有大量的种植任务，线上完成就能赚钱哦！快来下载吧！1.氧惠APP购物、看电影、点外卖、用氧惠APP！更优惠！氧惠（全网优惠上氧惠）——是与以往完全不同的抖客+淘客app！2023全新模式，我的直推也会放到你下面，送1:1超级补贴(邀请好友自购多少，你就推广得多少，非常厉害)，欢迎各位
  • 用 Python 开发小游戏：零基础也能做出《贪吃蛇》
    本文专为零基础学习者打造，详细介绍如何用Python开发经典小游戏《贪吃蛇》。无需复杂编程知识，从环境搭建到代码编写、功能实现，逐步讲解核心逻辑与操作。涵盖Pygame库的基础运用、游戏界面设计、蛇的移动与食物生成规则等，让新手能按步骤完成开发，同时融入SEO优化要点，帮助读者轻松入门Python游戏开发，体验从0到1做出游戏的乐趣。一、为什么选择用Python开发《贪吃蛇》对于零基础学习者来说，
  • 震惊！DOM变化监控神器MutationObserver，前端开发必知的隐藏武器！ coding随想 JavaScript前端javascripthtml5
    一、什么是MutationObserver？如果你是一个前端开发者，一定会遇到这样的场景：页面动态加载内容后，某些操作失效了。比如，你写了一个监听按钮点击的代码，但按钮是通过AJAX动态加载的，你的代码根本无法触发。这个时候，你就需要一个“监控哨兵”——MutationObserver，它能实时监听DOM树的变化，帮你捕获那些“暗中作祟”的节点变动。MutationObserver是HTML5引入
  • 11. HTML 中 DOCTYPE 的作用 yqcoder 前端面试-CSShtml前端
    总结H5的声明HTML5的DOCTYPE声明HTML5中的声明用于告诉浏览器当前文档使用的是HTML5的文档类型。它必须是文档中的第一行内容（在任何HTML标签之前），以确保浏览器能够正确地解析和渲染页面。DOCTYPE的作用触发标准模式：DOCTYPE声明的主要作用是让浏览器以标准模式（StandardsMode）来解析和渲染页面，而不是以兼容模式（QuirksMode）。兼容性：在没有DOCT
  • 《生活有点烦 但也很好玩》：给焦虑星人的解压礼物 芙裳
    在这个越来越卷的社会，工作、学习任务完不成，生活琐事繁多，想要做的事情越积越多，每天的时间不够用，当我们陷入焦虑时，该如何缓解呢？如果你还在搜寻各种如何消除焦虑的理论知识与长篇大论，请停下来吧，那样只会让你越看越焦虑，读下来的文字下一秒就忘了，还不如做一些能够及时反馈的小游戏。不妨翻开《生活有点烦但也很好玩》这本书，虽然它不能让你拥有整一个快乐的人生，但是它能让你在每一个下一秒都开怀大笑，忘却生活
  • python pygame event get_pygame简单运用总结
    pygame简单运用总结Pygame就是一个游戏库，可以直接用高级语言编写，在python中导入pygame就可以用来写一些小游戏了。如何开始快速使用pygame的做出游戏呢？首先，就是了解游戏的运行主要是基于一个窗体，然后在窗体里面添加图片、音频，设计一些事件(像鼠标点击)，最后装进循环运行就哦了。基本窗体编写importpygame,syspygame.init()#实例化screen=pyg
  • 前端面试题 大大。 前端vue.jsjavascript
    HTML5的新特性和CSS3的新特性引入了一系列语义化标签使文档结构更加清晰(header,nav,aside,article,footer,section)，多媒体支持video,audio，Canvas绘图div上下居中对齐的几种方式第一种：flex布局display:flex;justify-content:center;/*水平居中/align-items:center;/垂直居中/第二种
  • python3基础语法梳理(三) 幼稚园的山代王 pythonpython开发语言
    接上一篇博客猜数字小游戏-Python版游戏规则：系统随机生成一个1到10的整数玩家输入猜测的数字使用if语句判断玩家猜得是否正确提示“猜对了”或“太大/太小了”importrandomsecret_number=random.randint(1,10)attempts=0#尝试次数print("欢迎来到猜数字游戏！")print("我已经想好了一个1到10之间的数字。")print("快来猜一猜
  • html5效果案例,10个优秀HTML5网站案例赏析
    随着Adobe的弃Flash转投HTML5，HTML5又开始吸引着大众的目光。与现在使用的HTML标记语言相比，HTML5有更多的标签和属性，使用更为灵活，功能更为强大。现在已经有很多前沿的HTML5网站开始使用HTML5，本文收集整理出了10个非常优秀的HTML5网站。那么，什么才是优秀的HTML5网站？因为HTML5还没有成为国际标准，旧的浏览器还无法支持HTML5，所以优秀的HTML5网站示
  • HTML5 Darling02zjh html5前端html
    HTML:和其他的语言一样也有基础的框架和快捷键。命名规则：后缀名是“.html”每个项目最上面都有是H5的声明，处于标签之前骨架：html标签：定义HTML文档，这个元素我们浏览器看到后就明白这是个HTML文档了，所以你的其他元素要包裹在这个标签里面，标签限定了文档的开始点和结束点。...其他元素head标签：head标签用于文档的头部，文档的头部描述文档的各种属性和信息，包括文档的标题，在we
  • HTML5+JavaScript动画基础 完整版 中文pdf扫描版 不一样的女孩6
    《HTML5+JavaScript动画基础》包括了基础知识、基础动画、高级动画、3D动画和其他技术5大部分，分别介绍了动画的基本概念、动画的JavaScript基础、动画中的三角学、渲染技术、速度向量和加速度、边界与摩擦力、用户交互：移动物体、缓动与弹动、碰撞检测、坐标旋转与斜面反弹、撞球物理、粒子与万有引力、正向运动学：让事物行走、反向运动学：拖曳与伸出、三维基础、三维线条与填充、背面剔除与三维
  • HTML5元素相关补充 QZ_orz_freedom html5前端html
    一.元素是HTML5的文档类型声明，它告诉浏览器当前页面是使用HTML5规范编写的，HTML5是最新的HTML版本，拥有更多的功能和优化，因此推荐在新的Web页面中使用它。在HTML文档中，声明通常是文档的第一行文档元数据元素描述指定用于一个文档中包含的所有相对URL的根URL。一份中只能有一个该元素。包含文档相关的配置信息（元数据），包括文档的标题、脚本和样式表等。指定当前文档与外部资源的关系。
  • HTML5：中如何触发按钮点击事件 Dy大叔 前端开发记录HTML5html
    在HTML5中，可以通过多种方式触发按钮点击事件，包括使用JavaScript原生方法、使用jQuery库和使用HTML表单和提交按钮，根据项目需求和技术栈选择合适的方法来实现按钮点击事件的触发。使用JavaScript原生方法在HTML5中，可以使用JavaScript的addEventListener方法为按钮添加点击事件，需要在HTML文件中创建一个按钮元素，并为其设置一个唯一的ID，在Ja
  • HTML5 新特性：MutationObserver 详解 索西引擎 #JavaScriptjavascript
    一、概念与背景MutationObserver是HTML5引入的一个强大的JavaScriptAPI，它用于异步观察DOM树的变化。在MutationObserver出现之前，开发者若要监测DOM变化，常采用轮询（如使用setInterval不断检查DOM状态）或依赖DOM事件（如DOMNodeInserted、DOMNodeRemoved等）的方式。但轮询效率低下，频繁检查会消耗大量资源；而旧的
  • 简单复刻经典小游戏之扫雷 Kelly____ 算法
    思路相信这款经典小游戏大家都曾在电脑上玩过，那么今天我们将以简易思路来实现一些它的基础游戏逻辑。首先就是棋盘的设计，显然，简单9*9的扫雷棋盘需要通过二维数组来实现，这时我们不妨设置一个二维数组。这里我们可以发现问题所在，因为数组下标是从0开始，并且在后续实现对不是雷的坐标的周围雷数量统计这个功能时会造成访问超限，因此，我们不妨在周围扩充出来一圈，即将棋盘设置为11*11的规格。如上图11*11棋
  • 【高中数学之函数】四种幂函数图线（二次、三次、开方、开立方） 土门子拉马努金 高中数学之函数高中数学函数
    【图像】【代码】UNASSIGNED.centerlize{margin:0auto;border:0pxsolidred;width:1200px;height:600px;}如果看到这段文字说您的浏览器尚不支持HTML5Canvas，请更换浏览器再试.retval.max){retval.max=y;retval.max_x=cds[i].x;}if(yarr.length){index=in
  • 锤子助手功能七：启用猜拳和骰子作弊 杨利杰YJlio #锤子助手微信
    锤子助手插件功能七：启用猜拳和骰子作弊功能七：启用猜拳和骰子作弊功能说明开启与使用方法使用建议⚠️风险与注意事项功能七：启用猜拳和骰子作弊锤子助手为你带来一项趣味且实用的功能——猜拳和骰子作弊，帮助你在微信小游戏中轻松掌控结果，无论是猜拳还是骰子游戏，都能实现自定义胜负，成为游戏中的“稳赢王”。功能说明猜拳作弊：在微信聊天中的猜拳小游戏里，插件可控制出拳结果，让你随心所欲赢得胜利，支持“石头、剪刀
  • 【QT进阶】Qt http编程之websocket的简单介绍 不吃~香菜 QT进阶qt开发语言websocket
    往期回顾【QT进阶】Qthttp编程之用户登录注册功能实现-CSDN博客【QT进阶】Qthttp编程之json解析的简单介绍-CSDN博客【QT进阶】Qthttp编程之nlohmannjson库使用的简单介绍-CSDN博客【QT进阶】Qthttp编程之websocket的简单介绍一、什么是websocket1、简介websocket是HTML5中新增的一个协议，这个协议的出现，让客户端和服务器之前
  • python猜谜语小游戏代码_C语言谜语博士的难题代码及解析
    谜语博士遇到了两个难题，先看第一个难题。谜语博士的难题(一)问题描述诚实族和说谎族是来自两个岛屿的不同民族，已知诚实族的人永远说真话，而说谎族的人永远说假话。一天，谜语博士遇到3个人，知道他们可能是来自诚实族或说谎族的。为了调查这3个人到底来自哪个族，博士分别问了他们问题，下面是他们的对话：博士问：“你们是什么族的？”第1个人回答说：“我们之中有2个来自诚实族。”第2个人说：“不要胡说，我们3个人
  • 【HTML】＜script＞元素中的 defer 和 async 属性详解
    文章目录元素中的defer和async属性详解基本概念传统脚本加载defer属性async属性对比表格使用场景建议注意事项示例在HTML5中，元素有两个控制脚本加载和执行行为的属性：defer和async。这两个属性可以帮助开发者优化页面加载性能，特别是在处理外部脚本时。基本概念传统脚本加载没有使用任何属性的元素会阻塞HTML解析：浏览器遇到这个脚本时会暂停HTML解析下载并执行脚本执行完成后才继
  • 【我今天】20191014节奏 Abby_Z
    今天，很空的一天，但是还是要求自己按照公司时间一起，也略微放宽。上午写了两封邮件，核了个表格！下午，做了个简略报告，但是被linda打回，财务税负实在难为我！然后就不能自已的睡了一觉！紧接着，跟着微信处理了一些事务！再然后还是没到时间，却控制不住的玩了会游戏！相比成功人士，自律性真的不是一般的不好！而且还不能控制沉淀在小游戏中，拖延…略微满意，也略微不满！要进步，要好好约束自己，不能懈怠！
  • 像素策略游戏：资源战争 代码改变世界10086 像素游戏游戏游戏csscss3
    像素策略游戏：资源战争下面是一个完整的像素风格策略小游戏，包含资源收集、基地建设、单位生产和战斗系统。像素策略：资源战争*{margin:0;padding:0;box-sizing:border-box;font-family:'PressStart2P','CourierNew',monospace;}body{background:linear-gradient(135deg,#1a1f2d
  • 像素风格超级玛丽HTML游戏
    像素风格超级玛丽HTML游戏创建一个像素风格的HTML5小游戏，模仿超级玛丽的经典玩法。游戏包含移动、跳跃、收集金币、躲避敌人和到达终点等核心机制。设计思路使用纯HTML5Canvas实现游戏渲染像素风格美术设计(16x16像素元素)实现物理引擎(重力、碰撞检测)键盘控制移动和跳跃添加经典超级玛丽元素(砖块、水管、蘑菇敌人)下面是完整的实现代码：像素超级玛丽*{margin:0;padding:0
  • 像素风格坦克大战游戏 代码改变世界10086 游戏像素游戏游戏csscss3
    像素风格坦克大战游戏下面我将实现一个基于HTML5Canvas的像素风格坦克大战游戏，玩法类似经典的FC坦克大战。设计思路使用像素风格渲染游戏元素玩家控制坦克移动和射击敌方AI坦克自动移动和攻击可破坏的砖墙和不可破坏的钢墙基地保护机制计分系统和生命值显示实现代码像素坦克大战*{margin:0;padding:0;box-sizing:border-box;font-family:'PressSt
  • c语言程序设计猜拳小游戏答辩,C语言课程设计-猜拳游戏 weixin_39558221 c语言程序设计猜拳小游戏答辩
    C语言课程设计-猜拳游戏C语言课程设计-猜拳游戏|c语言程序代码编程小程序设计|c语言课程设计报告课程案例enump_r_s{paper,rock,scissors,game,help,instructions,quit};#includemain(){enump_r_splayer,machine;enump_r_sselection_by_player(),selection_by_machi
  • canvas使用 CDwenhuohuo canva可画
    是HTML5引入的一个新标签，它首次出现在2004年的Safari浏览器中，由Apple提出，并在后来的HTML5标准中被正式采纳。IE8及以下❌不支持Canvas的基本用法-WebAPI|MDNvue3import{onMounted}from'vue';onMounted(()=>{constcanvas=document.getElementById('myCanvas');constctx
  • 10道题揭秘你的本命引擎
    终极游戏引擎灵魂测试10道题揭秘你的本命引擎！(UnityorUE5？答案藏在你的选择里…)记得，答一道题把选项后面的数字加上哦，这个数叫"S".测试问题1.你梦想中的游戏项目是？A)手机上的休闲小游戏→+0B)电影级3A大作→+2C)复古像素风2D游戏→+0D)超真实的开放世界→+12.你对代码的态度是？A)“害怕（不想）写代码”→+1B)“会一点C#”→+0C)“热爱C++挑战”→+2D)“有
  • 《C语言实现扫雷游戏：代码解析与博客分享》 峥无 算法c语言开发语言开源
    引言扫雷游戏作为一款经典的益智小游戏，承载了许多人的回忆。它不仅考验玩家的逻辑思维和推理能力，还充满了趣味性和挑战性。在这篇博客中，我们将详细探讨如何使用C语言实现一个简单的扫雷游戏，深入分析代码的各个部分，帮助你理解其中的原理和实现思路。项目整体架构本扫雷游戏项目采用模块化编程的思想，将不同的功能封装到不同的文件中，这样可以提高代码的可读性、可维护性和可扩展性。整个项目主要由三个文件组成：gam
  • 通过Deepseek找工作 速易达网络 人工智能
    推送的结果如下，对应的AI提示词在底部：计算机方向远程工作职位汇总整合全球远程技术岗位|支持全地域远程办公|涵盖开发、安全、云计算等方向覆盖方向：8+个技术领域薪资范围：¥10K-¥40K/月工作模式：100%远程远程技术职位列表职位名称技能要求经验要求薪资待遇工作模式WordPress开发工程师PHP,HTML5/CSS3,WordPress二次开发,SEO优化3年+1.4-1.6万/月全球远程
  • HTML制作一个介绍自己家乡的网站——贵州贵阳，排版整洁，内容丰富，主题鲜明 软件技术NINI 旅游htmlcss
    一、‍网站题目旅游，当地特色，历史文化，特色小吃等网站的设计与制作。二、✍️网站描述‍静态网站的编写主要是用HTMLDIV+CSS等来完成页面的排版设计‍,常用的网页设计软件有Dreamweaver、EditPlus、HBuilderX、VScode、Webstorm、Animate等等，用的最多的还是DW，当然不同软件写出的前端Html5代码都是一致的，本网页适合修改成为各种类型的产品展示网页，
  • 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其他