文竹.
文竹.

使用html+css+js实现轮播图效果

使用html+css+js实现轮播图效果


因为初学js、css，好多属性都不懂，百度查了好久，所以在这里也简单介绍一下我遇到的难点（主要是布局）。

  1. display：flex

    Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

  2. flex-shrink:0

    flex-shrink 属性指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。

  3. justify-content:space-between || justify-content:space-around

    justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。

我在图片（这里是div）的父元素里使用display：flex后 图片将水平布局，但是当图片遇到边界依然会换行并且会改变长宽，很丑，所以需要使用flex-shrink：0来阻止它改变长度，因为弹性盒子的flex-wrap属性（定义换行情况）默认是nowrap不换行，所以不用管，图片的设置完毕,焦点、左右移动按钮在它们的父元素里都需要使用position：absolute绝对定位，让它们可以按百分比布局在他们的父元素中，这里我在它们的父元素中依然使用display：flex设置，然后使用justify-content分别让按钮跟焦点以space-between（项目位于各行之间留有空白的容器内。）、 space-around（项目位于各行之前、之间、之后都留有空白的容器内。） 方式对齐，这样简单的布局就完成了。
至于js部分，由于是初学，可能感觉有点乱，扩展性不好，大家可以自己试着改改。

话不多说，直接上代码。

<!DOCTYPE html>
<html>
<head>
<style>

	html, body{
		margin:0;
		height:100%;
		user-select:none;
		
	}
	#big{
		position:relative;
		margin:100px auto;
		width:500px;
		height:300px;
		border:3px solid black;
		overflow:hidden;
	}
	#middle{
		position:absolute;
		display:flex;
		left:0px;
		
	}
	#middle div{
		color:white;
		height:300px;
		width:500px;
		flex-shrink:0;
		font-size:35px;
		font-weight:bloder;
		text-align:center;
		line-height:270px;
	}
	.btn{
		position:absolute;
		width:100%;
		height:40px;
		display:flex;
		top:40%;
		justify-content:space-between;
	}
	a{
		text-decoration:none;
		color:black;
		height:40px;
		font-size:30px;
		font-weight:bolder;
		transition:transform .3s;
	}
	.lt:hover{
		transform:translateX(-5px)
	}
	.rt:hover{
		transform:translateX(5px)
	}
	ol{
		position:absolute;
		display:flex;
		left:40%;
		margin:0;
		padding:0;
		bottom:10px;
		width:100px;
		height:40px;
		justify-content:space-around;
		
	}
	li{
		list-style:none;
		cursor:pointer;
		height:25px;
		width:25px;
		border-radius:50%;
		background:#c3c3c3;
	}
	li.active{
		background:#f2f2f2;
	}
</style>
</head>
<body>
	<div id="big">
		
		<div id="middle">
			<div class="page" style="background:red">ONE</div>
			<div class="page" style="background:blue">TWO</div>
			<div class="page" style="background:green">THREE</div>
		</div>
		<div class="btn">
			<a href="javascript:void(0)" class="lt" style="background:#c3c3c3;">&lt;</a>
			<a href="javascript:void(0)" class="rt" style="background:#c3c3c3;">&gt;</a>
		</div>
		<ol>
			<li class="bat active"></li>
			<li class="bat"></li>
			<li class="bat"></li>
		</ol>
	</div>

