weixin_34245082
weixin_34245082

[JS]HTML5 拼图游戏

//获取画图区域
var context = document.getElementById('pintu').getContext('2d');

//创建图片
var img = new Image();
img.src = 'pintu.jpg';
img.addEventListener('load', drawTiles, false);//事件监听函数   addEventListener(事件,处理方法。监听强度(防止回收))

//取得图像大小和分成的块数
var boardSize = document.getElementById('pintu').width;
var tileCount = document.getElementById('level').value;

var tileSize = boardSize / tileCount;

//追踪空白图片位置，记录点击图片位置
var clickLoc = new Object;
clickLoc.x = 0;
clickLoc.y = 0;

var emptyLoc = new Object;
emptyLoc.x = 0;
emptyLoc.y = 0;

//默认拼图未完成
var solved = false;
//默认步数为0
var step = 0;
//获取并初始化画板
var boardParts = new Object;
setBoard();

//更改难度相关方法，更改后重新计算大小
document.getElementById('level').onchange = function() {
  tileCount = this.value;
  tileSize = boardSize / tileCount;
  setBoard();
  drawTiles();
};

//追踪鼠标划过的区域  
document.getElementById('pintu').onmousemove = function(e) {
  clickLoc.x = Math.floor((e.pageX - this.offsetLeft) / tileSize);
  clickLoc.y = Math.floor((e.pageY - this.offsetTop) / tileSize);
};

//追踪鼠标点击的区域
document.getElementById('pintu').onclick = function() {
  if (distance(clickLoc.x, clickLoc.y, emptyLoc.x, emptyLoc.y) == 1) {
      step++;
    document.getElementById('step').value = step;//步数记录
    slideTile(emptyLoc, clickLoc);
    drawTiles();
  }
  if (solved) {
    setTimeout(function() {alert("你完成了！用了"+step+"步");}, 500); //防止浏览器在重绘图片区域之前弹窗而进行500ms的延迟
  }
};

//初始化画板函数，模拟n*n的n宫格，使用二维数组创建图片区域
function setBoard() {
  boardParts = new Array(tileCount);
  for (var i = 0; i < tileCount; ++i) {
    boardParts[i] = new Array(tileCount);
    for (var j = 0; j < tileCount; ++j) {
      boardParts[i][j] = new Object;
      boardParts[i][j].x = (tileCount - 1) - i;
      boardParts[i][j].y = (tileCount - 1) - j;
    }
  }
  emptyLoc.x = boardParts[tileCount - 1][tileCount - 1].x;
  emptyLoc.y = boardParts[tileCount - 1][tileCount - 1].y;
  solved = false;
}

//将点击的拼图移动到新的位置
function drawTiles() {
  context.clearRect ( 0 , 0 , boardSize , boardSize );
  for (var i = 0; i < tileCount; ++i) {
    for (var j = 0; j < tileCount; ++j) {
      var x = boardParts[i][j].x;
      var y = boardParts[i][j].y;
      if(i != emptyLoc.x || j != emptyLoc.y || solved == true) {
        context.drawImage(img, x * tileSize, y * tileSize, tileSize, tileSize,
            i * tileSize, j * tileSize, tileSize, tileSize);
      }
    }
  }
}

//判断图片是否可移动的方法
function distance(x1, y1, x2, y2) {
  return Math.abs(x1 - x2) + Math.abs(y1 - y2); //判断到空白位置的距离是否为1,1
}

//移动拼图相关方法
function slideTile(toLoc, fromLoc) {
  if (!solved) {
    boardParts[toLoc.x][toLoc.y].x = boardParts[fromLoc.x][fromLoc.y].x;
    boardParts[toLoc.x][toLoc.y].y = boardParts[fromLoc.x][fromLoc.y].y;
    boardParts[fromLoc.x][fromLoc.y].x = tileCount - 1;
    boardParts[fromLoc.x][fromLoc.y].y = tileCount - 1;
    toLoc.x = fromLoc.x;
    toLoc.y = fromLoc.y;
    checkSolved();
  }
}

//检查拼图位置是否完成的方法
function checkSolved() {
  var flag = true;
  for (var i = 0; i < tileCount; ++i) {
    for (var j = 0; j < tileCount; ++j) {
      if (boardParts[i][j].x != i || boardParts[i][j].y != j) {
        flag = false;
      }
    }
  }
  solved = flag;
}

