PerfumerKarma
PerfumerKarma

js实现可调节左右栏

js实现可调节左右栏

我们通常看到的左右栏调节是怎么实现的呢？

js实现可调节左右栏_第1张图片

先来一张简单的最终效果图~

大体思路：通过mousedown事件触发mousemove事件并计算左边宽度，当mouseup事件触发时移除掉对mousedown与mousemove事件的监听。

来实时操作一下~

构建页面

首先将页面画出来

html部分


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js调节宽度title>
    <link rel="stylesheet" href="style.css">
head>
<body>
    <div class="container">
        <div class="left">div>
        <div class="line">
            <i>i>
            <i>i>
        div>
        <div class="right">div>
    div>
    <script src="a.js">script>
body>
html>

css部分

body{
    margin: 0;
    padding: 0;
    user-select: none;
    -webkit-user-select: none;
}
.container{
    display: flex;
    height: 100vh;    

}

.left{
    height: 100%;
    width: 400px;
    background-color: aqua;
}
.line{
    height: 100%;
    width: 20px;
    background: #eaeaea;
    box-shadow:  10px 10px 5px black;
    display: flex;
    justify-content: space-around;
    align-items: center;
    cursor: col-resize;
}
i{
    display: block;
    height: 20px;
    background: rgb(182, 181, 181);
    width: 1px;
}
.right{
    height: 100%;
    width: 300px;
    display: flex;
    flex: 1;
    background-color: blueviolet;
}

js实现

mousedown事件监听

通过对中间可调节部分实现mousedown监听。大概的框框是这样的

var startX,leftWidth;
document.querySelector('.line').addEventListener('mousedown',(e) => {
   document.documentElement.addEventListener('mousemove',onDrag);
   document.documentElement.addEventListener('mouseup',stopDrag);
});
function onDrag(e) {

}
function stopDrag(e) {

}

我们先将基本确定的填入~

var startX,leftWidth;
document.querySelector('.line').addEventListener('mousedown',(e) => {
   startX = e.clientX; // 记录开始时x坐标
   // 获取左半部分的宽度，使用getComputedStyle返回的是带有px的字符串，我们将其转为整数用于下面计算
   leftWidth = parseInt(window.getComputedStyle(document.querySelector('.left')).width,10);
   document.documentElement.addEventListener('mousemove',onDrag);
   document.documentElement.addEventListener('mouseup',stopDrag);
})
function onDrag(e) {
  // 实时计算左边宽度 = 刚开始左边的宽度 + 移动的X坐标(e.clientX - startX) 
  let newWidth = leftWidth + e.clientX - startX;
  document.querySelector('.left').style.width = newWidth + 'px';
}
function stopDrag(e) {
   document.documentElement.removeEventListener('mousemove',onDrag);
   document.documentElement.removeEventListener('mouseup',stopDrag);
}

看一下效果喽~

实现了左右拖拽的效果啦~

