aston_c
aston_c

HTML + CSS + Javascript 简易示例

要实现的效果：

  1. 页面中有一个表格显示水果的数据。
  2. 鼠标移动到表格内，就改变当前行背景色，移动到单价单元格鼠标就变成手型。
  3. 单价单元格点击进行编辑，对输入进行容错处理，编辑后计算更新小计和总计。
  4. 点击删除操作弹出提示框提醒，确认删除即删除表格一行数据，并更新总计。

效果图：
HTML + CSS + Javascript 简易示例_第1张图片

HTML

html文件：demo03.html

<html>
<head>
	<link rel="stylesheet" type="text/css" href="css/demo03.css">
	<script type="text/javascript" src="js/demo03.js">script>
head>

<body>
	<div id="div_container">
		<div id="div_fruit_list">
			<table id="tal_fruit">
				<tr>
					<th class="w20">名称th>
					<th class="w20">单价th>
					<th class="w20">数量th>
					<th class="w20">小计th>
					<th class="w20">操作th>
				tr>
				<tr>
					<td>苹果td>
					<td>5td>
					<td>21td>
					<td>105td>
					<td><img src="imgs/delete.png" class="img_delete"/>td>
				tr>
				<tr>
					<td>西瓜td>
					<td>7td>
					<td>1td>
					<td>7td>
					<td><img src="imgs/delete.png" class="img_delete"/>td>
				tr>
				<tr>
					<td>菠萝td>
					<td>18td>
					<td>3td>
					<td>54td>
					<td><img src="imgs/delete.png" class="img_delete"/>td>
				tr>
				<tr>
					<td>香蕉td>
					<td>3td>
					<td>10td>
					<td>30td>
					<td><img src="imgs/delete.png" class="img_delete"/>td>
				tr>
				<tr>
					<td>总计td>
					<td colspan="4">196td>
				tr>

			table>
		div>
	div>
body>
html>

CSS

css文件：html03.css


body{
	margin: 0;
	padding: 0;
	background-color: lightgrey;
}
div{
	position: relative;
	float: left;
}
input{
	font-size: 22px;
}

#div_container{
	width: 80%;
	height: 100%;
	border: 1px solid grey;
	margin-left: 10%;
	float: left;
	background-color: honeydew;
	border-radius: 4px;
}

#div_fruit_list{
	width: 100%;
}

#tal_fruit {
	width: 60%;
	margin-left: 20%;
	margin-top: 100px;
	line-height: 40px;
}

#tal_fruit , #tal_fruit tr , #tal_fruit th , #tal_fruit td {
	border: 2px solid grey;
	border-collapse: collapse;
	text-align: center;
	font-family: "黑体";
	color: threeddarkshadow;
	font-size: 22px;
}

.w20{
	width: 20%;
}

.img_delete{
	width: 24px;
	height: 24px;
}

Javascript

js文件：demo03.js


window.onload = function() {
	//当页面加载完成，我们需要绑定各种事件

	var fruitTbl = document.getElementById("tal_fruit");
	//获取表格中的所有行
	var rows = fruitTbl.rows;
	for (var i = 1; i < rows.length - 1; i++) {
		var ti = rows[i];
		//1.绑定鼠标悬浮以及离开时设置背景颜色事件
		//方法不加小括号，表示方法绑定到这个事件
		ti.onmouseover=showBgColor;
		ti.onmouseout = clearBgColor;

		//获取tr这一行的所有单元格
		var cells = ti.cells;
		var priceTd = cells[1];

		//2.绑定鼠标悬浮在单价单元格变手势的事件
		priceTd.onmouseover = showHand;
		//3.绑定鼠标点击单价单元格的事件
		priceTd.onclick = editPrice;

		//7.绑定删除小图标的点击事件
		var img = cells[4].firstChild;
		if (img && img.tagName == "IMG") {
			//绑定单击事件
			img.onclick = deleteFruit;
		}

	}
}

//当鼠标悬浮时，显示背景颜色
function showBgColor(){
	// event : 当前发生的事件
	// event.srcElement : 事件源
	
	if (event && event.srcElement && event.srcElement.tagName == "TD") {
		var td = event.srcElement;

		// td.parentElement 表示获取td的父元素 -> TR
		var tr = td.parentElement;

		//如果想要通过js代码设置某节点的样式，则需要加上 .style
		tr.style.backgroundColor = "royalblue";

		//
		var tds = tr.cells;
		for (var i = 0; i < tds.length; i++) {
			tds[i].style.color = "white";
		}

	}
}

//当鼠标离开时，恢复原始样式
function clearBgColor(){
	if (event && event.srcElement && event.srcElement.tagName == "TD") {
		var td = event.srcElement;

		var tr = td.parentElement;

		tr.style.backgroundColor = "transparent";

		var tds = tr.cells;
		for (var i = 0; i < tds.length; i++) {
			tds[i].style.color = "threeddarkshadow";
		}
	}
}

