学前端的第五个月
学前端的第五个月

前端小白写了个网页版五子棋游戏，使用原生 JS + Canvas 实现绘制棋子、棋盘

功能模块

前端小白写了个网页版五子棋游戏，使用原生 JS + Canvas 实现绘制棋子、棋盘_第1张图片

快来体验下吧！看下你能赢得了计算机么？

主要功能模块为：
1.人机对战功能
2.悔棋功能
3.撤销悔棋功能

老规矩，源码贴上

前端小白写了个网页版五子棋游戏，使用原生 JS + Canvas 实现绘制棋子、棋盘_第2张图片

具体代码

（1）HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
    <link rel="stylesheet" href="css/1.css">
    <link rel="stylesheet" href="css/2.css">
    <script src=""></script>
    <title>html5网页手机五子棋游戏</title>
</head>
<body>
    <div id="chessBox">
        <canvas id="canvas" width="0" height="0"></canvas>
    </div>
    <div id="chess_buttom_box">
        <button class="select">选项</button>
		<button class="anew">撤回</button>
        <button class="regret">重开</button>
    </div>
    <div class="WJ_A">
		<div class="WJ_A_left">
			<div class="Wchess"></div>
			<div class="Wchess_steps">白子第0步</div>
			<div class="Wchess_expression">
				<div class="emoji  emoji--haha">
				    <div class="emoji__face">
				      <div class="emoji__eyes"></div>
				      <div class="emoji__mouth">
				        <div class="emoji__tongue"></div>
				      </div>
				    </div>
				  </div> 
			</div>
		</div>
	</div>
    </div>
    <div class="WJ_B">
		<div class="WJ_B_right">
			<div class="Bchess"></div>
			<div class="Bchess_steps">黑子第0步</div>
		</div>
			<div class="Bchess_expression">
				<div class="emoji  emoji--haha">
					<div class="emoji__face">
					  <div class="emoji__eyes"></div>
					  <div class="emoji__mouth">
						<div class="emoji__tongue"></div>
					  </div>
					</div>
				  </div> 
			</div>
        </div>
    </div>
</body>
<script src="js/1.js"></script>
</html>

（2）css代码

html,body{
     
	position: relative;
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: scroll;
    background: #e6e7ec
}
/***********上下盒子***********/
#chessBox,#chess_buttom_box{
     
    position: relative;
    margin: 0 auto;
    border-radius: 6px;
    box-shadow: 1px 1px 3px 1px #9e9e9e5e;
}

#chess_buttom_box{
     
    margin-top: 10px;
    height: 50px;
    top: 0px;
    box-shadow: 0px 0px 0px 0px #9e9e9e5e;
}

#canvas{
     
    display: block;
    top: 0px;
    position: absolute;
    background: #f7e6b7;
    border-radius: 4px;
}

.WJ_A,.WJ_B{
     
    position: relative;
    width: 100%;
    height: 70px;
    display: none;
}

.mobile_wja,.mobile_wjb{
     
    display: block;
}

.WJ_A_left,.WJ_B_right{
     
    position: absolute;
    top: 15px;
    width: 120px;
    height: 40px;
    background: #f3f3f3;
	box-shadow: 0px 0px 5px 1px #dedede;
}
.WJ_B_right{
     
	right: 0;
	border-radius: 30px 0px 0px 30px;
}
.WJ_A_left{
     
	left: 0;
	border-radius: 0px 30px 30px 0px;
}
.WJ_A > .WJ_A_left > .Wchess{
     
	top: 5px;
	left: 10px;
}

.WJ_B > .WJ_B_right > .Bchess{
     
	top: 5px;
	right: 10px;
}

.Wchess_expression{
     
    position: absolute;
    width: 50px;
    height: 50px;
	display: none;
}
.Wchess_expression::after{
     
	content: "白棋获胜";
	position: absolute;
	width: 150%;
	height: 100%;
	left: 50px;
	top: 0px;
	font-size: 15px;
	text-align: center;
	line-height: 50px;
}
.Bchess_expression{
     
	position: absolute;
	width: 50px;
	height: 50px;
	top: 10px;
	display: none;
}
.Bchess_expression::after{
     
	content: "黑棋获胜";
	position: absolute;
	width: 150%;
	height: 100%;
	left: -82px;
	top: 0px;
	font-size: 15px;
	text-align: center;
	line-height: 50px;
}

/*******************************/

/***********重开撤回按钮***********/
.regret,.anew,.select{
     
    position: absolute;
    width: 90px;
    height: 30px;
    background: #03A9F4;
    color: #fff;
    outline: none;
    border: 0px;
    user-select: none;
    border-radius: 20px;
    line-height: 30px;
    left: 239px;
}
.regret{
     left: 122px;}
