好名字0821
好名字0821

原生JS实现计算器（内含源码）

前言

本文讲解了JavaScript如何在一小时内实现一个简易计算器，这里最大的亮点就在于，我在JS中只用了一个事件，就实现了计算器的效果和功能，那么好文本正式开始。
原生JS实现计算器（内含源码）_第1张图片

布局和样式流程

首先是HTML+CSS结构：这里主要用到的是position定位和Flex布局。

  • 首先我们准备一个大的div，用于装最大的容器，它的id为all
  • 然后我们准备三个小的div，给这些div加上Flex-box弹性盒子布局
  • 这三个小div下面准备了四个小div，四个小div主要用到的是flex：1，均匀的进行平分上述div的空间
  • 那么同时我们在最上面的0展示阶段设置了两个div
  • 第一个div用到的是position：absolute，绝对定位，top：40px；right:0px
  • 第二个div就是为了占据第一个div的空间，因为绝对定位不占用页面空间，但是我们还想要留出这部分空间，所以使用另一个普通的div来实现这块空间的占据。

JS实现流程

  1. 我们使用事件委托来实现一个事件绑定所有计算器中能看到的按钮和最终值的id。想了解事件委托的小伙伴可以点击我的另一篇文章：点击这里
  2. 简单来说，事件委托就是在父元素的监听事件下去绑定所有符合要求的子元素，那么就实现一个事件多次复用和简化代码的操作了。
  3. 首先我们定义两个变量，分别存储id为all的DOM父元素，和最终结果展示区域也就是ansDOM子元素
  4. 给all添加一个点击监听事件
  5. 如果这个事件对象下点击的目标对象下的className伪类名是flex_1,那么我就进入这个循环，这里flex_1是所有按钮都绑定的一个伪类，那么就可以用于判断。
  6. 用innerHTML判断获取到的点击元素的内容，比如点击=内容为=，点击+为+等等，然后去做对应的逻辑处理。最后用parseInt进行字符串转换数字操作，然后赋值给result变量，最终给ans变量的innerHTML赋值。实现计算器效果。

全部源码