//当鼠标悬浮在单价单元格时，显示手势
function showHand() {
	if (event && event.srcElement && event.srcElement.tagName == "TD") {
		var td = event.srcElement;
		// cursor : 光标
		td.style.cursor="hand"
	}
}

//当鼠标点击单价单元格时进行价格编辑
function editPrice() {
	if(event && event.srcElement && event.srcElement.tagName == "TD") {
		
		var priceTd = event.srcElement;
		//目的是判断当前priceTD有子节点，而且第一个子节点是文本节点，TextNode对应的是3  ElementNote对应的是1
		if(priceTd.firstChild && priceTd.firstChild.nodeType == 3) {
			
			//innerText 表示设置或者获取当前节点的内部文本
			var oldPrice = priceTd.innerText;
			//innerHtml 表示设置当前节点的内部HTML
			priceTd.innerHTML="";
			// 
			var input = priceTd.firstChild;
			if (input.tagName == "INPUT"){
				input.value = oldPrice;
				//选中输入框内部的文本
				input.select();
				//4.绑定输入框失去焦点，失去焦点，更新单价
				input.onblur=updatePrice;

				//8.在输入框上绑定键盘按下的事件，此处我需要保证用户输入的是数字
				input.onkeydown=checkInput;
			}
		}
	}
}

//更新单价
function updatePrice() {
	if(event && event.srcElement && event.srcElement.tagName == "INPUT") {
		var input = event.srcElement;
		var newPrice = input.value;
		//input节点的父节点是td
		var priceTd = input.parentElement;
		priceTd.innerHTML = newPrice;

		//5.更新当前行的小计这一个格子的值
		//priceTd.parentElement td的父元素是tr
		updateXj(priceTd.parentElement);
	}
}

//更新指定行的小计
function updateXj(tr) {
	if (tr && tr.tagName == "TR") {
		var tds = tr.cells;
		var price = tds[1].innerText;
		var count = tds[2].innerText;
		//innerText获取到的值的类型是字符串类型，因此需要类型转换，才能进行数学运算
		var xj = parseInt(price) * parseInt(count);
		tds[3].innerText = xj;

		//6.更新总计
		updateZj();
	}
}

//更新总计
function updateZj() {
	var fruitTbl = document.getElementById("tal_fruit");
	var rows = fruitTbl.rows;
	var sum = 0;
	for (var i = 1; i < rows.length - 1; i++) {
		var tr = rows[i];
		var xj = parseInt(tr.cells[3].innerText);
		sum = sum + xj;
	}
	rows[rows.length - 1].cells[1].innerText = sum;
}

//删除指定行
function deleteFruit() {
	if (event && event.srcElement && event.srcElement.tagName == "IMG") {

		//alert表示弹出一个对话框，只有确定按钮
		//confirm表示弹出一个对话框，有确定和取消按钮。当点击确定返回true，否则返回false
		if (window.confirm("是否确认删除当前库存记录")) {
			var img = event.srcElement;
			var tr = img.parentElement.parentElement;
			var fruitTbl = document.getElementById("tal_fruit");
			fruitTbl.deleteRow(tr.rowIndex);

			updateZj();
		}
	}
}

//检验键盘摁下的值的方法
function checkInput() {
	var kc = event.keyCode;
	// 0~9 : 48~57
	//backspace : 8
	//enter : 13
	console.log(kc);

	if ( !((kc >= 48 && kc<=57) || kc == 8 || kc == 13) ) {
		event.returnValue = false;
	}

	if (kc == 13) {
		event.srcElement.blur();
	}
}

显示效果

鼠标放在单元格时改变当前行的背景色，放在单价单元格上鼠标变成手型
HTML + CSS + Javascript 简易示例_第2张图片