你可能感兴趣的:(js,js,javascript)

  • [微信域名检测]基于微信域名检测api的PHP随机跳转 阿乐LeoChen
    用户名和KEY请到www.xxweixin.com获取
  • 【VSCode】上传插件 七灵微 基本理论vscodeide编辑器
    准备开发环境npminstall-gyogenerator-code@vscode/vsceyogenerator-code：用于创建插件项目骨架vsce：用于打包和发布插件创建插件项目yocode选择插件类型（TypeScript或JavaScript）填写插件名称、描述、是否初始化Git、使用的包管理器等创建完成后进入项目目录并安装依赖：cdmy-extensionnpminstall开发插件
  • 语雀编辑器内双击回车插入当前时间js脚本 妄想_wangx 编辑器javascript开发语言
    打算多记录自己的想法，或者说灵感、念头我想要的格式大概是这样的：17:06我写下第一个记录17:08又一个想法18:38又一个想法但是每次写时间都太麻烦了，想着能不能用程序或者脚本实现。最终用脚本实现了：//==UserScript==//@name语雀编辑器双回车插入时间//@namespacehttp://tampermonkey.net///@version7.0//@description
  • Three.js入门：创建第一个3D场景 薯条说影 Three.js3D场景创建跨平台设置安全异常处理HTML骨架搭建
    背景简介Three.js是一个轻量级的3D图形库，它让Web开发者能够在浏览器中创建和显示3D图形。本章介绍如何设置环境以开始使用Three.js，包括不同操作系统下的安装步骤、安全异常处理以及基本的HTML骨架创建。安装与设置操作系统兼容性：Three.js的使用不仅限于Windows系统。对于其他操作系统，如Linux和MacOS，需要将可执行文件复制到目标目录，并通过命令行启动。无论是哪种操
  • Three.js入门第一步：两种方式搭建你的3D项目[特殊字符]️
    上一篇我们聊了学习Three.js前的“地基”知识，现在地基牢固，该正式动工了！在创造炫酷的3D世界之前，我们得先把开发环境给搭好。官方手册提供了两种主流的安装方式，分别适用于不同场景。选对方法，事半功倍！方式一：CDN+Importmap(极速上手)这是官方最为推荐的、也是最简单的入门方式，尤其适合学习、做小练习、或者快速验证一个想法。优点：无需安装任何东西！只需要一个能联网的浏览器。操作方法：
  • 58、JavaScript中的类定义与对象创建 pepper JavaScript类定义对象创建
    JavaScript中的类定义与对象创建1.引言在现代Web开发中，JavaScript已经成为不可或缺的一部分。随着JavaScript的发展，面向对象编程（OOP）的概念也逐渐融入其中。通过定义类和创建对象，可以使代码更加模块化、易于维护和复用。本文将详细介绍如何在JavaScript中定义新类，并创建自定义对象，包括属性和方法的添加。2.构造函数的基础构造函数是一种特殊的函数，主要用于创建和
  • vue 组件中如何引用外部js文件中的变量或者方法 一叶孤舟1990
    相信很多新手小伙伴都会遇到这样一个问题，就是我如何引用一个外部文件中的变量，下面我为大家分享一下解决办法：（如果解决小伙伴的问题，请帮忙给我点个赞吧，谢谢！！！）1，首先自己创建一个js文件放到assets中：map.js2，map.js中代码如下：（data是数组，geoCoordMap是对象，这个因为太长了所以就不展开了）重点：export{//导出多个对象geoCoordMap,data}3
  • JavaScript进阶：探索模块化、ES6+与前端框架 WayneYalejk javascriptes6前端框架
    随着Web技术的快速发展，JavaScript也在不断演进。ES6（ECMAScript2015）及更高版本的发布为JavaScript带来了许多新特性和改进，使得JavaScript更加强大和易用。同时，模块化编程和前端框架的兴起也极大地推动了前端开发的现代化进程。本文将带您深入探索JavaScript的进阶话题，包括模块化、ES6+新特性以及前端框架的应用。1.模块化编程模块化的重要性：解释模
  • 关于Python3绕过指纹识别解决ja3指纹的案例 水兵没月 python
    注意！！！！某XX网站实例仅作为学习案例，禁止其他个人以及团体做谋利用途！！！场景Python采集某网址页面内容aHR0cHM6Ly9jcmVkaXRiai5qeGouYmVpamluZy5nb3YuY24vY3JlZGl0LXBvcnRhbC9jcmVkaXRfc2VydmljZS9wdWJsaWNpdHkvcmVjb3JkL2JsYWNr报错信息requests.exceptions.SSLE
  • JavaScript基本语法（二）——数据类型 OmewSPG
    常用数据类型#ECMAScript有6种简单的数据类型（原始类型）：Undefined，Null，Boolean，Number，String和Symbol（ES6新增Symbol类型的值，在此不会过多涉及）此外还有一种复杂的数据类型：Object在ECMAScript中无法定义自己的数据类型，所有值都必须采用以上七种数据类型之一来进行表示，好在ECMAScript数据类型比较灵活，一种数据类型可以
  • JavaScript 模块化开发完全指南 小李也疯狂 前端技术javascript开发语言ecmascript模块化开发
    目录前言一、模块化的基本概念1.1什么是模块化？1.2为什么需要模块化？二、JavaScript模块化的发展历程2.1早期解决方案2.1.1命名空间模式2.1.2立即执行函数表达式（IIFE）2.2社区规范2.2.1CommonJS2.2.2AMD（AsynchronousModuleDefinition）2.2.3CMD（CommonModuleDefinition）2.3ES6模块（ESM）三
  • Vue 报错error:0308010C:digital envelope routines::unsupported 解决方案 abchuangyoucheng vue.js前端javascript
    Vue报错error:0308010C:digitalenveloperoutines::unsupported解决方案拿了一个比较老的项目部署在本地，然后先安装依赖npminstall,最后npmrunserve,在runserve的时候报错：报错error:0308010C:digitalenveloperoutines::unsupported，出现这个错误是因为node.jsV17版本中最
  • react（基础篇） 盛码笔记 react.jsjavascript前端
    React由Meta公司研发，用于构建Web和原生交互界面的库。React官方中文文档查看JSX（一）React组件用户界面的一部分，通俗的来讲，最小的元素组成的单元，可以实现部分逻辑与功能房子的门就可以看成一个组件，由木板和木方组成，有一定功能和作用，多个组件组合就可以形成房子了。组件之间可以相互嵌套，重复使用React组件React中，组件就是一个首字母大写的函数，内部存放组件的逻辑和视图UI
  • CAN发送JSON数据 摸鱼的小羊 jsonandroidjavascript
    CAN发送JSON数据文章目录CAN发送JSON数据前言一、核心问题与前提1、CAN总线的数据限制2、硬件基础二、实现步骤1.JSON数据的序列化（发送端）2.数据分片（关键步骤）3.CAN帧发送4.接收端处理5.校验与可靠性设计三、硬件与软件选型1.硬件2.软件四、示例代码片段（简化）1.发送端（C语言，基于STM32+cJSON+CAN）2.接收端（重组逻辑）总结1.数据长度优化：2.抗干扰：
  • swiper js无缝滚动---解决播放总是有间隔、动画一闪一跳的问题 StrongerIrene javascript开发语言ecmascript
    搜了很多，没找到解决方案，ai也不知道，那个delay=0也不管用后面自己抓css，发现先设置freemode（可以无限滚动滑的那个）然后会发现他有这个css，把这个改成linear就行了:global(.swiper-free-mode>.swiper-wrapper){transition-timing-function:linear!important;}还有就是得设置宽高、必须设置宽高之后
  • 【Java代码审计 | 第五篇】XSS漏洞成因+实战案例 秋说 Java代码审计javaxss
    未经许可，不得转载。文章目录XSS漏洞成因1、直接输出用户输入2、在JSP中使用EL表达式输出用户输入3、在Thymeleaf模板中输出用户输入4、在JavaScript中嵌入用户输入实战案例案例1案例2案例3XSSXSS（跨站脚本攻击，Cross-SiteScripting）是一种常见的Web安全漏洞，攻击者通过在网页中注入恶意脚本，使得这些脚本在用户的浏览器中执行。XSS攻击通常分为以下三种类
  • 企业SRC漏铜挖掘思路 网络小安 漏洞挖掘网络安全web安全安全
    目录src众测平台信息收集一，先看股权穿透图找到公司的名称二，这些公司对应的是一级域名三，用icp备案进行查找域名域名资产开始挖（抓包拦截）抓包分析js逆向src众测平台国内漏洞平台https://www.anquanke.com/src教育edu漏洞平台https://src.sjtu.edu.cn/提示：记得查看企业SRC的安全漏洞评分标准以及规范edu只打边缘拿证书信息收集爱企查一，先看股权
  • Mac上安装Claude Code的步骤
    以下是基于现有信息的简明安装指南，适用于macOS系统。请按照以下步骤操作：前提条件操作系统：macOS10.15或更高版本。Node.js和npm：ClaudeCode基于Node.js，需安装Node.js18+和npm。请检查是否已安装：打开终端，运行node--version和npm--version。如果未安装，访问Node.js官方网站下载并安装最新LTS版本，或使用Homebrew：
  • 【python】向AWS Dynamodb中插入数据
    一、背景AWSDynamodb数据库在架构中起到的作用是配置数据库，s3上buckect_a-->bucket_b-->bucket_c对应着层与层之间的关系，总所周知，Dynamobd是非关系型数据库，数据插入的格式是键值对形式的二、代码importboto3importjsonimportpandasaspdAWS_ACCESS_KEY_ID=''AWS_SECRET_ACCESS_KEY='
  • Vue.js 全面解析：构建现代前端应用的渐进式框架 斯~内克 vue知识点前端vue.js
    一、Vue.js的核心价值与演进1.1前端框架的变革与Vue的定位根据2024年StateofJS调查报告，Vue.js以82%的开发者满意度稳居前端框架前三甲。其核心优势体现在：渐进式架构：可从轻量级视图层扩展至全栈解决方案响应式系统：基于Proxy的精准依赖追踪（Vue3）组合式API：代码复用率提升60%以上生态系统：覆盖SSR、状态管理、移动端等20+场景1.2版本演进里程碑版本发布时间里
  • SpringDoc 基本使用指南 墨鸦_Cormorant #Spring全家桶springspringdoc
    SpringDoc是基于SpringBoot的现代化API文档生成工具，通过自动化扫描代码和注解，生成符合OpenAPI3.0+规范的交互式文档，并集成SwaggerUI提供可视化测试界面。以下是其核心详解：核心特性与优势开箱即用仅需添加依赖，无需复杂配置即可自动生成文档，支持SpringWebMvc、WebFlux、SpringSecurity及JakartaEE。注解驱动使用JSR-303规范
  • 【华为OD机试真题 2025B卷】153、端口合并 | 机试真题+思路参考+代码解析（C++、Java、Py、C语言、JS） KFickle 最新华为OD机试(C++JavaPyCJS)+OJ华为odc++java华为OD机试真题javascript端口合并
    文章目录一、题目题目描述输入输出样例1样例2样例3二、代码与思路参考C++代码Java代码Python代码C语言代码JS代码订阅本专栏后即可解锁在线OJ刷题权限个人博客首页：KFickle专栏介绍：最新的华为OD机试真题，使用C++，Java，Python，C语言，JS五种语言进行解答，每个题目都包含解题思路，五种语言的解法，每日持续更新中，订阅后支持开通在线OJ测试刷题！！！一次订阅永久享受更新
  • 【华为OD机试真题 2025B卷】154、快递业务站 | 机试真题+思路参考+代码解析（C++、Java、Py、C语言、JS） KFickle 最新华为OD机试(C++JavaPyCJS)+OJ华为odc++java华为OD机试真题快递业务站javascriptc语言
    文章目录一、题目题目描述输入输出样例1样例2二、代码与思路参考C++代码Java代码Python代码C语言代码JS代码订阅本专栏后即可解锁在线OJ刷题权限个人博客首页：KFickle专栏介绍：最新的华为OD机试真题，使用C++，Java，Python，C语言，JS五种语言进行解答，每个题目都包含解题思路，五种语言的解法，每日持续更新中，订阅后支持开通在线OJ测试刷题！！！一次订阅永久享受更新，有代
  • 【华为OD机试真题 2025B卷】152、积木最远距离 | 机试真题+思路参考+代码解析（C++、Java、Py、C语言、JS） KFickle 最新华为OD机试(C++JavaPyCJS)+OJ华为odc++java华为OD机试真题积木最远距离javascriptc语言
    文章目录一、题目题目描述输入输出样例1样例2二、代码与思路参考C++代码Java代码Python代码C语言代码JS代码订阅本专栏后即可解锁在线OJ刷题权限个人博客首页：KFickle专栏介绍：最新的华为OD机试真题，使用C++，Java，Python，C语言，JS五种语言进行解答，每个题目都包含解题思路，五种语言的解法，每日持续更新中，订阅后支持开通在线OJ测试刷题！！！一次订阅永久享受更新，有代
  • 【华为OD机试真题 2025B卷】150、对称美学 | 机试真题+思路参考+代码解析（C++、Java、Py、C语言、JS） KFickle 最新华为OD机试(C++JavaPyCJS)+OJ华为odc++javajavascript华为OD机试真题对称美学
    文章目录一、题目题目描述输入输出样例1样例2二、代码与思路参考C++代码Java代码Python代码C语言代码JS代码订阅本专栏后即可解锁在线OJ刷题权限个人博客首页：KFickle专栏介绍：最新的华为OD机试真题，使用C++，Java，Python，C语言，JS五种语言进行解答，每个题目都包含解题思路，五种语言的解法，每日持续更新中，订阅后支持开通在线OJ测试刷题！！！一次订阅永久享受更新，有代
  • 【华为OD机试真题 2025B卷】149、区间交叠问题 | 机试真题+思路参考+代码解析（C++、Java、Py、C语言、JS） KFickle 最新华为OD机试(C++JavaPyCJS)+OJ华为odc++java华为OD机试真题javascript最大平分数组
    文章目录一、题目题目描述输入输出样例1样例2二、代码与思路参考C++代码Java代码Python代码C语言代码JS代码订阅本专栏后即可解锁在线OJ刷题权限个人博客首页：KFickle专栏介绍：最新的华为OD机试真题，使用C++，Java，Python，C语言，JS五种语言进行解答，每个题目都包含解题思路，五种语言的解法，每日持续更新中，订阅后支持开通在线OJ测试刷题！！！一次订阅永久享受更新，有代
  • 【华为OD机试真题 2025B卷】147、连接器问题 | 机试真题+思路参考+代码解析（C++、Java、Py、C语言、JS） KFickle 最新华为OD机试(C++JavaPyCJS)+OJ华为odc++java华为OD机试真题javascriptc语言连接器问题
    文章目录一、题目题目描述输入输出样例1样例2二、代码与思路参考C++代码Java代码Python代码C语言代码JS代码订阅本专栏后即可解锁在线OJ刷题权限个人博客首页：KFickle专栏介绍：最新的华为OD机试真题，使用C++，Java，Python，C语言，JS五种语言进行解答，每个题目都包含解题思路，五种语言的解法，每日持续更新中，订阅后支持开通在线OJ测试刷题！！！一次订阅永久享受更新，有代
  • 【华为OD机试真题 2025B卷】145、无向图染色 | 机试真题+思路参考+代码解析（C++、Java、Py、C语言、JS） KFickle 最新华为OD机试(C++JavaPyCJS)+OJ华为odc++javac语言华为OD机试真题无向图染色
    文章目录一、题目题目描述输入输出样例1样例2二、代码与思路参考C++代码Java代码Python代码C语言代码JS代码订阅本专栏后即可解锁在线OJ刷题权限个人博客首页：KFickle专栏介绍：最新的华为OD机试真题，使用C++，Java，Python，C语言，JS五种语言进行解答，每个题目都包含解题思路，五种语言的解法，每日持续更新中，订阅后支持开通在线OJ测试刷题！！！一次订阅永久享受更新，有代
  • 【华为OD机试真题 2025B卷】140、不含101的数 | 机试真题+思路参考+代码解析（C++、Java、Py、C语言、JS） KFickle 最新华为OD机试(C++JavaPyCJS)+OJ华为odc++java华为OD机试真题javascript不含101的数c语言
    文章目录一、题目题目描述输入输出样例1样例2二、代码与思路参考C++代码Java代码Python代码C语言代码JS代码订阅本专栏后即可解锁在线OJ刷题权限个人博客首页：KFickle专栏介绍：最新的华为OD机试真题，使用C++，Java，Python，C语言，JS五种语言进行解答，每个题目都包含解题思路，五种语言的解法，每日持续更新中，订阅后支持开通在线OJ测试刷题！！！一次订阅永久享受更新，有代
  • 【华为OD机试真题 2025B卷】135、采样过滤 | 机试真题+思路参考+代码解析（C++、Java、Py、C语言、JS） KFickle 最新华为OD机试(C++JavaPyCJS)+OJ华为odc++java华为OD机试真题javascriptc语言采样过滤
    文章目录一、题目题目描述输入输出样例1二、代码与思路参考C++代码Java代码Python代码C语言代码JS代码订阅本专栏后即可解锁在线OJ刷题权限个人博客首页：KFickle专栏介绍：最新的华为OD机试真题，使用C++，Java，Python，C语言，JS五种语言进行解答，每个题目都包含解题思路，五种语言的解法，每日持续更新中，订阅后支持开通在线OJ测试刷题！！！一次订阅永久享受更新，有代码问题
  • mongodb3.03开启认证 21jhf mongodb
    下载了最新mongodb3.03版本，当使用--auth 参数命令行开启mongodb用户认证时遇到很多问题，现总结如下： （百度上搜到的基本都是老版本的，看到db.addUser的就是，请忽略） Windows下我做了一个bat文件，用来启动mongodb，命令行如下： mongod --dbpath db\data --port 27017 --directoryperdb --logp
  • 【Spark103】Task not serializable bit1129 Serializable
    Task not serializable是Spark开发过程最令人头疼的问题之一，这里记录下出现这个问题的两个实例，一个是自己遇到的，另一个是stackoverflow上看到。等有时间了再仔细探究出现Task not serialiazable的各种原因以及出现问题后如何快速定位问题的所在，至少目前阶段碰到此类问题，没有什么章法 1.   package spark.exampl
  • 你所熟知的 LRU(最近最少使用) dalan_123 java
    关于LRU这个名词在很多地方或听说，或使用，接下来看下lru缓存回收的实现 1、大体的想法     a、查询出最近最晚使用的项     b、给最近的使用的项做标记 通过使用链表就可以完成这两个操作，关于最近最少使用的项只需要返回链表的尾部；标记最近使用的项，只需要将该项移除并放置到头部，那么难点就出现 你如何能够快速在链表定位对应的该项？ 这时候多
  • Javascript 跨域 周凡杨 JavaScriptjsonp跨域cross-domain
                                       
  • linux下安装apache服务器 g21121 apache
    安装apache 下载windows版本apache，下载地址：http://httpd.apache.org/download.cgi   1.windows下安装apache Windows下安装apache比较简单，注意选择路径和端口即可，这里就不再赘述了。 2.linux下安装apache： 下载之后上传到linux的相关目录，这里指定为/home/apach
  • FineReport的JS编辑框和URL地址栏语法简介 老A不折腾 finereportweb报表报表软件语法总结
      JS编辑框： 1.FineReport的js。 作为一款BS产品，browser端的JavaScript是必不可少的。 FineReport中的js是已经调用了finereport.js的。 大家知道，预览报表时，报表servlet会将cpt模板转为html，在这个html的head头部中会引入FineReport的js，这个finereport.js中包含了许多内置的fun
  • 根据STATUS信息对MySQL进行优化 墙头上一根草 status
    mysql  查看当前正在执行的操作，即正在执行的sql语句的方法为:      show processlist 命令   mysql> show global status;可以列出MySQL服务器运行各种状态值，我个人较喜欢的用法是show status like '查询值%';一、慢查询mysql> show variab
  • 我的spring学习笔记7-Spring的Bean配置文件给Bean定义别名 aijuans Spring 3
    本文介绍如何给Spring的Bean配置文件的Bean定义别名？ 原始的 <bean id="business" class="onlyfun.caterpillar.device.Business"> <property name="writer"> <ref b
  • 高性能mysql 之 性能剖析 annan211 性能mysqlmysql 性能剖析剖析
    1 定义性能优化 mysql服务器性能，此处定义为 响应时间。 在解释性能优化之前，先来消除一个误解，很多人认为，性能优化就是降低cpu的利用率或者减少对资源的使用。 这是一个陷阱。 资源时用来消耗并用来工作的，所以有时候消耗更多的资源能够加快查询速度，保持cpu忙绿，这是必要的。很多时候发现 编译进了新版本的InnoDB之后，cpu利用率上升的很厉害，这并不
  • 主外键和索引唯一性约束 百合不是茶 索引唯一性约束主外键约束联机删除
    目标;第一步;创建两张表 用户表和文章表         第二步;发表文章       1,建表; ---用户表 BlogUsers --userID唯一的 --userName --pwd --sex create
  • 线程的调度 bijian1013 java多线程thread线程的调度java多线程
    1.       Java提供一个线程调度程序来监控程序中启动后进入可运行状态的所有线程。线程调度程序按照线程的优先级决定应调度哪些线程来执行。   2.       多数线程的调度是抢占式的（即我想中断程序运行就中断，不需要和将被中断的程序协商） a) 
  • 查看日志常用命令 bijian1013 linux命令unix
    一.日志查找方法，可以用通配符查某台主机上的所有服务器grep "关键字" /wls/applogs/custom-*/error.log   二.查看日志常用命令1.grep '关键字' error.log：在error.log中搜索'关键字'2.grep -C10 '关键字' error.log：显示关键字前后10行记录3.grep '关键字' error.l
  • 【持久化框架MyBatis3一】MyBatis版HelloWorld bit1129 helloworld
    MyBatis这个系列的文章，主要参考《Java Persistence with MyBatis 3》。   样例数据 本文以MySQL数据库为例，建立一个STUDENTS表，插入两条数据，然后进行单表的增删改查     CREATE TABLE STUDENTS ( stud_id int(11) NOT NULL AUTO_INCREMENT,
  • 【Hadoop十五】Hadoop Counter bit1129 hadoop
       1. 只有Map任务的Map Reduce Job File System Counters FILE: Number of bytes read=3629530 FILE: Number of bytes written=98312 FILE: Number of read operations=0 FILE: Number of lar
  • 解决Tomcat数据连接池无法释放 ronin47 tomcat 连接池　优化
    近段时间，公司的检测中心报表系统(SMC)的开发人员时不时找到我，说用户老是出现无法登录的情况。前些日子因为手头上 有Jboss集群的测试工作，发现用户不能登录时，都是在Tomcat中将这个项目Reload一下就好了，不过只是治标而已，因为大概几个小时之后又会 再次出现无法登录的情况。 今天上午，开发人员小毛又找到我，要我协助将这个问题根治一下，拖太久用户难保不投诉。 简单分析了一
  • java-75-二叉树两结点的最低共同父结点 bylijinnan java
    import java.util.LinkedList; import java.util.List; import ljn.help.*; public class BTreeLowestParentOfTwoNodes { public static void main(String[] args) { /* * node data is stored in
  • 行业垂直搜索引擎网页抓取项目 carlwu LuceneNutchHeritrixSolr
    公司有一个搜索引擎项目，希望各路高人有空来帮忙指导，谢谢！ 这是详细需求： （1） 通过提供的网站地址(大概100-200个网站)，网页抓取程序能不断抓取网页和其它类型的文件（如Excel、PDF、Word、ppt及zip类型），并且程序能够根据事先提供的规则，过滤掉不相干的下载内容。 （2） 程序能够搜索这些抓取的内容，并能对这些抓取文件按照油田名进行分类，然后放到服务器不同的目录中。
  • [通讯与服务]在总带宽资源没有大幅增加之前,不适宜大幅度降低资费 comsci 资源
          降低通讯服务资费，就意味着有更多的用户进入，就意味着通讯服务提供商要接待和服务更多的用户，在总体运维成本没有由于技术升级而大幅下降的情况下，这种降低资费的行为将导致每个用户的平均带宽不断下降，而享受到的服务质量也在下降，这对用户和服务商都是不利的。。。。。。。。     &nbs
  • Java时区转换及时间格式 Cwind java
    本文介绍Java API 中 Date, Calendar, TimeZone和DateFormat的使用，以及不同时区时间相互转化的方法和原理。   问题描述： 向处于不同时区的服务器发请求时需要考虑时区转换的问题。譬如，服务器位于东八区（北京时间，GMT+8:00），而身处东四区的用户想要查询当天的销售记录。则需把东四区的“今天”这个时间范围转换为服务器所在时区的时间范围。
  • readonly,只读，不可用 dashuaifu jsjspdisablereadOnlyreadOnly
    readOnly 和 readonly 不同，在做js开发时一定要注意函数大小写和jsp黄线的警告！！！我就经历过这么一件事： 使用readOnly在某些浏览器或同一浏览器不同版本有的可以实现“只读”功能，有的就不行，而且函数readOnly有黄线警告！！！就这样被折磨了不短时间！！！（期间使用过disable函数，但是发现disable函数之后后台接收不到前台的的数据！！！）  
  • LABjs、RequireJS、SeaJS 介绍 dcj3sjt126com jsWeb
    LABjs 的核心是 LAB（Loading and Blocking）：Loading 指异步并行加载，Blocking 是指同步等待执行。LABjs 通过优雅的语法（script 和 wait）实现了这两大特性，核心价值是性能优化。LABjs 是一个文件加载器。RequireJS 和 SeaJS 则是模块加载器，倡导的是一种模块化开发理念，核心价值是让 JavaScript 的模块化开发变得更
  • [应用结构]入口脚本 dcj3sjt126com PHPyii2
    入口脚本 入口脚本是应用启动流程中的第一环，一个应用（不管是网页应用还是控制台应用）只有一个入口脚本。终端用户的请求通过入口脚本实例化应用并将将请求转发到应用。 Web 应用的入口脚本必须放在终端用户能够访问的目录下，通常命名为 index.php，也可以使用 Web 服务器能定位到的其他名称。 控制台应用的入口脚本一般在应用根目录下命名为 yii（后缀为.php），该文
  • haoop shell命令 eksliang hadoophadoop shell
    cat chgrp chmod chown copyFromLocal copyToLocal cp du dus expunge get getmerge ls lsr mkdir movefromLocal mv put rm rmr setrep stat tail test text
  • MultiStateView不同的状态下显示不同的界面 gundumw100 android
    只要将指定的view放在该控件里面，可以该view在不同的状态下显示不同的界面，这对ListView很有用，比如加载界面，空白界面，错误界面。而且这些见面由你指定布局，非常灵活。 PS：ListView虽然可以设置一个EmptyView，但使用起来不方便，不灵活，有点累赘。 <com.kennyc.view.MultiStateView xmlns:android=&qu
  • jQuery实现页面内锚点平滑跳转 ini JavaScripthtmljqueryhtml5css
    平时我们做导航滚动到内容都是通过锚点来做，刷的一下就直接跳到内容了，没有一丝的滚动效果，而且 url 链接最后会有“小尾巴”，就像#keleyi，今天我就介绍一款 jquery 做的滚动的特效，既可以设置滚动速度，又可以在 url 链接上没有“小尾巴”。   效果体验：http://keleyi.com/keleyi/phtml/jqtexiao/37.htmHTML文件代码： &
  • kafka offset迁移 kane_xie kafka
    在早前的kafka版本中（0.8.0），offset是被存储在zookeeper中的。   到当前版本（0.8.2）为止，kafka同时支持offset存储在zookeeper和offset manager（broker）中。   从官方的说明来看，未来offset的zookeeper存储将会被弃用。因此现有的基于kafka的项目如果今后计划保持更新的话，可以考虑在合适
  • android > 搭建 cordova 环境 mft8899 android
      1 , 安装 node.js        http://nodejs.org      node -v   查看版本   2, 安装 npm   可以先从  https://github.com/isaacs/npm/tags  下载 源码 解压到
  • java封装的比较器，比较是否全相同，获取不同字段名字 qifeifei
     非常实用的java比较器，贴上代码： import java.util.HashSet; import java.util.List; import java.util.Set; import net.sf.json.JSONArray; import net.sf.json.JSONObject; import net.sf.json.JsonConfig; i
  • 记录一些函数用法 .Aky. 位运算PHP数据库函数IP
    高手们照旧忽略。 想弄个全天朝IP段数据库，找了个今天最新更新的国内所有运营商IP段，copy到文件，用文件函数，字符串函数把玩下。分割出startIp和endIp这样格式写入.txt文件，直接用phpmyadmin导入.csv文件的形式导入。（生命在于折腾，也许你们觉得我傻X，直接下载人家弄好的导入不就可以，做自己的菜鸟，让别人去说吧） 当然用到了ip2long()函数把字符串转为整型数
  • sublime text 3 rust wudixiaotie Sublime Text
    1.sublime text 3 => install package => Rust 2.cd ~/.config/sublime-text-3/Packages 3.mkdir rust 4.git clone https://github.com/sp0/rust-style 5.cd rust-style 6.cargo build --release 7.ctrl
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他