我不是费圆
我不是费圆

3D旋转标签云

3D旋转标签云

  一定要先做下广告，衷心希望大家浏览博客的同时，可以点一下“ 赞助商 ” ，这个机构真的很棒，受疫情影响，原本的大机构为生源所困，我希望同样热爱前端，或者有兴趣向前端发展的朋友，可以了解一下这家机构。我不是学院的招生老师，但大家可以咨询我学院方面的问题，博主不图名利，如果入校学习，我肯定会想办法让机构给你最大的优惠。
  “百闻不如一见”，我讲再多都不如你来问一问看一看。

  CSS代码较少，用了200行JS脚本驱动，给自定义转速、半径、缩放添加了注释，方便博友自行修改。本页面部分代码取自“ 源码之家 ”，前端学习不是一蹴而就，必须有丰富的日常积累才能有所提升，我不是最饱读诗书的那个，但我敏而好学，不耻下问。真心希望大家都能学有所成，也希望大家能经常阅读我的文章，给我一点点支持，我可能会拖更，但不会断更。我热爱前端就像热爱自己，我更专注于动画制作，想寻找有同样兴趣的博友，共同进步。

上源码：


<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>标签云title>
	<style type="text/css">
		#tagbox {
			position: relative;
			margin: 20px auto 0px;
			width: 500px;
			height: 500px;
			background-image: url(https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=444462001,2967968230&fm=11&gp=0.jpg);
		}
		#tagbox .img img{
			width: 70px;
		}
		#tagbox a,#tagbox .img img{
			position: absolute;
			padding: 3px 6px;
			font-family: Microsoft YaHei;
			color: #fff;
			TOP: 0px;
			font-weight: bold;
			text-decoration: none;
			left: 0px
		}
		#tagbox a:hover{
			border: #eee 1px solid;
			background: #000;
		}

		#tagbox .blue {
			color: blue
		}

		#tagbox .red {
			color: red
		}

		#tagbox .yellow {
			color: yellow
		}
	style>
head>
<body>
	<div id="tagbox">
		<a class="yellow" href="#">前端a>
		<a class="blue" href="#">Vuea>
		<a class="red" href="#">ajaxa>
		<a class="img" href="#">
			<img src="gexiangxiang.png" alt="" />
		a>
		<a href="#">Jquerya>
		<a href="#">脚手架a>
		<a class="blue" href="#">CSSa>
		<a href="#">我不是费圆a>
		<a class="red" href="#">a>
		<a class="yellow" href="#">韩媒a>
		<a href="#">丽人a>
		<a class="red" href="#">搞笑a>
		<a href="#">感人a>
		<a class="blue" href="#">壁纸a>
		<a class="blue" href="#">古装a>
		<a class="red" href="#">言情a>
		<a class="yellow" href="#">浪漫a>
		<a class="yellow" href="#">耽美a>
		<a class="blue" href="#">爆笑a>
		<a class="yellow" href="#">挑眉a>
		<a class="blue" href="#">同人a>
		<a class="blue" href="#">武侠a>
		<a class="red" href="#">魔幻a>
		<a href="#">教案a>
		<a href="#">论文a>
		<a class="yellow" href="#">妩媚a>
		<a href="#">青丝a>
		<a href="#">带货a>
		<a class="blue" href="#">科幻a>
		<a class="red" href="#">恐怖a>
		<a class="red" href="#">星星a>
		<a class="blue" href="#">下载a>
		<a href="#">音乐a>
		<a class="blue" href="#">游戏a>
		<a class="blue" href="#">CG资源a>
		<a class="yellow" href="#">运势a>
		<a href="#">课件a>
		<a href="#">幽默a>
		<a class="red" href="#">学霸a>
		<a class="green" href="#">雅思a>
		<a href="#">名校a>
		<a class="red" href="#">赚钱a>
		<a class="yellow" href="#">干货a>
		<a class="yellow" href="#">香醇a>
		<a class="yellow" href="#">云电脑a>
	div>
body>
<script>
var radius = 180;	//牵涉到半径
var dtr = Math.PI/180;//旋转的快慢
var d=250;			//字体缩放

var mcList = [];
var active = false;
var lasta = 1;
var lastb = 1;
var distr = true;
var tspeed=5;
var size=250;

var mouseX=0;
var mouseY=0;

var howElliptical=1;

var aA=null;
var oDiv=null;

window.onload=function (){
	var i=0;
	var oTag=null;
	
	oDiv=document.getElementById('tagbox');
	
	aA=oDiv.getElementsByTagName('a');
	
	for(i=0;i<aA.length;i++){
		oTag={};
		
		oTag.offsetWidth=aA[i].offsetWidth;
		oTag.offsetHeight=aA[i].offsetHeight;
		
		mcList.push(oTag);
	}
	
	sineCosine( 0,0,0 );
	
	positionAll();
	
	oDiv.onmouseover=function ()
	{
		active=true;
	};
	
	oDiv.onmouseout=function ()
	{
		active=false;
	};
	
	oDiv.onmousemove=function (ev){
		var oEvent=window.event || ev;
		
		mouseX=oEvent.clientX-(oDiv.offsetLeft+oDiv.offsetWidth/2);
		mouseY=oEvent.clientY-(oDiv.offsetTop+oDiv.offsetHeight/2);
		
		mouseX/=5;
		mouseY/=5;
	};
	
	setInterval(update, 30);
};