.select{
     display: none;}
.mobile_regret,.mobile_anew,.mobile_select{
     
    width: 40px;
    height: 40px;
    line-height: 40px;
    border-radius: 30px;
    left: 250px;
    font-size: 12px;
	box-shadow: 0px 0px 5px 1px #c7c7c7;
}
.mobile_regret{
     left: 310px;}
.mobile_select{
     display: block;left: 10px;}
/*******************************/

/***********黑白棋子***********/
.Bchess,.Wchess,.mobile_Bchess,.mobile_Bchess{
     
    position: absolute;
    width: 27px;
    height: 27px;
    border-radius: 30px;
    background: radial-gradient(#62697b 10%,#49535d 90%);
    box-shadow: 1px 1px 2px 0 #0000006e;
    font-size: 10px;
    line-height: 27px;
    text-align: center;
    color: #fff
}
.Wchess{
     
    background: radial-gradient( #fdf9f9 20%,#edf0f0 90%);
    box-shadow: 1px 1px 2px 0 #0000006e;
    color: #000
}
.mobile_Bchess,.mobile_Wchess{
     
	width: 19px;
	height: 19px;
	line-height: 19px;
	font-size: 10px;
	color: #fff;
}
.mobile_Wchess{
     color: #000000;}

.Wchess_steps,.Bchess_steps{
     
	position: absolute;
	width: 82px;
	height: 30px;
	border-radius: 20px;
	top: 5px;
	font-size: 10px;
	text-align: center;
	line-height: 30px;
	color: #949494;
}
.Wchess_steps{
     
	right: 0px;
}
/*******************************/

（3）js代码

var hy_bodyWidth = document.body.clientWidth;//获取网页可视区宽度
var hy_bodyHeight = document.body.clientHeight;//获取网页可视区高度
var hy_chessBox = document.getElementById("chessBox");
var hy_canvas = document.getElementById("canvas");
var hy_ctx = hy_canvas.getContext("2d");
var hy_buttom_box = document.getElementById("chess_buttom_box");
var hy_regret = document.getElementsByClassName("regret")[0];
var hy_anew = document.getElementsByClassName("anew")[0];
var hy_select = document.getElementsByClassName("select")[0];//Bchess_steps
var hy_BchessSteps = document.getElementsByClassName("Bchess_steps")[0]
var hy_WchessSteps = document.getElementsByClassName("Wchess_steps")[0]
var hy_over = false; // 游戏结束 不可下棋
var hy_me = true; //可以下棋
var anewOff = true;//撤回按钮 可以点击
var regretOff = true// 按钮 可以点击
var hy_count = 0;
var hy_wins = [];
var hy_myWin = [];
var hy_computerWin = [];
var hy_chessBoard = [];
var hy_chessMap = [];
var hy_mode = [[1,0],[0,1],[1,1],[1,-1]];
var hy_lianziArr = [];
var hy_chessStep = 0;
var hy_WchessStep = 0;
var hy_BchessStep = 0;
var chessWB = [];
window.onresize = function(){
      // 监听当前窗口改变事件
    setTimeout(function(){
      //当前窗口发生改变时 刷新页面
        window.location.reload()
    },hy_bodyWidth / 30)
};

var hy_Mobile_pc = {
     
	hy_num: 0,
    mWidth_pWidth: 0,
    mHeight_pHeight: hy_bodyHeight,
    devicenNme: "",
};

总结

五子棋游戏的核心关键点是：
1、弄清楚有多少种赢法；
2、怎么判断是否已经赢了；
3、计算机下棋算法。这里巧妙地运用数组存储赢法，判断是否赢了，通过权重比较，计算出计算机该下棋的位置。
过程中用到canvas，之前有学习过，虽然很久没用，查了些资料，复习了怎么画线，画圆，学会了怎么如何清除一个圆等。
然后要注意的是，用原生Js怎么为元素添加、删除class。

最后感兴趣的小伙伴也可以下载体验一下，勾起了满满的童年回忆。源码地址：点我下载

你可能感兴趣的:(前端,javascript,html5,javascript,游戏,css,canvas)

  • 游戏引擎架构 PDF电子书带书签目录 完整版 富展尤
    游戏引擎架构PDF电子书带书签目录完整版【下载地址】游戏引擎架构PDF电子书带书签目录完整版游戏引擎架构PDF电子书带书签目录完整版欢迎来到游戏开发的知识宝库！本仓库自豪地提供《游戏引擎架构》PDF电子书的完整版本，特别优化了阅读体验，内置详细书签目录，方便读者快速导航至感兴趣的部分项目地址:https://gitcode.com/open-source-toolkit/0963bb欢迎来到游戏开
  • vite webpack原理和区别
    Vite和Webpack的工作原理有显著的不同，以下是对它们各自原理的简要说明：Vite原理原生ES模块：Vite利用浏览器对原生ES模块（ESM）的支持，实现按需加载和编译。开发服务器启动时，Vite只需解析入口文件，并将导入的模块路径记录下来。按需编译：当浏览器请求某个模块时，Vite会实时编译该模块及其依赖。使用esbuild或Vite自带的编译器快速处理JavaScript和CSS。热模块
  • 25-5 SQL 注入攻击 - insert注入 技术探索 Web安全攻防全解析sql数据库
    环境准备：构建完善的安全渗透测试环境：推荐工具、资源和下载链接_渗透测试靶机下载-CSDN博客一、注入原理描述：insert注入是指通过前端注册的信息被后台通过insert操作插入到数据库中。如果后台没有做相应的处理，就可能导致insert注入漏洞。原因：后台未对用户输入进行充分验证和过滤，导致恶意用户可以利用特定的输入构造恶意代码，从而影响数据库的插入操作，或者获取敏感数据。二、注入方法注入手段
  • Docker多架构镜像构建踩坑记 一直学下去 docker容器adm64arm64多架构
    背景公司为了做信创项目的亮点，需要将现有的一套在X86上运行的应用系统迁移到ARM服务器上运行，整个项目通过后端Java，前端VUEJS开发通过CICD做成Docker镜像在K8S里面运行。但是当前的CICD产品不支持ARM的镜像构建，于是只能手工构建ARM镜像。以下是一些踩坑的记录，希望能帮大家少踩坑构建环境本地电脑DeepinLinux23(Windows的WSL和其他的Linux系统都可以）
  • 前端力扣刷题 | 1：Hot100之 哈希 酒酿泡芙1217 力扣hot100哈希算法leetcode前端
    1.两数之和给定一个整数数组nums和一个整数目标值target，请你在该数组中找出和为目标值target的那两个整数，并返回它们的数组下标。你可以假设每种输入只会对应一个答案，并且你不能使用两次相同的元素。你可以按任意顺序返回答案。示例：输入：nums=[2,7,11,15],target=9输出：[0,1]解释：因为nums[0]+nums[1]==9，返回[0,1]。法一：暴力解法vartw
  • 用java语言，编写一个简单的人物游戏属性面版 星空 java游戏开发语言
    packagejiadianxitong;//定义角色的基本信息类publicclassBasicInformation{//私有成员变量，封装角色的属性privateStringrole;//角色名称privateintage;//角色年龄privateRacerace;//角色种族privateCareercareer;//角色职业privateintgrade;//角色等级privateEd
  • vue使用pdf.js实现移动端在线PDF文件预览 yujin0213 vuejavascriptvue.js开发语言
    背景产品需求涉及到动态的PDF展示，PDF是由后端去生成的，然后下发给前端在线的cdn地址，H5需要实现在线PDF预览的能力方案H5展示合同PDF，有很多实现方式。但是通过尝试后发现在不同操作系统会存在兼容性问题方案表现iframe的形式iOS：只能展示第一页，多页不能展示Android：弹出下载弹窗PC：正常展示embed标签iOS：只能展示第一页Android：弹出下载弹窗PC：显示不出来vu
  • WPF之comboBox可模糊查询 白驹……过隙 WPFwpf
    前言本文采用了prism框架的基础。0、先准备一个类publicclassComboBoxItemModel{publicstringName{get;set;}publicstringValue{get;set;}}一、xaml代码。前端这里需添加两个属性，还有keyUp事件等。1、IsEditable="True"（开启可编辑）2、IsTextSearchEnabled="False"（开启可
  • PC端后台管理系统实现在线预览文件 在下不知好歹 前端javascripthtml
    PC端后台管理系统实现在线预览文件后台管理系统是每个新手前端必然接触的项目，当产品要求在线预览文件的预览的时候，我收集了两种在线预览的方法，希望对一些刚入门的小白有所帮助1.使用iframe标签微软有一个解析地址，Word、Xls、PPT这些文件需要使用微软官方的解析地址，如微软解析地址：https://view.officeapps.live.com/op/view.aspx?src=你的文件地
  • 如何实现 Handy Control DataGrid 全选功能 东百牧码人 状态模式
    如何实现HandyControlDataGrid全选功能在使用HandyControl的DataGrid控件时，经常会有全选的需求。今天我们就结合一段代码，详细介绍如何实现HandyControlDataGrid的全选功能。代码实现前端XAML代码代码解释DataGrid是主要的表格控件，ItemsSource绑定到TrendTagCollection，这是数据源集合。DataGridCheckB
  • How can I fix my Flask server‘s 405 error that includes OpenAi api? 营赢盈英 AIaipythonjavascriptflaskopenaiapi
    题意：解决包含OpenAIAPI的Flask服务器中出现的405错误（MethodNotAllowed，即方法不允许）问题背景：I'mtryingtoaddanAPItomywebpageandhaveneverusedanyFlaskserverbefore,IhaveneverusedJavascripttoosothisisacompletelybrandnewlearningexperie
  • 微前端架构在前端开发中的实践与挑战 桂月二二 前端架构
    随着单页面应用（SPA）和前端框架如React、Vue、Angular的快速发展，现代前端应用的复杂度日益提升。尤其是当应用规模逐渐增大时，单一的代码库往往难以应对不同团队的协作和版本管理问题。为了应对这一挑战，微前端架构（MicroFrontends）应运而生，它为前端开发提供了一种新的思路，让大型前端应用能够像后端的微服务架构一样，通过拆分模块来降低复杂度。在这篇文章中，我们将探讨微前端架构的
  • 【python学习】一篇带你玩转 Python JSON 操作的终极指南：dump、dumps、load、loads 全解析 NLP仙人 pythonpython学习json
    在现代编程中，JSON(JavaScriptObjectNotation)是一种广泛使用的数据交换格式。在Python中，处理JSON数据是一项常见的任务，Python提供了强大的json模块来轻松地进行JSON编码和解码。本文将详细介绍json.dump、json.dumps、json.load和json.loads四个函数的用法，并通过代码示例帮助你掌握这些工具。json.dump和json.
  • Unity引擎开发MMORPG游戏日志系统设计与实现 小宝哥Code MMORPGunity游戏游戏引擎
    在Unity引擎开发MMORPG时，日志系统是非常关键的一部分，它帮助开发者追踪游戏运行状态、调试问题、分析性能、记录玩家行为等。以下是如何设计和开发一个高效的日志系统的建议，尤其是针对MMORPG这种复杂的大型在线游戏。1.日志系统的需求分析在MMORPG中，日志系统不仅仅用于错误跟踪，它还要满足多个需求：错误日志（ErrorLogs）：记录程序异常或游戏崩溃时的错误信息。调试日志（DebugL
  • Python读取JSON文件 UIEdit pythonjson前端Python
    在Python中，我们可以使用内置的json模块来读取和解析JSON文件。JSON（JavaScriptObjectNotation）是一种常用的数据交换格式，它以易于阅读和编写的文本形式存储数据。下面是使用Python读取JSON文件的详细步骤。步骤1:导入所需模块首先，我们需要导入Python的json模块，该模块提供了处理JSON数据的函数和方法。importjson步骤2:打开JSON文件
  • Go分布式爬虫笔记(八)_golang分布式爬虫 2401_87299701 golang分布式爬虫
    +爬虫引擎为基础的推送系统+提供-快速的热点事件-事件预警用户需求快速了解自己感兴趣的最新新闻事件预警机制帮助快速决策功能需求用户填写或选择自己感兴趣的话题、感兴趣的网站还有消息接受频率用户接收最新热点事件的推送用户通过点击获取与该事件关联的事件，并得到相关的事件预测、预警，甚至可能在网站中进行快速的交易用户可以查看历史记录，可视化呈现某一个事件的来龙去脉，并进行复盘产品需求前端页面设计用户交互设
  • web速览 qzhqbb web前端web
    web速览1.前端开发概述：前端开发是构建网站用户界面的过程，主要关注网站的视觉效果和用户体验。又称为客户端技术栈：HTML（超文本标记语言）：用于创建网页的结构和内容。CSS（层叠样式表）：用于样式和布局设计，包括颜色、字体、边距等。JavaScript：用于实现网页的交互性和动态效果。前端框架：React：一个用于构建用户界面的JavaScript库，采用组件化设计。Vue.js：一个渐进式的
  • HTML基本结构 千鸟影沫 html前端
    一、网页三大组成部分结构：html，是超文本标记语言——用来搭建网页的结构样式：css——网页的样式行为：js，是一种语言，称为脚本语言——交互行为用户对网页的操作数据交互二、HTML语法规范1、语法（英文状态下输入）html标签：是由尖括号包围的关键词，例如2、以元素样子对标签进行分类①双标签：如：开始标签，结束标签②单标签：比较少，如，，，等。3、标签关系①嵌套（包含关系）：类似于父子关系如：
  • Spring MVC 中的 DispatcherServlet：工作流程与应用场景解析 码农小灰 SpringMVC面试题SpringBootspringmvcjava
    目录一、初始化阶段二、请求处理阶段三、异常处理四、使用场景说明在SpringMVC框架中，DispatcherServlet扮演着至关重要的角色，它作为前端控制器（FrontController），负责接收客户端的HTTP请求，并根据配置将其分发给相应的处理器进行处理。以下是对其工作流程的详细解析，并结合使用场景进行说明。一、初始化阶段加载配置文件：DispatcherServlet在启动时会读取
  • 探秘Xss：原理、类型与防范全解析 咕德猫宁丶 网络xssjava
    一、Xss究竟是什么？（一）Xss的定义简述Xss全称是跨站脚本攻击（CrossSiteScripting），为了不和层叠样式表（CascadingStyleSheets，CSS）的缩写混淆，故将其缩写为Xss。它是一种常见的网络安全漏洞，指的是攻击者利用网站对用户输入内容校验不严格等漏洞，将恶意脚本（通常是JavaScript，也可以是Java、VBScript、ActiveX、Flash等）注
  • 什么是JavaScript中的Map和Set数据结构？它们与普通对象有什么不同？ 几何心凉 前端入门之旅javascript数据结构开发语言
    聚沙成塔·每天进步一点点本文回顾⭐专栏简介什么是JavaScript中的Map和Set数据结构？它们与普通对象有什么不同？1.Map数据结构1.1定义和基本用法创建Map添加键值对获取值检查键删除键值对获取Map的大小1.2Map的遍历1.3Map与普通对象的区别2.Set数据结构2.1定义和基本用法创建Set添加值检查值删除值2.2Set的遍历2.3Set与数组的区别3.总结3.1Map与对象的
  • Python 执行 javascript PyExecJS 模块 weixin_30376083 pythonjavascriptjsonViewUI
    PyExecJS安装pipinstallPyExecJSPyExecJS的基本使用:>>>importexecjs>>>execjs.eval("'redyellowblue'.split('')")['red','yellow','blue']>>>ctx=execjs.compile("""...functionadd(x,y){...returnx+y;...}...""")>>>ctx.c
  • 在Python中运行JavaScript代码（使用execjs模块） 飞起来fly呀 Pythonpython开发语言
    使用execjs模块可以在Python中运行JavaScript代码。以下是使用execjs模块的基本步骤：1.安装execjs模块:可以使用pip命令进行安装:pipinstall execjs2.导入execjs模块:import execjs3.使用compile方法可以将JavaScript代码编译为可执行的函数compiled_func = execjs.compile(code)#执行
  • 游戏底层逻辑，运动&&寻路（四） PureDesigner AIcocos2dx游戏算法
    接着上次的来，我们在群体算法之前把基本的个体运动解决掉。9、WallAvoidance避开墙壁此处的墙被抽象为一条线段，不论你的游戏使用的是一条线段作为墙面的碰撞检测，或者用一个几何形状作为墙面，几何形状我们可以看作多条线段的集合，都可以用此方法。墙类的实现首先是线段类，作为基类，拥有几种几何计算的方法，便于计算平面线段的交点，不多说。structSeg{Seg(Pointp1,Pointp2):
  • Python快速使用js接口 程序媛小本 pythonjavascriptudp
    在跨语言编程和Web开发中，Python和JavaScript是两种常用的编程语言。有时候，我们可能需要在Python环境中执行JavaScript代码。这就是execjs库发挥作用的地方。一、安装ExecJS在命令行中输入以下命令：pipinstallPyExecJS二、ExecJS的基本使用ExecJS支持多种JavaScript运行时环境，包括Node.js、SpiderMonkey、Web
  • 使用 AI 助手提升前端代码质量：自动代码审查实战 技术出海录 远洋录·技术篇人工智能前端
    最近在带团队的时候，发现代码审查（CodeReview）总是成为项目进度的一个瓶颈。一方面，高级工程师的时间很宝贵，不可能审查每一行代码；另一方面，初级工程师又急需及时的反馈来提升。于是我就在想：能不能用AI来解决这个问题？经过一番研究和实践，我搭建了一个AI代码审查助手，效果出乎意料的好！今天就来分享下这个小工具是怎么做的。为什么需要AI代码审查？说实话，最开始团队里有不少质疑的声音：“AI能审
  • 【Unity 天空和昼夜循环系统插件】Procedural Sky Shader & Day Night Cycle - Jupiter 旨在为游戏项目提供动态、真实的天际效果和昼夜变化 Unity游戏资源学习屋 Unity插件
    ProceduralSkyShader&DayNightCycle-Jupiter是一款专为Unity开发的程序化天空和昼夜循环系统插件，旨在为游戏项目提供动态、真实的天际效果和昼夜变化。该插件使用程序生成的方式实时模拟天空的变化，提供了多种自定义选项，帮助开发者创建美丽且自然的环境光照和大气效果，适用于各种游戏类型，包括开放世界、冒险、角色扮演等。核心功能程序化天空生成插件采用程序生成方法，能够
  • 嵌入式音视频开发——视频篇（三） 程序猿玖月柒 音视频音视频
    本笔记来源于学习韦东山团队课程，自己选择性摘抄加深记忆和学习的效果。帧率与时间戳帧率（framerate）是指视频播放中每秒显示的图像帧数。测量单位为“每秒显示帧数”（framepersecond，FPS）或“赫兹”，一般来说FPS用于描述影片、电子绘图或游戏每秒播放多少帧。人类视觉的时间敏感性和分辨率根据视觉刺激的类型和特征而变化，并且在个体之间是不同的。由于人类眼睛的特殊生理结构，如果所看画面
  • 使用python对pdf批量添加水印，并且水印字体，大小，位置，旋转角度都是可以调节 不懂python不懂R pythonpythonpdf
    1.使用python对pdf批量添加水印，并且水印字体，大小，位置，旋转角度都是可以调节的importosfromPyPDF2importPdfReader,PdfWriterfromreportlab.pdfgenimportcanvasfromreportlab.lib.pagesizesimportletterfromreportlab.lib.colorsimportColordefcre
  • 用python监控网页某个位置的值的变化 老光私享 python开发语言爬虫
    可以使用Python的第三方库来监控网页上某个位置的值的变化。一种方法是使用BeautifulSoup库来爬取网页并解析HTML/XML。然后，您可以使用正则表达式或其他方法来提取所需信息。另一种方法是使用Selenium库来模拟浏览器行为，并使用JavaScript来获取网页上的信息。下面是一个使用BeautifulSoup的例子：importrequestsfrombs4importBeaut
  • 微信开发者验证接口开发 362217990 微信 开发者 token 验证
    微信开发者接口验证。 Token，自己随便定义，与微信填写一致就可以了。 根据微信接入指南描述 http://mp.weixin.qq.com/wiki/17/2d4265491f12608cd170a95559800f2d.html 第一步：填写服务器配置 第二步：验证服务器地址的有效性 第三步：依据接口文档实现业务逻辑 这里主要讲第二步验证服务器有效性。 建一个
  • 一个小编程题-类似约瑟夫环问题 BrokenDreams 编程
            今天群友出了一题：         一个数列,把第一个元素删除,然后把第二个元素放到数列的最后,依次操作下去,直到把数列中所有的数都删除,要求依次打印出这个过程中删除的数。      &
  • linux复习笔记之bash shell (5) 关于减号-的作用 eksliang linux关于减号“-”的含义linux关于减号“-”的用途linux关于“-”的含义linux关于减号的含义
        转载请出自出处： http://eksliang.iteye.com/blog/2105677        管道命令在bash的连续处理程序中是相当重要的，尤其在使用到前一个命令的studout（标准输出）作为这次的stdin（标准输入）时，就显得太重要了，某些命令需要用到文件名，例如上篇文档的的切割命令（split）、还有
  • Unix(3) 18289753290 unix ksh
    1)若该变量需要在其他子进程执行，则可用"$变量名称"或${变量}累加内容 什么是子进程？在我目前这个shell情况下，去打开一个新的shell，新的那个shell就是子进程。一般状态下，父进程的自定义变量是无法在子进程内使用的，但通过export将变量变成环境变量后就能够在子进程里面应用了。 2)条件判断： &&代表and  ||代表or&nbs
  • 关于ListView中性能优化中图片加载问题 酷的飞上天空 ListView
    ListView的性能优化网上很多信息，但是涉及到异步加载图片问题就会出现问题。 具体参看上篇文章http://314858770.iteye.com/admin/blogs/1217594   如果每次都重新inflate一个新的View出来肯定会造成性能损失严重，可能会出现listview滚动是很卡的情况，还会出现内存溢出。 现在想出一个方法就是每次都添加一个标识，然后设置图
  • 德国总理默多克：给国人的一堂“震撼教育”课 永夜-极光 教育
    http://bbs.voc.com.cn/topic-2443617-1-1.html德国总理默多克：给国人的一堂“震撼教育”课　 安吉拉—默克尔，一位经历过社会主义的东德人，她利用自己的博客，发表一番来华前的谈话，该说的话，都在上面说了，全世界想看想传播——去看看默克尔总理的博客吧！ 　　德国总理默克尔以她的低调、朴素、谦和、平易近人等品格给国人留下了深刻印象。她以实际行动为中国人上了一堂
  • 关于Java继承的一个小问题。。。 随便小屋 java
    今天看Java 编程思想的时候遇见一个问题，运行的结果和自己想想的完全不一样。先把代码贴出来！ //CanFight接口 interface Canfight { void fight(); } //ActionCharacter类 class ActionCharacter { public void fight() { System.out.pr
  • 23种基本的设计模式 aijuans 设计模式
    Abstract Factory：提供一个创建一系列相关或相互依赖对象的接口，而无需指定它们具体的类。 　　Adapter：将一个类的接口转换成客户希望的另外一个接口。A d a p t e r模式使得原本由于接口不兼容而不能一起工作的那些类可以一起工作。 　　Bridge：将抽象部分与它的实现部分分离，使它们都可以独立地变化。 　　Builder：将一个复杂对象的构建与它的表示分离，使得同
  • 《周鸿祎自述：我的互联网方法论》读书笔记 aoyouzi 读书笔记
    从用户的角度来看,能解决问题的产品才是好产品,能方便/快速地解决问题的产品,就是一流产品.   商业模式不是赚钱模式 一款产品免费获得海量用户后,它的边际成本趋于0,然后再通过广告或者增值服务的方式赚钱,实际上就是创造了新的价值链.   商业模式的基础是用户,木有用户,任何商业模式都是浮云.商业模式的核心是产品,本质是通过产品为用户创造价值. 商业模式还包括寻找需求
  • JavaScript动态改变样式访问技术 百合不是茶 JavaScriptstyle属性ClassName属性
      一:style属性 格式:  HTML元素.style.样式属性="值";   创建菜单:在html标签中创建 或者 在head标签中用数组创建   <html> <head> <title>style改变样式</title> </head> &l
  • jQuery的deferred对象详解 bijian1013 jquerydeferred对象
            jQuery的开发速度很快，几乎每半年一个大版本，每两个月一个小版本。         每个版本都会引入一些新功能，从jQuery 1.5.0版本开始引入的一个新功能----deferred对象。    &nb
  • 淘宝开放平台TOP Bill_chen C++c物流C#
    淘宝网开放平台首页：http://open.taobao.com/ 淘宝开放平台是淘宝TOP团队的产品，TOP即TaoBao Open Platform， 是淘宝合作伙伴开发、发布、交易其服务的平台。 支撑TOP的三条主线为：    1.开放数据和业务流程     * 以API数据形式开放商品、交易、物流等业务；  &
  • 【大型网站架构一】大型网站架构概述 bit1129 网站架构
    大型互联网特点 面对海量用户、海量数据 大型互联网架构的关键指标 高并发 高性能 高可用 高可扩展性 线性伸缩性 安全性 大型互联网技术要点   前端优化 CDN缓存 反向代理 KV缓存 消息系统 分布式存储 NoSQL数据库 搜索 监控 安全 想到的问题： 1.对于订单系统这种事务型系统，如
  • eclipse插件hibernate tools安装 白糖_ Hibernate
    eclipse helios(3.6)版 1.启动eclipse 2.选择 Help > Install New Software...> 3.添加如下地址： http://download.jboss.org/jbosstools/updates/stable/helios/ 4.选择性安装：hibernate tools在All Jboss tool
  • Jquery easyui Form表单提交注意事项 bozch jquery easyui
    jquery easyui对表单的提交进行了封装，提交的方式采用的是ajax的方式，在开发的时候应该注意的事项如下：         1、在定义form标签的时候，要将method属性设置成post或者get，特别是进行大字段的文本信息提交的时候，要将method设置成post方式提交，否则页面会抛出跨域访问等异常。所以这个要
  • Trie tree(字典树)的Java实现及其应用-统计以某字符串为前缀的单词的数量 bylijinnan java实现
    import java.util.LinkedList; public class CaseInsensitiveTrie { /** 字典树的Java实现。实现了插入、查询以及深度优先遍历。 Trie tree's java implementation.(Insert,Search,DFS) Problem Description Igna
  • html css 鼠标形状样式汇总 chenbowen00 htmlcss
    css鼠标手型cursor中hand与pointer  Example：CSS鼠标手型效果 <a href="#" style="cursor:hand">CSS鼠标手型效果</a><br/>  Example：CSS鼠标手型效果 <a href="#" style=&qu
  • [IT与投资]IT投资的几个原则 comsci it
          无论是想在电商,软件,硬件还是互联网领域投资,都需要大量资金,虽然各个国家政府在媒体上都给予大家承诺,既要让市场的流动性宽松,又要保持经济的高速增长....但是,事实上,整个市场和社会对于真正的资金投入是非常渴望的,也就是说,表面上看起来,市场很活跃,但是投入的资金并不是很充足的......    
  • oracle with语句详解 daizj oraclewithwith as
    oracle with语句详解 转 在oracle中，select 查询语句，可以使用with,就是一个子查询，oracle 会把子查询的结果放到临时表中，可以反复使用 例子:注意，这是sql语句，不是pl/sql语句， 可以直接放到jdbc执行的 ----------------------------------------------------------------
  • hbase的简单操作 deng520159 数据库hbase
    近期公司用hbase来存储日志,然后再来分析 ,把hbase开发经常要用的命令找了出来. 用ssh登陆安装hbase那台linux后 用hbase shell进行hbase命令控制台! 表的管理 1）查看有哪些表 hbase(main)> list 2）创建表   # 语法：create <table>, {NAME => <family&g
  • C语言scanf继续学习、算术运算符学习和逻辑运算符 dcj3sjt126com c
    /* 2013年3月11日20:37:32 地点：北京潘家园 功能：完成用户格式化输入多个值 目的：学习scanf函数的使用 */ # include <stdio.h> int main(void) { int i, j, k; printf("please input three number:\n"); //提示用
  • 2015越来越好 dcj3sjt126com 歌曲
    越来越好 房子大了电话小了 感觉越来越好 假期多了收入高了 工作越来越好 商品精了价格活了 心情越来越好 天更蓝了水更清了 环境越来越好 活得有奔头人会步步高 想做到你要努力去做到 幸福的笑容天天挂眉梢 越来越好 婆媳和了家庭暖了 生活越来越好 孩子高了懂事多了 学习越来越好 朋友多了心相通了 大家越来越好 道路宽了心气顺了 日子越来越好 活的有精神人就不显
  • java.sql.SQLException: Value '0000-00-00' can not be represented as java.sql.Tim feiteyizu mysql
    数据表中有记录的time字段（属性为timestamp）其值为：“0000-00-00 00:00:00” 程序使用select 语句从中取数据时出现以下异常： java.sql.SQLException:Value '0000-00-00' can not be represented as java.sql.Date   java.sql.SQLException: Valu
  • Ehcache（07）——Ehcache对并发的支持 234390216 并发ehcache锁ReadLockWriteLock
    Ehcache对并发的支持          在高并发的情况下，使用Ehcache缓存时，由于并发的读与写，我们读的数据有可能是错误的，我们写的数据也有可能意外的被覆盖。所幸的是Ehcache为我们提供了针对于缓存元素Key的Read（读）、Write（写）锁。当一个线程获取了某一Key的Read锁之后，其它线程获取针对于同
  • mysql中blob,text字段的合成索引 jackyrong mysql
      在mysql中，原来有一个叫合成索引的，可以提高blob,text字段的效率性能， 但只能用在精确查询，核心是增加一个列，然后可以用md5进行散列，用散列值查找 则速度快 比如： create table abc(id varchar(10),context blog,hash_value varchar(40)); insert into abc(1,rep
  • 逻辑运算与移位运算 latty 位运算逻辑运算
    源码：正数的补码与原码相同例+7 源码：00000111 补码 ：00000111 （用8位二进制表示一个数） 负数的补码： 符号位为1，其余位为该数绝对值的原码按位取反；然后整个数加1。   -7 源码： 10000111 ，其绝对值为00000111  取反加一：11111001 为-7补码 已知一个数的补码，求原码的操作分两种情况：
  • 利用XSD 验证XML文件 newerdragon javaxmlxsd
    XSD文件 （XML Schema 语言也称作 XML Schema 定义（XML Schema Definition，XSD）。 具体使用方法和定义请参看： http://www.w3school.com.cn/schema/index.asp java自jdk1.5以上新增了SchemaFactory类 可以实现对XSD验证的支持，使用起来也很方便。 以下代码可用在J
  • 搭建 CentOS 6 服务器(12) - Samba rensanning centos
    （1）安装 # yum -y install samba Installed: samba.i686 0:3.6.9-169.el6_5 # pdbedit -a rensn new password:123456 retype new password:123456 …… （2）Home文件夹 # mkdir /etc
  • Learn Nodejs 01 toknowme nodejs
    （1）下载nodejs https://nodejs.org/download/ 选择相应的版本进行下载     （2）安装nodejs 安装的方式比较多，请baidu下 我这边下载的是“node-v0.12.7-linux-x64.tar.gz”这个版本 （1）上传服务器 （2）解压 tar -zxvf  node-v0.12.
  • jquery控制自动刷新的代码举例 xp9802 jquery
    1、html内容部分  复制代码代码示例: <div id='log_reload'> <select name="id_s" size="1"> <option value='2'>-2s-</option> <option value='3'>-3s-</option
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他