阿飞超努力
阿飞超努力

每天学一个jquery插件-步骤进度轴

每天一个jquery插件-步骤进度轴

步骤进度轴

很多工具型的网站入门教程或者注册账号走流程的时候会有这个结构存在，所以做了一个来尝试一下，回调动作也能用吧

效果如下
每天学一个jquery插件-步骤进度轴_第1张图片

代码部分

*{
     
	margin: 0;
	padding: 0;
}
#div{
     
	width: 90%;
	height: 50px;
	margin: 10px auto;
	display: flex;
	justify-content: center;
	align-items: center;
}
#box{
     
	width: 90%;
	height: 100px;
	border: 1px solid lightgray;
	margin: 10px auto;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
}
.box{
     
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: black;
	color: white;
}
.tbar{
     
	width: 90%;
	height: 6px;
	border-radius: 5px;
	background-color: lightgray;
	display: flex;
	align-items: center;
	position: absolute;
}
.bar{
     
	width: 100%;
	height: 50%;
	border-radius: 5px;
	background-color: #1abc9c;
	transition: all 0.2s linear;
}
.dot{
     
	position: absolute;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background-color: lightgray;
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center;
}
.dot:hover{
     
	transition: all 0.5s linear;
	background-color: #1abc9c;
}
.dot.check{
     
	background-color: #1abc9c;
}
.dot .txt{
     
	top: 100%;
	font-size: 12px;
	position: absolute;
	width: 100px;
	text-align: center;
}


<html>
	<head>
		<meta charset="utf-8">
		<title>步骤进度轴title>
		<script src="js/jquery-3.4.1.min.js">script>
		<script src="js/bzjdz.js">script>
		<link href="css/bzjdz.css" rel="stylesheet" type="text/css" />
	head>
	<body>
		<div id="div">
			
		div>
		<div id="box">
			<div class="box" id="box1" style="background-color: #1abc9c;">步骤1div>
			<div class="box" id="box2" style="background-color: #3498db;">步骤2div>
			<div class="box" id="box3" style="background-color: #f1c40f;">步骤3div>
			<div class="box" id="box4" style="background-color: #e74c3c;">步骤4div>
			<div class="box" id="box5" style="background-color:	#9b59b6;">步骤5div>
		div>
	body>
html>
<script>
	$(function(){
      
		$("#div").timeline({
      
			data:[
				{
      name:'步骤1',id:'#box1',click:hide},
				{
      name:'步骤2',id:'#box2',click:hide},
				{
      name:'步骤3',id:'#box3',click:hide},
				{
      name:'步骤4',id:'#box4',click:hide},
				{
      name:'步骤5',id:'#box4',click:hide},
			]
		})
	})
	function hide(item){
      
		$(".box").hide();
		$(item.id).show();
	}
script>