<!DOCTYPE html>
<html>
	<head>
		<style>
			*{
				padding:0;
				margin:0;
			}
			.container {
				width: 400px;
				background-color: #ccc;
				border:1px solid lightgray;
				position: relative;
			}

			.contain {
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.flex_1 {
				text-align: center;
				border: 1px solid lightgray;
				background-color: #011aff;
				color: white;
				flex: 1;
			}
		</style>
	</head>
	<body>
		<div class="container" id="all">
			<div style="height:50px;position:absolute;top:30px;right:0;" id="ans">0</div>
			<div style="height:50px;"></div>
			<div class="contain">
				<div class="flex_1">1</div>
				<div class="flex_1">2</div>
				<div class="flex_1">3</div>
				<div class="flex_1">+</div>
			</div>
			<div class="contain">
				<div class="flex_1">4</div>
				<div class="flex_1">5</div>
				<div class="flex_1">6</div>
				<div class="flex_1">7</div>
			</div>
			<div class="contain">
				<div class="flex_1">8</div>
				<div class="flex_1">9</div>
				<div class="flex_1">重置</div>
				<div class="flex_1">=</div>
			</div>
		</div>
		<script>
			let all = document.getElementById('all')
			let ans = document.getElementById('ans')
			let result = 0;
			all.addEventListener('click', function(e) {
				if (e.target.className == 'flex_1') {
					if (ans.innerHTML == 0) {
						switch (e.target.innerHTML) {
							case '重置':
								break;
							case '=':
								break;
							case '+':
								break;
							default:
								ans.innerHTML = e.target.innerHTML
						}
					} else if (e.target.innerHTML == '重置') {
						ans.innerHTML = 0
					} else if (e.target.innerHTML == '=') {
						let temp = '';
						let result = 0;
						for (let i = 0; i < ans.innerHTML.length; i++) {
							if (ans.innerHTML[i] == '+') {
								result += parseInt(temp)
								temp = '';
							} else {
								temp += ans.innerHTML[i]
								if (ans.innerHTML.length - 1 == i) {
									result += parseInt(temp)
								}
							}
						}
						ans.innerHTML = result;
					} else {
						ans.innerHTML += e.target.innerHTML
					}
				}
			})
		</script>
	</body>
</html>

你可能感兴趣的:(JavaScript,javascript,开发语言,ecmascript)

  • cornerstonejs介绍 花花进修 DICOM医学影像查看器html5javascriptnpmyarn
    Cornerstone.js是一个用于医疗成像应用程序的开源JavaScript库。它专门设计用于在Web浏览器中处理和显示DICOM（数字成像和通信在医学领域）图像。Cornerstone.js为开发者提供了强大的工具，可以轻松构建功能丰富的医学图像查看器，广泛应用于放射学、病理学、超声成像等领域。特点高性能图像渲染：支持大尺寸医学图像的快速渲染，包括CT扫描、MRI、X光片等。利用GPU加速（
  • javascript模板 wanggs
    模板DocumentClick{{title}}{{content}}$(function(){$("#btn").click(function(){varhtml=$("#template").html();html=html.replace("{{id}}",Math.random());html=html.replace("{{title}}","Hello,"+newDate().getT
  • javascript网页设计案例 Min_nna jsjquery功能ai分析javascript
    以下是一些使用JavaScript进行网页设计的案例，这些案例展示了JavaScript在前端开发中的强大功能和灵活性。每个案例都包含了基本的实现思路和代码示例。图片画廊（ImageGallery）功能：展示一组图片，并支持点击放大查看。实现思路：使用HTML和CSS创建图片网格。使用JavaScript处理图片点击事件，显示放大的图片。代码示例：ImageGallery×consti
  • Nginx部署前端Vue项目 hai40587 前端nginxvue.js
    在使用Nginx部署前端Vue项目时，我们主要关注的是如何高效地将静态资源（HTML、CSS、JavaScript、图片等）提供给客户端浏览器。Vue.js是一个流行的JavaScript框架，用于构建用户界面，而Nginx作为一个高性能的HTTP和反向代理服务器，非常适合用于静态资源的托管。以下将详细介绍如何使用Nginx部署Vue项目，包括环境准备、Vue项目构建、Nginx配置、部署过程以及
  • 使用 Nginx 部署前端 Vue 项目 vvvae1234 前端
    在这篇文章中，我们将深入探讨如何使用Nginx部署一个Vue.js前端项目。Vue是一个流行的前端JavaScript框架，而Nginx则是一个性能卓越的Web服务器和反向代理服务器。通过将这两者结合起来，我们可以高效地托管我们的前端应用。一、环境准备在开始部署之前，我们需要确保我们的环境中已安装以下软件：Node.js和npm：用于构建Vue项目。VueCLI：用于快速创建Vue项目。Nginx
  • 使用Nginx部署前端Vue项目 bigbig猩猩 前端nginxvue.js
    在使用Nginx部署前端Vue项目时，我们主要关注的是如何高效地将静态资源（HTML、CSS、JavaScript、图片等）提供给客户端浏览器。Vue.js是一个流行的JavaScript框架，用于构建用户界面，而Nginx作为一个高性能的HTTP和反向代理服务器，非常适合用于静态资源的托管。以下将详细介绍如何使用Nginx部署Vue项目，包括环境准备、Vue项目构建、Nginx配置、部署过程以及
  • Easyui Datagrid实现行操作 天农学子 easyui前端javascript
    EasyuiDatagrid实现行操作效果分析实现此功能需要实现2点1、首列的内容全部需要渲染成申请开票2、点击申请开票可以获获取到指定的行内容，在执行后续操作实现方案1、首行格式化，在table的th属性中加入formatter示例代码如下操作2、在JavaScript中编写代码formatOperatefunctionformatOperate(val,row){return'申请开票';}当
  • html语言及js脚本基础,Javascript基础学习笔记(菜鸟必看篇) 游苏昱 html语言及js脚本基础
    什么是变量？变量是用于存储信息的容器变量的声明语法：var变量名变量名=值;变量要先声明再赋值变量可以重复赋值变量的命名规则变量必须以字母开头；变量也能以$和_符号开头(不过我们不推荐这么做)；变量名称对大小写敏感(a和A是不同的变量)。语句语句以一个分号结尾；如果省略分号，则由解析器确定语句的结尾。有个好的编码习惯，都要以;结尾数据类型在JavaScript中，一段信息就是一个值(value)。
  • 菜鸟笔记-001 如何用JavaScript脚本在文字中实现向左或向右插入空格 胤祥矢量商铺 菜鸟学习笔记笔记illustratorjavascript文字操作
    这是一个网友在线上问我的一个问题：如何用JavaScript脚本在文字中实现向左或向右插入空格下图是在文字左边插入了1/2个空格的效果：那么如何用javascript实现向左向右插入空格？其实这个功能，我在实际工作确实很少碰到，我只有祭出宝典查阅-IllustratorJavaScriptScriptingReference2022.pdf，当然你有更新版的更好。查到文字的向左插入空格或向左插入空
  • this 关键字的绑定类型 浮游本尊 前端
    在JavaScript中，理解this关键字的指向对于编写高质量的代码至关重要。this的指向取决于函数的调用方式，而不是定义方式。以下是几种常见的this绑定情形及其工作原理的解析。全局上下文中的this当在全局作用域中使用this或者函数在全局作用域被调用时，this通常指向全局对象。在Web浏览器中，这个全局对象是window，而在Node.js环境中则是global对象。functionc
  • JavaScript 模块化开发：ES6 模块与 CommonJS 的对比与应用 程序员小羊！ Javajavascriptes6开发语言
    您好，我是程序员小羊！前言随着前端项目规模的增长，代码组织和管理变得越来越复杂。模块化开发成为解决这一问题的有效手段，能够帮助开发者将代码进行分割、复用和维护。JavaScript在发展过程中出现了多种模块化规范，其中最为广泛使用的有ES6模块（也称为ESModules）和CommonJS模块规范。本文将从原理、语法、应用场景和两者对比等多个方面深入探讨这两种模块化规范，帮助开发者更好地理解和应用
  • 【js逆向专题】4.python调用JS和扣代码 Regent Wan js逆向javascriptjs逆向
    小节目标:掌握python调用js代码方式熟悉js开放接口进行调用了解补环境的基本概念掌握js调试技巧一.pyexecjs的使用1.简介PyExecJS是一个Python库，用于在Python环境中执行JavaScript代码。它实际上是对ExecJS库的Python封装，ExecJS本身是一个通用的JavaScript运行环境的抽象层。使用PyExecJS，你可以在Python中执行JavaSc
  • “全栈2019”Java多线程第五十二章：LockSupport等待截止时间 人人都是程序员
    难度初级学习时间10分钟适合人群零基础开发语言Java开发环境JDKv11IntelliJIDEAv2018.3文章原文链接“全栈2019”Java多线程第五十二章：LockSupport等待截止时间下一章“全栈2019”Java多线程第五十三章：ThreadLocal简单介绍学习小组加入同步学习小组，共同交流与进步。方式一：加入编程圈子。方式二：关注头条号Gorhaf，私信“Java学习小组”。
  • js html css代码缩进,HTML/CSS/JS代码格式化 吃货喵 jshtmlcss代码缩进
    8种机械键盘轴体对比本人程序员，要买一个写代码的键盘，请问红轴和茶轴怎么选？我们在编辑器当中写代码的时候，可能因为编写时候不规范或者复制粘贴的操作导致代码格式混乱。我在之前采用的是JSFormat来格式化JavaScript和JSON，使用SublimeText自带的reindent命令格式化HTML和CSS的文件。基本上reindent命令就足够用了。但是有缺点，一些html文件的格式不够优美！
  • 【前端实例代码】使用HTML CSS 和 JavaScript制作一个五星评价的功能~可动态好评+差评+留言功能~ 南北极之间 web前端特效源码javascriptcss编程入门网页设计编程入门代码html
    bilibili在线视频演示地址：【web前端特效源码】使用HTMLCSS和JavaScript制作一个五星评价的功能！可动态好评+差评+留言功能！效果图：
  • 【前端实例代码】使用html+css+JavaScript实现带有波浪跳跃动画的登录表单页面 南北极之间 web前端特效源码前端javascripthtml网页设计代码实例css3
    效果图：完整代码：【前端实例代码】使用html+css+JavaScript实现带有波浪跳跃动画的登录表单页面@importurl("https://fonts.googleapis.com/css2?family=Muli&display=swap");*{box-sizing:border-box;
  • html5 css3 JavaScript响应式中文静态网页模板js源代码 Yucool01 html5javascriptcss3
    该批次模板具备如下功能：首页，二级页面，三级页面登录页面均有，页面齐全，功能齐全，js+css+html,前端HTML纯静态页面，无后台，可用dreamweaver,sublime,webstorm等工具修改；部分网页模板效果图：有需要的同学可以下载学习一下：https://download.csdn.net/download/Yucool01/22408278https://download.c
  • How can I change from OpenAI to ChatOpenAI in langchain and Flask? 营赢盈英 AIlangchainpythonflaskopenaiapipy-langchain
    题意：“在LangChain和Flask中，如何将OpenAI更改为ChatOpenAI？”问题背景：ThisisanimplementationbasedonlangchainandflaskandreferstoanimplementationtobeabletostreamresponsesfromtheOpenAIserverinlangchaintoapagewithjavascript
  • 【前端框架开发 | Vue.js | 第一篇】Vue.js框架简介、安装及打包教程 秋说 前后端项目开发前端框架vue.js前端htmlcssJavaScript
    文章目录前言什么是Vue.js为什么是Vue.jsVue.js安装打包Vue项目方法一：vite打包方法二：webpack打包webpack执行流程总结前言正式开始学习前确保确保你已掌握前端三件套：HTMLCSSJavaScript什么是Vue.jsVue.js是一种流行的JavaScript前端框架，用于构建交互式的、响应式的用户界面。它是一种轻量级、灵活和易于学习的框架，广泛应用于现代Web应
  • JS的事件处理 杨大东 javascript开发语言ecmascript
    目录js事件流理解js事件轮询机制理解js事件流理解JavaScript事件流(Evenloop),英文记住，它指的是浏览器处理时间的方式，描述页面处理事件的顺序。在JavaScript中，事件流分为三个阶段：捕获阶段，目标阶段，冒泡阶段。这三个阶段是从外到内，从父结点到子节点，再从子节点到父节点的顺序一次发生。展开描述一下事件流的三个阶段：1.捕获阶段:事件从最外层节点(文档对象)开始，逐级向下
  • vue中ref和reactive Lancelot212 vue.js前端javascript
    ref和reactive是Vue3中用于创建响应式数据的两个重要API，它们之间存在几个关键的区别，主要体现在数据类型、使用方式、访问方式以及设计理念上。1.数据类型不同ref：主要用于定义简单类型的数据（如字符串、数字、布尔值等）以及单一的对象。虽然它可以用于对象，但通常用于需要保持对其值响应式引用的场景。reactive：则主要用于包装JavaScript对象和数组等复杂类型的数据。它能够递归
  • CSS特效——图标图片悬浮旋转一周 DTcode7 HTML网站开发#前端基础入门三大核心之CSSHTMLCSSwebcss3网页开发
    CSS特效——图标图片悬浮旋转一周引言基本概念CSS3动画基础示例一：简单的无限循环旋转HTML结构CSS样式代码解释示例二：添加延迟和方向控制CSS样式代码解释示例三：使用伪元素增强视觉效果CSS样式代码解释示例四：结合过渡效果CSS样式代码解释示例五：响应式设计CSS样式代码解释功能使用思路思路一：结合JavaScript控制动画思路二：利用数据属性动态设置动画思路三：多图标同步动画实际开发中
  • 【JavaScript】JavaScript模块化开发：ES6模块与CommonJs的对比与应用 代码园与文学坊 《前端学习》javascriptes6开发语言
    1.模块化开发的背景与必要性1.1JavaScript发展与模块化需求JavaScript最初被设计为一种简单的脚本语言，用于实现网页上的交互功能。随着互联网技术的发展，Web应用变得越来越复杂，JavaScript代码量急剧增加，这导致了代码维护和复用变得困难。为了解决这些问题，模块化开发应运而生。模块化开发允许开发者将大型应用拆分成多个小型、独立的模块，每个模块负责特定的功能。这种开发方式与J
  • 详解ES6中的类、对象和类的继承 前端技术营 es6前端ecmascript
    在ES6（ECMAScript2015）之前，JavaScript并没有像其他面向对象的编程语言那样的类（class）的概念。相反，它使用了一种基于原型的继承模型来实现面向对象编程。然而，这种模型对于许多开发者来说可能比较难以理解，特别是在与更传统的面向对象语言（如Java或C++）相比较时。为了简化面向对象的编程范式并提供更直观的代码组织方式，ES6引入了类的概念。虽然JavaScript的类实
  • python中的列表与字典 daoqing99
    数据结构数据结构就是指从计算机存储，组织数据的结构常用的四种数据结构列表（List）元组（Tuple）字典（Dictionary）集合（Set）列表（List）---类比Javascript中的数组列表中的数据按顺序排列列表有正序（0开始）与倒序（-1开始）两种索引列表可存储任意类型数据，且允许重复列表的创建变量名=[元素1,元素2,...]list=['a','b','c','d','1']取值
  • html div鼠标选中状态,html+css+javascript实现跟随鼠标移动显示选中效果 爱护哼哼 htmldiv鼠标选中状态
    1，显示效果：2,html结构Endcustomergetproduct1LoginEFOSEwebsiteandpresentinstallationormaintenancerequirements2EFOSEprefercontactservicepoint3Customercontactservicepointtogetservice4Customerpaysthebilldirectly
  • JavaScript导入导出excel 金色浪花 javascriptexcel
    在JavaScript的浏览器环境下导入和导出Excel文件，主要可以通过一些库来帮助我们简化操作，比如SheetJS（也称为xlsx库）和FileSaver.js。以下是如何使用这些库来实现Excel的导入和导出的基本步骤：导入Excel导入Excel文件通常涉及到HTML的元素，以及使用FileReader来读取用户选择的文件，然后使用SheetJS解析这个文件。HTML部分html复制代码J
  • 《编写可测试javascript》 第三章 基于事件的架构 澄澄真可爱
    通过事件解耦和隔离代码是javascript的一个原生特性,参考浏览器的DOM事件模型3.1基于事件的好处应用程序都与消息传递有关拿到其他对象的消息全局对象（易污染）函数参数传入（参数过多）函数参数注入（要维护注入列表）局部初始化（紧耦合）函数是javascript的第一公民浏览器DOM是事件模型nodejs利用回调实现异步编程3.2事件集线器一个中央处理器（110接警中心）向中央处理器注册事件的
  • 【量化分析】Python、JavaScript（Node.js）、Java、C#和Ruby五种主流语言的实例代码给大家演示一下如何获取股票实时交易数据 309556666 python股票数据API股票数据接口股票API服务股票市场数据实时股票数据
    最近一两年，股票量化分析越来越受欢迎了。想要入行，首先得搞定股票数据。毕竟，所有量化分析都是建立在数据之上的，实时交易、历史交易、财务、基本面，这些数据咱们都得有。咱们的目标就是挖掘这些数据中的价值，来指导咱们的投资策略。为了找数据，我可是尝试了各种方法，自己动手写过网易、申万行业的爬虫，还试过同花顺问财的，连聚宽的免费API都用过。但爬虫这东西，数据总是不稳定，给量化分析带来不少困扰。在量化分析
  • 自学编程推荐的11个学习及刷题网站 陌染007
    初学编程，很多人会选择先自学，那么这时候选择适合自己的学习平台是特别关键的，今天小优就给大家整理了11个学习及刷题网站。一起来收藏起来！第一类：课程学习类网站1、菜鸟教程菜鸟教程是@Runoob开发的一个编程技术网站，收录了非常多的编程语言文档，例如最常见的：Python、JavaScript、http://ASP.NET、Android、C、Go、C++等等语言参考文档Wiki，非常齐全，并且文
  • js动画html标签（持续更新中） 843977358 htmljs动画mediaopacity
    1.jQuery 效果 - animate() 方法    改变 "div" 元素的高度：    $(".btn1").click(function(){      $("#box").animate({height:"300px
  • springMVC学习笔记 caoyong springMVC
    1、搭建开发环境    a>、添加jar文件，在ioc所需jar包的基础上添加spring-web.jar,spring-webmvc.jar    b>、在web.xml中配置前端控制器       <servlet>     &nbs
  • POI中设置Excel单元格格式 107x poistyle列宽合并单元格自动换行
    引用：http://apps.hi.baidu.com/share/detail/17249059 POI中可能会用到一些需要设置EXCEL单元格格式的操作小结： 先获取工作薄对象: HSSFWorkbook wb = new HSSFWorkbook(); HSSFSheet sheet = wb.createSheet(); HSSFCellStyle setBorder = wb.
  • jquery 获取A href 触发js方法的this参数 无效的情况 一炮送你回车库 jquery
    html如下：  <td class=\"bord-r-n bord-l-n c-333\"> <a class=\"table-icon edit\" onclick=\"editTrValues(this);\">修改</a> </td>"   j
  • md5 3213213333332132 MD5
    import java.security.MessageDigest; import java.security.NoSuchAlgorithmException; public class MDFive { public static void main(String[] args) { String md5Str = "cq
  • 完全卸载干净Oracle11g sophia天雪 orale数据库卸载干净清理注册表
    完全卸载干净Oracle11g A、存在OUI卸载工具的情况下：     第一步：停用所有Oracle相关的已启动的服务；     第二步：找到OUI卸载工具：在“开始”菜单中找到“oracle_OraDb11g_home”文件夹中         &
  • apache 的access.log 日志文件太大如何解决 darkranger apache
    CustomLog logs/access.log common  此写法导致日志数据一致自增变大。 直接注释上面的语法 #CustomLog logs/access.log common 增加： CustomLog "|bin/rotatelogs.exe -l logs/access-%Y-%m-d.log 
  • Hadoop单机模式环境搭建关键步骤 aijuans 分布式
            Hadoop环境需要sshd服务一直开启，故，在服务器上需要按照ssh服务，以Ubuntu Linux为例，按照ssh服务如下： sudo apt-get install ssh sudo apt-get install rsync 编辑HADOOP_HOME/conf/hadoop-env.sh文件，将JAVA_HOME设置为Java
  • PL/SQL DEVELOPER 使用的一些技巧 atongyeye javasql
    1 记住密码 这是个有争议的功能，因为记住密码会给带来数据安全的问题。 但假如是开发用的库，密码甚至可以和用户名相同，每次输入密码实在没什么意义，可以考虑让PLSQL Developer记住密码。 位置：Tools菜单－－Preferences－－Oracle－－Logon HIstory－－Store with password 2 特殊Copy 在SQL Window
  • PHP：在对象上动态添加一个新的方法 bardo 方法动态添加闭包
    有关在一个对象上动态添加方法，如果你来自Ruby语言或您熟悉这门语言，你已经知道它是什么...... Ruby提供给你一种方式来获得一个instancied对象，并给这个对象添加一个额外的方法。   好！不说Ruby了，让我们来谈谈PHP   PHP未提供一个“标准的方式”做这样的事情，这也是没有核心的一部分...   但无论如何，它并没有说我们不能做这样
  • ThreadLocal与线程安全 bijian1013 javajava多线程threadLocal
    首先来看一下线程安全问题产生的两个前提条件：  1.数据共享，多个线程访问同样的数据。  2.共享数据是可变的，多个线程对访问的共享数据作出了修改。    实例：         定义一个共享数据： public static int a = 0;        
  • Tomcat 架包冲突解决 征客丶 tomcatWeb
    环境： Tomcat 7.0.6 win7 x64 错误表象：【我的冲突的架包是：catalina.jar 与 tomcat-catalina-7.0.61.jar 冲突，不知道其他架包冲突时是不是也报这个错误】 严重: End event threw exception java.lang.NoSuchMethodException: org.apache.catalina.dep
  • 【Scala三】分析Spark源代码总结的Scala语法一 bit1129 scala
    Scala语法 1. classOf运算符 Scala中的classOf[T]是一个class对象，等价于Java的T.class,比如classOf[TextInputFormat]等价于TextInputFormat.class    2. 方法默认值 defaultMinPartitions就是一个默认值，类似C++的方法默认值    
  • java 线程池管理机制 BlueSkator java线程池管理机制
    编辑 Add Tools   jdk线程池   一、引言 第一：降低资源消耗。通过重复利用已创建的线程降低线程创建和销毁造成的消耗。第二：提高响应速度。当任务到达时，任务可以不需要等到线程创建就能立即执行。第三：提高线程的可管理性。线程是稀缺资源，如果无限制的创建，不仅会消耗系统资源，还会降低系统的稳定性，使用线程池可以进行统一的分配，调优和监控。  
  • 关于hql中使用本地sql函数的问题（问-答） BreakingBad HQL存储函数
    转自于：http://www.iteye.com/problems/23775 问： 我在开发过程中，使用hql进行查询（mysql5）使用到了mysql自带的函数find_in_set()这个函数作为匹配字符串的来讲效率非常好，但是我直接把它写在hql语句里面（from ForumMemberInfo fm,ForumArea fa where find_in_set(fm.userId,f
  • 读《研磨设计模式》-代码笔记-迭代器模式-Iterator bylijinnan java设计模式
    声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/ import java.util.Arrays; import java.util.List; /** * Iterator模式提供一种方法顺序访问一个聚合对象中各个元素，而又不暴露该对象内部表示 * * 个人觉得，为了不暴露该
  • 常用SQL chenjunt3 oraclesqlC++cC#
    --NC建库 CREATE TABLESPACE NNC_DATA01 DATAFILE 'E:\oracle\product\10.2.0\oradata\orcl\nnc_data01.dbf' SIZE 500M AUTOEXTEND ON NEXT 50M EXTENT MANAGEMENT LOCAL UNIFORM SIZE 256K ; CREATE TABLESPA
  • 数学是科学技术的语言 comsci 工作活动领域模型
      从小学到大学都在学习数学，从小学开始了解数字的概念和背诵九九表到大学学习复变函数和离散数学，看起来好像掌握了这些数学知识，但是在工作中却很少真正用到这些知识，为什么？    最近在研究一种开源软件-CARROT2的源代码的时候，又一次感觉到数学在计算机技术中的不可动摇的基础作用，CARROT2是一种用于自动语言分类（聚类）的工具性软件，用JAVA语言编写，它
  • Linux系统手动安装rzsz 软件包 daizj linuxszrz
    1、下载软件 rzsz-3.34.tar.gz。登录linux，用命令 wget http://freeware.sgi.com/source/rzsz/rzsz-3.48.tar.gz下载。 2、解压 tar zxvf  rzsz-3.34.tar.gz 3、安装  cd rzsz-3.34 ; make posix 。注意：这个软件安装与常规的GNU软件不
  • 读源码之:ArrayBlockingQueue dieslrae java
        ArrayBlockingQueue是concurrent包提供的一个线程安全的队列,由一个数组来保存队列元素.通过 takeIndex和 putIndex来分别记录出队列和入队列的下标,以保证在出队列时 不进行元素移动. //在出队列或者入队列的时候对takeIndex或者putIndex进行累加,如果已经到了数组末尾就又从0开始,保证数
  • C语言学习九枚举的定义和应用 dcj3sjt126com c
    枚举的定义 # include <stdio.h> enum WeekDay { MonDay, TuesDay, WednesDay, ThursDay, FriDay, SaturDay, SunDay }; int main(void) { //int day; //day定义成int类型不合适 enum WeekDay day = Wedne
  • Vagrant 三种网络配置详解 dcj3sjt126com vagrant
    Forwarded port Private network Public network Vagrant 中一共有三种网络配置，下面我们将会详解三种网络配置各自优缺点。 端口映射(Forwarded port)，顾名思义是指把宿主计算机的端口映射到虚拟机的某一个端口上，访问宿主计算机端口时，请求实际是被转发到虚拟机上指定端口的。Vagrantfile中设定语法为： c
  • 16.性能优化-完结 frank1234 性能优化
    性能调优是一个宏大的工程，需要从宏观架构(比如拆分，冗余，读写分离，集群，缓存等)， 软件设计（比如多线程并行化，选择合适的数据结构）， 数据库设计层面（合理的表设计，汇总表，索引，分区，拆分，冗余等） 以及微观（软件的配置，SQL语句的编写，操作系统配置等）根据软件的应用场景做综合的考虑和权衡，并经验实际测试验证才能达到最优。 性能水很深， 笔者经验尚浅 ，赶脚也就了解了点皮毛而已，我觉得
  • Word Search hcx2013 search
    Given a 2D board and a word, find if the word exists in the grid. The word can be constructed from letters of sequentially adjacent cell, where "adjacent" cells are those horizontally or ve
  • Spring4新特性——Web开发的增强 jinnianshilongnian springspring mvcspring4
    Spring4新特性——泛型限定式依赖注入 Spring4新特性——核心容器的其他改进 Spring4新特性——Web开发的增强 Spring4新特性——集成Bean Validation 1.1(JSR-349)到SpringMVC  Spring4新特性——Groovy Bean定义DSL Spring4新特性——更好的Java泛型操作API  Spring4新
  • CentOS安装配置tengine并设置开机启动 liuxingguome centos
    yum install gcc-c++  yum install pcre pcre-devel  yum install zlib zlib-devel  yum install openssl openssl-devel Ubuntu上可以这样安装 sudo aptitude install libdmalloc-dev libcurl4-opens
  • 第14章 工具函数（上） onestopweb 函数
    index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/
  • Xelsius 2008 and SAP BW at a glance blueoxygen BOXelsius
    Xelsius提供了丰富多样的数据连接方式，其中为SAP BW专属提供的是BICS。那么Xelsius的各种连接的优缺点比较以及Xelsius是如何直接连接到BEx Query的呢？ 以下Wiki文章应该提供了全面的概览。   http://wiki.sdn.sap.com/wiki/display/BOBJ/Xcelsius+2008+and+SAP+NetWeaver+BW+Co
  • oracle表空间相关 tongsh6 oracle
    在oracle数据库中，一个用户对应一个表空间，当表空间不足时，可以采用增加表空间的数据文件容量，也可以增加数据文件，方法有如下几种： 1.给表空间增加数据文件    ALTER TABLESPACE "表空间的名字" ADD DATAFILE    '表空间的数据文件路径' SIZE 50M;   &nb
  • .Net framework4.0安装失败 yangjuanjava .netwindows
    上午的.net framework 4.0，各种失败，查了好多答案，各种不靠谱，最后终于找到答案了 和Windows Update有关系，给目录名重命名一下再次安装，即安装成功了！ 下载地址：http://www.microsoft.com/en-us/download/details.aspx?id=17113 方法： 1.运行cmd，输入net stop WuAuServ 2.点击开
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他