<script>
	var big = document.getElementById('big');
	var middle = document.getElementById('middle');
	var ele = middle.firstElementChild.cloneNode(true);
	var  bats = document.getElementsByTagName('li');
	var btns = document.getElementsByTagName('a');
	var i,value,ts,z = 0;
	var whidhts = getComputedStyle(big)['width'].slice(0,-2);
	var times;
	middle.appendChild(ele);
	middle.style.width = getComputedStyle(big)['width'].slice(0,-2) * 3 + 'px';
	var item = middle.style.width.slice(0,-2);
	
	// 自动轮播动画
	function autoplay(){
		if (z < item){
			i = 0;
			
			function move(){
				if (i < whidhts){
					middle.style.left = middle.style.left.slice(0,-2) - 20 +'px';
					i += 20;
					z += 20;
				}else{
					clearInterval(t);
					setTimeout(batt,5);
				}
			}
		}else{
			z = 0;
			middle.style.left = '0px';
			autoplay()
		}
		var t = setInterval(move,5);
	}
	
	// 让焦点跟着图片移动
	function batt(){
		for (var x=0; x < bats.length; x++){
			bats[x].className = 'bat';
		}
		if (Math.floor(z / whidhts) == 3){
			bats[0].classList.add('active');
		}else{bats[Math.floor(z / whidhts)].classList.add('active')}
	}
	// 点击焦点或左右移动按钮实现的滚动效果
	function buttons(){
		//console.log('Value:'+value + "Z:"+z);
		if (-(value) > -(z)){
			if (z != item){
				middle.style.left = "-" + (-(middle.style.left.slice(0,-2)) - 20 +'px');
				//console.log("MIDDLE.LEFT" + middle.style.left.slice(0,-2));
				z -= 20;
			}else{
				middle.style.left = "0px";
				z = 0;
			}
			
		}else if (-(value) < -(z)){
			middle.style.left = middle.style.left.slice(0,-2) - 20 +'px';
			z += 20;
		}else {
			clearInterval(ts);
			setTimeout(batt,5);
		}
	}
	
	//当鼠标移入图片时暂停轮播， 移出继续播放
	big.onmouseover = () => {clearInterval(times)}
	big.onmouseout = () => {times = setInterval(autoplay,3000)}
	
	// 为左右移动按钮设置单击事件
	for (var p=0; p < btns.length; p++){
		btns[p].id = p;
		btns[p].onclick = function(){
			if (this.id == 1){
				if (z == item){value = whidhts}
				else{value = z + parseInt(whidhts)}
			}else{
				if (z == 0){
					middle.style.left = "-" + (item - 20) +'px';
					value = parseInt(item) - parseInt(whidhts);
					z = item - 20;
				}
				else if (z == item){
					middle.style.left = "-" + (item - 20) +'px';
					value = item - whidhts;
					z = item - 20;
					
				}
				else{
					value = z - whidhts
				}
			}	
			ts = setInterval(buttons,5);
		}
	}
	// 为每个焦点设置单击事件
	for (var p=0; p < bats.length; p++){
		bats[p].id = p;
		bats[p].onclick = function(){
			value = this.id * whidhts;
			ts = setInterval(buttons,5);
			
		}
	}
	
	debugger;
	times = setInterval(autoplay,3000);
	//当切换最小化页面或切换页面时停止播放，返回页面继续播放
	document.onvisibilitychange = () => document.visibilityState == 'hidden' ? clearInterval(times) : times = setInterval(autoplay,3000);