点击单价单元格进行编辑
HTML + CSS + Javascript 简易示例_第3张图片
改变单价后计算小计和总计并更新
HTML + CSS + Javascript 简易示例_第4张图片
点击删除操作弹出提示框
HTML + CSS + Javascript 简易示例_第5张图片
删除一行数据后更新总计数据
HTML + CSS + Javascript 简易示例_第6张图片

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

  • Flask框架入门：快速搭建轻量级Python网页应用 「已注销」 python-AIpython基础网站网络pythonflask后端
    转载：Flask框架入门：快速搭建轻量级Python网页应用1.Flask基础Flask是一个使用Python编写的轻量级Web应用框架。它的设计目标是让Web开发变得快速简单，同时保持应用的灵活性。Flask依赖于两个外部库：Werkzeug和Jinja2，Werkzeug作为WSGI工具包处理Web服务的底层细节，Jinja2作为模板引擎渲染模板。安装Flask非常简单，可以使用pip安装命令
  • JSON 与 AJAX Auscy jsonajax前端
    一、JSON（JavaScriptObjectNotation）1.数据类型与语法细节支持的数据类型：基本类型：字符串（需用双引号）、数字、布尔值（true/false）、null。复杂类型：数组（[]）、对象（{}）。严格语法规范：键名必须用双引号包裹（如"name":"张三"）。数组元素用逗号分隔，最后一个元素后不能有多余逗号。数字不能以0开头（如012会被解析为12），不支持八进制/十六进制
  • Python Flask 框架入门：快速搭建 Web 应用的秘诀 Python编程之道 Python人工智能与大数据Python编程之道pythonflask前端ai
    PythonFlask框架入门：快速搭建Web应用的秘诀关键词Flask、微框架、路由系统、Jinja2模板、请求处理、WSGI、Web开发摘要想快速用Python搭建一个灵活的Web应用？Flask作为“微框架”代表，凭借轻量、可扩展的特性，成为初学者和小型项目的首选。本文将从Flask的核心概念出发，结合生活化比喻、代码示例和实战案例，带你一步步掌握：如何用Flask搭建第一个Web应用？路由
  • JavaScript 树形菜单总结 Auscy microsoft
    树形菜单是前端开发中常见的交互组件，用于展示具有层级关系的数据（如文件目录、分类列表、组织架构等）。以下从核心概念、实现方式、常见功能及优化方向等方面进行总结。一、核心概念层级结构：数据以父子嵌套形式存在，如{id:1,children:[{id:2}]}。节点：树形结构的基本单元，包含自身信息及子节点（若有）。展开/折叠：子节点的显示与隐藏切换，是树形菜单的核心交互。递归渲染：因数据层级不固定，
  • 精通Canvas：15款时钟特效代码实现指南 烟幕缭绕
    本文还有配套的精品资源，点击获取简介：HTML5的Canvas是一个用于绘制矢量图形的API，通过JavaScript实现动态效果。本项目集合了15种不同的时钟特效代码，帮助开发者通过学习绘制圆形、线条、时间更新、旋转、颜色样式设置及动画效果等概念，深化对Canvas的理解和应用。项目中的CSS文件负责时钟的样式设定，而JS文件则包含实现各种特效的逻辑，通过不同的函数或类处理时间更新和动画绘制，提
  • 基于链家网的二手房数据采集清洗与可视化分析 Mint_Datazzh 项目selenium网络爬虫
    个人学习内容笔记，仅供参考。项目链接：https://gitee.com/rongwu651/lianjia原文链接：基于链家网的二手房数据采集清洗与可视化分析–笔墨云烟研究内容该课题的主要目的是通过将二手房网站上的存量与已销售房源，构建一个二手房市场行情情况与房源特点的可视化平台。该平台通过HTML架构和Echarts完成可视化的搭建。因此，该课题的主要研究内容就是如何利用相关技术设计并实现这样
  • 【前端】jQuery数组合并去重方法总结
    在jQuery中合并多个数组并去重，推荐使用原生JavaScript的Set对象（高效简单）或$.unique()（仅适用于DOM元素，不适用于普通数组）。以下是完整解决方案：方法1：使用ES6Set（推荐）//定义多个数组constarr1=[1,2,3];constarr2=[2,3,4];constarr3=[3,4,5];//合并数组并用Set去重constmergedArray=[...
  • php SPOF 贵哥的编程之路(热爱分享 为后来者) PHP语言经典程序100题php开发语言
    1.什么是单点故障（SPOF）？单点故障指的是系统中某个组件一旦失效，整个系统或服务就会不可用。常见的单点有：数据库、缓存、Web服务器、负载均衡、网络设备等。2.常见单点故障场景只有一台数据库服务器，宕机后所有业务不可用只有一台Redis缓存，挂掉后缓存全部失效只有一台Web服务器，挂掉后网站无法访问只有一个负载均衡节点，挂掉后流量无法分发只有一条网络链路，断开后所有服务失联3.消除单点故障的主
  • Vue3+Vite+TS+Axios整合详细教程 老马聊技术 VueViteTSvue.js
    1.Vite简介Vite是新一代的前端构建工具，在尤雨溪开发Vue3.0的时候诞生。类似于Webpack+Webpack-dev-server。其主要利用浏览器ESM特性导入组织代码，在服务器端按需编译返回，完全跳过了打包这个概念，服务器随起随用。生产中利用Rollup作为打包工具，号称下一代的前端构建工具。vite是一种新型的前端构建工具，能够显著的提升前端开发者的体验。它主要有俩部分组成：一个
  • 日历插件-FullCalendar的详细使用 老马聊技术 JavaScript前端javascript
    一、介绍FullCalendar是一个功能强大、高度可定制的JavaScript日历组件，用于在网页中显示和管理日历事件。它支持多种视图（月、周、日等），可以轻松集成各种框架，并提供丰富的事件处理功能。二、实操案例具体代码如下：FullCalendar日期选择body{font-family:Arial,sans-serif;margin:20px;}#calendar{max-width:900
  • OpenWebUI(12)源码学习-后端constants.py常量定义文件 青苔猿猿 AI大模型openwebuiconstants常量定义
    目录文件名：`constants.py`功能概述：主要功能点详解1.**MESSAGES枚举类**2.**WEBHOOK_MESSAGES枚举类**3.**ERROR_MESSAGES枚举类**✅默认错误模板✅认证与用户相关错误✅资源冲突与重复错误✅验证失败类错误✅权限限制类错误✅文件上传与格式错误✅模型与API错误✅请求频率与安全限制✅数据库与配置错误4.**TASKS枚举类**✅总结实际应用场
  • 入门html这篇文章就够了 ξ流ぁ星ぷ132 html前端
    HTML笔记文章目录HTML笔记html介绍什么是htmlhtml的作用HTML标签介绍常用标签标签and标签and标签u标签del删除线br标签用于换行pre标签，预处理标签span标签div标签sub标签andsup标签hr标签h1,h2...h6标签：HTML5中的语义标签：特殊字符img标签a标签第一种用法：超链接第二种用法：锚点video标签表格标签：form标签input标签selec
  • javascript高级程序设计第3版——第12章 DOM2与DOM3 weixin_30687587 javascript数据结构与算法ViewUI
    12章——DOM2与DOM3为了增强D0M1，DOM级规范定义了一些模块。DOM2核心：为不同的DOM类型引入了一些与XML命名空间有关的方法，还定义了以编程方式创建Document实例的方法；DOM2级样式：针对操作元素的样式而开发；其特性总结：1.每个元素都有一个关联的style对象，可用来确定和修改行内样式；2.要确定某个元素的计算样式，可使用getComgetComputedStyle（）
  • JavaScript 基础09：Web APIs——日期对象、DOM节点 梦想当全栈 JavaScriptjavascript前端开发语言
    JavaScript基础09：WebAPIs——日期对象、DOM节点进一步学习DOM相关知识，实现可交互的网页特效能够插入、删除和替换元素节点。能够依据元素节点关系查找节点。一、日期对象掌握Date日期对象的使用，动态获取当前计算机的时间。ECMAScript中内置了获取系统时间的对象Date，使用Date时与之前学习的内置对象console和Math不同，它需要借助new关键字才能使用。1.实例
  • 《Java前端开发全栈指南：从Servlet到现代框架实战》
    前言在当今Web开发领域，Java依然是后端开发的主力语言，而随着前后端分离架构的普及，Java开发者也需要掌握前端技术栈。本文将全面介绍JavaWeb前端开发的核心技术，包括传统Servlet/JSP体系、现代前端框架集成方案，以及全栈开发的最佳实践。通过本文，您将了解如何构建现代化的JavaWeb应用前端界面。一、JavaWeb前端技术演进1.1传统技术栈Servlet：JavaWeb基础，处
  • JAVA 高频八股文 Day03 Conqueror675 java开发语言
    12.TCP和Http的区别是什么TCP是传输层协议，负责建立可靠的点对点连接，确保数据有序、完整地传输（如铁路轨道）；HTTP是应用层协议，基于TCP构建，定义了Web服务交互的报文格式和规则（如货运订单）。TCP关注数据如何可靠送达，通过三次握手建立连接、流量控制等机制保证传输；HTTP关注传输内容的意义，提供请求/响应语义（GET/POST等）和无状态通信。补充：说一下什么是三次握手四次挥手
  • Vue3组件库实战: 打造高复用UI系统 武昌库里写JAVA 面试题汇总与解析课程设计springbootvue.jslayui毕业设计
    Vue3组件库实战:打造高复用UI系统介绍什么是Vue3组件库在前端开发中，UI组件库是非常重要的一部分。Vue3组件库是基于Vue.js3.x版本开发的一套可用于构建Web应用的UI组件集合，可以帮助开发者快速搭建页面并保证页面的一致性和美观性。目标关键词：Vue3组件库设计与构建设计原则组件库的设计需要遵循一定的原则，比如易用性、可维护性、扩展性等。在设计阶段需要考虑到不同场景的使用，并且保证
  • 自测魅族手机webview加载h5时ul嵌套li标签js失效问题记录 ZhDan91 混合app前端开发
    自测魅族手机ul嵌套li标签js失效问题：可采用div嵌套option实现样式：.hot_list{width:100%;display:flex;flex-wrap:wrap;justify-content:space-between;}.hot_listoption{text-align:center;width:30%;padding:.16rem.34rem;border:0.1remso
  • GoView 强势入驻 GitCode：拖拽低代码，打造高颜值数据大屏 GitCode 代码君 gitcode低代码开源
    信息可视化时代，数字大屏日益成为展示核心KPI、运营状态、监控预警的主流形式。然而，用传统方式开发一个定制化数字大屏需要解决多少问题？1.繁复的数据源集成，各种不同的协议和格式……2.让人晕头转向的可视化逻辑，调动艰难的样式、布局、动画，和往往难以统一的风格3.牵一发而动全身的代码结构，就想换个主题色结果开启的全局CSS大冒险……现在，一个开源项目即可搞定上述问题——拖拽式低代码数字可视化平台Go
  • 为Layui Table组件添加前端搜索功能 caifox菜狐狸 JavaScript学习之旅：从新手到专家前端layuijavascripttable前端搜索表格搜索前端框架
    在现代Web开发中，数据展示和交互功能是构建高效、用户友好界面的关键要素之一。Layui作为一款广受欢迎的前端UI框架，以其简洁的代码、丰富的组件和强大的功能，为开发者提供了极大的便利。其中，Layui的Table组件更是以其强大的数据展示能力和灵活的配置选项，成为了许多项目中不可或缺的部分。然而，在实际应用中，仅仅展示数据往往是不够的。用户通常需要根据自己的需求快速查找特定信息，这就需要为表格添
  • flutter知识点 ZhDan91 flutter
    #时隔4年了#4年前用flutter开发海外项目和医疗项目。绘制界面的语法与html还是较类似的。把这些封印的记忆和技术回顾一下，最开始是开发Android出身的，所以开发起flutter来依旧是用的androidstudio开发工具。整理下用到的知识点：整理来源：flutter面试题——基础篇（1）-CSDN博客1、Dart是单线程的。在单线程中以消息循环来运行的。其中敖汉两个任务队列。一个是微
  • Java中的Tomcat，开启Web应用腾飞【基础版】
    目录一、Tomcat初登场：揭开神秘面纱（一）啥是Tomcat（二）为啥要有Tomcat二、Tomcat的安装与启动：开启第一步（一）下载Tomcat（二）启动Tomcat三、Tomcat的目录结构：探秘内部布局（一）核心目录介绍（二）目录间的协同工作四、部署JavaWeb应用到Tomcat：让应用上线（一）打包Web应用为WAR文件（二）部署WAR文件到Tomcat五、Tomcat的配置优化：让
  • Java Web 之 Session 详解 艾伦~耶格尔 java开发语言后端前端session
    在JavaWeb开发中，Session就像网站的专属记忆管家，为每个用户保管着重要的信息和状态，确保用户在网站的旅程顺畅无阻。场景一：想象你去一家大型超市购物，推着购物车挑选商品。这个购物车就如同Session，它记录了你的购物信息，方便你在结账时一次性结算。场景二：你在玩一个在线游戏，登录账号后，你的游戏进度、等级、装备等信息都会被保存在Session中，即使你中途关闭游戏，下次登录时依然可以继
  • Spring WebFlux 响应式编程原理与实战指南
    SpringWebFlux响应式编程原理与实战指南一、技术背景与应用场景随着微服务与高并发的迅速发展，传统的阻塞式编程模型在处理大量并发请求时容易导致线程资源耗尽、响应延迟增高。SpringWebFlux基于ReactiveStreams规范，通过非阻塞、背压机制，实现高吞吐、低延迟的Web服务。典型应用场景包括：实时数据推送：WebSocket或Server-SentEvents场景。高并发AP
  • 2025年渗透测试面试题总结-2025年HW(护网面试) 43（题目+回答） 独行soc 2025年护网面试职场和发展linux科技渗透测试安全护网
    安全领域各种资源，学习文档，以及工具分享、前沿信息分享、POC、EXP分享。不定期分享各种好玩的项目及好用的工具，欢迎关注。目录2025年HW(护网面试)431.自我介绍与职业规划2.Webshell源码级检测方案3.2025年新型Web漏洞TOP54.渗透中的高价值攻击点5.智能Fuzz平台架构设计6.堆栈溢出攻防演进7.插桩技术实战应用8.二进制安全能力矩阵9.C语言内存管理精要10.Pyth
  • Vue.js 过渡 & 动画 lsx202406 开发语言
    Vue.js过渡&动画引言在Web开发中，过渡与动画是提升用户体验的关键元素。Vue.js作为一款流行的前端框架，提供了强大的过渡与动画功能，使得开发者能够轻松实现丰富的交互效果。本文将深入探讨Vue.js中的过渡与动画，包括其原理、应用场景以及实现方法。一、Vue.js过渡原理Vue.js过渡是利用CSS3的transition属性实现的。当Vue.js侦测到数据变化时，会自动触发过渡效果。过渡
  • JavaScript之DOM操作与事件处理详解 AA-代码批发V哥 JavaScriptjavascript
    JavaScript之DOM操作与事件处理详解一、DOM基础：理解文档对象模型二、DOM元素的获取与访问2.1基础获取方法2.2集合的区别与注意事项三、DOM元素的创建与修改3.1创建与插入元素3.2修改元素属性与样式3.2.1属性操作3.2.2样式操作3.3元素内容的修改四、DOM元素的删除与替换4.1删除元素4.2替换元素五、事件处理：实现页面交互5.1事件绑定的三种方式5.1.1HTML属性
  • V少JS基础班之第五弹 V少在逆向 JS基础班javascript开发语言ecmascript
    文章目录一、前言二、本节涉及知识点三、重点内容1-函数的定义2-函数的构成1.函数参数详解1）参数个数不固定2）默认参数3）arguments对象（类数组）4）剩余参数（Rest参数）5）函数参数是按值传递的6）解构参数传递7）参数校验技巧（JavaScript没有类型限制，需要手动校验）2.函数返回值详解3-函数的分类1-函数声明式：2-函数表达式：3-箭头函数：4-构造函数：5-IIFE：6-
  • Javaweb学习之Vue模板语法（三） 不要数手指啦 vue.js学习前端
    目录学习资料前情回顾本期介绍（vue模板语法）文本插值Vue的Attribute绑定使用JavaScript表达式综合实例代码：学习资料Vue.js-渐进式JavaScript框架|Vue.js(vuejs.org)前情回顾项目的创建大家可以看这篇文章Vue学习之项目的创建-CSDN博客本期介绍（vue模板语法）首先，找到我们编写代码的地方找到自己项目的src文件夹，打开之后点击component
  • swagger【个人笔记】 撰卢 笔记java
    文章目录swagger导入mave坐标在配置类(WebMvcConfiguration)中加入knife4j相关配置设置静态资源映射，主要是让拦截器放行swagger常用注解@Api(tags="\[描述这个类的作用]")@ApiModel(description="\[描述这个类的作用]")@ApiModelProPerty("描述这个类的作用")@ApiOperation("\[描述方法的作用
  • 设计模式介绍 tntxia 设计模式
    设计模式来源于土木工程师 克里斯托弗 亚历山大（http://en.wikipedia.org/wiki/Christopher_Alexander）的早期作品。他经常发表一些作品，内容是总结他在解决设计问题方面的经验，以及这些知识与城市和建筑模式之间有何关联。有一天，亚历山大突然发现，重复使用这些模式可以让某些设计构造取得我们期望的最佳效果。 亚历山大与萨拉-石川佳纯和穆雷 西乐弗斯坦合作
  • android高级组件使用(一) 百合不是茶 androidRatingBarSpinner
    1、自动完成文本框（AutoCompleteTextView） AutoCompleteTextView从EditText派生出来，实际上也是一个文本编辑框，但它比普通编辑框多一个功能：当用户输入一个字符后，自动完成文本框会显示一个下拉菜单，供用户从中选择，当用户选择某个菜单项之后，AutoCompleteTextView按用户选择自动填写该文本框。 使用AutoCompleteTex
  • [网络与通讯]路由器市场大有潜力可挖掘 comsci 网络
              如果国内的电子厂商和计算机设备厂商觉得手机市场已经有点饱和了,那么可以考虑一下交换机和路由器市场的进入问题.....        这方面的技术和知识,目前处在一个开放型的状态,有利于各类小型电子企业进入  &nbs
  • 自写简单Redis内存统计shell 商人shang Linux shell统计Redis内存
    #!/bin/bash address="192.168.150.128:6666,192.168.150.128:6666" hosts=(${address//,/ }) sfile="staticts.log" for hostitem in ${hosts[@]} do ipport=(${hostitem
  • 单例模式(饿汉 vs懒汉) oloz 单例模式
    package 单例模式; /* * 应用场景:保证在整个应用之中某个对象的实例只有一个 * 单例模式种的《 懒汉模式》 * */ public class Singleton { //01 将构造方法私有化，外界就无法用new Singleton()的方式获得实例 private Singleton(){}; //02 申明类得唯一实例 priva
  • springMvc json支持 杨白白 json springmvc
    1.Spring mvc处理json需要使用jackson的类库，因此需要先引入jackson包 2在spring mvc中解析输入为json格式的数据:使用@RequestBody来设置输入 @RequestMapping("helloJson") public @ResponseBody JsonTest helloJson() {
  • android播放，掃描添加本地音頻文件 小桔子
            最近幾乎沒有什麽事情，繼續鼓搗我的小東西。想在項目中加入一個簡易的音樂播放器功能，就像華為p6桌面上那麼大小的音樂播放器。用過天天動聽或者QQ音樂播放器的人都知道，可已通過本地掃描添加歌曲。不知道他們是怎麼實現的，我覺得應該掃描設備上的所有文件，過濾出音頻文件，每個文件實例化為一個實體，記錄文件名、路徑、歌手、類型、大小等信息。具體算法思想，
  • oracle常用命令 aichenglong oracledba常用命令
    1 创建临时表空间 create temporary tablespace user_temp  tempfile 'D:\oracle\oradata\Oracle9i\user_temp.dbf' size 50m  autoextend on  next 50m maxsize 20480m  extent management local
  • 25个Eclipse插件 AILIKES eclipse插件
    提高代码质量的插件1. FindBugsFindBugs可以帮你找到Java代码中的bug，它使用Lesser GNU Public License的自由软件许可。2. CheckstyleCheckstyle插件可以集成到Eclipse IDE中去，能确保Java代码遵循标准代码样式。3. ECLemmaECLemma是一款拥有Eclipse Public License许可的免费工具，它提供了
  • Spring MVC拦截器+注解方式实现防止表单重复提交 baalwolf spring mvc
    原理：在新建页面中Session保存token随机码，当保存时验证，通过后删除，当再次点击保存时由于服务器端的Session中已经不存在了，所有无法验证通过。   1.新建注解：   ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
  • 《Javascript高级程序设计(第3版)》闭包理解 bijian1013 JavaScript
    “闭包是指有权访问另一个函数作用域中的变量的函数。”--《Javascript高级程序设计(第3版)》         看以下代码： <script type="text/javascript"> function outer() { var i = 10; return f
  • AngularJS Module类的方法 bijian1013 JavaScriptAngularJSModule
            AngularJS中的Module类负责定义应用如何启动，它还可以通过声明的方式定义应用中的各个片段。我们来看看它是如何实现这些功能的。 一.Main方法在哪里         如果你是从Java或者Python编程语言转过来的，那么你可能很想知道AngularJS里面的main方法在哪里？这个把所
  • [Maven学习笔记七]Maven插件和目标 bit1129 maven插件
    插件(plugin)和目标(goal) Maven，就其本质而言，是一个插件执行框架，Maven的每个目标的执行逻辑都是由插件来完成的，一个插件可以有1个或者几个目标，比如maven-compiler-plugin插件包含compile和testCompile，即maven-compiler-plugin提供了源代码编译和测试源代码编译的两个目标   使用插件和目标使得我们可以干预
  • 【Hadoop八】Yarn的资源调度策略 bit1129 hadoop
    1. Hadoop的三种调度策略 Hadoop提供了3中作业调用的策略， FIFO Scheduler Fair Scheduler Capacity Scheduler 以上三种调度算法，在Hadoop MR1中就引入了，在Yarn中对它们进行了改进和完善.Fair和Capacity Scheduler用于多用户共享的资源调度   2. 多用户资源共享的调度
  • Nginx使用Linux内存加速静态文件访问 ronin47
    Nginx是一个非常出色的静态资源web服务器。如果你嫌它还不够快，可以把放在磁盘中的文件，映射到内存中，减少高并发下的磁盘IO。 先做几个假设。nginx.conf中所配置站点的路径是/home/wwwroot/res，站点所对应文件原始存储路径：/opt/web/res shell脚本非常简单，思路就是拷贝资源文件到内存中，然后在把网站的静态文件链接指向到内存中即可。具体如下：
  • 关于Unity3D中的Shader的知识 brotherlamp unityunity资料unity教程unity视频unity自学
    首先先解释下Unity3D的Shader，Unity里面的Shaders是使用一种叫ShaderLab的语言编写的，它同微软的FX文件或者NVIDIA的CgFX有些类似。传统意义上的vertex shader和pixel shader还是使用标准的Cg/HLSL 编程语言编写的。因此Unity文档里面的Shader，都是指用ShaderLab编写的代码，然后我们来看下Unity3D自带的60多个S
  • CopyOnWriteArrayList vs ArrayList bylijinnan java
    package com.ljn.base; import java.util.ArrayList; import java.util.Iterator; import java.util.List; import java.util.concurrent.CopyOnWriteArrayList; /** * 总述： * 1.ArrayListi不是线程安全的，CopyO
  • 内存中栈和堆的区别 chicony 内存
    1、内存分配方面：     堆：一般由程序员分配释放， 若程序员不释放，程序结束时可能由OS回收 。注意它与数据结构中的堆是两回事，分配方式是类似于链表。可能用到的关键字如下：new、malloc、delete、free等等。     栈：由编译器(Compiler)自动分配释放，存放函数的参数值，局部变量的值等。其操作方式类似于数据结构中
  • 回答一位网友对Scala的提问 chenchao051 scalamap
    本来准备在私信里直接回复了，但是发现不太方便，就简要回答在这里。 问题 写道 对于scala的简洁十分佩服，但又觉得比较晦涩，例如一例，Map("a" -> List(11,111)).flatMap(_._2)，可否说下最后那个函数做了什么，真正在开发的时候也会如此简洁？谢谢    先回答一点，在实际使用中，Scala毫无疑问就是这么简单。
  • mysql 取每组前几条记录 daizj mysql分组最大值最小值每组三条记录
    一、对分组的记录取前N条记录：例如：取每组的前3条最大的记录 1.用子查询： SELECT * FROM tableName a  WHERE 3> (SELECT COUNT(*) FROM  tableName b WHERE b.id=a.id AND b.cnt>a. cnt) ORDER BY a.id,a.account DE
  • HTTP深入浅出 http请求 dcj3sjt126com http
      HTTP(HyperText Transfer Protocol)是一套计算机通过网络进行通信的规则。计算机专家设计出HTTP，使HTTP客户（如Web浏览器）能够从HTTP服务器(Web服务器)请求信息和服务，HTTP目前协议的版本是1.1.HTTP是一种无状态的协议，无状态是指Web浏览器和Web服务器之间不需要建立持久的连接，这意味着当一个客户端向服务器端发出请求，然后We
  • 判断MySQL记录是否存在方法比较 dcj3sjt126com mysql
    把数据写入到数据库的时，常常会碰到先要检测要插入的记录是否存在，然后决定是否要写入。 　　我这里总结了判断记录是否存在的常用方法： 　　sql语句： select   count ( * )  from  tablename; 　　然后读取count(*)的值判断记录是否存在。对于这种方法性能上有些浪费，我们只是想判断记录记录是否存在，没有必要全部都查出来。
  • 对HTML XML的一点认识 e200702084 htmlxml
    感谢http://www.w3school.com.cn提供的资料 HTML 文档中的每个成分都是一个节点。 节点 根据 DOM，HTML 文档中的每个成分都是一个节点。 DOM 是这样规定的： 整个文档是一个文档节点 每个 HTML 标签是一个元素节点 包含在 HTML 元素中的文本是文本节点 每一个 HTML 属性是一个属性节点 注释属于注释节点 Node 层次
  • jquery分页插件 genaiwei jqueryWeb前端分页插件
    //jquery页码控件// 创建一个闭包    (function($) {      // 插件的定义      $.fn.pageTool = function(options) {        var totalPa
  • Mybatis与Ibatis对照入门于学习 Josh_Persistence mybatisibatis区别联系
    一、为什么使用IBatis/Mybatis         对于从事 Java EE 的开发人员来说，iBatis 是一个再熟悉不过的持久层框架了，在 Hibernate、JPA 这样的一站式对象 / 关系映射（O/R Mapping）解决方案盛行之前，iBaits 基本是持久层框架的不二选择。即使在持久层框架层出不穷的今天，iBatis 凭借着易学易用、
  • C中怎样合理决定使用那种整数类型？ 秋风扫落叶 c数据类型
    如果需要大数值(大于32767或小于32767), 使用long 型。 否则, 如果空间很重要 (如有大数组或很多结构), 使用 short 型。 除此之外, 就使用 int 型。 如果严格定义的溢出特征很重要而负值无关紧要, 或者你希望在操作二进制位和字节时避免符号扩展的问题, 请使用对应的无符号类型。 但是, 要注意在表达式中混用有符号和无符号值的情况。    &nbs
  • maven问题 zhb8015 maven问题
      问题1： Eclipse 中 新建maven项目 无法添加src/main/java 问题    eclipse创建maevn web项目，在选择maven_archetype_web原型后，默认只有src/main/resources这个Source Floder。     按照maven目录结构，添加src/main/ja
  • (二)androidpn-server tomcat版源码解析之--push消息处理 spjich javaandrodipn推送
    在 (一)androidpn-server tomcat版源码解析之--项目启动这篇中，已经描述了整个推送服务器的启动过程，并且把握到了消息的入口即XmppIoHandler这个类，今天我将继续往下分析下面的核心代码，主要分为3大块，链接创建，消息的发送，链接关闭。 先贴一段XmppIoHandler的部分代码 /** * Invoked from an I/O proc
  • 用js中的formData类型解决ajax提交表单时文件不能被serialize方法序列化的问题 中华好儿孙 JavaScriptAjaxWeb上传文件FormData
    var formData = new FormData($("#inputFileForm")[0]); $.ajax({ type:'post', url:webRoot+"/electronicContractUrl/webapp/uploadfile", data:formData, async: false, ca
  • mybatis常用jdbcType数据类型 ysj5125094 mybatismapperjdbcType
      MyBatis 通过包含的jdbcType 类型 BIT         FLOAT      CHAR          
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他