a_fafafa
a_fafafa

JavaScript模态框显示、隐藏、拖拽效果的实现

实现效果
1、点击登录按钮，模态框显示
2、点击关闭按钮，模态框隐藏
3、在指定可拖拽位置按下鼠标，模态框可跟随鼠标移动
4、松开鼠标，模态框停留在原地

DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			a{
				text-decoration: none;
				color:#000;
			}
			.login-header{
				text-align: center;
				font-size: 25px;
				width: 400px;
				height: 50px;
				line-height: 50px;
				margin: 10px auto;
				border: #ccc 2px solid;
				border-radius: 15px;
				background-color:#ebebeb;
			}
			.login{
				display: none;
				width: 512px;
				height: 280px;
				position: fixed;
				border: #ebebeb solid 1px;
				border-radius: 10px;
				left: 50%;
				top: 50%;
				background-color: #fff;
				box-shadow: 0px 0px 20px #ddd;
				z-index: 9999;
				transform: translate(-50%,-50%);
			}
			.login-title{
				text-align: center;
				margin: 20px auto;
				width: 100%;
				height: 40px;
				font-size: 20px;
				font-weight: 600;
				position: relative;
				cursor: move;
			}
			.login-input-content{
				margin-top: 20px;
			}
			.login-button{
				position: absolute;
				left:25%;
				bottom:0;
				width: 50%;
				height: 40px;
				margin: 30px auto ;
				line-height: 40px;
				font-size: 14px;
				border: #ccc 2px solid;
				text-align: center;
				border-radius: 5px;
			}
			.login-bg{
				display: none;
				text-align: center;
				width: 100%;
				height: 100%;
				position: fixed;
				top: 0;
				left: 0;
				background-color: rgba(0,0,0,.1);
			}
			.login-button a{
				display: block;
			}
			.login-input input.list-input{
				margin-bottom: 20px;
				float: left;
				line-height: 35px;
				width: 350px;
				height: 35px;
				border: #ccc 1px solid;
				text-indent: 5px;
				border-radius: 5px;
			}
			.login-input label{
				float: left;
				width: 90px;
				padding-right: 10px;
				text-align: right;
				line-height: 35px;
				height: 35px;
				font-size: 16px;
			}
			.login-title span{
				position: absolute;
				font-size: 12px;
				right: -20px;
				top: -40px;
				background-color: #fff;
				border: #ebebeb solid 1px;
				width: 40px;
				height: 40px;
				text-align: center;
				line-height: 40px;
				border-radius: 20px;
				font-weight: 400;
			}
		style>
	head>
	<body>
		<div class="login-header"><a id="link" href="javascript:;">点击，弹出登录框a>div>
		<div class="login" id="login">
			<div id="title" class="login-title">
				登录会员<span><a href="javascript:void(0);" id="closeBtn" class="close-login">关闭a>span>
			div>
			<div class="login-input">
				<div class="login-input-content">
					<label>用户名：label>
					<input type="text" placeholder="请输入用户名" name="info[username]" id="username" value="" class="list-input"/>
				div>
				<div class="login-input-content">
					<label>密码：label>
					<input type="password" placeholder="请输入登录密码" name="info[password]" id="password" value="" class="list-input"/>
				div>
			div>
			
			<div class="login-button" id="loginBtn">
				<a href="javascript:void(0);" id="login-button-submit" class="login-button-submit">登录会员a>
			div>
		div>
		<div id="bg" class="login-bg">div>
		<script type="text/javascript">
		// 1、获取元素
			var login = document.querySelector('.login');
			var mask = document.querySelector('.login-bg');
			var link = document.querySelector('#link');
			var closeBtn = document.querySelector('#closeBtn');
			var title = document.querySelector('#title');
		// 2、点击弹出这个链接 link 让mask 和login 显示出来
			link.addEventListener('click',function(){
				mask.style.display = 'block';
				login.style.display = 'block';
			})
		// 3、点击closeBtn 隐藏login 和mask
			closeBtn.addEventListener('click',function(){
				mask.style.display = 'none';
				login.style.display = 'none';
			})
		// 4、开始拖拽 
		// (1)当鼠标按下，就获得鼠标在盒子内在坐标
			title.addEventListener('mousedown',function(e){
				var x = e.pageX - login.offsetLeft;
				var y = e.pageY - login.offsetTop;
		// (2)鼠标移动的时候，把鼠标在页面中的坐标减去鼠标在盒子中的坐标，就是模态框left和top的值
				document.addEventListener('mousemove',move);
				function move(e){
					login.style.left =  e.pageX - x + 'px';
					login.style.top =  e.pageY - y + 'px';
				}
		// (3)鼠标弹起，就让鼠标事件移除
				document.addEventListener('mouseup',function(){
					document.removeEventListener('mousemove',move);
				})
			})
		script>
	body>