以上是JS部分

DOCTYPE HTML>
<html>
<head>
  <title>拼图title>
  <style>
  .picture {
    border: 1px solid black;
  }
  #main{
      float:left;
  }
  #yuantu{
      float:left;
      margin-left: 20px;
  }
  #step{
      margin-left: 100px;
  }
  style>
head>
<body>
    <meta charset="UTF-8" />
  <div id="title">
    <h2>拼图游戏h2>
  div>
  <div id="slider">
    <form>
      <label>简单label>
      <input type="range" id="level" value="4" min="3" max="5" step="1">
      <label>困难label>
      <input type="text" id='step' readonly="readonly" value="0"><label>步数label>
    form>
    <br>
  div>
  <div id="main" class="main">
    <canvas id="pintu" width="480px" height="480px">canvas>
  div>
  <div id="yuantu" width="480px" height="480px"><img src="pintu.jpg" />div>
  <script src="pin.js">script>
body>
html>

以上是HTML部分

转载于:https://www.cnblogs.com/zerolin/archive/2012/09/14/2684353.html

你可能感兴趣的:([JS]HTML5 拼图游戏)

  • 制作动态菜单 大磊程序员(“hello world”) Java后端javascript开发语言ecmascript
    动态菜单的说明什么叫做动态菜单？动态菜单就是根据用户属于不同的角色，每个角色还有不同的菜单，左侧菜单栏会有不同的显示前端加载流程menu.js修改/src/api/menu.js中的请求地址，如下所示：//获取菜单exportconstGetMenus=params=>{returnrequest({url:'/admin/system/index/menus',method:'get',para
  • 基于 WPF 平台使用纯 C# 实现动态处理 json 字符串 code_shenbing WPFwpfc#json
    一、引言在当今的软件开发领域，数据的交换与存储变得愈发频繁，JSON（JavaScriptObjectNotation）作为一种轻量级的数据交换格式，以其简洁、易读、便于解析和生成的特点，被广泛应用于各种应用程序中。在WPF（WindowsPresentationFoundation）平台开发的桌面应用里，我们常常需要与各种数据源交互，动态处理JSON字符串就成为了一项必备技能。本文将深入探讨如何
  • Vue.js 单页应用（SPA）开发教程：从零开始构建你的第一个项目 Milk夜雨 vue.jsvue.js前端javascript
    单页应用（SPA，SinglePageApplication）是现代前端开发的主流模式。Vue.js是一个非常适合构建SPA的框架，它通过VueRouter实现页面导航，通过组件化开发和状态管理实现复杂的交互功能。本篇教程将带你了解SPA的基本概念，并一步步创建一个Vue.js单页应用。什么是单页应用（SPA）？单页应用是一种只有一个HTML页面，通过JavaScript动态加载内容的应用。特点包
  • Python酷库之旅-第三方库Pandas(008) 神奇夜光杯 pythonpandas人工智能开发语言excel标准库及第三方库学习和成长
    目录一、用法精讲16、pandas.DataFrame.to_json函数16-1、语法16-2、参数16-3、功能16-4、返回值16-5、说明16-6、用法16-6-1、数据准备16-6-2、代码示例16-6-3、结果输出17、pandas.read_html函数17-1、语法17-2、参数17-3、功能17-4、返回值17-5、说明17-6、用法17-6-1、数据准备17-6-2、代码示例1
  • C# 与.NET 日志变革：JSON 让程序“开口说清话” 步、步、为营 c#.netjson
    一、引言：日志新时代的开启在软件开发的漫长旅程中，日志一直是我们不可或缺的伙伴。它就像是应用程序的“黑匣子”，默默地记录着程序运行过程中的点点滴滴，为我们在调试、排查问题以及性能优化时提供关键线索。在早期，文本日志是我们最常用的记录方式，它简单直接，就像我们随手写下的日记，记录着事件发生的时间、内容等基本信息。然而，随着软件系统规模的不断扩大，架构日益复杂，尤其是在微服务、大数据分析以及云原生应用
  • Node.js的解释 web15085415935 面试学习路线阿里巴巴node.js
    1.Node.js入门教程1.1什么是Node.js？1.1.1Node.js是什么？Node.js是一个基于JavaScript的开源服务器端运行时环境，允许开发者用JavaScript编写服务器端代码。与传统的前端JavaScript主要运行在浏览器端不同，Node.js通过提供一个非阻塞的异步模型，允许开发者在服务器端创建高性能的网络应用程序。比喻：想象你把JavaScript看作是一个厨师
  • vue2在线生成二维码 家里有只小肥猫 javascript前端开发语言
    亲情提示：如果可以让后端生成就让后端生成实在不行再前端解决（分享方法只是为了让你快点下班不是为了让你能者多劳）创建npminstallqrcodejs2pnpminstallqrcodejs2importQRCodefrom'qrcodejs2'data:{qrcode:'',}submitCode(){if(this.$refs.qrcode){this.qrcode='';this.$refs
  • 参加【2025年春季】全国CTF夺旗赛-从零基础入门到竞赛，看这一篇就稳了！ 白帽子凯哥 web安全学习安全CTF夺旗赛网络安全
    基于入门网络安全/黑客打造的：黑客&网络安全入门&进阶学习资源包目录一、CTF简介二、CTF竞赛模式三、CTF各大题型简介四、CTF学习路线4.1、初期1、html+css+js（2-3天）2、apache+php（4-5天）3、mysql（2-3天）4、python(2-3天)5、burpsuite（1-2天）4.2、中期1、SQL注入（7-8天）2、文件上传（7-8天）3、其他漏洞（14-15
  • 探秘 commits-graph：优雅的Git提交图绘制工具 农爱宜
    探秘commits-graph：优雅的Git提交图绘制工具去发现同类优质开源项目:https://gitcode.com/在软件开发中，Git不仅仅是一个版本控制系统，它还是我们代码历程的一种视觉表达。每次提交都如同历史的一笔，记录着开发者的心血和智慧。而今天，我们要向您推荐一个非常出色的开源项目——commits-graph，这是一个基于HTML5Canvas和jQuery的Git提交图形小部件
  • 【大数据入门核心技术-Hive】（十六）hive表加载csv格式数据或者json格式数据 forest_long 大数据技术入门到21天通关大数据hivehadoop开发语言后端数据仓库
    一、环境准备hive安装部署参考：【大数据入门核心技术-Hive】（三）Hive3.1.2非高可用集群搭建【大数据入门核心技术-Hive】（四）Hive3.1.2高可用集群搭建二、hive加载Json格式数据1、数据准备vistu.json[{"id":111,"name":"name111"},{"id":222,"name":"name22"}]上传到hdfshadoopfs-putstu.j
  • 基于数据可视化SpringBoot+Vue+Uniapp的学生活动管理系统设计与实现（毕业设计实战项目+源码+部署） Java开源领先者 #Java网站项目#微信小程序毕设#Java精品毕设信息可视化springbootvue.js毕业设计javauni-app学生活动管理
    博主介绍CSDN毕设辅导第一人、靠谱第一人、全网粉丝50W+,csdn特邀作者、博客专家、腾讯云社区合作讲师、CSDN新星计划导师、Java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和学生毕业项目实战,高校老师/讲师/同行前辈交流✌技术范围：SpringBoot、Vue、SSM、HLMT、Jsp、PHP、Nodejs、Python、爬虫、数据可
  • 分布式微服务搭建 Xi-Tong 微服务架构云原生linuxcentosbashjdk
    分布式微服务架构搭建（举出一个项目搭建的例子，其他项目可参考本文档）基于Nginx作为web服务器、JDK作为Java运行环境、MySQL作为关系型数据库、Nacos作为服务发现和配置中心、Maven作为项目管理工具、Redis作为缓存和消息中间件（视具体需求而定）、Node.js与npm作为某些微服务（如前端服务或特定业务逻辑服务）的开发和依赖管理工具，可以搭建一个完整的分布式微服务架构项目。以
  • 【Python Dash】零基础也能轻松掌握的学习路线与参考资料 weishaoonly pythondash学习
    PythonDash是一个可视化框架，可以帮助开发者快速构建交互式仪表板和应用程序。它基于Plotly.js库建立，提供了一种易于使用的Python界面，用户可以通过简单的Python代码创建仪表板和应用程序。本篇文章将介绍PythonDash的学习路线，并给出参考资料和优秀实践，并对PythonDash应用的未来趋势进行了展望。一、PythonDash的学习路线以下是学习PythonDash的建
  • SkyWalking 小馋喵知识杂货铺 性能skywalking
    SkyWalking是一款开源的APM（ApplicationPerformanceManagement）工具，主要用于监控、追踪和诊断微服务架构中的应用性能。它支持多种语言，包括Java、Go、Node.js、Python等，能够提供强大的分布式追踪、日志分析、性能监控等功能，是微服务和云原生架构中重要的性能管理工具之一。SkyWalking最初由ApacheSoftwareFoundation
  • vue2 缓存组件＜keep-alive＞ 海绵宝龙 vue2缓存vue.jsjavascript前端前端框架vue
    在Vue.js2中，keep-alive是一个内置组件，它允许您缓存不活动的组件实例，以便在需要时可以更快地重新渲染它们。当一个组件被包裹在标签中时，它的状态会被保留，而不是在每次切换时都重新创建。以下是如何使用keep-alive组件来缓存组件的示例：切换组件importMyComponentfrom'./MyComponent.vue';exportdefault{name:'App',com
  • 省市区数据最新 javascript
    包含省市区县数据，共3465个。——更新于2025年01月24日包括东莞市，中山市的下面的镇和街道暂时应该没有比我更全的了~~~因为JSON串比较长，有14797行，粘贴太长了，粘不出来，所以只能通过网盘分享点击进入夸克网盘下载https://pan.quark.cn/s/ff995e58de2d如果需要：全国省市区县乡镇街道，到乡镇街道的总数：45380个，全国城市行政代码+邮编代码数据，点击下
  • map转换成JSON的方法 web18296061989 javajava后端
    第一种alibabafalstjson：1.Map转JSONMapmap=newHashMap();map.put("a","a");map.put("b","123");JSONObjectjson=newJSONObject(map);2.map转stringMapmap=newHashMapmap=(Map)json;5.String转JSONStringstr="{"username":"
  • 【前端开发】前端开发深度解析：HTML、CSS、JavaScript与Vue.js RS迷途小书童 前端开发探索之旅javascripthtmlcss前端vue.js
    一、HTML：构建网页的基石1.1简介HTML（HyperTextMarkupLanguage，超文本标记语言）是一种用于创建网页的标准标记语言。它使用各种标签（tags）来描述网页上的内容，包括文本、图像、链接、视频、音频等。HTML是网页开发的基础，与CSS（层叠样式表）和JavaScript等技术一起，共同构建出丰富多彩的网页世界。HTML文档由一系列的元素构成，每个元素都由开始标签、内容和
  • js第一次笔记 chen_zhi_yu javascript笔记前端
    JavaScript显示方案JavaScript能够以不同方式“显示”数据：使用window.alert()写入警告框使用document.write()写入HTML输出使用innerHTML写入HTML元素使用console.log()写入浏览器控制台JavaScript关键词JavaScript语句常常通过某个关键词来标识需要执行的JavaScript动作。下面的表格列出了一部分将在教程中学到
  • nodejs启动项目报错 Error: listen EACCES: permission denied 0.0.0.0:5000 BiuBiu__A 后端node.js运维javascriptnode.js后端
    nodejs启动项目报错Error:listenEACCES:permissiondenied0.0.0.0:5000，截图如下：解决方法在管理员权限下打开CMD（命令行）并运行：netstopwinnatnetstartwinnat执行完成后在此通过nodejs启动项目即可成功！
  • 前端实现PDf文件下载功能 南风贰拾捌 知识点整理前端pdf
    前言：pc端需要实现生成PDF并下载的功能。方法一：侧重点在前端，后端只需要配合把PDF所需要的数据给到前端即可。准备工作：需要npminstall这两个插件，html2Canvas，JsPDF。注：上面给的不是npm的命令，不可以直接当做npm命令使用//引入importhtml2Canvasfrom'html2canvas'importJsPDFfrom'jspdf'//也可以在main.js
  • threejs学习笔记：CSS2DObject 2d文字渲染 九段刀客 threejs学习javascript开发语言
    import{CSS2DRenderer,CSS2DObject}from"three/examples/jsm/renderers/CSS2DRenderer.js";//2d文字渲染function_createBox1Label(object
  • Javascript和jquery事件-鼠标移入移出事件 weixin_30740295 javascriptViewUI
    javascript使用mouseover和mouseout，只在css中支持hoverjquery支持mouseover和mouseout，封装了mouseenter、mouseleave事件函数和hover函数1、有关js中的mouseover和mouseout原生js的事件类型是mouserout和mouseover，之前提到的事件冒泡的缺陷就在这里，之前说的使用阻止冒泡就行，大概说得太轻易
  • 华为OD机试D卷 --最大社交距离--24年OD统一考试（Java & JS & Python & C & C++） 飞码创造者 最新华为OD机试题库2024华为odjavajavascriptpythonc语言
    文章目录题目描述输入描述输出描述用例1题目解析java源码js源码python源码c源码c++源码题目描述疫情期间需要大家保证一定的社交距离，公司组织开交流会议。座位一排共N个座位，编号分别为[0,N-1]。要求员工一个接着一个进入会议室，并且可以在任何时候离开会议室。满足：每当一个员工进入时，需要坐到最大社交距离（最大化自己和其他人的距离的座位）；如果有多个这样的座位，则坐到索引最小的那个座位。
  • 后端传入文件流，前台pdf展示（pc端和手机端） w001yy 前端javascript
    近日项目用到的用文件流传递pdf文件的情况，后端将数据流传到前端，需要前端进行处理然后再预览下载，总结了一下几点方法，1.PC端一开始想引用pdf.js插件进行实现，但是总是白屏，借鉴的文章是https://www.jianshu.com/p/242525315bf6，用了里面的方法测试了，但是一直是白屏，展示不出pdf，也没有看到错误提示，最后直接用window.open(url),其中url表
  • 如何在 UniApp 中实现 iOS 版本更新检测 SHENHUANJIE UniappIOS版本更新
    随着移动应用的不断发展，保持应用程序的更新是必不可少的，这样用户才能获得更好的体验。本文将帮助你在UniApp中实现iOS版的版本更新检测和提示，适合刚入行的小白。我们将分步骤进行说明，每一步所需的代码及其解释都会一一列出。整体流程概述在实现版本更新的过程中，可以将流程划分为几个主要步骤：步骤操作描述1配置更新后端搭建一个服务，提供当前版本的信息，建议使用JSON格式返回数据。2在应用中调用更新接
  • 华为OD机试E卷 --最大社交距离--24年OD统一考试（Java & JS & Python & C & C++） 飞码创造者 最新华为OD机试题库2024华为odjavajavascriptc语言python
    文章目录题目描述输入描述输出描述用例题目解析JS算法源码Java算法源码python算法源码c算法源码c++算法源码题目描述疫情期间需要大家保证一定的社交距离，公司组织开交流会议。座位一排共N个座位，编号分别为[0,N-1]。要求员工一个接着一个进入会议室，并且可以在任何时候离开会议室。满足：•每当一个员工进入时，需要坐到最大社交距离（最大化自己和其他人的距离的座位）；•如果有多个这样的座位，则坐
  • SSM 架构中 JAVA 网络直播带货查询系统设计与 JSP 有效实现方法 2401_85439108 架构java开发语言
    摘要随着科学技术的飞速发展，各行各业都在努力与现代先进技术接轨，通过科技手段提高自身的优势；对于网络直播带货网站当然也不能排除在外，随着网络技术的不断成熟，带动了网络直播带货网站，它彻底改变了过去传统的管理方式，不仅使服务管理难度变低了，还提升了管理的灵活性。这种个性化的平台特别注重交互协调与管理的相互配合，激发了管理人员的创造性与主动性，对网络直播带货网站而言非常有利。本系统采用的数据库是Mys
  • JDK10、JDK11、JDK12、JDK13、JDK 14、JDK15、JDK16、JDK17、JDK18、JDK19、JDK20、JDK21、JDK22、JDK23、JDK24对应JSR xiaoyustudiowww java
    JDK10、JDK11、JDK12、JDK13、JDK14、JDK15、JDK16、JDK17、JDK18、JDK19、JDK20、JDK21、JDK22、JDK23、JDK24对应JSR：JDK对应JSR：JSR383Java™SE10(18.3)Description:TheJSRfortheJavaSE10(18.3)PlatformStatus:FinalLatestStage:Final
  • 【前端js】 indexedDB Nosql的使用方法 Loong_DQX 前端javascriptnosqlindexedDB
    一、背景Redis的数据存储位置是在服务器内存中，它的目的是是获取数据更快；indexedDB是在客户端的本地存储中，它想要解决的问题是存储更多的数据，相较于localStorage、sessionStorage。这篇文章想讲的是indexedDB，用于将网页中所要用到的数据存储在本地中，使用索引实现对数据的高性能搜索。二、indexedDB数据库2.1indexedDB的特点非关系型数据库：数据
  • PHP如何实现二维数组排序？ IT独行者 二维数组PHP排序　
    二维数组在PHP开发中经常遇到，但是他的排序就不如一维数组那样用内置函数来的方便了，（一维数组排序可以参考本站另一篇文章【PHP中数组排序函数详解汇总】）。二维数组的排序需要我们自己写函数处理了，这里UncleToo给大家分享一个PHP二维数组排序的函数： 代码： functionarray_sort($arr,$keys,$type='asc'){ $keysvalue= $new_arr
  • 【Hadoop十七】HDFS HA配置 bit1129 hadoop
    基于Zookeeper的HDFS HA配置主要涉及两个文件,core-site和hdfs-site.xml。   测试环境有三台 hadoop.master hadoop.slave1 hadoop.slave2   hadoop.master包含的组件NameNode, JournalNode, Zookeeper，DFSZKFailoverController
  • 由wsdl生成的java vo类不适合做普通java vo darrenzhu VOwsdlwebservicerpc
    开发java webservice项目时，如果我们通过SOAP协议来输入输出，我们会利用工具从wsdl文件生成webservice的client端类，但是这里面生成的java data model类却不适合做为项目中的普通java vo类来使用，当然有一中情况例外，如果这个自动生成的类里面的properties都是基本数据类型，就没问题，但是如果有集合类，就不行。原因如下： 1)使用了集合如Li
  • JAVA海量数据处理之二（BitMap） 周凡杨 java算法bitmapbitset数据
           路漫漫其修远兮，吾将上下而求索。想要更快，就要深入挖掘 JAVA 基础的数据结构，从来分析出所编写的 JAVA 代码为什么把内存耗尽，思考有什么办法可以节省内存呢？ 啊哈！算法。这里采用了 BitMap 思想。   首先来看一个实验： 指定 VM 参数大小： -Xms256m -Xmx540m
  • java类型与数据库类型 g21121 java
    很多时候我们用hibernate的时候往往并不是十分关心数据库类型和java类型的对应关心，因为大多数hbm文件是自动生成的，但有些时候诸如：数据库设计、没有生成工具、使用原始JDBC、使用mybatis(ibatIS)等等情况，就会手动的去对应数据库与java的数据类型关心，当然比较简单的数据类型即使配置错了也会很快发现问题，但有些数据类型却并不是十分常见，这就给程序员带来了很多麻烦。 &nb
  • Linux命令 510888780 linux命令
    系统信息 arch 显示机器的处理器架构(1) uname -m 显示机器的处理器架构(2) uname -r 显示正在使用的内核版本 dmidecode -q 显示硬件系统部件 - (SMBIOS / DMI) hdparm -i /dev/hda 罗列一个磁盘的架构特性 hdparm -tT /dev/sda 在磁盘上执行测试性读取操作 cat /proc/cpuinfo 显示C
  • java常用JVM参数 墙头上一根草 javajvm参数
    -Xms：初始堆大小，默认为物理内存的1/64(<1GB)；默认(MinHeapFreeRatio参数可以调整)空余堆内存小于40%时，JVM就会增大堆直到-Xmx的最大限制 -Xmx：最大堆大小，默认(MaxHeapFreeRatio参数可以调整)空余堆内存大于70%时，JVM会减少堆直到 -Xms的最小限制 -Xmn：新生代的内存空间大小，注意：此处的大小是（eden+ 2
  • 我的spring学习笔记9-Spring使用工厂方法实例化Bean的注意点 aijuans Spring 3
    方法一： <bean id="musicBox" class="onlyfun.caterpillar.factory.MusicBoxFactory" factory-method="createMusicBoxStatic"></bean> 方法二：
  • mysql查询性能优化之二 annan211 UNIONmysql查询优化索引优化
    1 union的限制 有时mysql无法将限制条件从外层下推到内层，这使得原本能够限制部分返回结果的条件无法应用到内层 查询的优化上。 如果希望union的各个子句能够根据limit只取部分结果集，或者希望能够先排好序在 合并结果集的话，就需要在union的各个子句中分别使用这些子句。 例如 想将两个子查询结果联合起来，然后再取前20条记录，那么mys
  • 数据的备份与恢复 百合不是茶 oraclesql数据恢复数据备份
     数据的备份与恢复的方式有: 表,方案 ,数据库;     数据的备份: 导出到的常见命令; 参数 说明 USERID 确定执行导出实用程序的用户名和口令 BUFFER 确定导出数据时所使用的缓冲区大小，其大小用字节表示 FILE 指定导出的二进制文
  • 线程组 bijian1013 java多线程threadjava多线程线程组
    有些程序包含了相当数量的线程。这时，如果按照线程的功能将他们分成不同的类别将很有用。        线程组可以用来同时对一组线程进行操作。        创建线程组：ThreadGroup g = new ThreadGroup(groupName);  &nbs
  • top命令找到占用CPU最高的java线程 bijian1013 javalinuxtop
    上次分析系统中占用CPU高的问题，得到一些使用Java自身调试工具的经验，与大家分享。 (1)使用top命令找出占用cpu最高的JAVA进程PID:28174 (2)如下命令找出占用cpu最高的线程 top -Hp 28174 -d 1 -n 1 32694 root 20 0 3249m 2.0g 11m S 2 6.4 3:31.12 java
  • 【持久化框架MyBatis3四】MyBatis3一对一关联查询 bit1129 Mybatis3
      当两个实体具有1对1的对应关系时，可以使用One-To-One的进行映射关联查询   One-To-One示例数据 以学生表Student和地址信息表为例，每个学生都有都有1个唯一的地址(现实中，这种对应关系是不合适的，因为人和地址是多对一的关系)，这里只是演示目的   学生表   CREATE TABLE STUDENTS (
  • C/C++图片或文件的读写 bitcarter 写图片
    先看代码： /*strTmpResult是文件或图片字符串 * filePath文件需要写入的地址或路径 */ int writeFile(std::string &strTmpResult,std::string &filePath) { int i,len = strTmpResult.length(); unsigned cha
  • nginx自定义指定加载配置 ronin47
    进入 /usr/local/nginx/conf/include 目录，创建 nginx.node.conf 文件，在里面输入如下代码： upstream nodejs { server 127.0.0.1:3000; #server 127.0.0.1:3001; keepalive 64; } server { liste
  • java-71-数值的整数次方.实现函数double Power(double base, int exponent)，求base的exponent次方 bylijinnan double
    public class Power { /** *Q71-数值的整数次方 *实现函数double Power(double base, int exponent)，求base的exponent次方。不需要考虑溢出。 */ private static boolean InvalidInput=false; public static void main(
  • Android四大组件的理解 Cb123456 android四大组件的理解
     分享一下，今天在Android开发文档-开发者指南中看到的:                            App components are the essential building blocks of an Android
  • [宇宙与计算]涡旋场计算与拓扑分析 comsci 计算
         怎么阐述我这个理论呢？ 。。。。。。。。。       首先： 宇宙是一个非线性的拓扑结构与涡旋轨道时空的统一体。。。。       我们要在宇宙中寻找到一个适合人类居住的行星，时间非常重要，早一个刻度和晚一个刻度，这颗行星的
  • 同一个Tomcat不同Web应用之间共享会话Session cwqcwqmax9 session
    实现两个WEB之间通过session 共享数据 查看tomcat 关于 HTTP Connector 中有个emptySessionPath 其解释如下： If set to true, all paths for session cookies will be set to /. This can be useful for portlet specification impleme
  • springmvc Spring3 MVC，ajax，乱码 dashuaifu springjquerymvcAjax
      springmvc Spring3 MVC @ResponseBody返回，jquery ajax调用中文乱码问题解决   Spring3.0 MVC @ResponseBody 的作用是把返回值直接写到HTTP response body里。具体实现AnnotationMethodHandlerAdapter类handleResponseBody方法，具体实
  • 搭建WAMP环境 dcj3sjt126com wamp
    这里先解释一下WAMP是什么意思。W:windows，A：Apache，M：MYSQL，P：PHP。也就是说本文说明的是在windows系统下搭建以apache做服务器、MYSQL为数据库的PHP开发环境。      工欲善其事，必须先利其器。因为笔者的系统是WinXP，所以下文指的系统均为此系统。笔者所使用的Apache版本为apache_2.2.11-
  • yii2 使用raw http request dcj3sjt126com http
    Parses a raw HTTP request using yii\helpers\Json::decode()   To enable parsing for JSON requests you can configure yii\web\Request::$parsers using this class: 'request' =&g
  • Quartz-1.8.6 理论部分 eksliang quartz
    转载请出自出处：http://eksliang.iteye.com/blog/2207691 一.概述 基于Quartz-1.8.6进行学习，因为Quartz2.0以后的API发生的非常大的变化，统一采用了build模式进行构建； 什么是quartz?   答：简单的说他是一个开源的java作业调度框架，为在 Java 应用程序中进行作业调度提供了简单却强大的机制。并且还能和Sp
  • 什么是POJO？ gupeng_ie javaPOJO框架Hibernate
    POJO--Plain Old Java Objects(简单的java对象)   POJO是一个简单的、正规Java对象，它不包含业务逻辑处理或持久化逻辑等，也不是JavaBean、EntityBean等，不具有任何特殊角色和不继承或不实现任何其它Java框架的类或接口。   POJO对象有时也被称为Data对象，大量应用于表现现实中的对象。如果项目中使用了Hiber
  • jQuery网站顶部定时折叠广告 ini JavaScripthtmljqueryWebcss
    效果体验：http://hovertree.com/texiao/jquery/4.htmHTML文件代码： <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>网页顶部定时收起广告jQuery特效 - HoverTree<
  • Spring boot内嵌的tomcat启动失败 kane_xie spring boot
    根据这篇guide创建了一个简单的spring boot应用，能运行且成功的访问。但移植到现有项目（基于hbase）中的时候，却报出以下错误：     SEVERE: A child container failed during start java.util.concurrent.ExecutionException: org.apache.catalina.Lif
  • leetcode: sort list michelle_0916 Algorithmlinked listsort
    Sort a linked list in O(n log n) time using constant space complexity. ====analysis======= mergeSort for singly-linked list  ====code=======   /** * Definition for sin
  • nginx的安装与配置,中途遇到问题的解决 qifeifei nginx
    我使用的是ubuntu13.04系统，在安装nginx的时候遇到如下几个问题，然后找思路解决的，nginx 的下载与安装   wget http://nginx.org/download/nginx-1.0.11.tar.gz tar zxvf nginx-1.0.11.tar.gz ./configure make make install   安装的时候出现
  • 用枚举来处理java自定义异常 tcrct javaenumexception
    在系统开发过程中，总少不免要自己处理一些异常信息，然后将异常信息变成友好的提示返回到客户端的这样一个过程，之前都是new一个自定义的异常，当然这个所谓的自定义异常也是继承RuntimeException的，但这样往往会造成异常信息说明不一致的情况，所以就想到了用枚举来解决的办法。 1，先创建一个接口，里面有两个方法，一个是getCode, 一个是getMessage public
  • erlang supervisor分析 wudixiaotie erlang
    当我们给supervisor指定需要创建的子进程的时候，会指定M,F,A,如果是simple_one_for_one的策略的话，启动子进程的方式是supervisor:start_child(SupName, OtherArgs),这种方式可以根据调用者的需求传不同的参数给需要启动的子进程的方法。和最初的参数合并成一个数组，A ++ OtherArgs。那么这个时候就有个问题了，既然参数不一致，那
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他