</script>
</body>
</html>

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

  • 标记语言---XML MzKyle 标记语言xmljava前端
    一、XML的定义与核心定位XML（ExtensibleMarkupLanguage，可扩展标记语言）是由万维网联盟（W3C）于1998年2月发布的一种标记语言，其核心设计目标是传输和存储数据，而非直接用于显示数据（这一点与HTML有本质区别）。XML的“可扩展性”体现在：它没有预定义标签，用户可以根据需求自定义标签，只要遵循语法规则即可。这种灵活性使其成为跨平台、跨系统数据交换的重要标准，广泛应用
  • 打造完美Web登录界面：HTML、CSS与Bootstrap实战 Suvo Sarkar
    本文还有配套的精品资源，点击获取简介：登录界面是用户与Web应用程序互动的起点，其设计和实现对用户体验至关重要。本教程将指导开发者如何使用HTML、CSS和Bootstrap框架创建一个功能齐全且视觉吸引力强的登录界面。内容涵盖从基础的表单标签到使用Bootstrap的响应式设计，以及如何结合JavaScript和后端技术来增强界面的业务逻辑和用户验证功能。1.HTML表单标签基础HTML表单标签
  • 【Linux系列】rsync和mv 檀越@新空间 s5Linux学习linux服务器java
    博客目录1.操作性质不同2.对源文件的影响3.使用场景4.示例对比使用`rsync-a`：使用`mv`：5.注意事项总结rsync-a/data/software/build0713/dist//usr/share/nginx/html/和mv是两种完全不同的操作，主要区别如下：1.操作性质不同rsync-a复制同步：将源目录（/data/software/build0713/dist/）的内容递
  • web登录注册页面 m0_67391518 面试学习路线阿里巴巴前端javahtmlmysql数据库
    目录web登录注册页面效果图结构图Java代码User.javaUserMapper.javaIndexServlet.javaRegisterServlet.javaDButil.javaxml配置文件mybatis-config.xmldb.propertiesweb.xmlhtml与cssindex.jspindex.cssregister.htmlregister.css文章目录web登录
  • CSS中的transform 骑驴看星星a css前端javascript开发语言ecmascriptlinux学习
    在CSS中，transform是用于用于用于对元素进行几何变换的属性，可实现旋转、缩放、平移、倾斜等效果，且不会影响其他元素的布局（不会触发重排）。以下是其核心用法和特性：1.基本语法element{transform:变换函数1(参数)变换函数2(参数);/*多个变换可叠加*/transform-origin:x-axisy-axis;/*变换原点（默认中心）*/transition:trans
  • web登录界面 Teaioo 前端html5css前端html
    文本框注册忘记密码?登录a:link{color:#000000;}/*未访问链接*/a:visited{color:#00FF00;}/*已访问链接*/a:hover{color:#FF00FF;}/*鼠标移动到链接上*/a:active{color:#0000FF;}/*鼠标点击时*/@charset"utf-8";/*CSSDocument*//*页面整体布局*/.mr-cont{width
  • 简单WEB登录页面代码实现 逆流的飞鱼 简单代码java
    longin.html：登录页面，此处action引用**/**类型的地址，JSP可以用${pageContext.request.contextPath}/LS用户名:密码：LoginServlet.java用户和前台WEB页面数据进行交互packageit.tongyou.web.servlet;importjava.io.IOException;importjava.io.PrintWrit
  • 使用Meteor构建实时仪表板的完整指南 杏花朵朵 Meteor实时仪表板Vue组件路由设置集合集成
    背景简介随着现代Web应用对实时性和响应性的要求不断提高，开发人员需要使用强大的框架来构建能够满足这些需求的应用程序。Meteor作为一个全栈JavaScript框架，提供了一种快速开发实时Web应用的方法。本文将通过构建一个实时仪表板项目，详细探讨Meteor的特点和使用方法。Meteor简介Meteor是一个全栈JavaScript框架，用于构建Web应用程序。它的主要元素包括Web客户端、基
  • 完善Meteor应用的NPM集成——meteorhacks/npm项目推荐 尤峻淳Whitney
    完善Meteor应用的NPM集成——meteorhacks/npm项目推荐1.项目基础介绍及编程语言meteorhacks/npm是一个开源项目，旨在为Meteor应用提供完整的NPM模块集成。该项目通过允许在Meteor应用内部使用NPM模块，极大地扩展了Meteor应用的功能性和灵活性。该项目的主要编程语言是JavaScript。2.项目核心功能项目的核心功能是提供一个桥接器，让开发者可以在M
  • node.js详解 思静鱼 node.jsnode.js
    文章目录一、什么是Node.js？二、Node.js的核心组成三、Node.js的运行机制（事件循环）四、常见内置模块（无需安装）五、应用场景六、npm包生态七、Node.js适合哪些人？八、优缺点总结一、什么是Node.js？Node.js是一个基于ChromeV8引擎的JavaScript运行时，用于构建高性能网络应用。由RyanDahl于2009年发布。允许你在服务器端使用JavaScrip
  • 机器学习数据预处理阶段为什么需要——归一化处理
    参考：https://www.cnblogs.com/bjwu/p/8977141.html通常，在DataScience中，预处理数据有一个很关键的步骤就是数据的标准化。这里主要引用sklearn文档中的一些东西来说明，主要把各个标准化方法的应用场景以及优缺点总结概括，以来充当笔记。提升模型精度在机器学习算法的目标函数(例如SVM的RBF内核或线性模型的l1和l2正则化)，许多学习算法中目标函数
  • Python 解析 PDF 文件的基础方法 电脑维修员xy pythonpdf前端
    ```htmlPython解析PDF文件的基础方法Python解析PDF文件的基础方法在现代数据处理和信息提取任务中，PDF文件是一种常见的文档格式。然而，PDF文件的结构复杂且难以直接解析，尤其是当需要从中提取文本或数据时。幸运的是，Python提供了多种强大的库来帮助我们轻松地解析PDF文件。1.PyPDF2库PyPDF2是一个功能强大的Python库，用于处理PDF文件。它可以读取、分割、合
  • 前端Vue自定义顶部搜索框 热门搜索 历史搜索 用于搜索跳转使用 前端组件分享
    前端Vue自定义顶部搜索框热门搜索历史搜索用于搜索跳转使用，下载完整代码请访问uni-app插件市场地址：https://ext.dcloud.net.cn/plugin?id=13128效果图如下：####自定义顶部搜索框用于搜索跳转使用方法```使用方法```####HTML代码实现部分```htmlimportCCBProjectListfrom'../../components/CCPro
  • python爬大学生就业信息报告_Python语言爬虫——Python 岗位分析报告 weixin_39578457
    本文主要向大家介绍了Python语言爬虫——Python岗位分析报告，通过具体的内容向大家展示，希望对大家学习Python语言有所帮助。前两篇我们分别爬取了糗事百科和妹子图网站，学习了Requests,BeautifulSoup的基本使用。不过前两篇都是从静态HTML页面中来筛选出我们需要的信息。这一篇我们来学习下如何来获取Ajax请求返回的结果。本篇以拉勾网为例来说明一下如何获取Ajax请求内容
  • 重学前端006 --- 响应式网页设计 CSS 弹性盒子
    文章目录盒模型一、盒模型的基本概念二、两种盒模型的对比举例三、总结Flexbox弹性盒子布局一、Flexbox的核心概念二、Flexbox的基本语法1.定义Flex容器2.Flex容器的主要属性3.Flex项目的主要属性三、Flexbox的常见布局示例四、FlexboxvsGrid布局五、总结imgobject-fitgapCSS::after伪元素详解1.基本概念2.基础语法3.关键注意事项以下
  • 重学前端007 --- 响应式网页设计 CSS 排版 Sapphire～ 前端前端
    文章目录导入字体总结浏览器给元素添加的默认值text-indent:-8px;1.text-indent属性的作用2.总结其他css导入字体这将导入OpenSans字体系列，字体粗细值为400、700和800。总结浏览器给元素添加的默认值元素默认外边距（Margin）默认内边距（Padding）作用-上下0.5em~1em无标题与内容分隔上下1em无段落间距/上下1em，左右40px无列表缩进上下
  • mysql 清理磁盘空间 汐猫 mysql数据库
    数据库相关学习资料：https://edu.51cto.com/video/655.htmlMySQL清理磁盘空间：代码示例与流程指南MySQL是一种广泛使用的开源关系数据库管理系统，它在处理大量数据时可能会占用大量的磁盘空间。随着时间的推移，数据库可能会积累许多不再需要的数据，导致磁盘空间不足。本文将介绍如何清理MySQL数据库中的磁盘空间，包括代码示例和流程图。清理磁盘空间的原因性能提升：清理
  • 任涵去脂——秋雨寒了红叶 任涵去脂
    粉蝶尖尖，蜓青风淡。笔锋里流出唐诗宋词，行间中藏匿了十里桃花。淡雅几笔，远寄一束听雨的轻盈。幽长月光下，肩落长影，飘逸着风幔罗幛的秋香。任涵去脂，原文地址http://www.rhqz8.cn/rhqz.html秋雨寒了红叶。捧起一缕秋风，听红叶细语。是秋的辉煌，是冬的序言。在秋色冬雪间连着相依相伴的岁月。秋是冬的情，冬是秋的梦。山岭红秀，细雨如绸。撑起一伞秋雨，流淌着海洋的斑驳。回眸中，一川朦胧
  • 网络安全第三次作业搭建前端页面并解析
    我制作的是一个简单的登录页面网源代码1.CSS中box-sizing:border-box：使元素宽度包含边框和内边距，避免布局因padding变化错位。2.min-height:100vh：让body高度至少等于屏幕高度，确保登录框始终居中，不受内容高度影响。3..login-container的max-width:400px：限制登录框最大宽度，在大屏设备上不无限拉伸，保持美观。4.input
  • JavaScript 基础语法与核心概念实战：从变量到定时器 Elieal javascript开发语言ecmascript
    JavaScript作为前端开发的核心语言，其基础语法和数据类型是入门的关键。本文将通过实际代码示例，详解JavaScript的变量、数据类型、复合类型及常用交互功能，帮助初学者快速掌握核心概念。一、变量与基本数据类型变量是存储数据的容器，JavaScript中通过var（ES5）、let/const（ES6）声明。基本数据类型是构建复杂程序的基础，包括以下5种：//基本数据类型示例vara=10
  • javascript基本内容和标签 Sonnenblume_f IT总结编程语言javascriptIT总结
    js概念:javascript是互联网上最流行的，可以嵌套到html代码中的，一种基于对象和事件驱动的，并具有安全性能的脚本语言。具有1）向html页面中增加交互行为；2）脚本语言，语法和java类似；3）解释性语言，边执行边解释;4）跨平台，每个浏览器都具有js解释器;作用：增删HTML和css中的代码,能够动态校验数据组成：ECMAScript（核心）BOM浏览器对象模型DOM文档对象模型引入
  • Ajax与axios wwwwdn ajaxokhttp前端javascript
    本文是学习了网上的Ajax的课程总结，并加上了一些自己的总结。AjaxAjax（AsynchronousJavascriptAndXML），即是异步的JavaScript和XML，Ajax其实就是浏览器与服务器之间的一种异步通信方式。XMLHttpRequest（XHR）XMLHttpRequest（XHR）对象用于与服务器交互。通过XMLHttpRequest可以在不刷新页面的情况下请求特定UR
  • PHP与Web页面交互：从基础表单到AJAX实战 独立开发者阿乐 综合性原创前端php交互Web页面表单处理AJAX技术AJAX
    文章目录PHP与Web页面交互：从基础到高级实践1.引言2.基础表单处理2.1HTML表单与PHP交互基础2.2GET与POST方法比较3.高级交互技术3.1AJAX与PHP交互3.2使用FetchAPI进行现代AJAX交互4.文件上传处理5.安全性考量5.1常见安全威胁与防护5.2数据验证与过滤6.现代PHP与前端框架交互6.1构建RESTfulAPI6.2使用JWT进行认证7.性能优化7.1缓
  • JavaScript 类型转换之谜：为什么 [] + 0 = ‘0‘ 而 {} + 0 = 0？
    在JavaScript面试中，表达式[]+0和{}+0的结果差异常令人困惑。它们揭示了JavaScript类型转换的核心机制，下面我们深入解析背后的原理。案例一：[]+0='0'（字符串拼接）转换步骤：数组[]转换为原始值JavaScript对对象（包括数组）执行ToPrimitive转换：优先调用valueOf()→返回数组本身（非原始值，继续下一步）调用toString()→空数组转为空字符串
  • css实现箭头进度条 惜音renee
    实现的目标：源码：首先写出一个基本的样式：买家下单买家付款发货买家确认收货.progress-barli{padding:0px20px;line-height:40px;background:#50abe4;display:inline-block;color:#fff;position:relative;width:180px;text-align:center;}接下来使用:after伪类画
  • 网络爬虫进阶 rooney2024 爬虫
    目录一、进阶爬虫的核心挑战二、关键技术与最佳实践三、实战案例：爬取动态电商价格（伪代码示例）四、持续学习路径结语一、进阶爬虫的核心挑战动态渲染页面(JavaScript/AJAX)问题：数据由JavaScript动态加载生成，初始HTML中不存在。解决方案：浏览器自动化工具：Selenium,Playwright,Puppeteer。模拟真实浏览器行为，等待JS执行并渲染出完整DOM后再解析。无头
  • Android音视频探索之旅 | Webrtc 1对1音视频通话核心流程分析 慢行的骑兵 音视频android音视频webrtc
    一.前言使用Webrtc实现1对1的音视频通话，先从Web端进行学习要比直接从Android端进行学习要轻松许多（若没有JS和Html以及Node基础，查找相关基础教程，能梳理代码的逻辑即可）。本文Android端接入Webrtc是通过引入官方的sdk来实现的。本文涉及到的Demo代码包含三部分，服务器端、Web端、Android端。服务器端使用的是Node，Web使用的是Html和JS，Andr
  • Linux 基本指令详解 Cherl. Linuxlinux运维服务器基本命令
    1.pwd（PrintWorkingDirectory）显示当前工作目录的完整路径root@hcss-ecs-a3f4:~#pwd/root2.ls（List）列出目录内容ls#查看当前目录下文件和文件夹ls-l#长格式显示(显示权限、所有者、大小、修改时间等)ls-a#显示所有文件(包括隐藏文件)ls-la#长格式显示所有文件ls-lh#以人类可读的方式显示文件大小ls-R#递归显示子目录ll为
  • Python 服务器端与客户端的加密通信（SSL/TLS）解析 现实逃脱计划TA pythonssl网络
    ```htmlPython服务器端与客户端的加密通信（SSL/TLS）解析在当今互联网时代，数据安全变得越来越重要。为了保护数据在传输过程中的安全，使用SSL/TLS协议进行加密通信成为了一种常见的做法。本文将详细介绍如何在Python中实现服务器端和客户端之间的SSL/TLS加密通信。什么是SSL/TLS？SSL（SecureSocketsLayer）和TLS（TransportLayerSec
  • 【TypeScript学习笔记】TypeScript 核心知识点 Zaly. Vue学习笔记typescript学习笔记
    目录前言TypeScript核心概念基本类型与高级类型常用内置工具类型类型断言与类型守卫TypeScript在Vue3中的应用Vue3中TypeScript的作用范围Props和Emits的类型定义CompositionAPI中的类型支持前言TypeScript是微软开发的一个开源的编程语言，通过在JavaScript的基础上添加静态类型定义构建而成。TypeScript通过TypeScript编
  • jvm调优总结（从基本概念 到 深度优化） oloz javajvmjdk虚拟机应用服务器
    JVM参数详解：http://www.cnblogs.com/redcreen/archive/2011/05/04/2037057.html   Java虚拟机中，数据类型可以分为两类：基本类型和引用类型。基本类型的变量保存原始值，即：他代表的值就是数值本身；而引用类型的变量保存引用值。“引用值”代表了某个对象的引用，而不是对象本身，对象本身存放在这个引用值所表示的地址的位置。
  • 【Scala十六】Scala核心十：柯里化函数 bit1129 scala
    本篇文章重点说明什么是函数柯里化，这个语法现象的背后动机是什么，有什么样的应用场景，以及与部分应用函数(Partial Applied Function)之间的联系   1. 什么是柯里化函数 A way to write functions with multiple parameter lists. For instance def f(x: Int)(y: Int) is a
  • HashMap dalan_123 java
    HashMap在java中对很多人来说都是熟的；基于hash表的map接口的非同步实现。允许使用null和null键；同时不能保证元素的顺序；也就是从来都不保证其中的元素的顺序恒久不变。 1、数据结构     在java中，最基本的数据结构无外乎：数组 和 引用（指针），所有的数据结构都可以用这两个来构造，HashMap也不例外，归根到底HashMap就是一个链表散列的数据
  • Java Swing如何实时刷新JTextArea，以显示刚才加append的内容 周凡杨 java更新swingJTextArea
    在代码中执行完textArea.append("message")后，如果你想让这个更新立刻显示在界面上而不是等swing的主线程返回后刷新，我们一般会在该语句后调用textArea.invalidate()和textArea.repaint()。 问题是这个方法并不能有任何效果，textArea的内容没有任何变化，这或许是swing的一个bug，有一个笨拙的办法可以实现
  • servlet或struts的Action处理ajax请求 g21121 servlet
    其实处理ajax的请求非常简单，直接看代码就行了： //如果用的是struts //HttpServletResponse response = ServletActionContext.getResponse(); // 设置输出为文字流 response.setContentType("text/plain"); // 设置字符集 res
  • FineReport的公式编辑框的语法简介 老A不折腾 finereport公式总结
    FINEREPORT用到公式的地方非常多，单元格（以=开头的便被解析为公式），条件显示，数据字典，报表填报属性值定义，图表标题，轴定义，页眉页脚，甚至单元格的其他属性中的鼠标悬浮提示内容都可以写公式。 简单的说下自己感觉的公式要注意的几个地方：   1.if语句语法刚接触感觉比较奇怪，if(条件式子,值1,值2)，if可以嵌套，if(条件式子1，值1，if(条件式子2，值2，值3)
  • linux mysql 数据库乱码的解决办法 墙头上一根草 linuxmysql数据库乱码
    linux 上mysql数据库区分大小写的配置 lower_case_table_names=1 1-不区分大小写 0-区分大小写   修改/etc/my.cnf 具体的修改内容如下:   [client] default-character-set=utf8   [mysqld] datadir=/var/lib/mysql socket=/va
  • 我的spring学习笔记6-ApplicationContext实例化的参数兼容思想 aijuans Spring 3
    ApplicationContext能读取多个Bean定义文件，方法是： ApplicationContext appContext = new ClassPathXmlApplicationContext（ new String[]｛“bean-config1.xml”，“bean-config2.xml”，“bean-config3.xml”，“bean-config4.xml
  • mysql 基准测试之sysbench annan211 基准测试mysql基准测试MySQL测试sysbench
    1 执行如下命令，安装sysbench-0.5： tar xzvf sysbench-0.5.tar.gz  cd sysbench-0.5  chmod +x autogen.sh  ./autogen.sh  ./configure --with-mysql --with-mysql-includes=/usr/local/mysql
  • sql的复杂查询使用案列与技巧 百合不是茶 oraclesql函数数据分页合并查询
      本片博客使用的数据库表是oracle中的scott用户表;          -------------------  自然连接查询           查询 smith 的上司(两种方法) &
  • 深入学习Thread类 bijian1013 javathread多线程java多线程
    一．             线程的名字 下面来看一下Thread类的name属性，它的类型是String。它其实就是线程的名字。在Thread类中，有String getName()和void setName(String)两个方法用来设置和获取这个属性的值。 同时，Thr
  • JSON串转换成Map以及如何转换到对应的数据类型 bijian1013 javafastjsonnet.sf.json
            在实际开发中，难免会碰到JSON串转换成Map的情况，下面来看看这方面的实例。另外，由于fastjson只支持JDK1.5及以上版本，因此在JDK1.4的项目中可以采用net.sf.json来处理。 一.fastjson实例 JsonUtil.java package com.study; impor
  • 【RPC框架HttpInvoker一】HttpInvoker：Spring自带RPC框架 bit1129 spring
    HttpInvoker是Spring原生的RPC调用框架，HttpInvoker同Burlap和Hessian一样，提供了一致的服务Exporter以及客户端的服务代理工厂Bean，这篇文章主要是复制粘贴了Hessian与Spring集成一文，【RPC框架Hessian四】Hessian与Spring集成   在 【RPC框架Hessian二】Hessian 对象序列化和反序列化一文中
  • 【Mahout二】基于Mahout CBayes算法的20newsgroup的脚本分析 bit1129 Mahout
    #!/bin/bash # # Licensed to the Apache Software Foundation (ASF) under one or more # contributor license agreements. See the NOTICE file distributed with # this work for additional information re
  • nginx三种获取用户真实ip的方法 ronin47
    随着nginx的迅速崛起，越来越多公司将apache更换成nginx. 同时也越来越多人使用nginx作为负载均衡, 并且代理前面可能还加上了CDN加速，但是随之也遇到一个问题：nginx如何获取用户的真实IP地址,如果后端是apache,请跳转到<apache获取用户真实IP地址>，如果是后端真实服务器是nginx，那么继续往下看。 实例环境： 用户IP 120.22.11.11
  • java-判断二叉树是不是平衡 bylijinnan java
    参考了 http://zhedahht.blog.163.com/blog/static/25411174201142733927831/ 但是用java来实现有一个问题。 由于Java无法像C那样“传递参数的地址，函数返回时能得到参数的值”，唯有新建一个辅助类：AuxClass import ljn.help.*; public class BalancedBTree {
  • BeanUtils.copyProperties VS PropertyUtils.copyProperties 诸葛不亮 PropertyUtilsBeanUtils
     BeanUtils.copyProperties VS  PropertyUtils.copyProperties  作为两个bean属性copy的工具类，他们被广泛使用，同时也很容易误用，给人造成困然；比如：昨天发现同事在使用BeanUtils.copyProperties copy有integer类型属性的bean时，没有考虑到会将null转换为0，而后面的业
  • [金融与信息安全]最简单的数据结构最安全 comsci 数据结构
          现在最流行的数据库的数据存储文件都具有复杂的文件头格式，用操作系统的记事本软件是无法正常浏览的，这样的情况会有什么问题呢？        从信息安全的角度来看，如果我们数据库系统仅仅把这种格式的数据文件做异地备份，如果相同版本的所有数据库管理系统都同时被攻击，那么
  • vi区段删除 Cwind linuxvi区段删除
    区段删除是编辑和分析一些冗长的配置文件或日志文件时比较常用的操作。简记下vi区段删除要点备忘。   vi概述    引文中并未将末行模式单独列为一种模式。单不单列并不重要，能区分命令模式与末行模式即可。   vi区段删除步骤： 1. 在末行模式下使用:set nu显示行号 非必须，随光标移动vi右下角也会显示行号，能够正确找到并记录删除开始行
  • 清除tomcat缓存的方法总结 dashuaifu tomcat缓存
    用tomcat容器，大家可能会发现这样的问题，修改jsp文件后，但用IE打开 依然是以前的Jsp的页面。 出现这种现象的原因主要是tomcat缓存的原因。 解决办法如下: 在jsp文件头加上 <meta http-equiv="Expires" content="0"> <meta http-equiv="kiben&qu
  • 不要盲目的在项目中使用LESS CSS dcj3sjt126com Webless
    　如果你还不知道LESS CSS是什么东西，可以看一下这篇文章，是我一朋友写给新人看的《CSS——LESS》 　　不可否认，LESS CSS是个强大的工具，它弥补了css没有变量、无法运算等一些“先天缺陷”，但它似乎给我一种错觉，就是为了功能而实现功能。 　　比如它的引用功能 ? .rounded_corners{     
  • [入门]更上一层楼 dcj3sjt126com PHPyii2
    更上一层楼 通篇阅读完整个“入门”部分，你就完成了一个完整 Yii 应用的创建。在此过程中你学到了如何实现一些常用功能，例如通过 HTML 表单从用户那获取数据，从数据库中获取数据并以分页形式显示。你还学到了如何通过 Gii 去自动生成代码。使用 Gii 生成代码把 Web 开发中多数繁杂的过程转化为仅仅填写几个表单就行。 本章将介绍一些有助于更好使用 Yii 的资源：
  • Apache HttpClient使用详解 eksliang httpclienthttp协议
    Http协议的重要性相信不用我多说了，HttpClient相比传统JDK自带的URLConnection，增加了易用性和灵活性（具体区别，日后我们再讨论），它不仅是客户端发送Http请求变得容易，而且也方便了开发人员测试接口（基于Http协议的），即提高了开发的效率，也方便提高代码的健壮性。因此熟练掌握HttpClient是很重要的必修内容，掌握HttpClient后，相信对于Http协议的了解会
  • zxing二维码扫描功能 gundumw100 androidzxing
    经常要用到二维码扫描功能 现给出示例代码 import com.google.zxing.WriterException; import com.zxing.activity.CaptureActivity; import com.zxing.encoding.EncodingHandler; import android.app.Activity; import an
  • 纯HTML+CSS带说明的黄色导航菜单 ini htmlWebhtml5csshovertree
    HoverTree带说明的CSS菜单:纯HTML+CSS结构链接带说明的黄色导航   在线体验效果：http://hovertree.com/texiao/css/1.htm代码如下,保存到HTML文件可以看到效果：   <!DOCTYPE html > <html > <head> <title>HoverTree
  • fastjson初始化对性能的影响 kane_xie fastjson序列化
    之前在项目中序列化是用thrift，性能一般，而且需要用编译器生成新的类，在序列化和反序列化的时候感觉很繁琐，因此想转到json阵营。对比了jackson，gson等框架之后，决定用fastjson，为什么呢，因为看名字感觉很快。。。   网上的说法：   fastjson 是一个性能很好的 Java 语言实现的 JSON 解析器和生成器，来自阿里巴巴的工程师开发。
  • 基于Mybatis封装的增删改查实现通用自动化sql mengqingyu DAO
    1.基于map或javaBean的增删改查可实现不写dao接口和实现类以及xml，有效的提高开发速度。 2.支持自定义注解包括主键生成、列重复验证、列名、表名等 3.支持批量插入、批量更新、批量删除 <bean id="dynamicSqlSessionTemplate" class="com.mqy.mybatis.support.Dynamic
  • js控制input输入框的方法封装(数字，中文，字母，浮点数等) qifeifei javascript js
    在项目开发的时候，经常有一些输入框，控制输入的格式，而不是等输入好了再去检查格式，格式错了就报错，体验不好。 /** 数字，中文，字母,浮点数(+/-/.) 类型输入限制，只要在input标签上加上 jInput="number,chinese,alphabet,floating" 备注：floating属性只能单独用*/     funct
  • java 计时器应用 tangqi609567707 javatimer
    mport java.util.TimerTask;   import java.util.Calendar;   public class MyTask extends TimerTask {        private static final int
  • erlang输出调用栈信息 wudixiaotie erlang
    在erlang otp的开发中，如果调用第三方的应用，会有有些错误会不打印栈信息，因为有可能第三方应用会catch然后输出自己的错误信息，所以对排查bug有很大的阻碍，这样就要求我们自己打印调用的栈信息。用这个函数：erlang:process_display (self (), backtrace).需要注意这个函数只会输出到标准错误输出。 也可以用这个函数：erlang:get_s
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他