html>

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

  • Node.js日志记录新篇章：morgan中间件的使用与优势 真想骂* node.js中间件
    在Node.js的广阔生态系统中，日志记录是开发过程中不可或缺的一部分。它不仅有助于开发者追踪应用程序的运行状态，还能在出现问题时提供宝贵的调试信息。而在众多日志记录工具中，Morgan以其高效、易用和专注于HTTP请求日志的特点，成为了Node.js开发者中的热门选择。本文将深入探讨Morgan中间件的使用方法与优势，为Node.js日志记录翻开新的篇章。一、Morgan中间件简介Morgan是
  • 如何在Next.js使用Blitz.js的功能
    如何在Next.js使用Blitz.js的功能前言大家好，我是倔强青铜三。是一名热情的软件工程师，我热衷于分享和传播IT技术，致力于通过我的知识和技能推动技术交流与创新，欢迎关注我，微信公众号：倔强青铜三。欢迎点赞、收藏、关注，一键三连！！！@blitzjs/next@blitzjs/next适配器公开了特定于Next.js框架的函数和组件。概览@blitzjs/next适配器公开了特定于Next
  • 统计项目代码行数的实用工具cloc，简单易上手 柠檬编程工作室 运维Linux运维
    是的，cloc是一个流行的工具，用于统计代码行数，支持多种语言，能够快速计算源代码文件中的行数、注释行数和空白行数。你可以在Mac和Ubuntu上使用npm安装它，但其实cloc并不是通过npm来安装的，它更常见的是通过包管理工具如apt或brew来安装。方法1：通过npm安装（适用于Node.js环境）如果你使用Node.js，并且希望通过npm安装cloc，可以使用以下命令：npminstal
  • js常用函数整理 代码简单说 javascriptVue3源码解析javascriptjs函数函数整理
    常用函数获取十六进制随机颜色functiongetRandomColor(){return'#'+(function(h){returnne
  • 前端常见的多种正则验证方法以及js判断语法 前端-文龙刚 JavascriptVue正则表达式vue.jsjavascript
    1.邮箱exportconstisEmail=(s)=>{return/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/.test(s)}2.手机号码exportconstisMobile=(s)=>{return/^1[0-9]{10}$/.test(s)}3.电话号码exportconstisPhone=(s)=>
  • depcheck 检查项目中依赖的使用情况 避免幽灵依赖的产生 沉迷... 前端前端
    depcheck检查项目中依赖的使用情况避免幽灵依赖的产生什么是幽灵依赖(幻影依赖)形成原因幽灵依赖是指node_modules中存在而package.json中没有声明过的依赖但却能够在项目的依赖树中找到并使用的模块Node.js的模块解析规则：Node.js采用了一种非传统的模块加载机制，允许模块在其父目录以及祖先目录的node_modules目录中查找依赖。当两个或更多的直接依赖间接依赖同一
  • element-plus select 滚动加载更多 日积一沙 javascript
    思路：监听select下拉面板的滚动事件，滚动到底部时，调用接口加载更多数据一、自定义指令importtype{Directive,DirectiveBinding}from"vue";interfaceElTypeextendsHTMLElement{copyData:string|number;__handleClick__:any;}constloadmore:Directive={moun
  • ASP.NET Core Blazor编程系列: 使用JWT进行身份验证 沉静湖面 asp.net后端.NET
    在ASP.NETCoreBlazor应用程序中实现身份验证是一个常见的需求。JSONWebToken（JWT）是一种流行的身份验证机制，它可以在客户端和服务器之间安全地传输信息。本文将介绍如何在ASP.NETCoreBlazor应用程序中使用JWT进行身份验证。什么是JWT？JSONWebToken（JWT）是一种开放标准（RFC7519），它定义了一种紧凑且自包含的方式来安全地在各方之间传输信息
  • 解决elementui的dialog对话框过高会被拖动的bug _best 前端elementuivue.jsjavascript
    在使用elementUI过程中，当dialog对话元素过多长处浏览器高度是，点击标题就会跳成如下图这样，上方会被遮挡且无法拖动上去：解决方法是通过设置css固定top及left禁止拖动，核心css代码：/deep/.el-dialog{top:15%!important;left:0!important;}
  • 项目总结：vue.js2.5饿了么APP（4）主要组件实现 - 购物车相关组件（下） 小白Rachel 饿了么Vue项目总结vuejs
    说明：本总结来源于慕课网@ustbhuangyi老师的课程《Vue.js2.5+cube-ui重构饿了么App》课程，本博客做了项目总结梳理便于回顾，需要学习的伙伴可以移步学习。与君共勉！之前章节传送：项目总结：vue.js2.5饿了么APP（1）概述+项目准备项目总结：vue.js2.5饿了么APP（2）主要组件实现-头部相关组件项目总结：vue.js2.5饿了么APP（3）主要组件实现-购物车
  • vue el-table 行内拖拽 Sunny vueelementel-tablevue
    1.安装Sortable.jsnpminstallsortablejs--save2.在页面中引入：importSortablefrom‘sortablejs’-->mounted调用mounted(){this.rowDrop();},methods:{//行内拖拽rowDrop(){//此时找到的元素是要拖拽元素的父容器consttbody=document.querySelector(".e
  • Flask框架-Python系列（一）—— 基础入门（flask库安装及简单使用） 云霄IT python库教程pythonflask后端
    目录一、flask库安装二、简单使用三、前端返回类型设置（一）返回文本类型（二）返回json类型（三）重定向到另一路由（四）返回html类型，嵌入js,css,image等内容（一）py文件（二）html文件写法（三）静态目录结构四、静态资源路径修改五、实现提供文件下载一、flask库安装pipinstallflask二、简单使用fromflaskimportFlask,requestapp=Fl
  • （11）C#使用SunnyUI界面库的两个问题 caimouse C#入门到精通c#
    从界面上看到还是比较漂亮的，如下图：不过在使用的过程中发现有两个问题：一个是\SunnyUI\Units\UJson.cs的编译，这个要选择对的引用文件才可以成功编译，如果编译不过，可以引用下面的：C:\ProgramFiles\ReferenceAssemblies\Microsoft\Framework\v3.5\System.Web.Extensions.dll这样可以解决高版本不存在Sys
  • Three.js实战项目02：vue3+three.js实现汽车展厅项目 叁拾舞 ThreeJsthree.jsVue3
    文章目录实战项目02项目预览项目创建初始化项目模型加载与展厅灯光加载汽车模型设置灯光材质设置完整项目下载实战项目02项目预览完整项目效果：项目创建创建项目：pnpmcreatevue安装包：[email protected]初始化项目修改App.js代码&#x
  • Spring AI 更新：支持OpenAI的结构化输出，增强对JSON响应的支持 java后端
    就在昨晚，SpringAI发了个比较重要的更新。由于最近OpenAI推出了结构化输出的功能，可确保AI生成的响应严格遵守预定义的JSON模式。此功能显着提高了人工智能生成内容在现实应用中的可靠性和可用性。SpringAI紧随其后，现在也可以对OpenAI的结构化输出完美支持了。下图展示了本次扩展的实现结构，如果对于当前实现还不够满意，需要扩展的可以根据此图来着手理解分析进行下一步扩展工作。使用样例
  • JAVA 安装教程 连云港大帅哥 java基础javajdk安装配置环境变量
    下载官网地址：http://www.oracle.com/technetwork/java/javase/downloads/index.html，选择1.8版本jdk进行下载安装JDK直接运行exe可执行程序，默认安装即可；备注：路径可以自己定义，不建议路径包含中文名、特殊符号、空格。配置环境变量1）新建变量名：JAVA_HOME，变量值：D:\Java8(JDK安装路径)；2）打开PATH，添
  • Vue.js组件开发-Vue实现上传word模版打印设置自定义样式和布局 LCG元 前端vue.jsword前端
    要使用Vue实现上传Word模板、打印并设置自定义样式和布局，可以借助一些工具和库来完成这个任务。实现步骤创建Vue项目：使用VueCLI创建一个新的Vue项目。安装依赖：安装docx-templates库来处理Word模板，file-saver库用于保存生成的Word文件。创建上传组件：在Vue组件中添加文件上传功能。处理Word模板：使用docx-templates库加载并处理Word模板。设
  • transformer.js（二）：关于pipe管道的一切 余生H 前端的AI工具书transformerjavascript深度学习webmlwebAI前端
    前面的章节transformer.js（一）：这个前端大模型运行框架的可运行环境、使用方式、代码示例以及适合与不适合的场景介绍了transformer.js的应用场景。pipe管道（Pipeline）作为Transformer.js的核心功能之一，负责简化各种常见的NLP任务，例如文本生成、翻译、分类等，本文将详细介绍：从它的概念、实现到实际使用场景，帮助开发者全面掌握这一功能。什么是Pipe管道
  • transformer.js（一）：这个前端大模型运行框架的可运行环境、使用方式、代码示例以及适合与不适合的场景 余生H 前端的AI工具书前端transformerjavascripthugginfacewebmlweb大模型
    随着大模型的广泛应用，越来越多的开发者希望在前端直接运行机器学习模型，从而减少对后端的依赖，并提升用户体验。Transformer.js是一个专为前端环境设计的框架，它支持运行基于Transformer架构的深度学习模型，尤其是像BERT、GPT等广泛应用于自然语言处理（NLP）的模型。本文将全面解析Transformer.js的运行环境、使用方式、代码示例，以及其能够完成的功能与目前的限制，帮助
  • 读书笔记-你不知道的js(中卷) 道甚夷 js陷阱前端原理javascript前端开发语言
    类型值和类型js中的变量是没有类型的，只有值才有。undefined和undeclared是不同的，前者是已经申明但没赋值，后者是未定义。varaa//undefinedb//ReferenceError:bisnotdefined报错varatypeofa//undefinedtypeofb//undefined不会报错，typeof有安全机制写polyfill有用数组delete数组单元后，数
  • 【大语言模型LangChain】 ModelsIO OutputParsers详解 敲代码敲到头发茂密 人工智能测试开发语言模型langchainandroid人工智能python
    【大语言模型LangChain】ModelsIOOutputParsers详解一、简介二、OutputParsers的优势三、解析器类型四、实战示例1、String解析器2、Json解析器3、Pydantic解析器4、结构化输出解析器5、OpenAI函数输出解析器5.1、JsonOutputFunctionsParser5.2、JsonKeyOutputFunctionsParser5.3、Pyd
  • ThreeJS实现波纹粒子效果 weixin_30500473 javascriptViewUI
    今天我们来用ThreeJS的库实现一个波纹粒子效果，我们用到的ThreeJS的库有CanvasRenderer.js，OrbitControls.js，Projector.js，stats.min.js和three.js。这些库都是不可或缺的，我们先来看看实现的效果，如下图所示。我们再来看看项目结构是怎么样的，项目结构如下图所示。我们的效果全部写在了index.html里，现在我们直接贴出inde
  • 【开发日记】记一次使用uniapp实现音视频通话打包的问题 二饭 开发日记uni-app音视频
    问题描述在开发过程中使用真机调试，音视频通话都是没有问题的。问题出在打包成apk后却无法获取音视频流数据了，提示的是摄像头获取错误。问题排查之前在调试的时候用的都是uniapp官方的标准基座，所以此时manifest.json文件中的模块配置是不生效的，生效的一直只要权限部分，所以导致了这次问题。由于是在获取摄像头视频流数据时发生的错误，所以一直的排查范围也是摄像头的问题，检查了摄像头权限、摄像头
  • linux naive代理设置 CrxzYia 服务器
    naivelinux客户端Releasev132.0.6834.79-2·klzgrad/naiveproxy·GitHubClientsetupRun./naivewiththefollowingconfig.jsontogetaSOCKS5proxyatlocalport1080.{"listen":"socks://127.0.0.1:1080","proxy":"https://user:
  • 利用 Three.js 实现 3D 粒子正方体效果 软件工程师文艺 前端javascript3d开发语言
    在这篇文章中，我将向大家展示如何使用Three.js创建一个带有粒子的3D正方体效果。通过这段代码，我们将能够在浏览器中渲染一个3D正方体形状，并且该正方体内部填充了大量粒子（可视化效果）。你可以通过鼠标控制视角，查看旋转的正方体。实现效果视频如下：这不是特效，代码实现的宇宙魔方的粒子世界一、项目概述我们使用了Three.js，一个强大的JavaScript3D图形库，来创建和渲染这个3D场景。这
  • 破解浏览器渲染“死锁”：CSS与JS如何影响页面加载速度？ dorabighead 前端八股总结cssjavascript前端
    破解浏览器渲染“死锁”：CSS与JS如何影响页面加载速度？在这个快速发展的Web世界里，性能是开发者们永恒的追求。当你打开一个网页，可能会注意到一些页面加载特别慢，甚至产生短暂的“白屏”，你有没有想过，CSS和JS如何在这个过程中起到了关键作用？今天，我们要揭秘浏览器渲染流程中的一个关键问题：CSS和JS的加载与执行是否会阻塞渲染？准备好了吗？跟着我一起，从浏览器如何渲染页面开始，逐步深入探索这背
  • HTML `＜head＞` 元素详解 浪浪山小白兔 html前端
    在HTML文档中，元素是一个非常重要的部分，它包含了文档的元数据（metadata）和其他与文档相关的信息。虽然中的内容不会直接显示在网页上，但它对网页的行为、样式和搜索引擎优化（SEO）有着至关重要的影响。本文将详细介绍元素及其常见子元素的使用方法，并通过丰富的示例帮助你更好地理解和应用。1.元素概述元素是HTML文档的头部部分，位于标签内，标签之前。它主要用于定义文档的元数据、链接外部资源、设
  • 深入理解 HTML DOM：文档对象模型详解 浪浪山小白兔 html前端
    在前端开发中，HTMLDOM（文档对象模型，DocumentObjectModel）是一个非常重要的概念。它是浏览器将HTML文档解析为一个树形结构的方式，开发者可以通过JavaScript动态地访问和操作文档的内容、结构和样式。本文将详细介绍HTMLDOM的核心概念、功能以及实际应用。1.什么是HTMLDOM？HTMLDOM是浏览器将HTML文档解析为一个树形结构的编程接口。它将文档中的每个部分
  • css粒子效果 HainesFreeman css前端html
    htmlcss:body{height:100vh;background:radial-gradient(ellipseatbottom,#1b27350%,#090a0f100%);overflow:hidden;filter:drop-shadow(0010pxwhite);}@functionrandom_range($min,$max){$rand:random();$random_ran
  • html文字旋转以后变形,关于css:CSS3中的变形处理transform功能旋转缩放倾斜移动 weixin_39974958 html文字旋转以后变形
    1transform属性在CSS3中，能够利用transform性能实现文字或图像的旋转、缩放、歪斜、挪动这4中类型的变形解决。(1)浏览器反对到目前为止：Safari3.1以上、Chrome8以上、Firefox4以上、Opera10以上浏览器反对该属性。2旋转应用rotate办法，在参数中退出角度值，角度值前面跟示意角度单位的“deg”文字即可，旋转方向为顺时针方向。transform：rot
  • [星球大战]阿纳金的背叛 comsci
          本来杰迪圣殿的长老是不同意让阿纳金接受训练的.........     但是由于政治原因,长老会妥协了...这给邪恶的力量带来了机会     所以......现代的地球联邦接受了这个教训...绝对不让某些年轻人进入学院    
  • 看懂它，你就可以任性的玩耍了！ aijuans JavaScript
              javascript作为前端开发的标配技能，如果不掌握好它的三大特点：1.原型 2.作用域 3. 闭包 ,又怎么可以说你学好了这门语言呢？如果标配的技能都没有撑握好，怎么可以任性的玩耍呢？怎么验证自己学好了以上三个基本点呢，我找到一段不错的代码，稍加改动，如果能够读懂它，那么你就可以任性了。 function jClass(b
  • Java常用工具包 Jodd Kai_Ge javajodd
    Jodd 是一个开源的 Java 工具集， 包含一些实用的工具类和小型框架。简单，却很强大！ 写道 Jodd = Tools + IoC + MVC + DB + AOP + TX + JSON + HTML < 1.5 Mb Jodd 被分成众多模块，按需选择，其中 工具类模块有： jodd-core    &nb
  • SpringMvc下载 120153216 springMVC
    @RequestMapping(value = WebUrlConstant.DOWNLOAD) public void download(HttpServletRequest request,HttpServletResponse response,String fileName) { OutputStream os = null; InputStream is = null;
  • Python 标准异常总结 2002wmj python
    Python标准异常总结 AssertionError 断言语句（assert）失败 AttributeError 尝试访问未知的对象属性 EOFError 用户输入文件末尾标志EOF（Ctrl+d） FloatingPointError 浮点计算错误 GeneratorExit generator.close()方法被调用的时候 ImportError 导入模块失
  • SQL函数返回临时表结构的数据用于查询 357029540 SQL Server
    这两天在做一个查询的SQL，这个SQL的一个条件是通过游标实现另外两张表查询出一个多条数据，这些数据都是INT类型，然后用IN条件进行查询，并且查询这两张表需要通过外部传入参数才能查询出所需数据，于是想到了用SQL函数返回值，并且也这样做了，由于是返回多条数据，所以把查询出来的INT类型值都拼接为了字符串，这时就遇到问题了，在查询SQL中因为条件是INT值，SQL函数的CAST和CONVERST都
  • java 时间格式化 | 比较大小| 时区 个人笔记 7454103 javaeclipsetomcatcMyEclipse
    个人总结！ 不当之处多多包含！ 引用 1.0 如何设置 tomcat 的时区：          位置：(catalina.bat---JAVA_OPTS  下面加上)          set JAVA_OPT
  • 时间获取Clander的用法 adminjun Clander时间
    /**    * 得到几天前的时间    * @param d    * @param day    * @return    */   public static Date getDateBefore(Date d,int day){    Calend
  • JVM初探与设置 aijuans java
    JVM是Java Virtual Machine（Java虚拟机）的缩写，JVM是一种用于计算设备的规范，它是一个虚构出来的计算机，是通过在实际的计算机上仿真模拟各种计算机功能来实现的。Java虚拟机包括一套字节码指令集、一组寄存器、一个栈、一个垃圾回收堆和一个存储方法域。 JVM屏蔽了与具体操作系统平台相关的信息，使Java程序只需生成在Java虚拟机上运行的目标代码（字节码）,就可以在多种平台
  • SQL中ON和WHERE的区别 avords
    SQL中ON和WHERE的区别   数据库在通过连接两张或多张表来返回记录时，都会生成一张中间的临时表，然后再将这张临时表返回给用户。   www.2cto.com   在使用left jion时，on和where条件的区别如下：  1、 on条件是在生成临时表时使用的条件，它不管on中的条件是否为真，都会返回左边表中的记录。 
  • 说说自信 houxinyou 工作生活
    自信的来源分为两种,一种是源于实力,一种源于头脑.实力是一个综合的评定,有自身的能力,能利用的资源等.比如我想去月亮上,要身体素质过硬,还要有飞船等等一系列的东西.这些都属于实力的一部分.而头脑不同,只要你头脑够简单就可以了!同样要上月亮上,你想,我一跳,1米,我多跳几下,跳个几年,应该就到了!什么?你说我会往下掉?你笨呀你!找个东西踩一下不就行了吗?     无论工作还
  • WEBLOGIC事务超时设置 bijian1013 weblogicjta事务超时
            系统中统计数据，由于调用统计过程，执行时间超过了weblogic设置的时间，提示如下错误： 统计数据出错! 原因：The transaction is no longer active - status: 'Rolling Back. [Reason=weblogic.transaction.internal
  • 两年已过去，再看该如何快速融入新团队 bingyingao java互联网融入架构新团队
    偶得的空闲，翻到了两年前的帖子 该如何快速融入一个新团队，有所感触，就记下来，为下一个两年后的今天做参考。     时隔两年半之后的今天，再来看当初的这个博客，别有一番滋味。而我已经于今年三月份离开了当初所在的团队，加入另外的一个项目组，2011年的这篇博客之后的时光，我很好的融入了那个团队，而直到现在和同事们关系都特别好。大家在短短一年半的时间离一起经历了一
  • 【Spark七十七】Spark分析Nginx和Apache的access.log bit1129 apache
    Spark分析Nginx和Apache的access.log，第一个问题是要对Nginx和Apache的access.log文件进行按行解析，按行解析就的方法是正则表达式：   Nginx的access.log解析正则表达式   val PATTERN = """([^ ]*) ([^ ]*) ([^ ]*) (\\[.*\\]) (\&q
  • Erlang patch bookjovi erlang
    Totally five patchs committed to erlang otp, just small patchs. IMO, erlang really is a interesting programming language, I really like its concurrency feature. but the functional programming style
  • log4j日志路径中加入日期 bro_feng javalog4j
    要用log4j使用记录日志，日志路径有每日的日期，文件大小5M新增文件。 实现方式 log4j: <appender name="serviceLog" class="org.apache.log4j.RollingFileAppender"> <param name="Encoding" v
  • 读《研磨设计模式》-代码笔记-桥接模式 bylijinnan java设计模式
    声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/ /** * 个人觉得关于桥接模式的例子，蜡笔和毛笔这个例子是最贴切的：http://www.cnblogs.com/zhenyulu/articles/67016.html * 笔和颜色是可分离的，蜡笔把两者耦合在一起了：一支蜡笔只有一种
  • windows7下SVN和Eclipse插件安装 chenyu19891124 eclipse插件
    今天花了一天时间弄SVN和Eclipse插件的安装，今天弄好了。svn插件和Eclipse整合有两种方式，一种是直接下载插件包，二种是通过Eclipse在线更新。由于之前Eclipse版本和svn插件版本有差别，始终是没装上。最后在网上找到了适合的版本。所用的环境系统：windows7JDK：1.7svn插件包版本：1.8.16Eclipse：3.7.2工具下载地址：Eclipse下在地址：htt
  • [转帖]工作流引擎设计思路 comsci 设计模式工作应用服务器workflow企业应用
    作为国内的同行，我非常希望在流程设计方面和大家交流，刚发现篇好文(那么好的文章，现在才发现，可惜)，关于流程设计的一些原理，个人觉得本文站得高，看得远，比俺的文章有深度，转载如下 ================================================================================= 自开博以来不断有朋友来探讨工作流引擎该如何
  • Linux 查看内存，CPU及硬盘大小的方法 daizj linuxcpu内存硬盘大小
    一、查看CPU信息的命令 [root@R4 ~]# cat /proc/cpuinfo |grep "model name" && cat /proc/cpuinfo |grep "physical id" model name : Intel(R) Xeon(R) CPU X5450 @ 3.00GHz model name :
  • linux 踢出在线用户 dongwei_6688 linux
    两个步骤： 1.用w命令找到要踢出的用户，比如下面：   [root@localhost ~]# w 18:16:55 up 39 days, 8:27, 3 users, load average: 0.03, 0.03, 0.00 USER TTY FROM LOGIN@ IDLE JCPU PCPU WHAT
  • 放手吧,就像不曾拥有过一样 dcj3sjt126com
    内容提要： 静悠悠编著的《放手吧就像不曾拥有过一样》集结“全球华语世界最舒缓心灵”的精华故事，触碰生命最深层次的感动，献给全世界亿万读者。《放手吧就像不曾拥有过一样》的作者衷心地祝愿每一位读者都给自己一个重新出发的理由，将那些令你痛苦的、扛起的、背负的，一并都放下吧！把憔悴的面容换做一种清淡的微笑，把沉重的步伐调节成春天五线谱上的音符，让自己踏着轻快的节奏，在人生的海面上悠然漂荡，享受宁静与
  • php二进制安全的含义 dcj3sjt126com PHP
    PHP里，有string的概念。 string里，每个字符的大小为byte（与PHP相比，Java的每个字符为Character，是UTF8字符，C语言的每个字符可以在编译时选择）。 byte里，有ASCII代码的字符，例如ABC，123，abc，也有一些特殊字符，例如回车，退格之类的。 特殊字符很多是不能显示的。或者说，他们的显示方式没有标准，例如编码65到哪儿都是字母A，编码97到哪儿都是字符
  • Linux下禁用T440s，X240的一体化触摸板(touchpad) gashero linuxThinkPad触摸板
    自打1月买了Thinkpad T440s就一直很火大，其中最让人恼火的莫过于触摸板。   Thinkpad的经典就包括用了小红点(TrackPoint)。但是小红点只能定位，还是需要鼠标的左右键的。但是自打T440s等开始启用了一体化触摸板，不再有实体的按键了。问题是要是好用也行。   实际使用中，触摸板一堆问题，比如定位有抖动，以及按键时会有飘逸。这就导致了单击经常就
  • graph_dfs hcx2013 Graph
    package edu.xidian.graph; class MyStack { private final int SIZE = 20; private int[] st; private int top; public MyStack() { st = new int[SIZE]; top = -1; } public void push(i
  • Spring4.1新特性——Spring核心部分及其他 jinnianshilongnian spring 4.1
    目录 Spring4.1新特性——综述 Spring4.1新特性——Spring核心部分及其他 Spring4.1新特性——Spring缓存框架增强 Spring4.1新特性——异步调用和事件机制的异常处理 Spring4.1新特性——数据库集成测试脚本初始化 Spring4.1新特性——Spring MVC增强 Spring4.1新特性——页面自动化测试框架Spring MVC T
  • 配置HiveServer2的安全策略之自定义用户名密码验证 liyonghui160com
        具体从网上看   http://doc.mapr.com/display/MapR/Using+HiveServer2#UsingHiveServer2-ConfiguringCustomAuthentication   LDAP Authentication using OpenLDAP Setting
  • 一位30多的程序员生涯经验总结 pda158 编程工作生活咨询
    1.客户在接触到产品之后，才会真正明白自己的需求。 　　这是我在我的第一份工作上面学来的。只有当我们给客户展示产品的时候，他们才会意识到哪些是必须的。给出一个功能性原型设计远远比一张长长的文字表格要好。 2.只要有充足的时间，所有安全防御系统都将失败。 　　安全防御现如今是全世界都在关注的大课题、大挑战。我们必须时时刻刻积极完善它，因为黑客只要有一次成功，就可以彻底打败你。   3.
  • 分布式web服务架构的演变 自由的奴隶 linuxWeb应用服务器互联网
    最开始，由于某些想法，于是在互联网上搭建了一个网站，这个时候甚至有可能主机都是租借的，但由于这篇文章我们只关注架构的演变历程，因此就假设这个时候已经是托管了一台主机，并且有一定的带宽了，这个时候由于网站具备了一定的特色，吸引了部分人访问，逐渐你发现系统的压力越来越高，响应速度越来越慢，而这个时候比较明显的是数据库和应用互相影响，应用出问题了，数据库也很容易出现问题，而数据库出问题的时候，应用也容易
  • 初探Druid连接池之二——慢SQL日志记录 xingsan_zhang 日志连接池druid慢SQL
    由于工作原因，这里先不说连接数据库部分的配置，后面会补上，直接进入慢SQL日志记录。   1.applicationContext.xml中增加如下配置： <bean abstract="true" id="mysql_database" class="com.alibaba.druid.pool.DruidDataSourc
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他