$.prototype.timeline =function(op){
     
	console.log(op.data);
	var $that = $(this);
	var $tbar =$("
");
	var $bar  =$("
");
	$bar.appendTo($tbar)
	$tbar.appendTo($that);
	var length = op.data.length;//元素长度
	var index = 0;//当前进行到哪个步骤
	op.data.forEach((item,index)=>{
     
		var per = getper(index,length)
		var $dot  = $("
"+item.name+"
");
		$dot.appendTo($tbar);
		$dot.css('left',"calc("+per+"% - 6px)")
	})
	//点击事件
	$that.find('.dot').click(function(){
     
		index = parseInt($(this).attr('data-index'));
		//执行对应的方法
		click();
	})
	click();
	function click(){
     
		//回调
		var item = op.data[index];
		item.click(item);
		//动画样式
		var per = getper(index,length)
		$bar.css('width',per+'%')
		//按钮选中的控制
		op.data.forEach((item,i)=>{
     
			if(i<=index){
     
				$tbar.find(".dot[data-index='"+i+"']").addClass('check');
			}else{
     
				$tbar.find(".dot[data-index='"+i+"']").removeClass('check');
			}
		})
	}
	function getper(i,l){
     
		var temp = 0;
		if(i!=0&&i!=l-1){
     
			temp = i/(l-1)*100//算出大概的距离
		}else if(i==l-1){
     
			temp = 100
		}
		return temp;
	}
}

思路解释

  • 要做的内容很简单，画出时间轴，标记对应的点，然后在触发对应事件的时候正确调用回调
  • 时间轴画的时候就那样，百分比一填满就没啥了，然后里面把会变化进度的和校园点分开绘制
  • 小圆点点击的时候改变当前结构标记，然后触发一个事件，把动画效果和回调一并执行、
  • 完事，休息

你可能感兴趣的:(每天学一个jquery插件,javascript,jquery)

  • [JMeter性能测试实战]如何做单接口性能测试 职说测试 JMeter性能测试全攻略jmeter场景设计单接口压测性能测试
    文章目录一、前言二、思路2.1、以查询页面为例2.2、脚本设计2.3、**RandomVariable**元件映入眼帘三、总结一、前言作为一名性能测试工程师，肯定需要解决一类问题，就是针对单接口做性能测试，而实际业务场景呢，这个可能存在一些难度，譬如，一个页面查询功能，如果只是查询接口，那么它查询的条件最好要有业务支撑，换句话说一定要查出结果，这样查出的结果页就是一个列表，至少从服务器监控的数据得
  • ThinkPHP运行目录设置为public子目录 NightReader 运维
    ThinkPHP是一个快速、兼容和简单的面向对象的PHP框架，它遵循MVC（模型-视图-控制器）设计模式。在ThinkPHP框架中，public目录扮演着非常重要的角色，它被设计为框架的公共访问目录。Public目录设置的原因和解决方案是ThinkPHP框架结构和安全策略的核心部分。原因：1)安全性：将public设为唯一的公共访问目录可以增强应用的安全性。通过限制对框架其他部分的访问，可以防止潜
  • oracle性能测试 techcrunch oracle数据库服务器脚本测试loadrunnersql
    今天说一下oracle的性能测试。oracle的性能测试主要是模拟大量的sql语句操作，来对数据库服务器进行加压。在测试前，需要准备以下要模拟的sql语句，测试脚本，并将测试控制机、测试加压机、被测数据库服务器准备妥当。脚本协议选择oracle（2-Tier），将所有要模拟的sql语句放在一个sql文件内，使用sql-plus来操作数据库载入，使用loadrunner来录制。录制好之后就是修改脚本
  • Python处理PDF——PyMuPDF的安装与使用 程序员小六 进阶技术python技术python开发语言
    1、PyMuPDF简介1.介绍在介绍PyMuPDF之前，先来了解一下MuPDF，从命名形式中就可以看出，PyMuPDF是MuPDF的Python接口形式。MuPDFMuPDF是一个轻量级的PDF、XPS和电子书查看器。MuPDF由软件库、命令行工具和各种平台的查看器组成。MuPDF中的渲染器专为高质量抗锯齿图形量身定制。它以精确到像素的几分之一内的度量和间距呈现文本，以在屏幕上再现打印页面的外观时
  • 【通过FinalShell在Linux系统中进行文件的上传和下载】 今天也想快点毕业 linux服务器
    通过FinalShell连接好虚拟机之后，我们可以看到在界面的下方窗体中就已经提供了Linux的文件系统视图以下载hello.txt为例，我们右键点击这个文件，就可以下载到我们本机桌面上一个叫做fsdownload的文件夹中了，这个文件夹是自动创建的。上传文件也很简单，把本机的文件通过鼠标拖转到这个文件系统视图中对应的文件夹就行了。通过命令的形式进行上传和下载文件先安装相关命令rz,szyum-y
  • 【安装教程】Windows环境下Neo4j的安装与配置 慢热型网友. 机器学习作业报告windowsneo4j
    【安装教程】Windows环境下Neo4j的安装与配置Neo4j的概念一、安装前准备——JDK二、Neo4j的安装三、Neo4j的环境配置四、安装验证Neo4j的概念Neo4j是一个高性能的图形数据库管理系统，它使用图形模型来存储和处理数据。Neo4j的图形模型由节点和边组成，节点代表实体或对象，边表示它们之间的关系。节点和边都可以拥有属性，这些属性可以是任何类型的数据。Neo4j的图形模型可以轻
  • python爬取网页的方法总结,python爬虫获取网页数据 阳阳2013哈哈 python
    大家好，小编来为大家解答以下问题，python爬取网页信息代码正确爬取不到，利用python爬取简单网页数据步骤，今天让我们一起来看看吧！文章目录1.抓取网页源代码2.抓取一个网页源代码中的某标签内容3.抓取多个网页子标签的内容Python用做数据处理还是相当不错的，如果你想要做爬虫，Python是很好的选择，它有很多已经写好的类包，只要调用，即可完成很多复杂的功能在我们开始之前，我们需要安装一些
  • 密码狗的使命 加密狗定制分析赋值 plotly人工智能scikit-learn密码学运维
    密码狗：数字时代的忠诚卫士在数字时代的浪潮中，"密码狗"这个充满科技感的词汇悄然兴起。它不是一个简单的密码管理工具，而是数字时代忠诚卫士的象征。密码狗守护着我们的数字资产，捍卫着我们的隐私安全，在虚拟与现实的边界上筑起一道坚固的防线。一、密码狗的使命在数字世界中，密码是守护个人隐私的第一道防线。密码狗的出现，让这道防线变得更加坚固。它采用先进的加密算法，将复杂的密码存储在安全的硬件设备中，确保即使
  • 一文3000字从0到1带你接口测试基础知识【建议收藏】 程序员小 濠 软件测试自动化测试技术分享selenium单元测试压力测试自动化测试css软件测试接口测试
    接口测试是软件测试中的一个重要环节，它主要用于验证系统各个组件之间的相互通信是否正确，以及系统对外提供的接口是否符合预期的功能和性能要求。下面我将带你从零开始，详细介绍接口测试的基础知识。一、什么是接口测试接口测试是指测试软件系统之间通过接口进行的通信协议，以及系统对外提供的接口功能和性能的一种测试方法。它关注的是系统内外部组件之间的数据流和消息传递，以及接口对外提供的数据格式和接口规范是否符合预
  • Postman 离线登录版 乌姗或Jonathan
    Postman离线登录版项目地址:https://gitcode.com/open-source-toolkit/4b03c简介本仓库提供了一个无需登录即可使用的Postman离线版本。新版本的Postman需要账号登录，但在国内由于网络原因，登录过程经常缓慢甚至超时。此版本允许用户跳过账号登录步骤，直接进行离线模拟HTTP请求开发。功能特点无需登录：跳过账号登录步骤，直接使用Postman进行开
  • Python爬虫库Selenium .NET跨平台
    Selenium库是一个自动化测试工具，支持多种浏览器。在爬虫中主要解决JavaScript渲染的问题。用法讲解：0.基本用法fromseleniumimportwebdriverfromselenium.webdriver.common.byimportByfromselenium.webdriver.common.keysimportKeysfromselenium.webdriver.sup
  • 做污染源监测时，一个特别怪的问题 Steelenwang 技术随笔c语言单片机驱动开发物联网
    我们在做污染源监测时，发现一个特别怪的问题就是接PH计在0点和满量程数据是对的，在中间段数据怎么都对。而用回路校验仪测数据很精确，而且刷新很快。排除了各种问题，而且，产品做了3～4年了，用在各种场合都没有问题，问题到底出在哪里呢。最后查模拟量测量程序代码，发现里面有一段滤波代码，研发工程师当初为了避免数据波动大概算法如下if((x(n)-x(n-1))<限定值){x(n)=x(n-1);}else
  • 精通Simulink第一课：在Simulink中基于水箱水位控制的三参数PID整定 Qing_er爱吃山竹 simulinkmatlab自动化
    在Simulink中基于水箱水位控制的三参数PID整定主要包括以下几个步骤：建立水箱水位模型：首先，需要建立一个反映水箱水位变化的数学模型。这个模型应该能够描述水箱水位（输出变量）如何响应进水量变化（输入变量）。在Simulink中，你可以使用连续时间积分器（Integrator）和增益（Gain）等基本组件来构建这个模型。设计PID控制器：PID控制器由比例（P）、积分（I）和微分（D）三个部分
  • 告别繁琐、拥抱高效-翔云发票识别+发票查验接口 OCR_API 接口ocrpython开发语言c#pdf
    你是否还在为发票管理而烦恼？财务人员每天被堆积如山的发票淹没，手动录入信息耗时耗力，还容易出错？发票真伪难辨，担心收到假发票给企业带来损失？难以快速获取发票全票面信息，影响后续报销、入账等流程？缺乏有效的发票管理手段，难以进行数据分析和风险控制？别担心，翔云发票识别与发票查验接口来帮您！翔云发票识别与发票查验接口，为企业提供高效、精准的发票管理解决方案。只需上传发票图片或PDF文件，即可快速识别发
  • C++学习：继承 DesolateGIS 学习
    文章目录文章目录前言一、继承的基本语法二、继承的方式1.公共继承2.保护继承3.私有继承三、继承中的对象模型四、继承中的构造和析构顺序五、继承同名成员处理方式1.继承同名非静态成员处理方式2.继承同名静态成员处理方式总结前言x继承是一个类从另一个类获取成员变量和成员函数的过程，通过继承创建的新类称为“派生类”或“子类”，被继承的类称为“基类”或“父类”。一、继承的基本语法继承的好处：减少重复代码继
  • 爬虫多线程概念 代码逐梦人 爬虫技能晋升路线爬虫php开发语言
    在爬虫领域，多线程是一种重要的技术手段，它能够显著提升爬虫程序的性能和效率。下面从基本概念、原理、优缺点和使用场景几个方面详细介绍爬虫多线程。基本概念线程是操作系统能够进行运算调度的最小单位，它被包含在进程之中，是进程中的实际运作单位。多线程则是指在一个程序中同时运行多个线程，每个线程都可以独立执行不同的任务。在爬虫程序里，多线程意味着可以同时开启多个线程去执行不同的爬虫任务，比如同时抓取多个网页
  • 保护API测试数据：Postman中的敏感信息安全策略 2401_85812053 postmanlua测试工具
    标题：保护API测试数据：Postman中的敏感信息安全策略在当今数字化时代，API测试已成为软件开发过程中不可或缺的一环。然而，随着敏感数据的频繁交换，如何保护这些信息成为了一个重要议题。Postman，作为一款流行的API开发工具，提供了多种方法来确保测试数据的安全性。本文将深入探讨Postman中保护敏感信息的最佳实践，并提供实用的代码示例。1.理解敏感数据在讨论保护措施之前，首先需要明确什
  • Python selenium 库 ONE_PUNCH_Ge python
    Selenium是一个用于自动化Web浏览器操作的强大工具，广泛应用于Web应用程序测试、网页数据抓取和任务自动化等场景。Selenium为各种编程语言提供了API，用作测试。目前的官方API文档有C#、JavaScript、Java、Python、Ruby。安装Selenium和WebDriver安装Selenium要开始使用Selenium，首先需要安装selenium库，并下载适用于你浏览器
  • 社区O2O系统app功能需求架构分析 v.15889726201 java大数据人工智能
    社区O2O系统绝非仅仅是简单地把线上资源与线下服务进行拼接的普通服务平台，它已然蜕变成为一个高度融合多元元素，集社交互动、智能科技深度应用以及凸显本地化特色服务于一身的综合性、多功能生态系统。在这个充满活力与创新的生态体系之中，每一个功能模块都相互交织、协同运作，共同为社区居民勾勒出一幅便捷、丰富且极具人文关怀的生活画卷。以下便是对社区O2O系统核心功能的详尽解析：一、系统简述社区O2O系统旨在深
  • Python装饰器居然还能这么用！新手小白必看[附源码] 花小姐的春天 跟着花姐学Pythonpython装饰器模式0基础学PythonPython教程后端脚本
    大家好呀！我是花姐。你有没有遇到过这样的情况：你写了一个函数，突然想到要给它增加一些额外功能，或者你希望能在多个地方重复使用这段功能，结果却发现每次都得重新写一遍代码，超级烦！别担心，今天花姐给大家介绍一个神器——装饰器！它可以在不改变原始函数代码的情况下，为函数增加新功能，而且代码更加简洁、高效，关键是让你的代码更“优雅”。好啦，今天我们就来一起看看装饰器的魔力，它怎么帮助我们做出更简洁、可复用
  • 自动驾驶系统工程师的技术图谱与学习路径 执于代码 开发者职业加速服务自动驾驶人工智能
    自动驾驶系统工程师的技术图谱与学习路径自动驾驶系统工程师是一个跨学科的角色，涵盖了硬件、软件、传感器、算法、控制系统等多个领域。为了清晰展示这一职位所需要掌握的技术，我们可以将其分为多个能力层次，并根据工程师在不同阶段的需求设计学习路径。以下是一个详细的自动驾驶系统工程师技术图谱与学习路径，按照“技能树与能力模型”展示，从基础到进阶，分层次列出了所需的核心技能和学习路线。一、基础能力层（数学、编程
  • Python Cookbook-2.8 更新随机存取文件 我不会编程555 #Python学习pythonlinux前端
    任务给定一个包含很多固定长度记录的大二进制文件，你想读取其中某一条记录，并且修改该条记录的某些字段的值，然后写回到文件中。解决方案读取记录，解包，执行任何需要的数据更新，然后将所有字段重新组合成记录，接着找到正确的位置，最后再写入。见如下代码:importstruct#或者说，一条记录是8个4字节整数format_string='81'thefile=open('somebinfile','r+b
  • 04、结构体两种传参形式 weixin_30376163
    结构体两种传参形式题目：有一个结构体变量stu，内含学生学号、姓名、和3门课程的成绩。要求在函数add10中将小于60分的成绩增加10分，然后输出全部信息。一、结构体变量作为实参/*2017年6月30日13:53:15功能：结构体变量作为实参*/#includestructstu{intnum;charname[10];floatscore[3];};voidadd10(structstust2)
  • ITE Super IO入门篇 YOYO--小天 嵌入式硬件
    接触BIOS以来算起来已经有四年了，想着将自己所学的知识记录起来，这样也方便他人学习。这是我的第一篇博客，从SIO开始吧！简介SIO应用在台式机比较多，主要用来做电源管理，如上电时序控制；外围接口扩充，如串口、并口；还有温度、电压监控、智能风扇等。SIO是一个半可定制化的芯片，怎么说是半可定制化呢？比如上电时序，这一部分就是固化好的，而可定制化部分则是逻辑设备（LogicDevice）部分。接入电
  • 关于利用二维数组之前的只是建立简易扫雷代码的实践与心得 tanyongxi66 算法
    1.实践心得一为了简化代码，我们会建立起两个.c文件，以及一个自定义的库函数二首先我们的目标是建立起一个9*9的表格，但是为了避免计算边界越界的问题，我们要通过建立11*11的表格来避免越界问题三建立表格的大致思路，（1）首先利用dowhile循环的特性建立起起始菜单，让我们选择玩或者不玩，然后用1play,0exit（也就是while循环中条件非0运行这个特点来设置）（2）然后利用switch语
  • FromData传参形式： It 小白努力中… html前端vue.js
    前端传参有很多形式下面介绍一下FromData传参！！首先模拟的是获取列表的形式向后端传递参数：1、第一要在发请求函数里new一个新的对象通过append方式向这个对象中添加参数：//获取列表getLists(){letformdata=newFormData();//new出来的对象formdata.append("pageNum",this.queryParams.page);//所传递参数f
  • 【SpringBoot】37、SpringBoot整合EasyPoi自定义字典导出Excel Asurplus SpringBoot2.x系列javaeasypoipoispringbootautopoi
    前面我们介绍了SpringBoot中使用JeecgBoot的Autopoi导出Excel，其实Autopoi的底层也是EasyPoi，对于Excel的导入/导出也是非常方便的。那EasyPoi也是基于POI的，如果对这方面想要深究的，可以先看看原生POI的导入/导出方式，你会回来选择EasyPoi的一、简介EasyPoi功能如同名字easy，主打的功能就是容易，让一个没见接触过poi的人员就可以方
  • BUG之路1——Ubuntu安装pycharm报python package tools not found错误 DH小碧池 Python之路pycharm报错ubuntu安装
    心路历程：真的想死啊，搞了我三天，就想在linux上架个django的服务器，然后安装个pycharm就出了一个占用我三天时间的BUG。最后终于在stackoverflow上看到国外的大神了。最后的解决方法真的是想死，简单的不能再简单，但是就是没注意到。系统：ubuntu16工具：pycharm报错描述：在安装完pycharm之后设置项目python版本时，报错：pythonpackagetool
  • 算八字和阴阳五行（Java基础） 夜不眠，码三千 java开发语言
    目录一、引言二、问题描述三、问题分析四、算法分析1.年柱2.月柱3.日柱4.时柱五、完整代码展示六、结果验证七、结语一、引言每年回家过年，亲戚们都会问我“小韩学的什么专业呀，给七大姑八大姨展示一下呀”等等一系列类似的问题。今年在机缘巧合之下，我接触到了算卦，并且通过某音某站学习到了一下关于算卦的一些基础算法，比如说算八字，算五行等等，然后我就有了一个神奇的想法，要是将算卦和Java结合起来会是什么
  • 单片机知多少之STM32F103-USART应用篇 行知者也 单片机stm32嵌入式硬件
    以下是一个基于STM32的串口应用示例，实现了通过串口发送和接收数据的基本功能。一、控制逻辑将STM32的串口引脚（如USART1的TX引脚用于发送数据，RX引脚用于接收数据）与外部设备（如PC端的串口调试助手）相连。在STM32端，通过配置串口相关寄存器或使用库函数来设置串口的参数，如波特率、数据位、停止位、校验位等。然后，可以使用发送函数将数据从STM32的串口发送出去，同时通过接收中断或轮询
  • Hadoop(一) 朱辉辉33 hadooplinux
    今天在诺基亚第一天开始培训大数据，因为之前没接触过Linux，所以这次一起学了，任务量还是蛮大的。 首先下载安装了Xshell软件，然后公司给了账号密码连接上了河南郑州那边的服务器，接下来开始按照给的资料学习，全英文的，头也不讲解，说锻炼我们的学习能力，然后就开始跌跌撞撞的自学。这里写部分已经运行成功的代码吧.    在hdfs下，运行hadoop fs -mkdir /u
  • maven An error occurred while filtering resources blackproof maven报错
    转：http://stackoverflow.com/questions/18145774/eclipse-an-error-occurred-while-filtering-resources   maven报错： maven An error occurred while filtering resources   Maven -> Update Proje
  • jdk常用故障排查命令 daysinsun jvm
    linux下常见定位命令： 1、jps      输出Java进程       -q       只输出进程ID的名称，省略主类的名称；       -m      输出进程启动时传递给main函数的参数；     &nb
  • java 位移运算与乘法运算 周凡杨 java位移运算乘法
      对于 JAVA 编程中，适当的采用位移运算，会减少代码的运行时间，提高项目的运行效率。这个可以从一道面试题说起：     问题： 用最有效率的方法算出2 乘以8 等於几?” 答案：2 << 3 由此就引发了我的思考，为什么位移运算会比乘法运算更快呢？其实简单的想想，计算机的内存是用由 0 和 1 组成的二
  • java中的枚举(enmu) g21121 java
    从jdk1.5开始，java增加了enum(枚举)这个类型，但是大家在平时运用中还是比较少用到枚举的，而且很多人和我一样对枚举一知半解，下面就跟大家一起学习下enmu枚举。先看一个最简单的枚举类型，一个返回类型的枚举： public enum ResultType { /** * 成功 */ SUCCESS, /** * 失败 */ FAIL,
  • MQ初级学习 510888780 activemq
    1.下载ActiveMQ 去官方网站下载：http://activemq.apache.org/ 2.运行ActiveMQ 解压缩apache-activemq-5.9.0-bin.zip到C盘，然后双击apache-activemq-5.9.0-\bin\activemq-admin.bat运行ActiveMQ程序。 启动ActiveMQ以后，登陆：http://localhos
  • Spring_Transactional_Propagation 布衣凌宇 springtransactional
    //事务传播属性 @Transactional(propagation=Propagation.REQUIRED)//如果有事务，那么加入事务，没有的话新创建一个 @Transactional(propagation=Propagation.NOT_SUPPORTED)//这个方法不开启事务 @Transactional(propagation=Propagation.REQUIREDS_N
  • 我的spring学习笔记12-idref与ref的区别 aijuans spring
    idref用来将容器内其他bean的id传给<constructor-arg>/<property>元素，同时提供错误验证功能。例如： <bean id ="theTargetBean" class="..." /> <bean id ="theClientBean" class=&quo
  • Jqplot之折线图 antlove jsjqueryWebtimeseriesjqplot
    timeseriesChart.html <script type="text/javascript" src="jslib/jquery.min.js"></script> <script type="text/javascript" src="jslib/excanvas.min.js&
  • JDBC中事务处理应用 百合不是茶 javaJDBC编程事务控制语句
      解释事务的概念; 事务控制是sql语句中的核心之一;事务控制的作用就是保证数据的正常执行与异常之后可以恢复   事务常用命令:             Commit提交         
  • [转]ConcurrentHashMap Collections.synchronizedMap和Hashtable讨论 bijian1013 java多线程线程安全HashMap
    在Java类库中出现的第一个关联的集合类是Hashtable，它是JDK1.0的一部分。 Hashtable提供了一种易于使用的、线程安全的、关联的map功能，这当然也是方便的。然而，线程安全性是凭代价换来的――Hashtable的所有方法都是同步的。此时，无竞争的同步会导致可观的性能代价。Hashtable的后继者HashMap是作为JDK1.2中的集合框架的一部分出现的，它通过提供一个不同步的
  • ng-if与ng-show、ng-hide指令的区别和注意事项 bijian1013 JavaScriptAngularJS
            angularJS中的ng-show、ng-hide、ng-if指令都可以用来控制dom元素的显示或隐藏。ng-show和ng-hide根据所给表达式的值来显示或隐藏HTML元素。当赋值给ng-show指令的值为false时元素会被隐藏，值为true时元素会显示。ng-hide功能类似，使用方式相反。元素的显示或
  • 【持久化框架MyBatis3七】MyBatis3定义typeHandler bit1129 TypeHandler
    什么是typeHandler? typeHandler用于将某个类型的数据映射到表的某一列上，以完成MyBatis列跟某个属性的映射   内置typeHandler MyBatis内置了很多typeHandler，这写typeHandler通过org.apache.ibatis.type.TypeHandlerRegistry进行注册，比如对于日期型数据的typeHandler，
  • 上传下载文件rz,sz命令 bitcarter linux命令rz
    刚开始使用rz上传和sz下载命令： 因为我们是通过secureCRT终端工具进行使用的所以会有上传下载这样的需求： 我遇到的问题： sz下载A文件10M左右，没有问题 但是将这个文件A再传到另一天服务器上时就出现传不上去，甚至出现乱码，死掉现象，具体问题 解决方法： 上传命令改为;rz -ybe 下载命令改为：sz -be filename 如果还是有问题： 那就是文
  • 通过ngx-lua来统计nginx上的虚拟主机性能数据 ronin47 ngx-lua　统计 解禁ip
    介绍 以前我们为nginx做统计,都是通过对日志的分析来完成.比较麻烦,现在基于ngx_lua插件,开发了实时统计站点状态的脚本,解放生产力.项目主页: https://github.com/skyeydemon/ngx-lua-stats 功能 支持分不同虚拟主机统计, 同一个虚拟主机下可以分不同的location统计. 可以统计与query-times request-time
  • java-68-把数组排成最小的数。一个正整数数组，将它们连接起来排成一个数，输出能排出的所有数字中最小的。例如输入数组{32, 321}，则输出32132 bylijinnan java
    import java.util.Arrays; import java.util.Comparator; public class MinNumFromIntArray { /** * Q68输入一个正整数数组，将它们连接起来排成一个数，输出能排出的所有数字中最小的一个。 * 例如输入数组{32, 321}，则输出这两个能排成的最小数字32132。请给出解决问题
  • Oracle基本操作 ccii Oracle SQL总结Oracle SQL语法Oracle基本操作Oracle SQL
    一、表操作 1. 常用数据类型 NUMBER(p,s)：可变长度的数字。p表示整数加小数的最大位数，s为最大小数位数。支持最大精度为38位 NVARCHAR2(size)：变长字符串，最大长度为4000字节（以字符数为单位） VARCHAR2(size)：变长字符串，最大长度为4000字节（以字节数为单位） CHAR(size)：定长字符串，最大长度为2000字节，最小为1字节，默认
  • [强人工智能]实现强人工智能的路线图 comsci 人工智能
        1：创建一个用于记录拓扑网络连接的矩阵数据表      2:自动构造或者人工复制一个包含10万个连接(1000*1000)的流程图      3：将这个流程图导入到矩阵数据表中      4：在矩阵的每个有意义的节点中嵌入一段简单的
  • 给Tomcat，Apache配置gzip压缩(HTTP压缩)功能 cwqcwqmax9 apache
    背景： HTTP 压缩可以大大提高浏览网站的速度，它的原理是，在客户端请求网页后，从服务器端将网页文件压缩，再下载到客户端，由客户端的浏览器负责解压缩并浏览。相对于普通的浏览过程HTML ,CSS,Javascript , Text ，它可以节省40%左右的流量。更为重要的是，它可以对动态生成的，包括CGI、PHP , JSP , ASP , Servlet,SHTML等输出的网页也能进行压缩，
  • SpringMVC and Struts2 dashuaifu struts2springMVC
    SpringMVC VS Struts2 1: spring3开发效率高于struts 2: spring3 mvc可以认为已经100%零配置 3: struts2是类级别的拦截， 一个类对应一个request上下文， springmvc是方法级别的拦截，一个方法对应一个request上下文，而方法同时又跟一个url对应 所以说从架构本身上 spring3 mvc就容易实现r
  • windows常用命令行命令 dcj3sjt126com windowscmdcommand
    在windows系统中，点击开始－运行，可以直接输入命令行，快速打开一些原本需要多次点击图标才能打开的界面，如常用的输入cmd打开dos命令行，输入taskmgr打开任务管理器。此处列出了网上搜集到的一些常用命令。winver 检查windows版本 wmimgmt.msc 打开windows管理体系结构(wmi) wupdmgr windows更新程序 wscrip
  • 再看知名应用背后的第三方开源项目 dcj3sjt126com ios
    知名应用程序的设计和技术一直都是开发者需要学习的，同样这些应用所使用的开源框架也是不可忽视的一部分。此前《 iOS第三方开源库的吐槽和备忘》中作者ibireme列举了国内多款知名应用所使用的开源框架，并对其中一些框架进行了分析，同样国外开发者 @iOSCowboy也在博客中给我们列出了国外多款知名应用使用的开源框架。另外txx's blog中详细介绍了 Facebook Paper使用的第三
  • Objective-c单例模式的正确写法 jsntghf 单例iosiPhone
    一般情况下，可能我们写的单例模式是这样的： #import <Foundation/Foundation.h> @interface Downloader : NSObject + (instancetype)sharedDownloader; @end #import "Downloader.h" @implementation
  • jquery easyui datagrid 加载成功，选中某一行 hae jqueryeasyuidatagrid数据加载
    1.首先你需要设置datagrid的onLoadSuccess $( '#dg' ).datagrid({onLoadSuccess :  function (data){      $( '#dg' ).datagrid( 'selectRow' ,3); }});   2.onL
  • jQuery用户数字打分评价效果 ini JavaScripthtmljqueryWebcss
    效果体验：http://hovertree.com/texiao/jquery/5.htmHTML文件代码： <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jQuery用户数字打分评分代码 - HoverTree</
  • mybatis的paramType kerryg DAOsql
    MyBatis传多个参数： 1、采用#{0},#{1}获得参数：    Dao层函数方法：     public User selectUser(String name,String area); 对应的Mapper.xml    <select id="selectUser" result
  • centos 7安装mysql5.5 MrLee23 centos
    首先centos7 已经不支持mysql，因为收费了你懂得，所以内部集成了mariadb，而安装mysql的话会和mariadb的文件冲突，所以需要先卸载掉mariadb，以下为卸载mariadb，安装mysql的步骤。   #列出所有被安装的rpm package rpm -qa | grep mariadb   #卸载 rpm -e mariadb-libs-5.
  • 利用thrift来实现消息群发 qifeifei thrift
               Thrift项目一般用来做内部项目接偶用的，还有能跨不同语言的功能，非常方便，一般前端系统和后台server线上都是3个节点，然后前端通过获取client来访问后台server，那么如果是多太server，就是有一个负载均衡的方法，然后最后访问其中一个节点。那么换个思路，能不能发送给所有节点的server呢，如果能就
  • 实现一个sizeof获取Java对象大小 teasp javaHotSpot内存对象大小sizeof
       由于Java的设计者不想让程序员管理和了解内存的使用，我们想要知道一个对象在内存中的大小变得比较困难了。本文提供了可以获取对象的大小的方法，但是由于各个虚拟机在内存使用上可能存在不同，因此该方法不能在各虚拟机上都适用，而是仅在hotspot 32位虚拟机上，或者其它内存管理方式与hotspot 32位虚拟机相同的虚拟机上 适用。     
  • SVN错误及处理 xiangqian0505 SVN提交文件时服务器强行关闭
    在SVN服务控制台打开资源库“SVN无法读取current” ---摘自网络 写道 SVN无法读取current修复方法 Can't read file : End of file found 文件：repository/db/txn_current、repository/db/current   其中current记录当前最新版本号，txn_current记录版本库中版本
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他