suzyCai
suzyCai

当文字超出一定数量时，在固定区域缩放字体大小--canvas、原生js

【当文字超出一定数量时，在固定区域缩放字体大小–canvas、原生js】

很多时候项目中会遇到文字多出时候一行放不下的情况。
这时候我们可以根据文字长度来设置文字大小，文案越长文字就越小。

  1. 分别获得区域的宽度和文案的长度 ，计算出每个文字的可占用面积；
  2. 可占用面积越大字号就越大

希望大家给予宝贵的意见

这可能不是用于任何人的项目，这里只提供参考。谢谢！

可以直接运行下面的代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>【当文字超出一定数量时，在固定区域缩放字体大小】</title>
</head>
<body>
<div><input id="input" oninput="inputChange(event)" style="width: 500px;padding: 10px;margin: 10px;" type="text" value="这不是一个人的诗句是"></div>
<canvas id="myCanvas" width="500" height="200" style="border:1px solid #d3d3d3;">
您的浏览器不支持 HTML5 canvas 标签
</canvas>
<script>

function setFontSize(value) {
	var c=document.getElementById("myCanvas");
	var canvasWidth = c.width;
	var canvasHeight = c.height;
	var ctx=c.getContext("2d");
	ctx.font="30px Arial";
	var contentFontSize = 16;
	ctx.font = contentFontSize+"px Arial";
	var txt = value;
	ctx.clearRect(0,0,canvasWidth,canvasHeight);
	ctx.fillText(txt,0,100);  
	var contentWidth = ctx.measureText(txt).width;
	if(contentWidth > canvasWidth){
		var fontsize = canvasWidth / contentWidth * contentFontSize ;  
		ctx.font=fontsize+"px Arial";
		ctx.clearRect(0,0,canvasWidth,canvasHeight);
		ctx.fillText(txt,0,100);
	}
}
setFontSize(document.getElementById("input").value);
function inputChange(e){
	setFontSize(e.target.value);
}
</script>
</body>
</html>

angular写法：


import {Component, Input, Renderer2} from '@angular/core';

@Component({
selector: 'text-fill',
templateUrl: 'text-fill.html'
})

export class TextFillComponent {
canvasText: string;
canvasWidth: number;
canvasHeight: number;
contentFontSize: number = 16;
contentFontWeight: number;
contentFontFamily: string = 'Arial';
contentColor: string = '#000';

/**
* 使用方法：
* 必传字段： data、width、height
* 
*/

/**
* 文本
* @param value
*/
@Input() set data(value) {
if (value) {
this.canvasText = value;
} else {
this.canvasText = '请设置需要显示的文本';
}
}

/**
* 显示区域宽度
* @param value
*/
@Input() set width(value) {
if (value) {
this.canvasWidth = value;
} else {
this.canvasWidth = 200;
}
}

/**
* 显示区域的高度
* @param value
*/
@Input() set height(value) {
if (value) {
this.canvasHeight = value;
} else {
this.canvasHeight = 50;
}
}

/**
* 文本颜色
* @param value
*/
@Input() set color(value) {
if (value) {
this.contentColor = value;
}
}

/**
* 文本字体大小
* @param value
*/
@Input() set fontsize(value) {
if (value) {
this.contentFontSize = value;
}
}

/**
* 文本字体粗细
* @param value
*/
@Input() set fontWeight(value) {
if (value) {
this.contentFontWeight = value;
}
}

/**
* 文本字体
* @param value
*/
@Input() set fontFamily(value) {
if (value) {
this.contentFontFamily = value;
}
}

constructor(private renderer: Renderer2,) {
}

ngOnInit() {
this.setText();
}

ngAfterViewInit() {
}

setText() {
const fontWeigfht = this.contentFontWeight + ' ';
const fontSet =  "px " + this.fontFamily;
const txt = this.canvasText;
const c = this.renderer.selectRootElement("#myCanvas");
c.width = this.canvasWidth;
c.height = this.canvasHeight;
const ctx = c.getContext("2d");
ctx.fillStyle = this.contentColor;
ctx.font = fontWeigfht ? (fontWeigfht + this.contentFontSize + fontSet) : this.contentFontSize + fontSet;
ctx.textBaseline = "middle";
ctx.fillText(txt, 0, this.canvasHeight / 2);
const contentWidth = ctx.measureText(txt).width;
if (contentWidth > this.canvasWidth) {
ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
const fontsize = (this.canvasWidth / contentWidth) * this.contentFontSize;
ctx.fillStyle = this.contentColor;
ctx.font = fontWeigfht ? (fontWeigfht + fontsize + fontSet ) : fontsize + fontSet;
ctx.textBaseline = "middle";
ctx.fillText(txt, 0, this.canvasHeight / 2);
}
}
}



