内容介绍
1.简介
别踩白块这个游戏相信很多人都在手机上玩过,今天我们就来做一个网页版的,先上一张游戏效果图:
属于简化版别踩白块,代码相对较为简单易学,主要涉及通过 javascript 操作元素节点的增删以及属性节点(class)的操作。
2.知识点
HTML/CSS
JavaScript
元素节点增删
属性节点操作
3.项目架构
puzzle
|index.html
|css/index.css
|js/index.js
项目原理
在开始编程之前,让我们先来分析下整个游戏的流程:一定的速度下移,点击黑块,黑块消失,新的黑块出现在普通游戏玩家眼中,应该是游戏开始,黑块不断向下移动,若黑块触底则游戏结束;
而以开发者来说,应将每一个黑块和白块抽象成一个个的数据结构,黑块的消失和出现其实就是数据结构的创造和销毁 ,我们来看一张游戏的流程图,对于要编写的功能有一个大概的了解:
实现步骤
页面布局
可以用 div+css 布局来实现别踩白块的静态效果展示,直接上 HTML 代码,我来简要说下 HTML 思路,将主界面分解成一个 4x4 的大矩形格子,每一个方块代表其中一个小的矩形格,其中每一行的四个白块中有一个黑块,每一行中黑块位于哪一列是随机生成的,但是我们这里现在是静态页面就自己确定了,然后通过 css 控制样式。
创建 index.html 文件,并输入以下代码:
添加样式
下面是 css 代码,这里有一个要注意的地方,我将 div#con
块级元素向上提了 100 px,这样在游戏的开始就出现了最底一行的空白,隐藏最上面那行,为什么要这样呢,继续往下看就知道了。设置黑白块的样式,为 js 部分动态插入黑白块做准备。
创建 css/index.css
文件,并输入以下代码:
#main {
width: 408px;
height: 408px;
background: white;
border: 2px solid gray;
margin: 0 auto;
overflow: hidden;
}
h2 {
text-align: center;
}
#con {
width: 100%;
height: 400px;
position: relative;
top: -408px; /*隐藏所有格子*/
border-collapse: collapse;
}
/* 行 */
.row {
height: 100px;
width: 100%;
}
/* 一个块 */
.cell {
height: 100px;
width: 100px;
float: left;
border: rgb(54, 74, 129) 1px solid;
}
.black {
background: black;
}
.btn {
width: 100%;
text-align: center;
}
.start {
margin: 20px auto;
width: 150px;
height: 50px;
border-radius: 10px;
background: yellowgreen;
line-height: 50px;
color: #fff;
}
如果以上部分你都能够理解并且对应着代码实现的话,那么我们看到的应该是一个空格子,我们设置 id 为 con 的 div 的 top 属性为 0 px: #con {top: 0px;}
,这样我们就可以看见:
是不是很像别踩白块的界面了呢,我们已经成功了一大步,然后就是通过 js 来实现动态的插入黑块或白块,以及操作。
游戏初始化
根据前面的 HTML 部分我们可以知道,每个 就代表一个白块,
就代表一个黑块,每点击一个黑块消失其实是删除了一个
然后从上面添加一个新的
所以我们首先要通过 js 来控制
的创造和生成(记得删除在编写静态页面时候指定生成的 4 个
div.row
)。具体方法如下:
删除之前写的 4 个 div.row,将 index.html 文件改为以下代码:
对游戏进行初始化,在 js/index.js
文件中写入以下代码:
// 创建div, className是其类名
function creatediv(className) {
var div = document.createElement('div');
div.className = className;
return div;
}
// 创造一个并且有四个子节点
function createrow() {
var con = $('con');
var row = creatediv('row'); //创建div className=row
var arr = creatcell(); //定义div cell的类名,其中一个为cell black
con.appendChild(row); // 添加row为con的子节点
for (var i = 0; i < 4; i++) {
row.appendChild(creatediv(arr[i])); //添加row的子节点 cell
}
if (con.firstChild == null) {
con.appendChild(row);
} else {
con.insertBefore(row, con.firstChild);
}
}
//删除div#con的子节点中最后那个
function delrow() {
var con = $('con');
if (con.childNodes.length == 6) {
con.removeChild(con.lastChild);
}
}
// 创建一个类名的数组,其中一个为cell black, 其余为cell
function creatcell() {
var temp = ['cell', 'cell', 'cell', 'cell'];
var i = Math.floor(Math.random() * 4); //随机产生黑块的位置 Math.random()函数参数 0~1的随机数
temp[i] = 'cell black';
return temp;
}
让黑块动起来
在可以通过 js 来创造和销毁 div
后,我们就要让黑块动起来,这个时候我们就用到了之前 css 提到的设定 隐藏了一行的
,我们通过 js 的 DOM 操作使其向下方移动,并设置定时器每 30 毫秒移动一次,这样就实现了黑块的平滑移动,在黑块移动的同时,我们要判断黑块是否已经触底,触底则游戏失败,停止调用
move()
,触底后调用函数
fail()
游戏失败,具体方法如下:
//让黑块动起来
function move() {
var con = $('con');
var top = parseInt(window.getComputedStyle(con, null)['top']);
if (speed + top > 0) {
top = 0;
} else {
top += speed;
}
con.style.top = top + 'px'; //不断移动top值,使它动起来
over();
if (top == 0) {
createrow();
con.style.top = '-102px';
delrow();
}
}
// 加速函数
function speedup() {
speed += 2;
if (speed == 20) {
alert('你超神了');
}
}
// 判断游戏是否结束
function over() {
var rows = con.childNodes;
if (rows.length == 5 && rows[rows.length - 1].pass !== 1) {
fail();
}
for (let i = 0; i < rows.length; i++) {
if (rows[i].pass1 == 1) {
fail();
}
}
}
// 游戏结束
function fail() {
clearInterval(clock);
flag = false;
confirm('你的最终得分为 ' + parseInt($('score').innerHTML));
var con = $('con');
con.innerHTML = '';
$('score').innerHTML = 0;
con.style.top = '-408px';
}
点击黑块事件
让黑块动起来之后呢,我们就来考虑怎么判断用户有没有点击到黑块呢,同时用户若点击到黑块,我们要让所在那一行消失,那么我们需要一个 judge
方法,具体如下:
// 判断是否点击黑块、白块
function judge(ev) {
if (
ev.target.className.indexOf('black') == -1 &&
ev.target.className.indexOf('cell') !== -1
) {
ev.target.parentNode.pass1 = 1; //定义属性pass,表示此行row的白块已经被点击
}
if (ev.target.className.indexOf('black') !== -1) {
//点击目标元素 类名中包含 black 说明是黑块
ev.target.className = 'cell';
ev.target.parentNode.pass = 1; //定义属性pass,表明此行row的黑块已经被点击
score();
}
}
其实程序写到这里,几个核心的功能点都已经实现了,是不是感觉很简单呢。剩下来的就是将这些方法组合起来,组成完整的逻辑关系,在我给出的源码里添加有一个记分器记录用户分数的功能,同时设置加速方法,使黑块的移动越来越快等等。有兴趣的的同学可以尝试着添加事件按钮,使这个游戏更接近 APP 版本。
js 完整代码
// 工具封装
// 根据id来获取元素
function $(id) {
return document.getElementById(id);
}
// 创建div, className是其类名
function creatediv(className) {
var div = document.createElement('div');
div.className = className;
return div;
}
var clock = null;
var state = 0;
var speed = 6;
var flag = false;
//点击开始游戏按钮 开始游戏
function start() {
if (!flag) {
init();
} else {
alert('游戏已经开始,无须再次点击!');
}
}
/*
* 初始化 init
*/
function init() {
flag = true;
for (var i = 0; i < 4; i++) {
createrow();
}
// 添加onclick事件
$('main').onclick = function (ev) {
ev = ev || event;
judge(ev);
};
// 定时器 每30毫秒调用一次move()
clock = window.setInterval('move()', 30);
}
// 判断是否点击黑块、白块
function judge(ev) {
if (
ev.target.className.indexOf('black') == -1 &&
ev.target.className.indexOf('cell') !== -1
) {
ev.target.parentNode.pass1 = 1; //定义属性pass,表示此行row的白块已经被点击
}
if (ev.target.className.indexOf('black') !== -1) {
//点击目标元素 类名中包含 black 说明是黑块
ev.target.className = 'cell';
ev.target.parentNode.pass = 1; //定义属性pass,表明此行row的黑块已经被点击
score();
}
}
// 判断游戏是否结束
function over() {
var rows = con.childNodes;
if (rows.length == 5 && rows[rows.length - 1].pass !== 1) {
fail();
}
for (let i = 0; i < rows.length; i++) {
if (rows[i].pass1 == 1) {
fail();
}
}
}
// 游戏结束
function fail() {
clearInterval(clock);
flag = false;
confirm('你的最终得分为 ' + parseInt($('score').innerHTML));
var con = $('con');
con.innerHTML = '';
$('score').innerHTML = 0;
con.style.top = '-408px';
}
// 创造一个并且有四个子节点
function createrow() {
var con = $('con');
var row = creatediv('row'); //创建div className=row
var arr = creatcell(); //定义div cell的类名,其中一个为cell black
con.appendChild(row); // 添加row为con的子节点
for (var i = 0; i < 4; i++) {
row.appendChild(creatediv(arr[i])); //添加row的子节点 cell
}
if (con.firstChild == null) {
con.appendChild(row);
} else {
con.insertBefore(row, con.firstChild);
}
}
// 创建一个类名的数组,其中一个为cell black, 其余为cell
function creatcell() {
var temp = ['cell', 'cell', 'cell', 'cell'];
var i = Math.floor(Math.random() * 4); //随机产生黑块的位置 Math.random()函数参数 0~1的随机数
temp[i] = 'cell black';
return temp;
}
//让黑块动起来
function move() {
var con = $('con');
var top = parseInt(window.getComputedStyle(con, null)['top']);
if (speed + top > 0) {
top = 0;
} else {
top += speed;
}
con.style.top = top + 'px'; //不断移动top值,使它动起来
over();
if (top == 0) {
createrow();
con.style.top = '-102px';
delrow();
}
}
// 加速函数
function speedup() {
speed += 2;
if (speed == 20) {
alert('你超神了');
}
}
//删除某行
function delrow() {
var con = $('con');
if (con.childNodes.length == 6) {
con.removeChild(con.lastChild);
}
}
// 记分
function score() {
var newscore = parseInt($('score').innerHTML) + 1; //分数加一
$('score').innerHTML = newscore; //修改分数
if (newscore % 10 == 0) {
//当分数是10 的倍数时使用加速函数,越来越快
speedup();
}
}
总结
仅仅一百多行代码我们就实现了一个简单有趣的 Web 小游戏。如果你刚入门前端,相信本项目可以很好的让你理解,练习如何使用 JavaScript 操作 DOM.
你可能感兴趣的:(html游戏代码,js控制div显示隐藏实现)
美易官方:盘前道指期货涨0.5%,游戏驿站跌逾15%
美股投资
财经 人工智能 大数据 新浪微博 微信 微信公众平台 百度 金融
在股市开盘前的交易时段,道指期货上涨了0.5%,而游戏驿站(GameStop)的股价却出现了大幅下跌,跌幅超过15%。这一市场动态引发了投资者的广泛关注,也反映了当前股市的复杂性和不确定性。美股股指期货周三盘前走强,交易员为季度末的再平衡做准备。本周因假期而缩短,美国将公布关键通胀数据。道指期货涨0.5%,标普500指数期货涨0.6%,纳指期货涨0.5%。德国DAX指数涨0.4%,英国富时100指
打印出1-100的奇数 。(C语言)
王多鱼001
C语言 c语言 算法 数据结构
代码:#includeintmain(){for(inti=1;i<101;i++){if(i%2==1){printf("%d,",i);}}return0;}
华为OD机试 - 单向链表中间节点(Java & JS & Python & C & C++)
华为OD题库
华为od 链表 java
须知哈喽,本题库完全免费,收费是为了防止被爬,大家订阅专栏后可以私信联系退款。感谢支持文章目录须知题目描述输出描述解析代码题目描述给定一个单链表L,请编写程序输出L中间结点保存的数据。如果有两个中间结点,则输出第二个中间结点保存的数据。例如:给定L为1→7→5,则输出应该为7;给定L为1→2→3→4,则输出应该为3;输入描述每个输入包含1个测试用例。每个测试用例:第一行给出链表首结点的地址、结点总
llama.cpp 编译安装@Ubuntu
skywalk8163
项目实践 人工智能 llama ubuntu linux 人工智能
在Kylin和Ubuntu编译llama.cpp,具体参考:llama模型c语言推理@FreeBSD-CSDN博客现在代码并编译:gitclonehttps://github.com/ggerganov/llama.cppcdllama.cppmkdirbuildcdbuildcmake..cmake--build.--configRelease#可选安装makeinstall#或可选添加路径ex
python 推导式(派生、衍生)
sanduo112
人工智能 python windows 开发语言
python推导式一、推导式(派生、衍生)1.Python推导式是一种独特的数据处理方式,可以从一个数据序列构建另一个新的数据序列的结构体。2.列表(list)推导式3.字典(dict)推导式4.集合(set)推导式5.元组(tuple)推导式二、代码概述一、推导式(派生、衍生)1.Python推导式是一种独特的数据处理方式,可以从一个数据序列构建另一个新的数据序列的结构体。Python支持各种数
SpringMVC设置全局异常处理器
水岸齐天
java spring
文章目录背景分析使用@ControllerAdvice(@RestControllerAdvice)+@ExceptionHandler实现全局异常全局异常处理-多个处理器匹配顺序存在一个类中存在不同的类中对于过滤器和拦截器中的异常,有两种思路可以考虑背景在项目中我们有需求做一个全局异常处理,来规范所有出去的异常信息。参考:官方文档分析首先ControllerAdvice(RestControll
uni-app实现 步骤条
夏夏的码农
uni-app
实现如图样式html部分代码如下投资期限与收益0?'active':'default'">募集开始1?'active':'default'">募集结束2?'active':'default'">产品成立3?'active':'default'">产品到期0?'active-step1':'step1'">1?'active-st
手机上赚钱?学会这5种方法!高省app让你轻松赚钱!
高省浮沉000018
随着智能手机的普及,越来越多的人开始探索在手机上赚钱的方法。不仅可以利用碎片时间增加收入,还能减少对传统办公室工作的依赖。本文将向您介绍5种在手机上赚钱的方法,并推荐一款高省app,帮助您实现手机赚钱的目标。大家好!我是高省APP最大团队&联合创始人浮沉导师!【高省】APP网购优惠券免费领,分享还能赚钱。【高省】是一个自用省钱佣金高,分享推广赚钱多的平台。佣金更高,模式更好,终端用户不流失。0投资
【算法分析与设计】去除重复字母
五敷有你
算法分析与设计 java javascript 开发语言 算法 数据结构
个人主页:五敷有你系列专栏:算法分析与设计⛺️稳中求进,晒太阳题目给你一个字符串s,请你去除字符串中重复的字母,使得每个字母只出现一次。需保证返回结果的字典序最小(要求不能打乱其他字符的相对位置)。示例示例1:输入:s="bcabc"输出:"abc"示例2:输入:s="cbacdcbc"输出:"acdb"思路贪心+单调栈实现【字符串删除一个字符使其字典序最小的贪心策略】:对于两个长度相同的字符串,
数据分析:低代码平台助力大数据时代的飞跃发展
快乐非自愿
数据分析 低代码 大数据
随着信息技术的突飞猛进,我们身处于一个数据量空前增长的时代——大数据时代。在这个时代背景下,数据分析已经成为企业决策、政策制定、科学研究等众多领域不可或缺的重要工具。然而,面对海量的数据和日益复杂多变的分析需求,传统的数据分析方法往往捉襟见肘,难以应对。幸运的是,低代码平台的兴起为大数据分析注入了新的活力,成为推动大数据时代发展的重要力量。低代码平台,顾名思义,是一种通过少量甚至无需编写代码,就能
以前开发MFC界面如何快速转成QT界面
广州视觉芯软件有限公司
mfc qt c++
将MFC界面快速转换为Qt界面可能需要进行一些手动工作,因为MFC和Qt是两个不同的界面框架,它们具有不同的设计和实现原理。但是,以下步骤可以帮助你快速进行转换:创建一个新的Qt项目:使用QtCreator创建一个新的Qt项目。分析MFC界面:仔细分析你的MFC界面,包括窗口、对话框、控件等的布局、样式和行为。重新设计界面:使用Qt的可视化设计器重新设计界面。在QtCreator的设计器中,你可以
【嵌入式模块】步进电机使用总结
记录无知岁月
# 嵌入式设备 嵌入式硬件 步进电机
关于本博客 此前上了一门课《自动控制元件》,但是由于学时有限,讲到步进电机就不讲了,留下了一个小遗憾,导致需要使用步进电机时就有点懵,于是找了一篇博客,链接在这里,推荐具有电机知识(如直流电机,异步电机等)的朋友看,如果完全不懂,建议先啃书。
v-for 实例
琪33
v-for实例v-for实例{{item}}{{index+1}}:{{student.name}}-{{student.age}}varapp=newVue({el:'#app',data:{items:[53,23,76,14,54,36,28],students:[{name:'jspang',age:32},{name:'Panda',age:30},{name:'PanPaN',age:
用XMLHttpRequest发送和接收JSON数据
潭池先生
json XMLHttpRequest 前端
百度的AI回答了一个案例:varxhr=newXMLHttpRequest();varurl="your_endpoint_url";//替换为你的API端点vardata=JSON.stringify({key1:"value1",key2:"value2"});xhr.open("POST",url,true);xhr.setRequestHeader("Content-Type","appl
yarn的安装和使用全网最详细教程
zxj19880502
yarn npm
一、yarn的简介:Yarn是facebook发布的一款取代npm的包管理工具。二、yarn的特点:速度超快。Yarn缓存了每个下载过的包,所以再次使用时无需重复下载。同时利用并行下载以最大化资源利用率,因此安装速度更快。超级安全。在执行代码之前,Yarn会通过算法校验每个安装包的完整性。超级可靠。使用详细、简洁的锁文件格式和明确的安装算法,Yarn能够保证在不同系统上无差异的工作。三、yarn的
npm 搭建 Vite 项目
渺小的虫子
viter 前端 javascript 开发语言
兼容性注意Vite需要Node.js版本>=12.0.0。1、使用npm安装Viter$npminitvite@latest使用npm初始化项目#npm6.xnpminitvite@latestmy-vue-app--templatevue#npm7+,需要额外的双横线:npminitvite@latestmy-vue-app----templatevue2、配置路由:npminstallvue-
地低为海人低为王
缘梦草
地低为海,人低为王。低,高之基,高,低之顶。谦虚才能收益,咄咄逼人会招损。高粱熟了,头会低下。受益反而会深藏不露。捧人之术,把人捧高,然后控制。受控之人,大都是虚荣心作祟。活成别人想象中的样子,像别人想象中那么有面子的活着是悲哀的。穷不可怕,怕的是虚荣心。当你好面子,你就会被控制。一旦受虚荣心控制,你不得不谨小慎微的维护面子,付出多余的能量,希望得到别人的一句赞。面子就是金子打造的牢笼,让你在赞美
中原焦点团队38期王芳芳坚持分享第236天,20230630总约练134次,来访113次,咨8次,观察员13次
芳芳王
学习焦点的初心是想拯救孩子,孩子由于沉迷游戏,成绩下滑,在学习的过程中发现是自己的教育方式出了状况。经过半年的学习,一些焦点的基本技巧,如接纳、欣赏、倾听、同理心、尊重等都有了一定的了解。但在实际应用时仍然存在很多问题,感觉自己仍然没有放下对孩子成绩的期望,仍然把握不住对孩子管理的度。我该如何去陪伴好孩子?多用心去听课,并加强反思,多约练。去思考如何让自己快乐起来?
请简单介绍一下Shiro框架是什么?Shiro在Java安全领域的主要作用是什么?Shiro主要提供了哪些安全功能?
AaronWang94
shiro java java 安全 开发语言
请简单介绍一下Shiro框架是什么?Shiro框架是一个强大且灵活的开源安全框架,为Java应用程序提供了全面的安全解决方案。它主要用于身份验证、授权、加密和会话管理等功能,可以轻松地集成到任何JavaWeb应用程序中,并提供了易于理解和使用的API,使开发人员能够快速实现安全特性。Shiro的核心组件包括Subject、SecurityManager和Realms。Subject代表了当前与应用
图论记录之最短路迪杰斯特拉
Just right
算法 图论 java 开发语言
简述思想这个思想能用一句话来概括,精简到的极致:每次找到一个最短距离的点并更新起点到各个点的最短距离如果要可视化的话,B站搜索Dijksra算法,有视频讲解伪代码写到这里,其实是想整一个动画的,这样效果更好点,但由于种种原因所以就拖一下intdijkstr(){dist[1]=0;其余的点的距离全部初始化为真无穷,不要写成int的最大值迭代n次将不在s中的,且距离最近的点给tsj即先到t,再加上t
大前端-postcss安装使用指南
黑夜照亮前行的路
postcss
PostCSS是一款强大的CSS处理工具,可以用来自动添加浏览器前缀、代码合并、代码压缩等,提升代码的可读性,并支持使用最新的CSS语法。以下是一份简化的PostCSS安装使用指南:一、安装PostCSS在你的项目目录中,通过npm(NodePackageManager)来安装PostCSS。打开命令行窗口,输入以下命令:bash复制代码npminstallpostcss--save-dev这将把
C#WPF控件TextBlock详解
未来无限
C#WPF程序设计 c# wpf 控件 TextBlock 回车换行 多行显示 强制回车换行
本文讲解WPF控件TextBlock。目录定义常用属性实例如何实现自动换行?如何强制回车换行?
谷歌浏览器驱动Chromedriver(114-120版本)文件以及驱动下载教程
pigerr杨
Python python chrome drivers
ChromeDriver官方网站GitHub||GoogleChromeLabs/chrome-for-testingChromeDriver113-125_JSONChromeforTestingavailability123-125zip白月黑羽Python基础|进阶|Qt图形界面|Django|自动化测试|性能测试|JS语言|JS前端|原理与安装
通俗易懂:什么是Java虚拟机(JVM)?它的主要作用是什么?
大龄下岗程序员
mysql java mysql spring
Java虚拟机(JavaVirtualMachine,JVM)是一种软件实现的抽象计算机,它负责执行Java字节码(Bytecode)。Java程序并不是直接在物理计算机上运行,而是先由Java编译器将源代码编译成与平台无关的字节码,然后由JVM负责读取字节码并在实际硬件架构上运行。JVM的主要作用包括以下几个方面:1.跨平台性-JVM是Java语言“一次编写,到处运行”(WriteOnce,Ru
大创项目推荐 深度学习 opencv python 公式识别(图像识别 机器视觉)
laafeer
python
文章目录0前言1课题说明2效果展示3具体实现4关键代码实现5算法综合效果6最后0前言优质竞赛项目系列,今天要分享的是基于深度学习的数学公式识别算法实现该项目较为新颖,适合作为竞赛课题方向,学长非常推荐!学长这里给一个题目综合评分(每项满分5分)难度系数:3分工作量:4分创新点:4分更多资料,项目分享:https://gitee.com/dancheng-senior/postgraduate1课题
标定系列——基于OpenCV实现普通相机、鱼眼相机不同标定板下的标定(五)
JANGHIGH
标定 opencv
标定系列——基于OpenCV实现相机标定(五)说明代码解析VID5.xmlin_VID5.xmlcamera_calibration.cpp说明该程序可以实现多种标定板的相机标定工作代码解析VID5.xmlimages/CameraCalibration/VID5/xx1.jpgimages/CameraCalibration/VID5/xx2.jpgimages/CameraCalibratio
3、JavaWeb-Ajax/Axios-前端工程化-Element
所谓远行Misnearch
# JavaWeb 前端 ajax elementui java 前端框架
P34Ajax介绍Ajax:AsynchroousJavaScriptAndXML,异步的JS和XMLJS网页动作,XML一种标记语言,存储数据,作用:数据交换:通过Ajax给服务器发送请求,并获取服务器响应的数据异步交互:在不重新加载整个页面的情况下,与服务器交换数据并实现更新部分网页的技术,例如:搜索联想、用户名是否可用的校验等等。同步与异步:同步:服务器在处理中客户端要处于等待状态,输入域名
docker怎么端口映射
Lance_mu
docker 容器 运维
1、默认固定的端口#Web服务器:WebApache或Nginx通常使用80端口HTTP:80HTTPS:443#数据库服务器MySQL:3306PostgreSQL:5432MongoDB:27017Redis:6379#邮件服务器SMTP:25POP3:110IMAP:143#其他服务SSH:22FTP:21DNS(域名解析):53代理服务器Squid:3128版本控制系统Git:9418(S
docker基础(一)
运维搬运工
容器-docker docker 容器 运维
相关概念介绍Docker是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖到一个可移植的容器中,然后发布到任何流行的linux机器上,也可以实现虚拟化,容器是完全使用沙箱机制,互相之间不会有任何接口。Docker有几个重要概念:dockerfile,配置文件,用来生成dockerimagedockerimage,交付部署的最小单元docker命令与API,定义命令与接口,支持第三方系统集
不了解孩子,哪来的尊重孩子
敏贰好学
著名的棉花糖实验创始人、美国心理学家沃尔特·米歇尔发现,如果父母支持孩子的选择和决定,鼓励孩子的自主性,孩子后期会展现更强的认知和控制注意力的能力。也就是说,父母越让孩子自由,孩子反而越能自控。这是为什么呢?道理很简
scala的option和some
矮蛋蛋
编程 scala
原文地址:
http://blog.sina.com.cn/s/blog_68af3f090100qkt8.html
对于学习 Scala 的 Java™ 开发人员来说,对象是一个比较自然、简单的入口点。在 本系列 前几期文章中,我介绍了 Scala 中一些面向对象的编程方法,这些方法实际上与 Java 编程的区别不是很大。我还向您展示了 Scala 如何重新应用传统的面向对象概念,找到其缺点
NullPointerException
Cb123456
android BaseAdapter
java.lang.NullPointerException: Attempt to invoke virtual method 'int android.view.View.getImportantForAccessibility()' on a null object reference
出现以上异常.然后就在baidu上
PHP使用文件和目录
天子之骄
php文件和目录 读取和写入 php验证文件 php锁定文件
PHP使用文件和目录
1.使用include()包含文件
(1):使用include()从一个被包含文档返回一个值
(2):在控制结构中使用include()
include_once()函数需要一个包含文件的路径,此外,第一次调用它的情况和include()一样,如果在脚本执行中再次对同一个文件调用,那么这个文件不会再次包含。
在php.ini文件中设置
SQL SELECT DISTINCT 语句
何必如此
sql
SELECT DISTINCT 语句用于返回唯一不同的值。
SQL SELECT DISTINCT 语句
在表中,一个列可能会包含多个重复值,有时您也许希望仅仅列出不同(distinct)的值。
DISTINCT 关键词用于返回唯一不同的值。
SQL SELECT DISTINCT 语法
SELECT DISTINCT column_name,column_name
F
java冒泡排序
3213213333332132
java 冒泡排序
package com.algorithm;
/**
* @Description 冒泡
* @author FuJianyong
* 2015-1-22上午09:58:39
*/
public class MaoPao {
public static void main(String[] args) {
int[] mao = {17,50,26,18,9,10
struts2.18 +json,struts2-json-plugin-2.1.8.1.jar配置及问题!
7454103
DAO spring Ajax json qq
struts2.18 出来有段时间了! (貌似是 稳定版)
闲时研究下下! 貌似 sruts2 搭配 json 做 ajax 很吃香!
实践了下下! 不当之处请绕过! 呵呵
网上一大堆 struts2+json 不过大多的json 插件 都是 jsonplugin.34.jar
strut
struts2 数据标签说明
darkranger
jsp bean struts servlet Scheme
数据标签主要用于提供各种数据访问相关的功能,包括显示一个Action里的属性,以及生成国际化输出等功能
数据标签主要包括:
action :该标签用于在JSP页面中直接调用一个Action,通过指定executeResult参数,还可将该Action的处理结果包含到本页面来。
bean :该标签用于创建一个javabean实例。如果指定了id属性,则可以将创建的javabean实例放入Sta
链表.简单的链表节点构建
aijuans
编程技巧
/*编程环境WIN-TC*/ #include "stdio.h" #include "conio.h"
#define NODE(name, key_word, help) \ Node name[1]={{NULL, NULL, NULL, key_word, help}}
typedef struct node { &nbs
tomcat下jndi的三种配置方式
avords
tomcat
jndi(Java Naming and Directory Interface,Java命名和目录接口)是一组在Java应用中访问命名和目录服务的API。命名服务将名称和对象联系起来,使得我们可以用名称
访问对象。目录服务是一种命名服务,在这种服务里,对象不但有名称,还有属性。
tomcat配置
关于敏捷的一些想法
houxinyou
敏捷
从网上看到这样一句话:“敏捷开发的最重要目标就是:满足用户多变的需求,说白了就是最大程度的让客户满意。”
感觉表达的不太清楚。
感觉容易被人误解的地方主要在“用户多变的需求”上。
第一种多变,实际上就是没有从根本上了解了用户的需求。用户的需求实际是稳定的,只是比较多,也比较混乱,用户一般只能了解自己的那一小部分,所以没有用户能清楚的表达出整体需求。而由于各种条件的,用户表达自己那一部分时也有
富养还是穷养,决定孩子的一生
bijian1013
教育 人生
是什么决定孩子未来物质能否丰盛?为什么说寒门很难出贵子,三代才能出贵族?真的是父母必须有钱,才能大概率保证孩子未来富有吗?-----作者:@李雪爱与自由
事实并非由物质决定,而是由心灵决定。一朋友富有而且修养气质很好,兄弟姐妹也都如此。她的童年时代,物质上大家都很贫乏,但妈妈总是保持生活中的美感,时不时给孩子们带回一些美好小玩意,从来不对孩子传递生活艰辛、金钱来之不易、要懂得珍惜
oracle 日期时间格式转化
征客丶
oracle
oracle 系统时间有 SYSDATE 与 SYSTIMESTAMP;
SYSDATE:不支持毫秒,取的是系统时间;
SYSTIMESTAMP:支持毫秒,日期,时间是给时区转换的,秒和毫秒是取的系统的。
日期转字符窜:
一、不取毫秒:
TO_CHAR(SYSDATE, 'YYYY-MM-DD HH24:MI:SS')
简要说明,
YYYY 年
MM 月
【Scala六】分析Spark源代码总结的Scala语法四
bit1129
scala
1. apply语法
FileShuffleBlockManager中定义的类ShuffleFileGroup,定义:
private class ShuffleFileGroup(val shuffleId: Int, val fileId: Int, val files: Array[File]) {
...
def apply(bucketId
Erlang中有意思的bug
bookjovi
erlang
代码中常有一些很搞笑的bug,如下面的一行代码被调用两次(Erlang beam)
commit f667e4a47b07b07ed035073b94d699ff5fe0ba9b
Author: Jovi Zhang <
[email protected] >
Date: Fri Dec 2 16:19:22 2011 +0100
erts:
移位打印10进制数转16进制-2008-08-18
ljy325
java 基础
/**
* Description 移位打印10进制的16进制形式
* Creation Date 15-08-2008 9:00
* @author 卢俊宇
* @version 1.0
*
*/
public class PrintHex {
// 备选字符
static final char di
读《研磨设计模式》-代码笔记-组合模式
bylijinnan
java 设计模式
声明: 本文只为方便我个人查阅和理解,详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/
import java.util.ArrayList;
import java.util.List;
abstract class Component {
public abstract void printStruct(Str
利用cmd命令将.class文件打包成jar
chenyu19891124
cmd jar
cmd命令打jar是如下实现:
在运行里输入cmd,利用cmd命令进入到本地的工作盘符。(如我的是D盘下的文件有此路径 D:\workspace\prpall\WEB-INF\classes)
现在是想把D:\workspace\prpall\WEB-INF\classes路径下所有的文件打包成prpall.jar。然后继续如下操作:
cd D: 回车
cd workspace/prpal
[原创]JWFD v0.96 工作流系统二次开发包 for Eclipse 简要说明
comsci
eclipse 设计模式 算法 工作 swing
JWFD v0.96 工作流系统二次开发包 for Eclipse 简要说明
&nb
SecureCRT右键粘贴的设置
daizj
secureCRT 右键 粘贴
一般都习惯鼠标右键自动粘贴的功能,对于SecureCRT6.7.5 ,这个功能也已经是默认配置了。
老版本的SecureCRT其实也有这个功能,只是不是默认设置,很多人不知道罢了。
菜单:
Options->Global Options ...->Terminal
右边有个Mouse的选项块。
Copy on Select
Paste on Right/Middle
Linux 软链接和硬链接
dongwei_6688
linux
1.Linux链接概念Linux链接分两种,一种被称为硬链接(Hard Link),另一种被称为符号链接(Symbolic Link)。默认情况下,ln命令产生硬链接。
【硬连接】硬连接指通过索引节点来进行连接。在Linux的文件系统中,保存在磁盘分区中的文件不管是什么类型都给它分配一个编号,称为索引节点号(Inode Index)。在Linux中,多个文件名指向同一索引节点是存在的。一般这种连
DIV底部自适应
dcj3sjt126com
JavaScript
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml&q
Centos6.5使用yum安装mysql——快速上手必备
dcj3sjt126com
mysql
第1步、yum安装mysql
[root@stonex ~]# yum -y install mysql-server
安装结果:
Installed:
mysql-server.x86_64 0:5.1.73-3.el6_5 &nb
如何调试JDK源码
frank1234
jdk
相信各位小伙伴们跟我一样,想通过JDK源码来学习Java,比如collections包,java.util.concurrent包。
可惜的是sun提供的jdk并不能查看运行中的局部变量,需要重新编译一下rt.jar。
下面是编译jdk的具体步骤:
1.把C:\java\jdk1.6.0_26\sr
Maximal Rectangle
hcx2013
max
Given a 2D binary matrix filled with 0's and 1's, find the largest rectangle containing all ones and return its area.
public class Solution {
public int maximalRectangle(char[][] matrix)
Spring MVC测试框架详解——服务端测试
jinnianshilongnian
spring mvc test
随着RESTful Web Service的流行,测试对外的Service是否满足期望也变的必要的。从Spring 3.2开始Spring了Spring Web测试框架,如果版本低于3.2,请使用spring-test-mvc项目(合并到spring3.2中了)。
Spring MVC测试框架提供了对服务器端和客户端(基于RestTemplate的客户端)提供了支持。
&nbs
Linux64位操作系统(CentOS6.6)上如何编译hadoop2.4.0
liyong0802
hadoop
一、准备编译软件
1.在官网下载jdk1.7、maven3.2.1、ant1.9.4,解压设置好环境变量就可以用。
环境变量设置如下:
(1)执行vim /etc/profile
(2)在文件尾部加入:
export JAVA_HOME=/home/spark/jdk1.7
export MAVEN_HOME=/ho
StatusBar 字体白色
pangyulei
status
[[UIApplication sharedApplication] setStatusBarStyle:UIStatusBarStyleLightContent];
/*you'll also need to set UIViewControllerBasedStatusBarAppearance to NO in the plist file if you use this method
如何分析Java虚拟机死锁
sesame
java thread oracle 虚拟机 jdbc
英文资料:
Thread Dump and Concurrency Locks
Thread dumps are very useful for diagnosing synchronization related problems such as deadlocks on object monitors. Ctrl-\ on Solaris/Linux or Ctrl-B
位运算简介及实用技巧(一):基础篇
tw_wangzhengquan
位运算
http://www.matrix67.com/blog/archives/263
去年年底写的关于位运算的日志是这个Blog里少数大受欢迎的文章之一,很多人都希望我能不断完善那篇文章。后来我看到了不少其它的资料,学习到了更多关于位运算的知识,有了重新整理位运算技巧的想法。从今天起我就开始写这一系列位运算讲解文章,与其说是原来那篇文章的follow-up,不如说是一个r
jsearch的索引文件结构
yangshangchuan
搜索引擎 jsearch 全文检索 信息检索 word分词
jsearch是一个高性能的全文检索工具包,基于倒排索引,基于java8,类似于lucene,但更轻量级。
jsearch的索引文件结构定义如下:
1、一个词的索引由=分割的三部分组成: 第一部分是词 第二部分是这个词在多少