游戏截图：
游戏架构：
此游戏架构大概分为三层：
Game.html：
说明：包含了界面的展示，以及一些事件的入口。
完整代码：
html5 snake game
你的浏览器不支持这个游戏！
1000
800
500
300
200
////游戏画板
var canvasGamePnl =document.getElementById("cvsPnl");
var context =canvasGamePnl.getContext("2d");
////分数
var canvasScore =document.getElementById("cvsScore");
var contxtScore =canvasScore.getContext("2d");
////速度
var canvasSpeed =document.getElementById("cvsSpeed");
var contxtSpeed =canvasSpeed.getContext("2d");
////姓名
var canvasName =document.getElementById("cvsName");
var contxtName =canvasName.getContext("2d");
////开始
$("btnStartGame").οnclick=function(){
GameStart(context,contxtScore);
}
////暂停/继续
$("btnPauseGame").onclick =function(){
if($("btnPauseGame").value == "继续"){
RunGame(context,contxtScore);
$("btnPauseGame").value = "暂停";
gameStatus = 1;
}
else{
PauseGame();
$("btnPauseGame").value = "继续";
gameStatus = 2;
}
}
////加载
window.οnlοad=function(){
$("cvsPnl").width =screenWidth;
$("cvsPnl").height=screenHeight;
$("selSpeed").selectedIndex = 0;
DrawFont(contxtSpeed,"选择游戏速度",120);
DrawFont(contxtName,"姓名",50);
$("txtName").value =GetPlayerName();
}
////键盘事件handler
document.onkeydown = function (){
var key = document.all ? event.keyCode : arguments[0].keyCode;
////left
if(key == 37){
if(direction != "right"){
direction = "left";
}
}
////up
else if(key == 38){
if(direction != "down"){
direction ="up";
}
}
////right
else if(key == 39){
if(direction != "left"){
direction = "right";
}
}
////down
else if(key == 40){
if(direction != "up"){
direction = "down";
}
}
}
////设置速度
$("selSpeed").οnchange=function(){
if(gameStatus != 3){
sleepTime =parseInt(GetSelectObj("selSpeed").value);
}
}
/////记住我
$("btnRememberMe").onclick =function(){
ScorePlayerName($("txtName").value);
alert("已保存");
}
////绘出文字
function DrawFont(context,txt,size){
context.font='30px impact';
context.fillStyle=fontColor;
context.textAlign='left';
// context.shadowColor="#00ff00";
// context.shadowOffsetX = 15;
// context.shadowOffsetY=-10;
context.fillText(txt,0,50,size);
}
Game.js:
说明：包含了游戏的主干逻辑，业务逻辑层的实现。
完整代码：
document.write("");
document.write("");
document.write("");
document.write("");
////////////////////////
////游戏入口////////////
////////////////////////
function GameStart(context,contxtScore){
InitGame(context,contxtScore);
RunGame(context,contxtScore);
}
////////////////////////
////初始化游戏////////////
////////////////////////
function InitGame(context,contxtScore){
////贪吃蛇
for(var i = initSize ;i > 0;i --){
snakeArr[i - 1] = new Object();
snakeArr[i - 1].x = (initSize - i + 1) *unitSize;
snakeArr[i - 1].y = 0;
}
////方向
direction = "right";
////食物
food = new Object();
////绘制屏幕方格
DrawScreen(context);
////随即食物
RandomFood(context);
////分数
DrawScore(contxtScore,score);
}
////////////////////////
////运行游戏////////////
////////////////////////
function RunGame(context,contxtScore){
if(timer){
clearInterval(timer);
}
timer = setInterval(function(){
if(IsGameOver()){
alert("gameover!");
clearInterval(timer);
return;
}
EatFoodHandler(context,contxtScore);
Refresh(context);
SetPosition();
DrawSnake(context);
},sleepTime);
}
////////////////////////
////刷新////////////////
////////////////////////
function Refresh(context){
FillRect(context,snakeArr[snakeArr.length -1].x,snakeArr[snakeArr.length - 1].y,unitSize,unitSize,screenColor);
DrawRect(context,snakeArr[snakeArr.length -1].x,snakeArr[snakeArr.length - 1].y,unitSize,unitSize,lineColor);
}
////////////////////////
////画蛇身//////////////
////////////////////////
function DrawSnake(context){
for(var i = 0;i < snakeArr.length;i ++){
FillRect(context,snakeArr[i].x,snakeArr[i].y,unitSize,unitSize,snakeColor);
DrawRect(context,snakeArr[i].x,snakeArr[i].y,unitSize,unitSize,lineColor);
}
}
////////////////////////
////画屏幕//////////////
////////////////////////
function DrawScreen(context){
for(var i = screenLeft;i < screenLeft +screenWidth / unitSize;i ++){
for(var j = screenTop;j < screenTop +screenHeight / unitSize;j ++){
FillRect(context,i * unitSize,j *unitSize,unitSize,unitSize,screenColor);
DrawRect(context,i * unitSize,j *unitSize,unitSize,unitSize,lineColor);
}
}
}
////////////////////////
////设置坐标////////////
////////////////////////
function SetPosition(){
for(var i = snakeArr.length - 2;i >= 0;i --){
snakeArr[i + 1].x = snakeArr[i].x;
snakeArr[i + 1].y = snakeArr[i].y;
}
if(direction == "left"){
snakeArr[0].x -= unitSize;
}
else if(direction == "right"){
snakeArr[0].x += unitSize;
}
else if(direction == "up"){
snakeArr[0].y -= unitSize;
}
else if(direction == "down"){
snakeArr[0].y += unitSize;
}
}
////////////////////////
////判断是否结束游戏///
////////////////////////
function IsGameOver(){
if(snakeArr[0].x < 0 ||snakeArr[0].x> screenWidth){
return true;
}
if(snakeArr[0].y < 0 ||snakeArr[0].y> screenHeight){
return true;
}
for(var i = 1;i < snakeArr.length;i ++){
if(snakeArr[0].x == snakeArr[i].x&& snakeArr[0].y == snakeArr[i].y){
gameStatus= 3;
return true;
}
}
return false;
}
////////////////////////
////随即食物////////////
////////////////////////
function RandomFood(context){
food.x = GetRandom((screenWidth / unitSize)- 1) * unitSize;
food.y = GetRandom((screenHeight /unitSize) - 1) * unitSize;
for(var i = 0;i < snakeArr.length;i ++){
if(food.x == snakeArr[i].x &&food.y == snakeArr[i].y){
RandomFood(context);
}
}
FillRect(context,food.x ,food.y,unitSize,unitSize,foodColor);////utility.js
DrawRect(context,food.x ,food.y,unitSize,unitSize,lineColor);////utility.js
}
////////////////////////
///食物处理/////////////
////////////////////////
functionEatFoodHandler(context,contxtScore){
if(direction == "left"){
if((snakeArr[0].x - unitSize == food.x)&& snakeArr[0].y == food.y){
IncreaseLen(contxtScore);
ClearFood(context);
RandomFood(context);
}
}
else if(direction == "right"){
if(snakeArr[0].x + unitSize == food.x&& snakeArr[0].y == food.y){
IncreaseLen(contxtScore);
ClearFood(context);
RandomFood(context);
}
}
else if(direction == "up"){
if(snakeArr[0].x == food.x &&(snakeArr[0].y - unitSize == food.y)){
IncreaseLen(contxtScore);
ClearFood(context);
RandomFood(context);
}
}
else if(direction == "down"){
if(snakeArr[0].x == food.x &&snakeArr[0].y + unitSize == food.y){
IncreaseLen(contxtScore);
ClearFood(context);
RandomFood(context);
}
}
}
////////////////////////
////清除食物////////////
////////////////////////
function ClearFood(context){
FillRect(context,food.x,food.y,unitSize,unitSize,screenColor);
DrawRect(context,food.x,food.y,unitSize,unitSize,lineColor);
}
////////////////////////
////增加长度////////////
////////////////////////
function IncreaseLen(contxtScore){
var newObj = new Object();
newObj.x = food.x;
newObj.y = food.y;
snakeArr.unshift(newObj);
////分数增加
IncreaseScore(contxtScore);////player.js
}
////暂停
function PauseGame(){
clearInterval(timer);
}
Utility.js：
说明：提供了一些工具方法，工具层。
完整代码：
////返回客户端对象
function $(clientId){
return document.getElementById(clientId);
}
////获得SELECT选中项
function GetSelectObj(clientId){
var obj = $(clientId);
var index = obj.selectedIndex; // 选中索引
return obj.options[index];
}
////调试使用
function DebugVar(param){
$("debug").innerHTML=param;
}
function DebugTxt(text){
$("debug").innerHTML = text;
}
////画方块
functionDrawRect(context,left,right,width,height,color){
//设置填充样式
context.strokeStyle= color;
context.strokeRect(left,right,width, height);
}
////填充方块
functionFillRect(context,left,right,width,height,color){
//设置填充样式
context.fillStyle= color;
context.fillRect(left,right,width,height);
}
////绘画文字
function DrawScore(context,txt){
context.moveTo(0,0);
context.clearRect(0,0,500,500);
context.font='60px impact';
context.fillStyle=fontColor;
context.textAlign='center';
// context.shadowColor="#00ff00";
// context.shadowOffsetX = 15;
// context.shadowOffsetY=-10;
txt = "分数:" + txt;
context.fillText(txt,100,100,fontSize);
}
////绘制渐变
function ScreenGradient(context){
var grd =context.createLinearGradient(0,0,screenWidth,screenHeight);
grd.addColorStop(0,"#FFCC00");
grd.addColorStop(1,"#99FFFF");
context.fillStyle = grd;
context.fillRect(0,0,screenWidth,screenHeight);
}
////生产随机数
function GetRandom(n){returnMath.floor(Math.random()*n+1)}
////存储键值对
function addKV(k,v){
localStorage.setItem(k,v);
}
////取得键值对的值
function getV(k){
return localStorage.getItem(k);
}
////获得本地存储的所有值并转化为字符串
function getAllValueToStr(){
var content = "";
for(var i=0;i
你可能感兴趣的:(HTML5,Javascript)
【前端】--- ES6上篇（带你深入了解ES6语法）
心.c
javascript es6 开发语言 ecmascript html css
前言：ECMAScript是JavaScript的标准化版本，由ECMA国际组织制定。ECMAScript定义了JavaScript的语法、类型、语句、关键字、保留字等。ES6是ECMAScript的第六个版本，于2015年发布，引入了许多重要的新特性，使JavaScript更加现代化。目录变量声明：let声明:var声明:const声明:解构（数组，对象，字符串）：数组解构：对象解构：字符串解构
访问DOM元素（节点）
froginwe11
开发语言
DOM（文档对象模型）是Web开发中用于处理HTML和XML文档的标准接口，它允许开发者通过脚本语言（如JavaScript）动态地访问和修改文档的结构、内容和样式。在DOM中，文档的每个部分都被视为一个节点，包括元素、文本、属性等。访问DOM元素（节点）DOM提供了一系列方法来访问和操作元素（节点）：getElementById()：通过元素的ID获取元素节点。例如，document.getEl
Thymeleaf基础知识语法
沐暖沐
thymeleaf 开发语言
1、简介Thymeleaf是⾯向Web和独⽴环境的现代服务器端Java模板引擎，能够处理HTML、XML、JavaScript、CSS、TEXT、RAW这六种模板。这六种模版模式包含两种标记模板模式（HTML和XML），三种⽂本模板模式（TEXT，JAVASCRIPT和CSS）和⼀个⽆操作模板模式（RAW）。①简单表达式变量表达式：${…}选择变量表达式：*{…}消息表达：#{…}链接URL表达式
前端工程化都有哪些及优化方案
光影少年
前端 前端框架 基带工程
一、前端工程化的主要组成部分1.模块化模块化是将复杂的程序分解为若干小的独立模块，每个模块负责一个功能。常用的模块化方案包括：ES6模块（import/export）CommonJS（require/module.exports，Node.js中常用）AMD（define/require，如RequireJS）优化方案：尽量使用ES6模块，因为它是JavaScript的标准，支持更好的静态分析和T
javascript中toFixed()四舍五入计算bug，及解决方法，四舍六入，五看奇偶并不精准，重新toFixed方法才是万全之策呀
叫我小月儿
字符串 js bug javascript
问题描述：最近做一个项目涉及金额计算保留两位小数，以前一直以为toFixed方法就是四舍五入的，上线后用户用户反馈计算出来的金额少了一分钱，跟其票面金额不一致，深入研究后发现使用toFixed保留两位小数是大坑呀。请看下面的例子：3.135.toFixed(2)**本以为是3.14，然而却是3.13！！！**网上有人整理出toFixed方法“四舍六入，五看奇偶”的原则：当舍去位的数值=6时，在舍去
web自动化——前端知识
大哥喝阔落
前端 自动化 运维
是HTML中的一个元素，用于在当前网页中嵌入另一个网页或文档。它就像一个“窗口”，可以在页面中显示其他内容。主要特点：嵌入外部内容：可以在网页中嵌入其他网页、视频、地图等。独立上下文：嵌入的内容与主页面相互独立，拥有自己的JavaScript和CSS环境。可定制：可以通过属性调整大小、边框等。常用属性：src：指定要嵌入内容的URL。width和height：设置iframe的宽度和高度。fram
Node.js 中的中间件：概念与应用
JJCTO袁龙
Node.js node.js 中间件
Node.js中的中间件：概念与应用在当今的网络开发中，Node.js作为一种高效、可扩展的JavaScript运行环境，正在快速占领开发者的心智。而在Node.js的生态中，中间件（Middleware）是一个不可或缺的概念，它为构建灵活而高效的应用程序提供了强大的支持。在这篇文章中，我们将详细探讨Node.js中的中间件的概念、工作原理以及实际应用，帮助你更好地理解和使用这一强大工具。什么是中
【Java Web】JSON 以及 JSON 转换
一二¬
# Java Web java json
JSON（JavaScriptObjectNotation）一种灵活、高效、轻量级的数据交换格式，广泛应用于各种数据交换和存储场景。基本特点1、简单易用：JSON格式非常简单，易于理解和使用。2、轻量级：相比XML等其他数据格式，JSON占用的空间更小，传输效率更高。3、跨平台：JSON是一种纯文本格式，可以轻松地在不同的系统和编程语言之间交换数据。4、可读性强：JSON格式的数据结构清晰，易于阅
Node.js 技术学习指南：从入门到实战应用
小码快撩
node.js
引言Node.js®是一个开源的、跨平台的JavaScript运行环境，它允许开发人员使用JavaScript编写服务器端代码。基于GoogleChrome浏览器强大的V8JavaScript引擎构建，Node.js引入了异步I/O模型和事件驱动编程机制，使得JavaScript能够在服务器环境中高效处理高并发网络请求。一、异步I/O和事件驱动Node.js的异步I/O和事件驱动机制是其高性能的核
vite build报错 Unexpected token (Note that you need plugins to import files that are not JavaScript)
实践是最好的老师
vue javascript 前端 vue.js
原因是我在console.log语句想打印出环境变量console.log(‘import.meta.env.MODE’,import.meta.env.MODE)删除上面console.log语句就能正常打包了,并下面语句能正常打包和运行constconfig:any={dev:{baseUrl:‘http://baiduTest.com’//测试接口域名},master:{baseUrl:‘h
利用 Three.js 实现 3D 粒子正方体效果
软件工程师文艺
前端 javascript 3d 开发语言
在这篇文章中，我将向大家展示如何使用Three.js创建一个带有粒子的3D正方体效果。通过这段代码，我们将能够在浏览器中渲染一个3D正方体形状，并且该正方体内部填充了大量粒子（可视化效果）。你可以通过鼠标控制视角，查看旋转的正方体。实现效果视频如下：这不是特效，代码实现的宇宙魔方的粒子世界一、项目概述我们使用了Three.js，一个强大的JavaScript3D图形库，来创建和渲染这个3D场景。这
深入理解 HTML DOM：文档对象模型详解
浪浪山小白兔
html 前端
在前端开发中，HTMLDOM（文档对象模型，DocumentObjectModel）是一个非常重要的概念。它是浏览器将HTML文档解析为一个树形结构的方式，开发者可以通过JavaScript动态地访问和操作文档的内容、结构和样式。本文将详细介绍HTMLDOM的核心概念、功能以及实际应用。1.什么是HTMLDOM？HTMLDOM是浏览器将HTML文档解析为一个树形结构的编程接口。它将文档中的每个部分
js 变量提升 函数提升 作用域
huch_shyh
前端 变量提升 函数提升 作用域
再说这个知识点前，我们先了解下javascript语言的本质。简单来说js是一个脚本语言，是介于标记语言（例html中使用的标签等是一种被动的，被用来浏览\显示的，无行动能力）与编程语言（具有逻辑性和行为能力，这是主动的）之间，特点是不需要编译，可以直接书写，但依赖解释器来负责解释执行。js代码解析原则js引擎首先在读取js代码时默认执行2个步骤：1.解释(通篇扫描所有js代码，然后把所有声明(变
2024年度前端技术总结：React、JavaScript、Material UI与Tailwind的实战心得
Peter-Lu
前端 javascript react.js
目录一、React：从基础到进阶的深度探索二、JavaScript：掌握新特性，提升编码能力三、MaterialUI与Tailwind：设计与开发的完美结合四、技术项目实战：从理论到应用的转变五、总结与展望随着2024年的结束，我回顾这一年在前端技术领域的学习历程，收获颇丰。从React的深度掌握，到JavaScript新特性的运用，再到MaterialUI和Tailwind的实际应用，我不仅学到
【JavaScript】forEach 遍历数组详解
Peter-Lu
# JavaScript javascript 开发语言 ecmascript 前端
文章目录一、forEach方法概述1.forEach方法简介2.语法结构3.forEach方法的特性二、forEach方法的基本用法1.遍历数组元素2.使用索引3.访问原数组三、forEach方法的实际应用1.修改DOM元素2.累加数组元素3.异步操作四、forEach方法的优缺点1.优点2.缺点五、forEach与其他遍历方法的对比1.for循环2.map方法3.filter方法六、注意事项1.
【JavaScript】作用域、变量提升、函数提升
Jerry_ww
JavaScript javascript 前端
作用域（Scope）的概念和分类概念：作用域是一个变量或函数的作用范围。作用域在函数定义时，就已经确定了。目的：为了提高程序的可靠性，同时减少命名冲突。在JS中，一共有两种作用域：（ES5中）全局作用域：作用于整个script标签内部，或者作用于一个独立的JS文件。函数作用域（局部作用域）：作用于函数内的代码环境。全局作用域和window对象直接编写在script标签中的JS代码，都在全局作用域。
JavaScript系列（46）-- WebGL图形编程详解
ᅟᅠ 一进制
JavaScript javascript webgl 开发语言
JavaScriptWebGL图形编程详解今天，让我们深入探讨JavaScript的WebGL图形编程。WebGL是一种基于OpenGLES的JavaScriptAPI，它允许我们在浏览器中渲染高性能的2D和3D图形。WebGL基础概念小知识：WebGL直接与GPU通信，使用GLSL着色器语言编写顶点和片段着色器。它提供了底层的图形API，让我们能够充分利用硬件加速进行图形渲染。基本实现//1.W
html,css,js的粒子效果
python算法(魔法师版)
html css javascript
这段代码实现了一个基于HTML5Canvas的高级粒子效果，用户可以通过鼠标与粒子进行交互。下面是对代码的详细解析：HTML部分使用声明文档类型。标签内包含了整个网页的内容。部分定义了网页的标题（"高级粒子效果"）和一些基本样式，如设置页面无边距、隐藏滚动条以及黑色背景。包含一个元素用于绘图。CSS部分设置body的边距为0，并隐藏溢出内容，同时设置背景颜色为黑色。canvas块级显示，确保其占据
JavaScript 网页设计案例：打造一个简单交互网页
四六的六
javascript 开发语言 个人开发 前端 学习
在网页开发的广阔天地里，JavaScript堪称赋予网页灵魂的神奇语言，它让原本静态的网页变得灵动起来，实现各种有趣的交互功能。今天，咱们就通过一个超简单又好玩的案例，来揭开JavaScript让网页“活”起来的神秘面纱。案例目标我们的目标是打造一个超有互动感的网页，当用户在输入框里输入自己的名字，再点击按钮，网页就会立马显示出专属的欢迎语，想想就觉得很有趣，有没有！就像是网页认识了你，在热情地和
JavaScript 数组拓展：方法与实例全解析
谢道韫689
javascript 开发语言 ecmascript
一、引言在JavaScript编程的广袤天地里，数组犹如万能的基石，稳稳承载着各式各样的数据处理与复杂逻辑构建的重任。随着JavaScript语言与时俱进、迭代更新，其数组拓展方法更是如繁花绽放，日益丰富强大，仿若为开发者精心打造了一把把通往高效编程巅峰的金钥匙。此刻，就让我们满怀热忱，深入这片知识的宝藏之地，细致入微地探究这些实用至极的数组拓展“神器”。二、ES6带来的数组新特性（一）数组解构赋
Babylon.js WebGL与性能优化
天涯学馆
WebGL 3D图形图像技术 javascript webgl 3d Babylon.js Threejs
目录WebGL基础与Babylon.js底层理解性能监控与优化技巧WebGL基础与Babylon.js底层理解WebGL（WebGraphicsLibrary）是JavaScriptAPI，用于在网页上进行硬件加速的3D图形渲染。它是OpenGL的一个子集，由Web浏览器支持，无需插件。WebGL通过JavaScript与HTML5元素结合，使得开发者能够在浏览器中创建复杂的3D场景。Babylo
探索JavaScript前端开发：开启交互之门的神奇钥匙（二）
小周不想卷
艾思科蓝学术会议投稿 javascript
目录引言四、事件处理4.1事件类型4.2事件监听器五、实战案例：打造简易待办事项列表5.1HTML结构搭建5.2JavaScript功能实现六、进阶拓展：异步编程与Ajax6.1异步编程概念6.2Ajax原理与使用七、前沿框架：Vue.js入门窥探7.1Vue.js简介7.2基础使用示例八、总结与展望引言在当今数字化时代，互联网已然成为人们生活不可或缺的一部分，而网页作为互联网的主要载体，其用户体
JS中的sort()数字排序不生效？--关于ascii那些事儿
不做超级小白
web前端 javascript 开发语言 ecmascript
JavaScript的sort()方法与数字排序在JavaScript中，sort()方法是用于对数组进行排序的常用方法。然而，很多开发者在使用sort()方法时会遇到排序不符合预期的情况，特别是对于数字数组。本文将帮助你理解sort()方法的默认行为，以及如何正确地对数字数组进行排序。默认的sort()方法sort()方法默认情况下会将数组元素转换为字符串，然后按字典顺序对它们进行排序。这意味着
前端新手教程：HTML、CSS 和 JavaScript 全面详解及实用案例
魏大帅。
html css javascript
一、引言在当今数字化的时代，前端开发扮演着至关重要的角色，它决定了用户与网页和应用程序交互的体验。HTML、CSS和JavaScript作为前端开发的核心技术，分别负责网页的结构、样式和交互。本教程将为前端新手全面深入地介绍HTML、CSS和JavaScript的知识点，并通过实用案例帮助你快速上手。二、HTML基础（一）HTML概述HTML（HyperTextMarkupLanguage）即超文
【华为OD】2024年华为OD机试C卷、D卷真题集：最新的真题集题库 C/C++/Java/python/JavaScript
五木大大
华为od c语言 c++ python java javascript 码蚁软件培训
【华为OD】2024年C卷真题集：最新的真题集题库C/C++/Java/python/JavaScript【华为OD】2024年C卷真题集：最新的真题集题库C/C++/Java/python/JavaScript-CSDN博客2024年华为OD的D卷是2024-4-15号切换过来的，不过就目前来看，D卷题目和C卷的重合率很高，只要把C卷练好了，D卷是可以轻松过的，加油呀，同学们。目前据考了D卷的同
XML 语法
凉风细细
xml
XML的语法规则很简单，且很有逻辑。这些规则很容易学习，也很容易使用。XML声明XML声明文件的可选部分，如果存在需要放在文档的第一行，如下所示：以上实例包含XML版本（version="1.0"），甚至包含字符编码（encoding="utf-8"）。UTF-8也是HTML5,CSS,JavaScript,PHP,和SQL的默认编码。XML文档必须有根元素XML必须包含根元素，它是所有其他元素的
编程语言中的常见Bug及解决方案
编程语言bug
在编程过程中，不同语言有其独特的特性和挑战，这也导致了各种常见Bug的出现。本文将总结几种主流编程语言中的常见Bug，包括JavaScript、Python、C/C++、Java和Go，并提供相应的解决方案和案例。一、JavaScript中小数相加精度不准确的Bug在JavaScript中，进行小数相加时，由于浮点数的精度问题，可能会导致结果不准确。例如：letadd1=0.1+0.2;conso
HTML&CSS：雪花飘落邮票动画
前端Hardy
CSS html css 前端
这段代码创建了一个带有动画效果的邮票场景，通过CSS和JavaScript技术模拟了雪花的下落和邮票的装饰效果，为页面添加了节日气氛。演示效果HTML&CSS公众号关注：前端Hardy@importurl('https://fonts.googleapis.com/css2?family=Dancing+Script:
[email protected] &family=Inter:ital,opsz,wgh
PDF2WORD万能方法，如何控制Adobe dc pro，自动实现PDF转word
朴拙Python交易猿
adobe pdf word
如何用JavaScript控制AdobeDCPro来自动实现PDF转Word。首先，我需要考虑AdobeDCPro是否有公开的API或者扩展接口。我记得AdobeAcrobatProDC支持JavaScript，但主要是用于表单处理和文档操作，比如AcrobatJavaScript。不过，自动导出为Word可能需要更底层的控制。接下来，用户可能需要通过脚本来自动化这个过程。如果AdobeAcrob
前端【11】HTML+CSS+jQUery实战项目--实现一个简单的todolist
微臣愚钝
前端 前端 html css
前端【8】HTML+CSS+javascript实战项目----实现一个简单的待办事项列表(To-DoList)-CSDN博客学过jQUery可以极大简化js代码的编写，基于之前实现的todolist小demo，了解如何使用jQuery来实现常见的动态交互功能。修改后的js代码关键点解析动态添加元素：通过append方法动态添加表格行，并为每一行生成唯一的index属性。事件委托：使用on方法将事
HQL之投影查询
归来朝歌
HQL Hibernate 查询语句 投影查询
在HQL查询中，常常面临这样一个场景，对于多表查询，是要将一个表的对象查出来还是要只需要每个表中的几个字段，最后放在一起显示？
针对上面的场景，如果需要将一个对象查出来：
HQL语句写“from 对象”即可
Session session = HibernateUtil.openSession();
Spring整合redis
bylijinnan
redis
pom.xml
<dependencies>
<!-- Spring Data - Redis Library -->
<dependency>
<groupId>org.springframework.data</groupId>
<artifactId>spring-data-redi
org.hibernate.NonUniqueResultException: query did not return a unique result: 2
0624chenhong
Hibernate
参考：http://blog.csdn.net/qingfeilee/article/details/7052736
org.hibernate.NonUniqueResultException: query did not return a unique result: 2
在项目中出现了org.hiber
android动画效果
不懂事的小屁孩
android动画
前几天弄alertdialog和popupwindow的时候，用到了android的动画效果，今天专门研究了一下关于android的动画效果，列出来，方便以后使用。
Android 平台提供了两类动画。 一类是Tween动画，就是对场景里的对象不断的进行图像变化来产生动画效果（旋转、平移、放缩和渐变）。
第二类就是 Frame动画，即顺序的播放事先做好的图像，与gif图片原理类似。
js delete 删除机理以及它的内存泄露问题的解决方案
换个号韩国红果果
JavaScript
delete删除属性时只是解除了属性与对象的绑定，故当属性值为一个对象时，删除时会造成内存泄露 （其实还未删除）
举例：
var person={name:{firstname:'bob'}}
var p=person.name
delete person.name
p.firstname -->'bob'
// 依然可以访问p.firstname，存在内存泄露
Oracle将零干预分析加入网络即服务计划
蓝儿唯美
oracle
由Oracle通信技术部门主导的演示项目并没有在本月较早前法国南斯举行的行业集团TM论坛大会中获得嘉奖。但是，Oracle通信官员解雇致力于打造一个支持零干预分配和编制功能的网络即服务（NaaS）平台，帮助企业以更灵活和更适合云的方式实现通信服务提供商（CSP）的连接产品。这个Oracle主导的项目属于TM Forum Live!活动上展示的Catalyst计划的19个项目之一。Catalyst计
spring学习——springmvc（二）
a-john
springMVC
Spring MVC提供了非常方便的文件上传功能。
1，配置Spring支持文件上传：
DispatcherServlet本身并不知道如何处理multipart的表单数据，需要一个multipart解析器把POST请求的multipart数据中抽取出来，这样DispatcherServlet就能将其传递给我们的控制器了。为了在Spring中注册multipart解析器，需要声明一个实现了Mul
POJ-2828-Buy Tickets
aijuans
ACM_POJ
POJ-2828-Buy Tickets
http://poj.org/problem?id=2828
线段树，逆序插入
#include<iostream>#include<cstdio>#include<cstring>#include<cstdlib>using namespace std;#define N 200010struct
Java Ant build.xml详解
asia007
build.xml
1,什么是antant是构建工具2,什么是构建概念到处可查到，形象来说，你要把代码从某个地方拿来，编译，再拷贝到某个地方去等等操作，当然不仅与此，但是主要用来干这个3,ant的好处跨平台 --因为ant是使用java实现的，所以它跨平台使用简单--与ant的兄弟make比起来语法清晰--同样是和make相比功能强大--ant能做的事情很多，可能你用了很久，你仍然不知道它能有
android按钮监听器的四种技术
百合不是茶
android xml配置 监听器 实现接口
android开发中经常会用到各种各样的监听器,android监听器的写法与java又有不同的地方;
1,activity中使用内部类实现接口 ,创建内部类实例 使用add方法 与java类似
创建监听器的实例
myLis lis = new myLis();
使用add方法给按钮添加监听器
软件架构师不等同于资深程序员
bijian1013
程序员 架构师 架构设计
本文的作者Armel Nene是ETAPIX Global公司的首席架构师，他居住在伦敦，他参与过的开源项目包括 Apache Lucene,，Apache Nutch， Liferay 和 Pentaho等。
如今很多的公司
TeamForge Wiki Syntax & CollabNet User Information Center
sunjing
TeamForge How do Attachement Anchor Wiki Syntax
the CollabNet user information center http://help.collab.net/
How do I create a new Wiki page?
A CollabNet TeamForge project can have any number of Wiki pages. All Wiki pages are linked, and
【Redis四】Redis数据类型
bit1129
redis
概述
Redis是一个高性能的数据结构服务器，称之为数据结构服务器的原因是，它提供了丰富的数据类型以满足不同的应用场景，本文对Redis的数据类型以及对这些类型可能的操作进行总结。
Redis常用的数据类型包括string、set、list、hash以及sorted set.Redis本身是K/V系统，这里的数据类型指的是value的类型，而不是key的类型，key的类型只有一种即string
SSH2整合-附源码
白糖_
eclipse spring tomcat Hibernate Google
今天用eclipse终于整合出了struts2+hibernate+spring框架。
我创建的是tomcat项目，需要有tomcat插件。导入项目以后，鼠标右键选择属性，然后再找到“tomcat”项，勾选一下“Is a tomcat project”即可。具体方法见源码里的jsp图片，sql也在源码里。
补充1：项目中部分jar包不是最新版的，可能导
[转]开源项目代码的学习方法
braveCS
学习方法
转自：
http://blog.sina.com.cn/s/blog_693458530100lk5m.html
http://www.cnblogs.com/west-link/archive/2011/06/07/2074466.html
1）阅读features。以此来搞清楚该项目有哪些特性2）思考。想想如果自己来做有这些features的项目该如何构架3）下载并安装d
编程之美-子数组的最大和（二维）
bylijinnan
编程之美
package beautyOfCoding;
import java.util.Arrays;
import java.util.Random;
public class MaxSubArraySum2 {
/**
* 编程之美 子数组之和的最大值（二维）
*/
private static final int ROW = 5;
private stat
读书笔记-3
chengxuyuancsdn
jquery笔记 resultMap配置 ibatis一对多配置
1、resultMap配置
2、ibatis一对多配置
3、jquery笔记
1、resultMap配置
当<select resultMap="topic_data">
<resultMap id="topic_data">必须一一对应。
(1)<resultMap class="tblTopic&q
[物理与天文]物理学新进展
comsci
如果我们必须获得某种地球上没有的矿石,才能够进行某些能量输出装置的设计和建造,而要获得这种矿石,又必须首先进行深空探测,而要进行深空探测,又必须获得这种能量输出装置,这个矛盾的循环,会导致地球联盟在与宇宙文明建立关系的时候,陷入困境
怎么办呢?
Oracle 11g新特性:Automatic Diagnostic Repository
daizj
oracle ADR
Oracle Database 11g的FDI（Fault Diagnosability Infrastructure）是自动化诊断方面的又一增强。
FDI的一个关键组件是自动诊断库（Automatic Diagnostic Repository-ADR）。
在oracle 11g中，alert文件的信息是以xml的文件格式存在的，另外提供了普通文本格式的alert文件。
这两份log文
简单排序:选择排序
dieslrae
选择排序
public void selectSort(int[] array){
int select;
for(int i=0;i<array.length;i++){
select = i;
for(int k=i+1;k<array.leng
C语言学习六指针的经典程序，互换两个数字
dcj3sjt126com
c
示例程序，swap_1和swap_2都是错误的，推理从1开始推到2，2没完成，推到3就完成了
# include <stdio.h>
void swap_1(int, int);
void swap_2(int *, int *);
void swap_3(int *, int *);
int main(void)
{
int a = 3;
int b =
php 5.4中php-fpm 的重启、终止操作命令
dcj3sjt126com
PHP
php 5.4中php-fpm 的重启、终止操作命令:
查看php运行目录命令：which php/usr/bin/php
查看php-fpm进程数：ps aux | grep -c php-fpm
查看运行内存/usr/bin/php -i|grep mem
重启php-fpm/etc/init.d/php-fpm restart
在phpinfo()输出内容可以看到php
线程同步工具类
shuizhaosi888
同步工具类
同步工具类包括信号量（Semaphore）、栅栏（barrier）、闭锁（CountDownLatch）
闭锁（CountDownLatch）
public class RunMain {
public long timeTasks(int nThreads, final Runnable task) throws InterruptedException {
fin
bleeding edge是什么意思
haojinghua
DI
不止一次，看到很多讲技术的文章里面出现过这个词语。今天终于弄懂了——通过朋友给的浏览软件，上了wiki。
我再一次感到，没有辞典能像WiKi一样，给出这样体贴人心、一清二楚的解释了。为了表达我对WiKi的喜爱，只好在此一一中英对照，给大家上次课。
In computer science, bleeding edge is a term that
c中实现utf8和gbk的互转
jimmee
c iconv utf8&gbk编码
#include <iconv.h>
#include <stdlib.h>
#include <stdio.h>
#include <unistd.h>
#include <fcntl.h>
#include <string.h>
#include <sys/stat.h>
int code_c
大型分布式网站架构设计与实践
lilin530
应用服务器 搜索引擎
1.大型网站软件系统的特点？
a.高并发，大流量。
b.高可用。
c.海量数据。
d.用户分布广泛，网络情况复杂。
e.安全环境恶劣。
f.需求快速变更，发布频繁。
g.渐进式发展。
2.大型网站架构演化发展历程？
a.初始阶段的网站架构。
应用程序，数据库，文件等所有的资源都在一台服务器上。
b.应用服务器和数据服务器分离。
c.使用缓存改善网站性能。
d.使用应用
在代码中获取Android theme中的attr属性值
OliveExcel
android theme
Android的Theme是由各种attr组合而成, 每个attr对应了这个属性的一个引用, 这个引用又可以是各种东西.
在某些情况下, 我们需要获取非自定义的主题下某个属性的内容 (比如拿到系统默认的配色colorAccent), 操作方式举例一则:
int defaultColor = 0xFF000000;
int[] attrsArray = { andorid.r.
基于Zookeeper的分布式共享锁
roadrunners
zookeeper 分布式 共享锁
首先，说说我们的场景，订单服务是做成集群的，当两个以上结点同时收到一个相同订单的创建指令，这时并发就产生了，系统就会重复创建订单。等等......场景。这时，分布式共享锁就闪亮登场了。
共享锁在同一个进程中是很容易实现的，但在跨进程或者在不同Server之间就不好实现了。Zookeeper就很容易实现。具体的实现原理官网和其它网站也有翻译，这里就不在赘述了。
官
两个容易被忽略的MySQL知识
tomcat_oracle
mysql
1、varchar(5)可以存储多少个汉字，多少个字母数字？ 相信有好多人应该跟我一样，对这个已经很熟悉了，根据经验我们能很快的做出决定，比如说用varchar(200)去存储url等等，但是，即使你用了很多次也很熟悉了，也有可能对上面的问题做出错误的回答。 这个问题我查了好多资料，有的人说是可以存储5个字符，2.5个汉字（每个汉字占用两个字节的话），有的人说这个要区分版本，5.0
zoj 3827 Information Entropy(水题)
阿尔萨斯
format
题目链接：zoj 3827 Information Entropy
题目大意：三种底，计算和。
解题思路：调用库函数就可以直接算了，不过要注意Pi = 0的时候，不过它题目里居然也讲了。。。limp→0+plogb(p)=0，因为p是logp的高阶。
#include <cstdio>
#include <cstring>
#include <cmath&