您的浏览器不支持 HTML5 canvas 标签

你可能感兴趣的:(canvas)

  • HTMl5新增特性有哪些？ 番茄牛腩汤 大数据
    (1)新增了语义化标签(2)新增了音频视频标签(3)新增了canvas和svg绘图(4)新增了地理定位（navigator.geolocation）(5)新增了拖拽API(drapable)(6)新增了多线程技术webworker(7)新增了即时通讯websocket
  • VTK知识学习（32）-图像运算 无所谓จุ๊บ VTK学习VTK
    1、数学运算vklmageMathematics提供了基本的一元和二元数学操作。根据不同的操作，需要一个或者两个输入图像。二元数学操作要求两个输入图像具有相同的像素数据类型和颜色组分。当两个图像大小不同时，输出图像的范围为两个输入图像范围的并集，并且原点和像素间隔与第一个输入图像保持一致。privatevoidTestMathematics(){//绘制一个暗红色矩形vtkImageCanvasS
  • 如何使用Vue3创建在线三维模型展示？ ScriptEcho 前端
    本文由ScriptEcho平台提供技术支持项目地址：传送门代码相关的技术博客代码应用场景介绍本段代码使用RoughJS库在HTML5Canvas上创建了手绘风格的图像，展示了RoughJS库的强大功能，可用于创建具有有机手绘外观的图形。代码基本功能介绍代码通过RoughJS库创建了一个火焰状的图形，包括：火焰主体：使用path()函数绘制，采用不规则的形状和粗糙的线条。火焰细节：添加了额外的pat
  • 成功撒花特效 吉吉安 css特效撒花特效撒花动画成功特效前端前端开发
    基础效果：前端安装并引入canvas-confetti包如有问题请使用满血版DeepSeek/国内直连GPT/Claude解答1.安装npminstall--savecanvas-confetti2.在前端代码中引用importconfettifrom'canvas-confetti';2.在前端代码中使用把下面这个直接放到你的函数里面，调用即可，调用时机由自己控制，比如成功状态或者其他时机con
  • 工具箱之父小程序源码（二）--萌宠大作战部分 jackzhuoa 微信小程序从零到万微信小程序游戏王者荣耀
    微信小程序搜一搜工具箱之父.game-container{position:relative;width:100vw;height:100vh;background-color:#000;}.game-canvas{width:100%;height:100%;}/*游戏信息样式*/.game-info{position:absolute;top:40rpx;left:40rpx;right:40
  • 【Three.js】JS 3D library（一个月进化史） Tiffany_Ho 前端Three.js
    #春节过完了，该继续投入学习了~作为一个平面开发者，想要增进更多的技能，掌握web3D开发#前置知识与技能1.JavaScript基础-掌握ES6+语法（类、模块、箭头函数、解构等）-熟悉异步编程（Promise、async/await）-了解事件循环和DOM操作2.HTML5和CSS3-熟悉Canvas和WebGL的基础概念-了解CSS3动画和变换（transform、transition）3.
  • uniapp canvas生成海报 并保存到相册 weixin_54408935 记点自己挖的坑uni-app
    用的插件这是地址https://ext.dcloud.net.cn/plugin?id=3276用的插件结果自己还踩了一堆坑哎首先引用组件的时候要让组件显示出来不能隐藏可以选择定位然后放置到底层，当然要记得给上面的层级加个背景颜色，免得插件显示出来了这是插件的调用和canvasImage是要渲染的数据//海报生成成功getImg(e)//生成失败fail(err)importlyzCanvasfr
  • h5 uniapp html2canvas生成海报,保存到本地功能实现； js小白羊 uni-appjavascript前端
    html2canvas生成海报,保存到本地功能实现1.在开发过程中我们将HTML2canvas封装成一个组件，通过prop传递ID参数2.组件的使用，伪代码不要直接复制uniapp语法3.h5保存生成后的图片到本地方法;1.在开发过程中我们将HTML2canvas封装成一个组件，通过prop传递ID参数在组件中，通过prop接收ID的，ID的变化来触发render.js里面的函数。html2can
  • 图片绘制到Canvas上并能缩放和平移 canvashtml
    有时候我们需要预览图片，对图片进行缩放平移等操作，这时候发现用img标签就不好用了。这时候就可以用我这个帖子的代码实现你要的效果。格式支持：只要能在canvas上渲染的图片都能做缩放平移。如果想缩放后还能把图片下载到本地，请自己调用canvas的api即可。特性：小于canvas大小，则默认不缩放。大于canvas则以最长边为单位来缩放。效果如下：将下方代码新建一个html，在浏览器打开就能看到效
  • HTML5 起步 强强学习 html5前端html
    HTML5是W3C与WHATWG合作的结果,WHATWG指WebHypertextApplicationTechnologyWorkingGroup。WHATWG致力于web表单和应用程序，而W3C专注于XHTML2.0。在2006年，双方决定进行合作，来创建一个新版本的HTML。HTML5中的一些有趣的新特性：用于绘画的canvas元素用于媒介回放的video和audio元素对本地离线存储的更好
  • canvas 添加html元素,给canvas添加内容 云舞空城 canvas添加html元素
    画布是一个矩形区域，您可以控制其每一像素。canvas拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。创建Canvas元素向HTML5页面添加canvas元素。规定元素的id、宽度和高度：通过JavaScript来绘制canvas元素本身是没有canvas画布与画布内容都缩小如何实现?如何将canvas复制给另外一个canvascanvas怎么根据坐标获取上面的内容html5canvas清除
  • 微信小程序canvas2D全新API介绍 前端彭于晏Eddie 小程序小程序canvas前端
    文章目录微信小程序canvas2D介绍前言简介获取canvas节点绘制图片绘制文字绘制换行文字保存canvas踩坑canvas尺寸问题绘制图片层级问题微信小程序canvas2D介绍前言微信小程序官方在2.9.0开始支持了一个canvas2D的新API，之前的API不再进行维护，因此之后使用canvas的项目，都建议使用canvas2D来绘制。那么新的canvas2DAPI有啥好处呢？全面支持源生H
  • 微信小程序画布canvas（新版）实现签名功能 阿成℡ 小程序微信小程序小程序前端
    wxml文件:新版使用id获取canvas组件即可，旧版需要使用canvas-id。wxss文件：/*pages/signature/signature.wxss*/.container{padding:20rpx;height:100vh;width:100vw;overflow:hidden;display:flex;align-items:center;/*background:radial
  • 小程序canvas 2d 自定义字体 rich@cai 微信小程序canvas小程序canvas
    开发工具：微信开发者工具Stable1.05.21020210注意：目前canvas2d开发工具看不到效果，需要真机预览才可以看到效果效果图：下面是动态加载网络字体的api:写的是一个全局加载的//app.jsApp({onLaunch(){//加载全局字体for(leti=0;i
  • 微信小程序中的canvas(2D) mini.. 微信小程序小程序
    微信小程序中的组件提供了一个用于绘制图形的画布，支持2D绘图。以下是对微信小程序中2D组件的详细介绍，包括属性、方法、事件和示例代码。一、组件属性基本属性canvas-id:在自定义组件中使用时，指定组件的唯一标识符，用于创建绘图上下文。disable-scroll:是否禁用滚动，通过设置为true可以禁用画布的滚动事件。二、绘图上下文对象（CanvasContext）通过wx.createCan
  • 鸿蒙next开发：页面添加水印-Canvas 代码中的爱马仕 HarmonyOS鸿蒙OpenHarmonyharmonyos华为ubuntu前端鸿蒙鸿蒙系统程序员
    介绍在很多的场景中，如保存图片以及容器封面都能够见到水印，本案例通过Canvas组件以及OffscreenCanvas实现了页面添加水印以及保存图片时添加水印的功能。效果图预览使用说明：进入页面，页面背景显示水印效果。长按轮播图片，弹出半模态弹窗，点击保存按钮，图片保存在图库中，查看图片，图片显示水印。实现思路本示例使用两种方法添加水印方法一：Canvas组件绘制水印，然后将水印组件通过overl
  • 前端实现电子签名 一个00后前端开发 前端
                      Document          *{        margin:0;        padding:0;      }                      取消      保存            constcanvas=document.querySelector('canvas');    canvas.width=500;    canvas
  • OpenGL ES 文字渲染进阶--渲染中文字体 字节流动 OpenGLES3.0OpenGL文字渲染C++Android
    旧文OpenGLES文字渲染方式有几种？一文中分别介绍了OpenGL利用Canvas和FreeType绘制文字的方法。无论采用哪种方式进行渲染，本质上原理都是纹理贴图：将带有文字的图像上传到纹理，然后进行贴图。渲染中文字体利用Canvas绘制中文字体和绘制其他字体在操作方式上没有区别，但是使用FreeType绘制中文字体，在编码方式、加载方式以及字体属性上面会有一些坑要踩，这里本人已经踩过，将在本
  • cocos creator从零开发2048(11)-游戏失败处理 cocos
    Canvas节点下新建空节点并重命名为panelFailed，挂载Widget组件并勾选Top、Right、Bottom、Left并把这些属性都设置为0，挂载BlockInputEvents组件。panelFailed节点下新建Sprite(单色)并重命名为bg，Size设置为500x500，Color设置为#43C1BE。panelFailed节点下新建Label(文字)，PositionY设置
  • cocos creator从零开发五子棋(07)-胜负ui cocos
    Canvas节点下新建空节点panelSettle，挂载Widget组件并勾选Top、Right、Bottom、Left把这些属性都设置为0，挂载BlockInputEvents组件。panelSettle节点下新建Label(文字)并重命名为lblMsg，PositionY设置为100，Color设置为#19FF00，FontSize和LineHeight都设置为100。panelSettle节
  • 鸿蒙开发：简单自定义一个绘制画板
    前言本篇文章，主要是使用Canvas绘制一个简单的画板，可以更改颜色，画笔粗细以及删除操作，主要运用到了CanvasRenderingContext2D中的绘制路径功能，我们可以看下基本实现的效果。若在一个画板上进行随意的绘制，少不了画布的存在，鸿蒙当中为我们提供了Canvas组件，使用它，我们可以在上面进行绘制各种想要的图形，共有两个构造参数，可以只接收一个context参数，主要用于设置绘制的
  • 用Canvas+AI打造惊艳情人节网页：程序员专属浪漫指南 Jiaberrr javascript前端情人节网页浪漫代码
    还在为情人节礼物发愁？不如用代码表达你的爱！本文将教你如何用Canvas和AI技术，打造一个惊艳的动态情人节网页，用程序员的方式说“我爱你”一、前言情人节将至，作为程序员的你是否也想用独特的方式表达爱意？与其送花送巧克力，不如亲手用代码打造一个专属的浪漫网页！本文将带你使用Canvas和AI技术，实现一个充满爱意的动态网页，让你的TA感受到程序员的浪漫。主要特色和实现要点：粒子心形动画：使用Can
  • Unity-Mirror学习笔记-Tank 薯仔焖鹅 游戏unity
    Unity-Mirror-学习笔记(Tank)通过Mirror内置的例子来学习其用法，此为笔记。游戏对象以及其使用到的Network组件NetworkManager1NetworkManagerHUD2TelepathyTransportNetworkManagerSpawn(GameObject)3NetworkStartPositionUI-Canvas(GameObject)4TankGam
  • canvas实现贪吃蛇 田本初 JavaScriptcss前端javascript
    Canvas贪吃蛇canvas{border:2pxsolid#333;}#controlPanel{margin:10px0;display:flex;gap:10px;}button{padding:8px16px;font-size:16px;cursor:pointer;background:#4CAF50;color:white;border:none;border-radius:4px
  • vue页面导出为pdf文件 weixin_45907435 vue.jspdf前端
    在后台管理项目中，想到把页面导出为pdf格式的文件，可以使用html2canvas和jspdf插件实现1、安装'html2canvas''jspdf'npminstallhtml2canvas--savenpminstalljspdf--save2、util.js文件中封装导出方法//引入依赖importhtml2canvasfrom'html2canvas'importJsPDFfrom'jsp
  • python创建画布语句_canvas元素创建画布 weixin_39847945 python创建画布语句
    Phaser桌面和手机游戏HTML5框架Phaser是一个流行的2D开源游戏框架，可以用来开发桌面或手机浏览器HTML5游戏，适合侧视或顶视风格：Phaser同时支持Canvas和WebGL渲染引擎，预置了完备的精灵动画、输入管理、瓦片地图、补间动画、资源加载器、物理系统、粒子系统等特性，几乎能够满足你开发一个2D游戏的任何...文章马拉喀什2017-11-021163浏览量HTML5学习手笔四：
  • html+Canvas+js 实现 图片的剪裁效果 慕容屠苏 大前端爬坑之路
    html+Canvas实现图片的剪裁效果开发过程中我们上传图片的时候，有时需要保证图片尺寸的统一，以避免以固定尺寸显示图片时会出现拉伸问题。这是就需要在上传之前对图片进行裁剪后再上传图片。我们裁剪图片将会用到canvas：canvas是HTML5中的一个新元素，这个元素可以通过JavaScript用来绘制图形。例如可以用它来画图、合成图象、做一些动画等。通常呢，我们在canvas上画图的方法是使用
  • Unity引擎开发：2D与3D渲染技术_UI渲染与交互 chenlz2007 游戏开发2unity3duilucene游戏服务器交互
    UI渲染与交互在动作游戏中，UI（用户界面）的设计和渲染是游戏体验的关键部分。一个良好的UI不仅可以提供必要的游戏信息，还能增强玩家的沉浸感。本节将详细介绍如何在Unity引擎中实现高效的UI渲染和交互，包括UI元素的创建、布局、动画效果以及与玩家的交互方式。UI元素的创建与管理创建UI元素在Unity中，创建UI元素非常简单。你可以通过以下步骤来创建一个基本的UI元素：创建Canvas：在Hie
  • html+canvas地图画布实现快速拖动出现瓦片空白问题优化 战族狼魂 html前端
    快速拖动出现问题，慢慢拖动不会有问题”的现象，问题的根本原因可能是鼠标移动事件触发得太频繁，导致每次鼠标移动时都重新渲染瓦片，造成性能问题或者视觉上的不流畅。特别是在快速拖动时，浏览器需要处理大量的瓦片加载和渲染，这就容易出现卡顿。先上问题代码，快速拖动出现问题，慢慢拖动不会有问题快速拖动出现问题，慢慢拖动不会有问题瓦片拖动功能/*地图容器*/.map{position:fixed;width:1
  • 微信小程序日程预约 伊丶二 微信小程序canvas前端
    涉及仪器的预约使用，仿照小米日历日程预约开发开发对应页。效果展示文章目录效果展示需求分析代码实现一、构建基础页面结构1.顶部日期选择器2.中部canvas绘制3.底部数据回显二、中间canvas功能细分1.激活状态的判断2.时间块拉伸逻辑3.时间块拖动逻辑三、底部数据回显总结需求分析顶部七日选择器横向显示从当前日期开始后的七天，并区分月-日七天共计预约时间段综合为3中部canvas绘制区左侧时间刻
  • 微信开发者验证接口开发 362217990 微信 开发者 token 验证
    微信开发者接口验证。 Token，自己随便定义，与微信填写一致就可以了。 根据微信接入指南描述 http://mp.weixin.qq.com/wiki/17/2d4265491f12608cd170a95559800f2d.html 第一步：填写服务器配置 第二步：验证服务器地址的有效性 第三步：依据接口文档实现业务逻辑 这里主要讲第二步验证服务器有效性。 建一个
  • 一个小编程题-类似约瑟夫环问题 BrokenDreams 编程
            今天群友出了一题：         一个数列,把第一个元素删除,然后把第二个元素放到数列的最后,依次操作下去,直到把数列中所有的数都删除,要求依次打印出这个过程中删除的数。      &
  • linux复习笔记之bash shell (5) 关于减号-的作用 eksliang linux关于减号“-”的含义linux关于减号“-”的用途linux关于“-”的含义linux关于减号的含义
        转载请出自出处： http://eksliang.iteye.com/blog/2105677        管道命令在bash的连续处理程序中是相当重要的，尤其在使用到前一个命令的studout（标准输出）作为这次的stdin（标准输入）时，就显得太重要了，某些命令需要用到文件名，例如上篇文档的的切割命令（split）、还有
  • Unix(3) 18289753290 unix ksh
    1)若该变量需要在其他子进程执行，则可用"$变量名称"或${变量}累加内容 什么是子进程？在我目前这个shell情况下，去打开一个新的shell，新的那个shell就是子进程。一般状态下，父进程的自定义变量是无法在子进程内使用的，但通过export将变量变成环境变量后就能够在子进程里面应用了。 2)条件判断： &&代表and  ||代表or&nbs
  • 关于ListView中性能优化中图片加载问题 酷的飞上天空 ListView
    ListView的性能优化网上很多信息，但是涉及到异步加载图片问题就会出现问题。 具体参看上篇文章http://314858770.iteye.com/admin/blogs/1217594   如果每次都重新inflate一个新的View出来肯定会造成性能损失严重，可能会出现listview滚动是很卡的情况，还会出现内存溢出。 现在想出一个方法就是每次都添加一个标识，然后设置图
  • 德国总理默多克：给国人的一堂“震撼教育”课 永夜-极光 教育
    http://bbs.voc.com.cn/topic-2443617-1-1.html德国总理默多克：给国人的一堂“震撼教育”课　 安吉拉—默克尔，一位经历过社会主义的东德人，她利用自己的博客，发表一番来华前的谈话，该说的话，都在上面说了，全世界想看想传播——去看看默克尔总理的博客吧！ 　　德国总理默克尔以她的低调、朴素、谦和、平易近人等品格给国人留下了深刻印象。她以实际行动为中国人上了一堂
  • 关于Java继承的一个小问题。。。 随便小屋 java
    今天看Java 编程思想的时候遇见一个问题，运行的结果和自己想想的完全不一样。先把代码贴出来！ //CanFight接口 interface Canfight { void fight(); } //ActionCharacter类 class ActionCharacter { public void fight() { System.out.pr
  • 23种基本的设计模式 aijuans 设计模式
    Abstract Factory：提供一个创建一系列相关或相互依赖对象的接口，而无需指定它们具体的类。 　　Adapter：将一个类的接口转换成客户希望的另外一个接口。A d a p t e r模式使得原本由于接口不兼容而不能一起工作的那些类可以一起工作。 　　Bridge：将抽象部分与它的实现部分分离，使它们都可以独立地变化。 　　Builder：将一个复杂对象的构建与它的表示分离，使得同
  • 《周鸿祎自述：我的互联网方法论》读书笔记 aoyouzi 读书笔记
    从用户的角度来看,能解决问题的产品才是好产品,能方便/快速地解决问题的产品,就是一流产品.   商业模式不是赚钱模式 一款产品免费获得海量用户后,它的边际成本趋于0,然后再通过广告或者增值服务的方式赚钱,实际上就是创造了新的价值链.   商业模式的基础是用户,木有用户,任何商业模式都是浮云.商业模式的核心是产品,本质是通过产品为用户创造价值. 商业模式还包括寻找需求
  • JavaScript动态改变样式访问技术 百合不是茶 JavaScriptstyle属性ClassName属性
      一:style属性 格式:  HTML元素.style.样式属性="值";   创建菜单:在html标签中创建 或者 在head标签中用数组创建   <html> <head> <title>style改变样式</title> </head> &l
  • jQuery的deferred对象详解 bijian1013 jquerydeferred对象
            jQuery的开发速度很快，几乎每半年一个大版本，每两个月一个小版本。         每个版本都会引入一些新功能，从jQuery 1.5.0版本开始引入的一个新功能----deferred对象。    &nb
  • 淘宝开放平台TOP Bill_chen C++c物流C#
    淘宝网开放平台首页：http://open.taobao.com/ 淘宝开放平台是淘宝TOP团队的产品，TOP即TaoBao Open Platform， 是淘宝合作伙伴开发、发布、交易其服务的平台。 支撑TOP的三条主线为：    1.开放数据和业务流程     * 以API数据形式开放商品、交易、物流等业务；  &
  • 【大型网站架构一】大型网站架构概述 bit1129 网站架构
    大型互联网特点 面对海量用户、海量数据 大型互联网架构的关键指标 高并发 高性能 高可用 高可扩展性 线性伸缩性 安全性 大型互联网技术要点   前端优化 CDN缓存 反向代理 KV缓存 消息系统 分布式存储 NoSQL数据库 搜索 监控 安全 想到的问题： 1.对于订单系统这种事务型系统，如
  • eclipse插件hibernate tools安装 白糖_ Hibernate
    eclipse helios(3.6)版 1.启动eclipse 2.选择 Help > Install New Software...> 3.添加如下地址： http://download.jboss.org/jbosstools/updates/stable/helios/ 4.选择性安装：hibernate tools在All Jboss tool
  • Jquery easyui Form表单提交注意事项 bozch jquery easyui
    jquery easyui对表单的提交进行了封装，提交的方式采用的是ajax的方式，在开发的时候应该注意的事项如下：         1、在定义form标签的时候，要将method属性设置成post或者get，特别是进行大字段的文本信息提交的时候，要将method设置成post方式提交，否则页面会抛出跨域访问等异常。所以这个要
  • Trie tree(字典树)的Java实现及其应用-统计以某字符串为前缀的单词的数量 bylijinnan java实现
    import java.util.LinkedList; public class CaseInsensitiveTrie { /** 字典树的Java实现。实现了插入、查询以及深度优先遍历。 Trie tree's java implementation.(Insert,Search,DFS) Problem Description Igna
  • html css 鼠标形状样式汇总 chenbowen00 htmlcss
    css鼠标手型cursor中hand与pointer  Example：CSS鼠标手型效果 <a href="#" style="cursor:hand">CSS鼠标手型效果</a><br/>  Example：CSS鼠标手型效果 <a href="#" style=&qu
  • [IT与投资]IT投资的几个原则 comsci it
          无论是想在电商,软件,硬件还是互联网领域投资,都需要大量资金,虽然各个国家政府在媒体上都给予大家承诺,既要让市场的流动性宽松,又要保持经济的高速增长....但是,事实上,整个市场和社会对于真正的资金投入是非常渴望的,也就是说,表面上看起来,市场很活跃,但是投入的资金并不是很充足的......    
  • oracle with语句详解 daizj oraclewithwith as
    oracle with语句详解 转 在oracle中，select 查询语句，可以使用with,就是一个子查询，oracle 会把子查询的结果放到临时表中，可以反复使用 例子:注意，这是sql语句，不是pl/sql语句， 可以直接放到jdbc执行的 ----------------------------------------------------------------
  • hbase的简单操作 deng520159 数据库hbase
    近期公司用hbase来存储日志,然后再来分析 ,把hbase开发经常要用的命令找了出来. 用ssh登陆安装hbase那台linux后 用hbase shell进行hbase命令控制台! 表的管理 1）查看有哪些表 hbase(main)> list 2）创建表   # 语法：create <table>, {NAME => <family&g
  • C语言scanf继续学习、算术运算符学习和逻辑运算符 dcj3sjt126com c
    /* 2013年3月11日20:37:32 地点：北京潘家园 功能：完成用户格式化输入多个值 目的：学习scanf函数的使用 */ # include <stdio.h> int main(void) { int i, j, k; printf("please input three number:\n"); //提示用
  • 2015越来越好 dcj3sjt126com 歌曲
    越来越好 房子大了电话小了 感觉越来越好 假期多了收入高了 工作越来越好 商品精了价格活了 心情越来越好 天更蓝了水更清了 环境越来越好 活得有奔头人会步步高 想做到你要努力去做到 幸福的笑容天天挂眉梢 越来越好 婆媳和了家庭暖了 生活越来越好 孩子高了懂事多了 学习越来越好 朋友多了心相通了 大家越来越好 道路宽了心气顺了 日子越来越好 活的有精神人就不显
  • java.sql.SQLException: Value '0000-00-00' can not be represented as java.sql.Tim feiteyizu mysql
    数据表中有记录的time字段（属性为timestamp）其值为：“0000-00-00 00:00:00” 程序使用select 语句从中取数据时出现以下异常： java.sql.SQLException:Value '0000-00-00' can not be represented as java.sql.Date   java.sql.SQLException: Valu
  • Ehcache（07）——Ehcache对并发的支持 234390216 并发ehcache锁ReadLockWriteLock
    Ehcache对并发的支持          在高并发的情况下，使用Ehcache缓存时，由于并发的读与写，我们读的数据有可能是错误的，我们写的数据也有可能意外的被覆盖。所幸的是Ehcache为我们提供了针对于缓存元素Key的Read（读）、Write（写）锁。当一个线程获取了某一Key的Read锁之后，其它线程获取针对于同
  • mysql中blob,text字段的合成索引 jackyrong mysql
      在mysql中，原来有一个叫合成索引的，可以提高blob,text字段的效率性能， 但只能用在精确查询，核心是增加一个列，然后可以用md5进行散列，用散列值查找 则速度快 比如： create table abc(id varchar(10),context blog,hash_value varchar(40)); insert into abc(1,rep
  • 逻辑运算与移位运算 latty 位运算逻辑运算
    源码：正数的补码与原码相同例+7 源码：00000111 补码 ：00000111 （用8位二进制表示一个数） 负数的补码： 符号位为1，其余位为该数绝对值的原码按位取反；然后整个数加1。   -7 源码： 10000111 ，其绝对值为00000111  取反加一：11111001 为-7补码 已知一个数的补码，求原码的操作分两种情况：
  • 利用XSD 验证XML文件 newerdragon javaxmlxsd
    XSD文件 （XML Schema 语言也称作 XML Schema 定义（XML Schema Definition，XSD）。 具体使用方法和定义请参看： http://www.w3school.com.cn/schema/index.asp java自jdk1.5以上新增了SchemaFactory类 可以实现对XSD验证的支持，使用起来也很方便。 以下代码可用在J
  • 搭建 CentOS 6 服务器(12) - Samba rensanning centos
    （1）安装 # yum -y install samba Installed: samba.i686 0:3.6.9-169.el6_5 # pdbedit -a rensn new password:123456 retype new password:123456 …… （2）Home文件夹 # mkdir /etc
  • Learn Nodejs 01 toknowme nodejs
    （1）下载nodejs https://nodejs.org/download/ 选择相应的版本进行下载     （2）安装nodejs 安装的方式比较多，请baidu下 我这边下载的是“node-v0.12.7-linux-x64.tar.gz”这个版本 （1）上传服务器 （2）解压 tar -zxvf  node-v0.12.
  • jquery控制自动刷新的代码举例 xp9802 jquery
    1、html内容部分  复制代码代码示例: <div id='log_reload'> <select name="id_s" size="1"> <option value='2'>-2s-</option> <option value='3'>-3s-</option
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他