function update(){
	var a;
	var b;
	
	if(active)
	{
		a = (-Math.min( Math.max( -mouseY, -size ), size ) / radius ) * tspeed;
		b = (Math.min( Math.max( -mouseX, -size ), size ) / radius ) * tspeed;
	}
	else
	{
		a = lasta * 0.98;
		b = lastb * 0.98;
	}
	
	lasta=a;
	lastb=b;
	
	if(Math.abs(a)<=0.01 && Math.abs(b)<=0.01)
	{
		return;
	}
	
	var c=0;
	sineCosine(a,b,c);
	for(var j=0;j<mcList.length;j++){
		var rx1=mcList[j].cx;
		var ry1=mcList[j].cy*ca+mcList[j].cz*(-sa);
		var rz1=mcList[j].cy*sa+mcList[j].cz*ca;
		
		var rx2=rx1*cb+rz1*sb;
		var ry2=ry1;
		var rz2=rx1*(-sb)+rz1*cb;
		
		var rx3=rx2*cc+ry2*(-sc);
		var ry3=rx2*sc+ry2*cc;
		var rz3=rz2;
		
		mcList[j].cx=rx3;
		mcList[j].cy=ry3;
		mcList[j].cz=rz3;
		
		per=d/(d+rz3);
		
		mcList[j].x=(howElliptical*rx3*per)-(howElliptical*2);
		mcList[j].y=ry3*per;
		mcList[j].scale=per;
		mcList[j].alpha=per;
		
		mcList[j].alpha=(mcList[j].alpha-0.6)*(10/6);
	}
	
	doPosition();
	depthSort();
}

function depthSort(){
	var i=0;
	var aTmp=[];
	
	for(i=0;i<aA.length;i++)
	{
		aTmp.push(aA[i]);
	}
	
	aTmp.sort
	(
		function (vItem1, vItem2)
		{
			if(vItem1.cz>vItem2.cz)
			{
				return -1;
			}
			else if(vItem1.cz<vItem2.cz)
			{
				return 1;
			}
			else
			{
				return 0;
			}
		}
	);
	
	for(i=0;i<aTmp.length;i++)
	{
		aTmp[i].style.zIndex=i;
	}
}

function positionAll(){
	var phi=0;
	var theta=0;
	var max=mcList.length;
	var i=0;
	
	var aTmp=[];
	var oFragment=document.createDocumentFragment();
	
	//Ëæ»úÅÅÐò
	for(i=0;i<aA.length;i++){
		aTmp.push(aA[i]);
	}
	
	aTmp.sort
	(
		function ()
		{
			return Math.random()<0.5?1:-1;
		}
	);
	
	for(i=0;i<aTmp.length;i++){
		oFragment.appendChild(aTmp[i]);
	}
	
	oDiv.appendChild(oFragment);
	
	for( var i=1; i<max+1; i++){
		if( distr ){
			phi = Math.acos(-1+(2*i-1)/max);
			theta = Math.sqrt(max*Math.PI)*phi;
		}
		else
		{
			phi = Math.random()*(Math.PI);
			theta = Math.random()*(2*Math.PI);
		}
		//×ø±ê±ä»»
		mcList[i-1].cx = radius * Math.cos(theta)*Math.sin(phi);
		mcList[i-1].cy = radius * Math.sin(theta)*Math.sin(phi);
		mcList[i-1].cz = radius * Math.cos(phi);
		
		aA[i-1].style.left=mcList[i-1].cx+oDiv.offsetWidth/2-mcList[i-1].offsetWidth/2+'px';
		aA[i-1].style.top=mcList[i-1].cy+oDiv.offsetHeight/2-mcList[i-1].offsetHeight/2+'px';
	}
}

function doPosition(){
	var l=oDiv.offsetWidth/2;
	var t=oDiv.offsetHeight/2;
	for(var i=0;i<mcList.length;i++)
	{
		aA[i].style.left=mcList[i].cx+l-mcList[i].offsetWidth/2+'px';
		aA[i].style.top=mcList[i].cy+t-mcList[i].offsetHeight/2+'px';
		
		aA[i].style.fontSize=Math.ceil(12*mcList[i].scale/2)+8+'px';
		
		aA[i].style.filter="alpha(opacity="+100*mcList[i].alpha+")";
		aA[i].style.opacity=mcList[i].alpha;
	}
}

function sineCosine( a, b, c){
	sa = Math.sin(a * dtr);
	ca = Math.cos(a * dtr);
	sb = Math.sin(b * dtr);
	cb = Math.cos(b * dtr);
	sc = Math.sin(c * dtr);
	cc = Math.cos(c * dtr);
}
script>
html>

  代码开源，但需要有一定JS语音基础方可阅读。我明白“ 授人以鱼不如授人以渔 ”的道理，所以代码中常常只留下自定义注释，方便大家修改，但不能凭此参透其中的奥妙，我并没有藏拙，好学的人自然会想办法寻找答案，自学也是人生的一门必修课。

请点击赞助，了解更多内容：
河南奇酷

推荐阅读以下内容：

 Canvas线条动画
 CSS旋转魔方
 JS迷你键盘
 CSS逼真小象

你可能感兴趣的:(JS,js,javascript,动画,标签)

  • MySQL中处理JSON数据 小村学长毕业设计 mysqljson数据库
    MySQL中处理JSON数据已成为大数据分析领域的一个新方向，这一功能自MySQL5.7版本引入以来，为数据库管理系统在处理非结构化数据方面提供了强大的支持。以下是对MySQL中处理JSON数据的详细探讨，包括其引入的背景、特性、函数与操作符、性能优化以及在大数据分析中的应用等方面。一、JSON数据类型引入的背景随着大数据技术的迅猛发展和普及，数据量的爆炸性增长对数据处理能力提出了前所未有的挑战。
  • 【html5期末大作业】基于HTML仿QQ音乐官网网站 IT-司马青衫 htmlhtml5课程设计
    精彩专栏推荐文末获取联系✍️作者简介:一个热爱把逻辑思维转变为代码的技术博主作者主页:【主页——获取更多优质源码】web前端期末大作业：【毕设项目精品实战案例(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】超炫酷的Echarts大屏可视化源码：【Echarts大屏展示大数据平台可视化(150套)】HTML+CSS+JS实例代码：【️HTML+CSS+JS实例代码
  • PakePlus：Vue 和 React 跨平台桌面应用程序的新纪元 大富大贵7 程序员知识储备1程序员知识储备2程序员知识储备3前端react.jsjavascript架构vue.js
    摘要随着Vue和React等JavaScript框架的兴起，构建Web应用程序变得越来越高效和模块化。然而，将这些应用程序部署到桌面环境中一直是一个具有挑战性的问题，通常需要专门的工具和复杂的配置。PakePlus作为一个变革性的解决方案，弥合了Web开发和桌面应用程序部署之间的鸿沟。本文探讨了PakePlus如何简化将Vue和React项目打包为跨平台桌面应用程序的过程，推动了现代软件开发的边界
  • JSON数据修改的实现 一个程序员(●—●) json
    JSON数据的修改示例代码如下:usingSystem.Collections;usingSystem.Collections.Generic;usingUnityEngine;//C#命名空间（以System开头）usingSystem.IO;usingLitJson;publicclassJsonChange:MonoBehaviour{//Startiscalledbeforethefirs
  • 微信小程序和uni-app的区别 cccv工程师 微信小程序uni-appnotepad++
    开发语言和框架：Uni-app：Uni-app使用Vue.js框架进行开发，利用Vue的语法和生命周期函数，开发者可以使用熟悉的前端技术栈。微信小程序：微信小程序使用自己的框架，基于WXML（类似于HTML）和WXSS（样式语言）进行开发，需要学习微信小程序独有的语法和组件。平台支持：Uni-app：Uni-app是一个跨平台开发框架，可以将一套代码编译成多个平台的应用，包括微信小程序、H5、Ap
  • 前端高级 CSS 用法实战指南 Real Man★ 前端css
    前端高级CSS用法实战指南CSS的高级用法能显著提升开发效率、优化页面性能并实现复杂的视觉效果。以下是现代CSS的核心高级技巧和实战案例，涵盖布局、动画、优化等方向：一、现代布局系统CSSGrid复杂布局场景：实现不规则网格（如杂志排版、仪表盘）。示例：定义网格模板与区域命名：css.container{display:grid;grid-template-columns:200px1fr300p
  • WPF 属性值设置优先级详解 她说彩礼65万 WPFwpf
    在WPF中，依赖属性（DependencyProperty）的值可以通过多种方式设置，每种方式都有其特定的优先级。理解这些优先级对于正确地管理和预期控件的行为至关重要。以下是WPF中依赖属性值的优先级列表，从高到低排列：1.属性系统强制值这包括动画正在运行时的值、强制值等。动画是改变属性值的一种强大方式，当一个属性正在被动画影响时，动画设定的值将具有最高优先级。2.本地值直接在控件上设置的值，例如
  • JavaScript闭包+函数内部的this指向 落日九号 javascript
    关于闭包，  什么是闭包？  闭包就是能够读取其他函数内部变量的函数。如果我们把闭包改称做闭包函数这样理解起来可能更容易一些。闭包就是能够读取其他函数内部变量的函数。例如在javascript中，只有函数内部的子函数才能读取局部变量，所以闭包可以理解成“定义在一个函数内部的函数“。在本质上，闭包是将函数内部和函数外部连接起来的桥梁。真正的定义闭包————英文连接闭包————中文连接Aclosure
  • 珍藏！Java SpringBoot 精品源码合集约惠来袭，获取路径大公开 秋野酱 javaspringboot开发语言
    技术范围：SpringBoot、Vue、SSM、HLMT、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、小程序、安卓app、大数据、物联网、机器学习等设计与开发。主要内容：免费功能设计、开题报告、任务书、中期检查PPT、系统功能实现、代码编写、论文编写和辅导、论文降重、长期答辩答疑辅导、腾讯会议一对一专业讲解辅导答辩、模拟答辩演练、和理解代码逻辑思路。文末获取源码联系文末获取源码联
  • JavaScript 案例 购物车 《嘘 》安静 javascript前端开发语言
    思路：1、获取页面元素，本练习用的表格table实现2、声明一个数组，包含自己需要渲染的内容，每个内容需要声明一个默认值，便于之后用来判断是否被勾选3、封装渲染函数：通过遍历每一个元素，判断勾选状态，如果被勾选，就直接添加选中属性，没有则正常添加。4、接着遍历元素的每一个键，并分别赋值给每一个td。5、判断合计金额，每次遍历完成后，需要把被勾选的元素单价*数量并赋值给总价的元素。6、最后直接渲染到
  • JavaScript 案例 留言板 《嘘 》安静 javascriptcsshtml
    思路1、设置点击事件。点击留言按钮获取本地储存并转为数组。2、判断本地储存是否有值，如果有获取最后一个元素的id，如没有就把他赋值为一个新数组，把id值赋为1.3、在判断文本框是否有值，有值才能操作。4、调用时间函数，得到当前时间，当前用户名，以及当前内容以对象的方式存入数组。5、调用渲染函数，每次调用都把留言框的值为空，让他重新获取重新渲染。6、获取本地储存的数据数组，遍历每一个元素，就创建一个
  • 剪辑软件国际版，完全免费使用！ 学术裁缝李师傅 软件分享视频剪辑实用工具
    01引言最近收到一些小伙伴私信："求推荐好用的剪辑软件呀！"悄悄告诉你们，我电脑里藏着个宝藏工具——国际版剪映CapCut，今天就把这个压箱底的神器分享给大家！02软件介绍先别急着下载国内版！虽然操作确实简单，但很多小伙伴都吐槽过会员专享功能太多。这里有个冷知识：同根同源的海外版本不仅功能全免费，还能一键切换中文界面！我特意对比过，特效库、转场动画这些国内要开会员的素材，在这里统统零门槛使用。在设
  • JS严格模式：全面解析与开发实践 努力的小朱同学 JavaScript基础javascript前端面试
    一、简介在某些JS代码中，开头会有一行"usestrict"，这表达什么意思呢？其实，“usestrict”是一种严格模式指令（StrictMode），是采用具有限制性JavaScript变体的一种方式，于2009年的ES5规范中首次引入，并在后续规范中不断完善。严格模式对正常的JS语法进行了限制，如：通过抛出错误来消除了一些原有静默错误；修复了一些导致JS引擎难以执行优化的缺陷，使代码运行速度更
  • AMD异步模块介绍 【D＇accumulation】 前端学习
    基本介绍AMD（AsynchronousModuleDefinition，异步模块定义）是一种用于JavaScript模块化编程的规范，它允许JavaScript代码以异步方式加载模块及其依赖。它最初是为了解决浏览器端JavaScript代码模块化的问题，最著名的实现是RequireJS。AMD出现背景JavaScript发展初期，所有代码都写在一个.js文件里，或者通过有哪些特点AMD主要用于浏
  • LLM大模型提示工程Prompt Engineering Langchain promptlangchain私有化大模型人工智能产品经理ai大模型LLM
    在LLM中影响词汇的分布主要通过两种方式，一种是通过提示（Prompting），另外一种就是通过训练（Training）。提示是影响词汇分布最简单的方法，通过给LLM输入提示文本（有时会包含指令和示例）使得词汇的分布概率发生变化。以上一篇中提到的例子说明，最初的语句是“我写信给农场，希望他们送我一个宠物，他们送给我一只（）“词汇的分布如下：代码语言：javascript**复制牛0.1羊0.2狗0
  • Excel 小黑第19套 荷包蛋大王iovo excel
    对应大猫19鼠标右键标签修改颜色将文本文件导入工作表中：数据-现有链接-浏览更多选择员工档案（若预览是乱七八糟的文字，将文件格式改成简体中文）分隔符号看题目要求注意：将身份证号设置为文本格式将一列数据分成两列显示：插入一个新的列，-数据-分列文件类型选择固定宽度，再建立分列线，分列完成再修改一下标题适当调整表格的行高和列宽：从A列选到N列，双击（列宽）；Ctrl+A全选，开始-格式修改（行高）创建
  • 【开源宝藏】30天学会CSS - DAY6 第六课 流光文字动画 hikktn 开源宝藏开源css前端
    第0步：项目结构lighting-text/├─index.html└─style.cssindex.html：包含列表，其中每个放一个字母或符号。style.css：设置背景、文字样式，以及关键帧动画（lighting）让文字逐个闪光。第1步：编写HTML结构在index.html中，核心就是一个无序列表，每个对应一个字母/符号：CSSAnimationDESAFIO♡CSS代码要点每个都是一个
  • 杨辉三角 II（js实现，LeetCode：119） 充气大锤 算法leetcode算法职场和发展javascript前端学习笔记
    这题是杨辉三角的进阶版题目，所以直接在返回值那里返回整个三角的rowIndex行的数组就可以做出来/***@param{number}rowIndex*@return{number[]}*/vargetRow=function(rowIndex){letarr=[[1],[1,1]]for(leti=1;i0;--j){row[j]+=row[j-1];}}returnrow;};这样优化之后空间
  • WebAssembly 与 JavaScript：高性能 Web 开发的未来 vvilkim JavaScript现代WEB技术wasmjavascript开发语言
    在现代Web开发中，性能始终是一个关键问题。随着Web应用变得越来越复杂，开发者需要更高效的工具和技术来满足用户对速度和响应能力的需求。WebAssembly（简称Wasm）正是为此而生。它是一种低级的二进制指令格式，旨在为Web提供接近原生代码的执行性能。与此同时，它与JavaScript的关系也备受关注。本文将深入探讨WebAssembly是什么，以及它与JavaScript如何协同工作。什么
  • 详细说明脚本评估和耗时较长的任务 混血哲谈 性能优化
    在网页性能优化中，脚本评估和耗时较长的任务是两大关键性能瓶颈。它们直接影响页面的加载速度、交互响应以及用户体验。以下是对这两个概念的详细说明及优化策略：一、脚本评估（ScriptEvaluation）1.定义脚本评估指浏览器解析（Parsing）、编译（Compiling）和执行（Executing）JavaScript代码的全过程。这一过程通常包括：解析：将文本形式的JavaScript代码转换
  • JavaScript（JS）单线程影响速度 ok060 javascript开发语言ecmascript
    js单线程影响速度在JavaScript（JS）中，单线程的本质是其执行模型的核心特点，这意味着同一时间只能执行一个任务。这种设计使得JS在处理诸如DOM操作、用户交互等任务时更为直观和安全，因为它避免了复杂的多线程并发问题，如竞态条件（raceconditions）和死锁（deadlocks）。然而，单线程的特性也确实影响了其处理大量计算或I/O密集型任务时的性能。影响速度的原因阻塞性操作：在单
  • QML与C++集成之道 QT性能优化QT原理源码QT界面美化 qtqt6.3qt5QT教程c++
    QML与C++集成之道补天云火鸟博客创作软件1QML基础和C++整合入门1.1QML语言概览1.1.1QML语言概览QML语言概览QML语言概览QML简介及用途QML（QuickModelLanguage）是Qt库中的一种声明式编程语言，主要用于构建复杂的用户界面。它是一种面向对象的语言，但使用场景和传统面向对象编程有所不同。QML允许开发者以XML或JSON格式编写代码来描述UI组件、它们的属性
  • 视频格式批量转换工具-FFGO 屠屠在干嘛 FFGO格式工厂视频
    由于毕设需要webm来展示动画而搜索引擎所有的webm转换工具都是在线且限制转换大小的就算大小刚好也容易报错甚至转换不出来绞尽脑汁干脆自己写了一个视频格式转换工具基本上视频格式都能够支持，如果后续有什么无法支持的格式我会后续继续更新所以暂且命名他为FF-GO吧也挺好听的，下面是软件的截图和下载链接下载直链：https://tuwp.cc:999/d/LOVETU/%E5%AE%9E%E7%94%A
  • React Native：跨平台移动应用开发的强大框架 冬冬小圆帽 reactnativereact.jsjavascript
    ReactNative介绍ReactNative是由Facebook开发并开源的一款基于JavaScript和React的跨平台移动应用开发框架。它允许开发者使用React的语法和组件模型来构建原生移动应用（iOS和Android）。ReactNative的核心思想是“LearnOnce,WriteAnywhere”，即学习一次，编写多端应用。1.核心特点跨平台开发：使用JavaScript和Re
  • 《Astro 3.0 岛屿架构实战：用「零JS」打造百万PV内容网站》 前端极客探险家 架构javascript开发语言
    文章目录一、传统内容站点的性能困局1.1企业级项目性能调研（N=200+）1.2Astro核心优势矩阵二、十分钟构建高性能内容站点2.1项目初始化2.2核心配置文件三、六大企业级场景实战3.1场景一：多框架组件混用3.2场景二：交互增强型Markdown四、性能优化深度解析4.1优化前后数据对比4.2关键优化策略五、企业级架构方案5.1内容站点技术栈5.2流量突增应对方案六、调试与监控体系6.1性
  • mongodb与爬虫的关系 getapi mongodb爬虫数据库
    MongoDB与爬虫之间的关系主要体现在数据存储和管理的层面。爬虫（WebCrawler或Spider）是一种自动化工具，用于从互联网上抓取网页内容或特定数据。而MongoDB是一个NoSQL数据库，常被用来存储和管理爬虫抓取到的数据。以下是它们之间关系的具体分析：1.爬虫的数据存储需求爬虫在运行过程中会抓取大量的非结构化或半结构化数据（例如HTML页面、JSON数据、图片链接等）。这些数据通常具
  • NestJS（基于 Express 的现代化框架） getapi express
    NestJS是一个基于Express.js的现代化框架，同时支持Fastify作为底层HTTP平台。它结合了面向对象编程（OOP）、函数式编程（FP）和响应式编程（RxJS），提供了一个高度模块化、可扩展且易于维护的开发环境，非常适合构建大型企业级应用。以下是关于NestJS的详细介绍以及如何高效使用它的指南。1.为什么选择NestJS？NestJS在Express.js的基础上进行了封装和增强，
  • 【监控系列】open-falcon yunqi1215 Monitor自动化
    Open-Falcon是一款由小米开源的分布式监控系统，具备高性能、高可用性和易扩展的特点。以下从多个维度对其进行详细解析：1.核心特点分布式架构：模块化设计，各组件独立部署，支持水平扩展。高性能：单实例可处理百万级监控指标，采用RPC通信和数据分片优化。灵活的数据模型：支持Tag（标签）标记数据，便于多维查询。实时告警：支持多条件策略、表达式告警及依赖管理。可视化：提供Dashboard和图表，
  • 分享：Javascript开源桌面环境-Puter ac-er8888 javascript开发语言ecmascript
    Puter这是一个运行在浏览器里的桌面操作系统，提供了笔记本、代码编辑器、终端、画图、相机、录音等应用和一些小游戏。该项目作者出于性能方面的考虑没有选择Vue和React技术栈，而是采用的JavaScript和jQuery构建，支持Docker一键部署和在线使用。简介：Puter是一个先进的开源项目，旨在为用户提供全新的云端体验。它可以在浏览器中运行，无需安装，即可提供丰富的功能和极快的速度。功能
  • 个人网站创建百度搜索框 「已注销」 小项目jsjsonpsuggestion百度跨域请求
    需求分析点击提交按钮或者按回车键时，将输入框中的内容作为关键字进行百度搜索，在新的页面显示搜索结果。当输入框中的内容变更时，将输入框中的内容作为关键字，用jsonp跨域请求的方式获取百度的suggestion数据，实时显示出来。当鼠标移动到对应的suggestion项上时，该项高亮，并将输入框中的内容更新为该suggestion的内容。此时点击鼠标或者按回车键时，执行搜索操作。也可以按键盘上下键来
  • 数据采集高并发的架构应用 3golden .net
    问题的出发点：          最近公司为了发展需要，要扩大对用户的信息采集，每个用户的采集量估计约2W。如果用户量增加的话，将会大量照成采集量成3W倍的增长，但是又要满足日常业务需要，特别是指令要及时得到响应的频率次数远大于预期。       &n
  • 不停止 MySQL 服务增加从库的两种方式 brotherlamp linuxlinux视频linux资料linux教程linux自学
    现在生产环境MySQL数据库是一主一从，由于业务量访问不断增大，故再增加一台从库。前提是不能影响线上业务使用，也就是说不能重启MySQL服务，为了避免出现其他情况，选择在网站访问量低峰期时间段操作。  一般在线增加从库有两种方式，一种是通过mysqldump备份主库，恢复到从库，mysqldump是逻辑备份，数据量大时，备份速度会很慢，锁表的时间也会很长。另一种是通过xtrabacku
  • Quartz——SimpleTrigger触发器 eksliang SimpleTriggerTriggerUtilsquartz
    转载请出自出处：http://eksliang.iteye.com/blog/2208166 一.概述 SimpleTrigger触发器，当且仅需触发一次或者以固定时间间隔周期触发执行；   二.SimpleTrigger的构造函数 SimpleTrigger(String name, String group)：通过该构造函数指定Trigger所属组和名称； Simpl
  • Informatica应用（1） 18289753290 sqlworkflowlookup组件Informatica
    1.如果要在workflow中调用shell脚本有一个command组件，在里面设置shell的路径；调度wf可以右键出现schedule，现在用的是HP的tidal调度wf的执行。 2.designer里面的router类似于SSIS中的broadcast（多播组件）;Reset_Workflow_Var：参数重置 （比如说我这个参数初始是1在workflow跑得过程中变成了3我要在结束时还要
  • python 获取图片验证码中文字 酷的飞上天空 python
    根据现成的开源项目 http://code.google.com/p/pytesser/改写 在window上用easy_install安装不上  看了下源码发现代码很少  于是就想自己改写一下   添加支持网络图片的直接解析   #coding:utf-8 #import sys #reload(sys) #sys.s
  • AJAX 永夜-极光 Ajax
    1.AJAX功能:动态更新页面,减少流量消耗,减轻服务器负担   2.代码结构:    <html> <head> <script type="text/javascript"> function loadXMLDoc() { .... AJAX script goes here ...
  • 创业OR读研 随便小屋 创业
            现在研一，有种想创业的想法，不知道该不该去实施。因为对于的我情况这两者是矛盾的，可能就是鱼与熊掌不能兼得。                研一的生活刚刚过去两个月，我们学校主要的是
  • 需求做得好与坏直接关系着程序员生活质量 aijuans IT 生活
            这个故事还得从去年换工作的事情说起，由于自己不太喜欢第一家公司的环境我选择了换一份工作。去年九月份我入职现在的这家公司，专门从事金融业内软件的开发。十一月份我们整个项目组前往北京做现场开发，从此苦逼的日子开始了。        系统背景：五月份就有同事前往甲方了解需求一直到6月份，后续几个月也完
  • 如何定义和区分高级软件开发工程师 aoyouzi
    在软件开发领域，高级开发工程师通常是指那些编写代码超过 3 年的人。这些人可能会被放到领导的位置，但经常会产生非常糟糕的结果。Matt Briggs 是一名高级开发工程师兼 Scrum 管理员。他认为，单纯使用年限来划分开发人员存在问题，两个同样具有 10 年开发经验的开发人员可能大不相同。近日，他发表了一篇博文，根据开发者所能发挥的作用划分软件开发工程师的成长阶段。 　　初
  • Servlet的请求与响应 百合不是茶 servletget提交java处理post提交
      Servlet是tomcat中的一个重要组成,也是负责客户端和服务端的中介     1,Http的请求方式(get  ,post);   客户端的请求一般都会都是Servlet来接受的,在接收之前怎么来确定是那种方式提交的,以及如何反馈,Servlet中有相应的方法,  http的get方式 servlet就是都doGet(
  • web.xml配置详解之listener bijian1013 javaweb.xmllistener
    一.定义 <listener> <listen-class>com.myapp.MyListener</listen-class> </listener>   二.作用        该元素用来注册一个监听器类。可以收到事件什么时候发生以及用什么作为响
  • Web页面性能优化（yahoo技术） Bill_chen JavaScriptAjaxWebcssYahoo
    1.尽可能的减少HTTP请求数 content 2.使用CDN server 3.添加Expires头(或者 Cache-control) server 4.Gzip 组件 server 5.把CSS样式放在页面的上方。 css 6.将脚本放在底部(包括内联的) javascript 7.避免在CSS中使用Expressions css 8.将javascript和css独立成外部文
  • 【MongoDB学习笔记八】MongoDB游标、分页查询、查询结果排序 bit1129 mongodb
    游标   游标，简单的说就是一个查询结果的指针。游标作为数据库的一个对象，使用它是包括 声明 打开 循环抓去一定数目的文档直到结果集中的所有文档已经抓取完 关闭游标   游标的基本用法，类似于JDBC的ResultSet(hasNext判断是否抓去完,next移动游标到下一条文档)，在获取一个文档集时，可以提供一个类似JDBC的FetchSize
  • ORA-12514 TNS 监听程序当前无法识别连接描述符中请求服务 的解决方法 白糖_ ORA-12514
    今天通过Oracle SQL*Plus连接远端服务器的时候提示“监听程序当前无法识别连接描述符中请求服务”，遂在网上找到了解决方案： ①打开Oracle服务器安装目录\NETWORK\ADMIN\listener.ora文件，你会看到如下信息：   # listener.ora Network Configuration File: D:\database\Oracle\net
  • Eclipse 问题 A resource exists with a different case bozch eclipse
    在使用Eclipse进行开发的时候，出现了如下的问题： Description Resource Path Location TypeThe project was not built due to "A resource exists with a different case: '/SeenTaoImp_zhV2/bin/seentao'.&
  • 编程之美-小飞的电梯调度算法 bylijinnan 编程之美
    public class AptElevator { /** * 编程之美 小飞 电梯调度算法 * 在繁忙的时间，每次电梯从一层往上走时，我们只允许电梯停在其中的某一层。 * 所有乘客都从一楼上电梯，到达某层楼后，电梯听下来，所有乘客再从这里爬楼梯到自己的目的层。 * 在一楼时，每个乘客选择自己的目的层，电梯则自动计算出应停的楼层。 * 问：电梯停在哪
  • SQL注入相关概念 chenbowen00 sqlWeb安全
    SQL Injection：就是通过把SQL命令插入到Web表单递交或输入域名或页面请求的查询字符串，最终达到欺骗服务器执行恶意的SQL命令。 具体来说，它是利用现有应用程序，将（恶意）的SQL命令注入到后台数据库引擎执行的能力，它可以通过在Web表单中输入（恶意）SQL语句得到一个存在安全漏洞的网站上的数据库，而不是按照设计者意图去执行SQL语句。 首先让我们了解什么时候可能发生SQ
  • [光与电]光子信号战防御原理 comsci 原理
          无论是在战场上,还是在后方,敌人都有可能用光子信号对人体进行控制和攻击,那么采取什么样的防御方法,最简单,最有效呢?       我们这里有几个山寨的办法,可能有些作用,大家如果有兴趣可以去实验一下       根据光
  • oracle 11g新特性:Pending Statistics daizj oracledbms_stats
    oracle 11g新特性:Pending Statistics 转 从11g开始，表与索引的统计信息收集完毕后，可以选择收集的统信息立即发布，也可以选择使新收集的统计信息处于pending状态，待确定处于pending状态的统计信息是安全的，再使处于pending状态的统计信息发布，这样就会避免一些因为收集统计信息立即发布而导致SQL执行计划走错的灾难。 在 11g 之前的版本中，D
  • 快速理解RequireJs dengkane jqueryrequirejs
    RequireJs已经流行很久了，我们在项目中也打算使用它。它提供了以下功能： 声明不同js文件之间的依赖 可以按需、并行、延时载入js库 可以让我们的代码以模块化的方式组织 初看起来并不复杂。 在html中引入requirejs 在HTML中，添加这样的 <script> 标签： <script src="/path/to
  • C语言学习四流程控制if条件选择、for循环和强制类型转换 dcj3sjt126com c
    # include <stdio.h> int main(void) { int i, j; scanf("%d %d", &i, &j); if (i > j) printf("i大于j\n"); else printf("i小于j\n"); retu
  • dictionary的使用要注意 dcj3sjt126com IO
    NSDictionary *dict = [NSDictionary dictionaryWithObjectsAndKeys: user.user_id , @"id", user.username , @"username",
  • Android 中的资源访问(Resource) finally_m xmlandroidStringdrawablecolor
    简单的说，Android中的资源是指非代码部分。例如，在我们的Android程序中要使用一些图片来设置界面，要使用一些音频文件来设置铃声，要使用一些动画来显示特效，要使用一些字符串来显示提示信息。那么，这些图片、音频、动画和字符串等叫做Android中的资源文件。 在Eclipse创建的工程中，我们可以看到res和assets两个文件夹，是用来保存资源文件的，在assets中保存的一般是原生
  • Spring使用Cache、整合Ehcache 234390216 springcacheehcache@Cacheable
    Spring使用Cache            从3.1开始，Spring引入了对Cache的支持。其使用方法和原理都类似于Spring对事务管理的支持。Spring Cache是作用在方法上的，其核心思想是这样的：当我们在调用一个缓存方法时会把该方法参数和返回结果作为一个键值对存放在缓存中，等到下次利用同样的
  • 当druid遇上oracle blob(clob) jackyrong oracle
    http://blog.csdn.net/renfufei/article/details/44887371 众所周知，Oracle有很多坑, 所以才有了去IOE。 在使用Druid做数据库连接池后，其实偶尔也会碰到小坑，这就是使用开源项目所必须去填平的。【如果使用不开源的产品，那就不是坑，而是陷阱了，你都不知道怎么去填坑】 用Druid连接池，通过JDBC往Oracle数据库的
  • easyui datagrid pagination获得分页页码、总页数等信息 ldzyz007
    var grid = $('#datagrid');  var options = grid.datagrid('getPager').data("pagination").options;  var curr = options.pageNumber;  var total = options.total;  var max =
  • 浅析awk里的数组 nigelzeng 二维数组array数组awk
    awk绝对是文本处理中的神器，它本身也是一门编程语言，还有许多功能本人没有使用到。这篇文章就单单针对awk里的数组来进行讨论，如何利用数组来帮助完成文本分析。   有这么一组数据：   abcd,91#31#2012-12-31 11:24:00 case_a,136#19#2012-12-31 11:24:00 case_a,136#23#2012-12-31 1
  • 搭建 CentOS 6 服务器(6) - TigerVNC rensanning centos
    安装GNOME桌面环境 # yum groupinstall "X Window System" "Desktop" 安装TigerVNC # yum -y install tigervnc-server tigervnc 启动VNC服务 # /etc/init.d/vncserver restart # vncser
  • Spring 数据库连接整理 tomcat_oracle springbeanjdbc
    1、数据库连接jdbc.properties配置详解 　　jdbc.url=jdbc:hsqldb:hsql://localhost/xdb 　　jdbc.username=sa 　　jdbc.password= 　　jdbc.driver=不同的数据库厂商驱动，此处不一一列举 　　接下来，详细配置代码如下： 　　 Spring连接池    
  • Dom4J解析使用xpath java.lang.NoClassDefFoundError: org/jaxen/JaxenException异常 xp9802
    用Dom4J解析xml,以前没注意,今天使用dom4j包解析xml时在xpath使用处报错      异常栈：java.lang.NoClassDefFoundError: org/jaxen/JaxenException异常       导入包 jaxen-1.1-beta-6.jar 解决; &nb
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他