过年烟花特效

一:前言

过年了 菜鸡杰 在这给CSDN的伙计们拜年了 这一段时间以来 我特别感谢 我的粉丝 正是因为有你们的陪伴 所以我才会很大动力 去写博客,所以我就准备了一个特效给粉丝们 现在过年不让放烟花 我就改了个代码 改成烟花特效 送给大家

二:特效描述

这是动态的特效 大家拿走代码自己改改就欧克
在这里插入图片描述
在这里插入图片描述

三:上码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"><link rel="icon" href="love.ico" type="image/x-icon">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<title>新年快乐</title>
</head><script src="http://121.43.33.134/js/jquery.min.js" type="text/javascript"></script>
<script src="http://121.43.33.134/js/jquery.fireworks.js" type="text/javascript"></script><style type="text/css">
*{ -webkit-tap-highlight-color:rgba(0,0,0,0); -webkit-box-sizing: border-box; box-sizing: border-box; }
html{ width: 100%; height: 100%; }
body{ 			padding: 0;margin: 0;overflow: hidden;height: 600px;background-color: #FFDEE9;background-image: linear-gradient(0deg, #FFDEE9 0%, #B5FFFC 100%);}canvas {padding: 0;margin: 0;}
.share_img{ width: 0; height: 0; overflow: hidden; opacity: 0; }
.content{ padding: 80px 20px;}
.text_wrapper{ display: -webkit-box; display: flex; }
.text_wrapper .text{ padding-top: 20px; padding-left: 20px; }
.hide{ display: none !important; }
p{ margin: 0; }
.btn-groups{ padding-right: 20px; text-align: center; }
.heart-btn{ display: inline-block; animation: breath 0.8s linear 0s infinite both; -webkit-animation: breath 0.8s linear 0s infinite both; }
.btn{ position: relative; display: inline-block; width: 60px; height: 60px; margin: 0 30px; transform: rotate(45deg); -webkit-transform: rotate(45deg);}
.btn span{ display: block; width: 100%; height: 100%; line-height: 60px; margin-top: -10px; margin-left: -10px; text-align: center; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); }
.btn-a{ background: #d26ae5; }
.btn-b{ background: #c9c9c9; }
.btn-a:before{ content: ''; position: absolute; display: block; width: 30px; height: 60px; background: #d26ae5; left: -29px; top: 0; border-top-left-radius: 60px; border-bottom-left-radius: 60px; }
.btn-a:after{ content: ''; position: absolute; display: block; width: 60px; height: 30px; background: #d26ae5; left: 0; top: -29px; border-top-left-radius: 60px; border-top-right-radius: 60px;}
.btn-b:before{ content: ''; position: absolute; display: block; width: 30px; height: 60px; background: #c9c9c9; left: -29px; top: 0; border-top-left-radius: 60px; border-bottom-left-radius: 60px; }
.btn-b:after{ content: ''; position: absolute; display: block; width: 60px; height: 30px; background: #c9c9c9; left: 0; top: -29px; border-top-left-radius: 60px; border-top-right-radius: 60px;}
.container{  }
.container .mask{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.3); }
.container .modal{ width: 80%; height: 160px; position: absolute; top: 50%; left: 50%; padding: 20px 15px; border-radius: 5px; transform: translate(-50%, -70%); -webkit-transform: translate(-50%,-70%); background: #f3f3f3;}
.container .modal p{ margin-top: 20px; margin-bottom: 20px; font-size: 16px; color: #353535; text-align: center;}
.confirm{ display: block; width: 120px; height: 40px; margin: 0 auto; border: none; font-size: 16px; border-radius: 5px; color: #ffffff; background: #f45cae; }
.type_words{color:#fff;font-size:35px;position:absolute;z-index:10000;width:70%;left:15%;bottom:10%}
@keyframes breath {0% {transform: scale3d(1,1,1);-webkit-transform: scale3d(1,1,1);transform-origin: 50% 50%;}50%{transform: scale3d(1.02,1.02,1.02);-webkit-transform: scale3d(1.02,1.02,1.02);transform-origin: 50% 50%;}100%{transform: scale3d(1,1,1);-webkit-transform: scale3d(1,1,1);transform-origin: 50% 50%;}
}
</style><script type="text/javascript">
$(function() {$('#yes').click(function(event) {modal('新年当然要快乐呀 现在请闭眼(^_^)', function() {$('.page_one').addClass('hide');$('.page_two').removeClass('hide');typeWrite();fireworks();});});$('#no').click(function(event) {modal('像你这么好看的人怎么会不快乐呢!!', A);});
});function A() {modal('are you sure??', B);
}function B() {modal('知道为什么吗', C);
}function C() {modal('欸 就不告诉你嘞', D);
}function D() {modal('自己生闷气吧  哈哈哈', E);
}function E() {modal('叫哥哥就告诉你', F);
}function F() {modal('好啦 不闹了', G);
}function G() {modal('既然 不快乐  那你就点击快乐呀', H);
}function H() {modal('我准备了惊喜给你', I);
}function I() {modal('点开的时候  请一定要闭上眼', J)
}function J() {modal('因为它真的很好看 ', function() {typeWrite();fireworks();});
}function fireworks() {$('.page_one').addClass('hide');$('.page_two').removeClass('hide');$('.page_two').fireworks({sound: false,opacity: 0.8,width: '100%',height: '100%'});
}function modal(content, callback) {var tpl = '<div class="container">'+'<div class="mask"></div>'+'<div class="modal">'+'<p>'+ content +'</p>'+'<button type="button" id="confirm" class="confirm">确定</button>'+'</div>'+'</div>';$('body').append(tpl);$(document).on('click', '.confirm', function() {$('.container').remove();callback();});
}var myWords = '新年快乐 祝你寿比南山 永远不死 多吃肉肉 天天有钱花 ';
var x = 0;
var speed = 150;
var current = 0;
function typeWrite(){$('.type_words').html(myWords.substring(0, x++));var timer = setTimeout("typeWrite()", speed);if (x == myWords.length) {x = myWords.length;clearTimeout(timer)}
}</script>
<body><div class="share_img"><img src="http://121.43.33.134/images/a8b.png" alt=""></div><div class="page_one"><div class="content" style="text-align: center;"><div class="text_wrapper"><img src="http://121.43.33.134/images/a8.png" alt=""><div class="text">王永杰隔着屏幕来拜年了 你现在快乐吗</div></div></div><div class="btn-groups"><div class="heart-btn"><div id="yes" class="btn btn-a"><span>快乐</span></div></div><div id="no" class="btn btn-b"><span>不快乐</span></div></div>
</div>
<div class="page_two hide"><canvas id="sakura"></canvas><div class="type_words"></div>
</div>
<!-- sakura shader --><script id="sakura_point_vsh" type="x-shader/x_vertex">uniform mat4 uProjection;
uniform mat4 uModelview;
uniform vec3 uResolution;
uniform vec3 uOffset;
uniform vec3 uDOF;  //x:focus distance, y:focus radius, z:max radius
uniform vec3 uFade; //x:start distance, y:half distance, z:near fade startattribute vec3 aPosition;
attribute vec3 aEuler;
attribute vec2 aMisc; //x:size, y:fadevarying vec3 pposition;
varying float psize;
varying float palpha;
varying float pdist;//varying mat3 rotMat;
varying vec3 normX;
varying vec3 normY;
varying vec3 normZ;
varying vec3 normal;varying float diffuse;
varying float specular;
varying float rstop;
varying float distancefade;void main(void) {// Projection is based on vertical anglevec4 pos = uModelview * vec4(aPosition + uOffset, 1.0);gl_Position = uProjection * pos;gl_PointSize = aMisc.x * uProjection[1][1] / -pos.z * uResolution.y * 0.5;pposition = pos.xyz;psize = aMisc.x;pdist = length(pos.xyz);palpha = smoothstep(0.0, 1.0, (pdist - 0.1) / uFade.z);vec3 elrsn = sin(aEuler);vec3 elrcs = cos(aEuler);mat3 rotx = mat3(1.0, 0.0, 0.0,0.0, elrcs.x, elrsn.x,0.0, -elrsn.x, elrcs.x);mat3 roty = mat3(elrcs.y, 0.0, -elrsn.y,0.0, 1.0, 0.0,elrsn.y, 0.0, elrcs.y);mat3 rotz = mat3(elrcs.z, elrsn.z, 0.0,-elrsn.z, elrcs.z, 0.0,0.0, 0.0, 1.0);mat3 rotmat = rotx * roty * rotz;normal = rotmat[2];mat3 trrotm = mat3(rotmat[0][0], rotmat[1][0], rotmat[2][0],rotmat[0][1], rotmat[1][1], rotmat[2][1],rotmat[0][2], rotmat[1][2], rotmat[2][2]);normX = trrotm[0];normY = trrotm[1];normZ = trrotm[2];const vec3 lit = vec3(0.6917144638660746, 0.6917144638660746, -0.20751433915982237);float tmpdfs = dot(lit, normal);if(tmpdfs < 0.0) {normal = -normal;tmpdfs = dot(lit, normal);}diffuse = 0.4 + tmpdfs;vec3 eyev = normalize(-pos.xyz);if(dot(eyev, normal) > 0.0) {vec3 hv = normalize(eyev + lit);specular = pow(max(dot(hv, normal), 0.0), 20.0);}else {specular = 0.0;}rstop = clamp((abs(pdist - uDOF.x) - uDOF.y) / uDOF.z, 0.0, 1.0);rstop = pow(rstop, 0.5);//-0.69315 = ln(0.5)distancefade = min(1.0, exp((uFade.x - pdist) * 0.69315 / uFade.y));
}
</script><script id="sakura_point_fsh" type="x-shader/x_fragment">#ifdef GL_ES
//precision mediump float;
precision highp float;
#endifuniform vec3 uDOF;  //x:focus distance, y:focus radius, z:max radius
uniform vec3 uFade; //x:start distance, y:half distance, z:near fade startconst vec3 fadeCol = vec3(0.08, 0.03, 0.06);varying vec3 pposition;
varying float psize;
varying float palpha;
varying float pdist;//varying mat3 rotMat;
varying vec3 normX;
varying vec3 normY;
varying vec3 normZ;
varying vec3 normal;varying float diffuse;
varying float specular;
varying float rstop;
varying float distancefade;float ellipse(vec2 p, vec2 o, vec2 r) {vec2 lp = (p - o) / r;return length(lp) - 1.0;
}void main(void) {vec3 p = vec3(gl_PointCoord - vec2(0.5, 0.5), 0.0) * 2.0;vec3 d = vec3(0.0, 0.0, -1.0);float nd = normZ.z; //dot(-normZ, d);if(abs(nd) < 0.0001) discard;float np = dot(normZ, p);vec3 tp = p + d * np / nd;vec2 coord = vec2(dot(normX, tp), dot(normY, tp));//angle = 15 degreeconst float flwrsn = 0.258819045102521;const float flwrcs = 0.965925826289068;mat2 flwrm = mat2(flwrcs, -flwrsn, flwrsn, flwrcs);vec2 flwrp = vec2(abs(coord.x), coord.y) * flwrm;float r;if(flwrp.x < 0.0) {r = ellipse(flwrp, vec2(0.065, 0.024) * 0.5, vec2(0.36, 0.96) * 0.5);}else {r = ellipse(flwrp, vec2(0.065, 0.024) * 0.5, vec2(0.58, 0.96) * 0.5);}if(r > rstop) discard;vec3 col = mix(vec3(1.0, 0.8, 0.75), vec3(1.0, 0.9, 0.87), r);float grady = mix(0.0, 1.0, pow(coord.y * 0.5 + 0.5, 0.35));col *= vec3(1.0, grady, grady);col *= mix(0.8, 1.0, pow(abs(coord.x), 0.3));col = col * diffuse + specular;col = mix(fadeCol, col, distancefade);float alpha = (rstop > 0.001)? (0.5 - r / (rstop * 2.0)) : 1.0;alpha = smoothstep(0.0, 1.0, alpha) * palpha;gl_FragColor = vec4(col * 0.5, alpha);
}
</script><!-- effects --><script id="fx_common_vsh" type="x-shader/x_vertex">uniform vec3 uResolution;
attribute vec2 aPosition;varying vec2 texCoord;
varying vec2 screenCoord;void main(void) {gl_Position = vec4(aPosition, 0.0, 1.0);texCoord = aPosition.xy * 0.5 + vec2(0.5, 0.5);screenCoord = aPosition.xy * vec2(uResolution.z, 1.0);
}
</script><script id="bg_fsh" type="x-shader/x_fragment">#ifdef GL_ES
//precision mediump float;
precision highp float;
#endifuniform vec2 uTimes;varying vec2 texCoord;
varying vec2 screenCoord;void main(void) {vec3 col;float c;vec2 tmpv = texCoord * vec2(0.8, 1.0) - vec2(0.95, 1.0);c = exp(-pow(length(tmpv) * 1.8, 2.0));col = mix(vec3(0.02, 0.0, 0.03), vec3(0.96, 0.98, 1.0) * 1.5, c);gl_FragColor = vec4(col * 0.5, 1.0);
}
</script><script id="fx_brightbuf_fsh" type="x-shader/x_fragment">#ifdef GL_ES
//precision mediump float;
precision highp float;
#endif
uniform sampler2D uSrc;
uniform vec2 uDelta;varying vec2 texCoord;
varying vec2 screenCoord;void main(void) {vec4 col = texture2D(uSrc, texCoord);gl_FragColor = vec4(col.rgb * 2.0 - vec3(0.5), 1.0);
}
</script><script id="fx_dirblur_r4_fsh" type="x-shader/x_fragment">#ifdef GL_ES
//precision mediump float;
precision highp float;
#endif
uniform sampler2D uSrc;
uniform vec2 uDelta;
uniform vec4 uBlurDir; //dir(x, y), stride(z, w)varying vec2 texCoord;
varying vec2 screenCoord;void main(void) {vec4 col = texture2D(uSrc, texCoord);col = col + texture2D(uSrc, texCoord + uBlurDir.xy * uDelta);col = col + texture2D(uSrc, texCoord - uBlurDir.xy * uDelta);col = col + texture2D(uSrc, texCoord + (uBlurDir.xy + uBlurDir.zw) * uDelta);col = col + texture2D(uSrc, texCoord - (uBlurDir.xy + uBlurDir.zw) * uDelta);gl_FragColor = col / 5.0;
}
</script><!-- effect fragment shader template --><script id="fx_common_fsh" type="x-shader/x_fragment">#ifdef GL_ES
//precision mediump float;
precision highp float;
#endif
uniform sampler2D uSrc;
uniform vec2 uDelta;varying vec2 texCoord;
varying vec2 screenCoord;void main(void) {gl_FragColor = texture2D(uSrc, texCoord);
}
</script><!-- post processing --><script id="pp_final_vsh" type="x-shader/x_vertex">uniform vec3 uResolution;
attribute vec2 aPosition;
varying vec2 texCoord;
varying vec2 screenCoord;
void main(void) {gl_Position = vec4(aPosition, 0.0, 1.0);texCoord = aPosition.xy * 0.5 + vec2(0.5, 0.5);screenCoord = aPosition.xy * vec2(uResolution.z, 1.0);
}
</script><script id="pp_final_fsh" type="x-shader/x_fragment">#ifdef GL_ES
//precision mediump float;
precision highp float;
#endif
uniform sampler2D uSrc;
uniform sampler2D uBloom;
uniform vec2 uDelta;
varying vec2 texCoord;
varying vec2 screenCoord;
void main(void) {vec4 srccol = texture2D(uSrc, texCoord) * 2.0;vec4 bloomcol = texture2D(uBloom, texCoord);vec4 col;col = srccol + bloomcol * (vec4(1.0) + srccol);col *= smoothstep(1.0, 0.0, pow(length((texCoord - vec2(0.5)) * 2.0), 1.2) * 0.5);col = pow(col, vec4(0.45454545454545)); //(1.0 / 2.2)gl_FragColor = vec4(col.rgb, 1.0);gl_FragColor.a = 1.0;
}
</script></body><script>// Utilitiesvar Vector3 = {};var Matrix44 = {};Vector3.create = function(x, y, z) {return {'x': x,'y': y,'z': z};};Vector3.dot = function(v0, v1) {return v0.x * v1.x + v0.y * v1.y + v0.z * v1.z;};Vector3.cross = function(v, v0, v1) {v.x = v0.y * v1.z - v0.z * v1.y;v.y = v0.z * v1.x - v0.x * v1.z;v.z = v0.x * v1.y - v0.y * v1.x;};Vector3.normalize = function(v) {var l = v.x * v.x + v.y * v.y + v.z * v.z;if (l > 0.00001) {l = 1.0 / Math.sqrt(l);v.x *= l;v.y *= l;v.z *= l;}};Vector3.arrayForm = function(v) {if (v.array) {v.array[0] = v.x;v.array[1] = v.y;v.array[2] = v.z;} else {v.array = new Float32Array([v.x, v.y, v.z]);}return v.array;};Matrix44.createIdentity = function() {return new Float32Array([1.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 0.0, 1.0]);};Matrix44.loadProjection = function(m, aspect, vdeg, near, far) {var h = near * Math.tan(vdeg * Math.PI / 180.0 * 0.5) * 2.0;var w = h * aspect;m[0] = 2.0 * near / w;m[1] = 0.0;m[2] = 0.0;m[3] = 0.0;m[4] = 0.0;m[5] = 2.0 * near / h;m[6] = 0.0;m[7] = 0.0;m[8] = 0.0;m[9] = 0.0;m[10] = -(far + near) / (far - near);m[11] = -1.0;m[12] = 0.0;m[13] = 0.0;m[14] = -2.0 * far * near / (far - near);m[15] = 0.0;};Matrix44.loadLookAt = function(m, vpos, vlook, vup) {var frontv = Vector3.create(vpos.x - vlook.x, vpos.y - vlook.y, vpos.z - vlook.z);Vector3.normalize(frontv);var sidev = Vector3.create(1.0, 0.0, 0.0);Vector3.cross(sidev, vup, frontv);Vector3.normalize(sidev);var topv = Vector3.create(1.0, 0.0, 0.0);Vector3.cross(topv, frontv, sidev);Vector3.normalize(topv);m[0] = sidev.x;m[1] = topv.x;m[2] = frontv.x;m[3] = 0.0;m[4] = sidev.y;m[5] = topv.y;m[6] = frontv.y;m[7] = 0.0;m[8] = sidev.z;m[9] = topv.z;m[10] = frontv.z;m[11] = 0.0;m[12] = -(vpos.x * m[0] + vpos.y * m[4] + vpos.z * m[8]);m[13] = -(vpos.x * m[1] + vpos.y * m[5] + vpos.z * m[9]);m[14] = -(vpos.x * m[2] + vpos.y * m[6] + vpos.z * m[10]);m[15] = 1.0;};//var timeInfo = {'start': 0,'prev': 0, // Date'delta': 0,'elapsed': 0 // Number(sec)};//var gl;var renderSpec = {'width': 0,'height': 0,'aspect': 1,'array': new Float32Array(3),'halfWidth': 0,'halfHeight': 0,'halfArray': new Float32Array(3)// and some render targets. see setViewport()};renderSpec.setSize = function(w, h) {renderSpec.width = w;renderSpec.height = h;renderSpec.aspect = renderSpec.width / renderSpec.height;renderSpec.array[0] = renderSpec.width;renderSpec.array[1] = renderSpec.height;renderSpec.array[2] = renderSpec.aspect;renderSpec.halfWidth = Math.floor(w / 2);renderSpec.halfHeight = Math.floor(h / 2);renderSpec.halfArray[0] = renderSpec.halfWidth;renderSpec.halfArray[1] = renderSpec.halfHeight;renderSpec.halfArray[2] = renderSpec.halfWidth / renderSpec.halfHeight;};function deleteRenderTarget(rt) {gl.deleteFramebuffer(rt.frameBuffer);gl.deleteRenderbuffer(rt.renderBuffer);gl.deleteTexture(rt.texture);}function createRenderTarget(w, h) {var ret = {'width': w,'height': h,'sizeArray': new Float32Array([w, h, w / h]),'dtxArray': new Float32Array([1.0 / w, 1.0 / h])};ret.frameBuffer = gl.createFramebuffer();ret.renderBuffer = gl.createRenderbuffer();ret.texture = gl.createTexture();gl.bindTexture(gl.TEXTURE_2D, ret.texture);gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, w, h, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);gl.bindFramebuffer(gl.FRAMEBUFFER, ret.frameBuffer);gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, ret.texture, 0);gl.bindRenderbuffer(gl.RENDERBUFFER, ret.renderBuffer);gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_COMPONENT16, w, h);gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.RENDERBUFFER, ret.renderBuffer);gl.bindTexture(gl.TEXTURE_2D, null);gl.bindRenderbuffer(gl.RENDERBUFFER, null);gl.bindFramebuffer(gl.FRAMEBUFFER, null);return ret;}function compileShader(shtype, shsrc) {var retsh = gl.createShader(shtype);gl.shaderSource(retsh, shsrc);gl.compileShader(retsh);if (!gl.getShaderParameter(retsh, gl.COMPILE_STATUS)) {var errlog = gl.getShaderInfoLog(retsh);gl.deleteShader(retsh);console.error(errlog);return null;}return retsh;}function createShader(vtxsrc, frgsrc, uniformlist, attrlist) {var vsh = compileShader(gl.VERTEX_SHADER, vtxsrc);var fsh = compileShader(gl.FRAGMENT_SHADER, frgsrc);if (vsh == null || fsh == null) {return null;}var prog = gl.createProgram();gl.attachShader(prog, vsh);gl.attachShader(prog, fsh);gl.deleteShader(vsh);gl.deleteShader(fsh);gl.linkProgram(prog);if (!gl.getProgramParameter(prog, gl.LINK_STATUS)) {var errlog = gl.getProgramInfoLog(prog);console.error(errlog);return null;}if (uniformlist) {prog.uniforms = {};for (var i = 0; i < uniformlist.length; i++) {prog.uniforms[uniformlist[i]] = gl.getUniformLocation(prog, uniformlist[i]);}}if (attrlist) {prog.attributes = {};for (var i = 0; i < attrlist.length; i++) {var attr = attrlist[i];prog.attributes[attr] = gl.getAttribLocation(prog, attr);}}return prog;}function useShader(prog) {gl.useProgram(prog);for (var attr in prog.attributes) {gl.enableVertexAttribArray(prog.attributes[attr]);;}}function unuseShader(prog) {for (var attr in prog.attributes) {gl.disableVertexAttribArray(prog.attributes[attr]);;}gl.useProgram(null);}/var projection = {'angle': 60,'nearfar': new Float32Array([0.1, 100.0]),'matrix': Matrix44.createIdentity()};var camera = {'position': Vector3.create(0, 0, 100),'lookat': Vector3.create(0, 0, 0),'up': Vector3.create(0, 1, 0),'dof': Vector3.create(10.0, 4.0, 8.0),'matrix': Matrix44.createIdentity()};var pointFlower = {};var meshFlower = {};var sceneStandBy = false;var BlossomParticle = function() {this.velocity = new Array(3);this.rotation = new Array(3);this.position = new Array(3);this.euler = new Array(3);this.size = 1.0;this.alpha = 1.0;this.zkey = 0.0;};BlossomParticle.prototype.setVelocity = function(vx, vy, vz) {this.velocity[0] = vx;this.velocity[1] = vy;this.velocity[2] = vz;};BlossomParticle.prototype.setRotation = function(rx, ry, rz) {this.rotation[0] = rx;this.rotation[1] = ry;this.rotation[2] = rz;};BlossomParticle.prototype.setPosition = function(nx, ny, nz) {this.position[0] = nx;this.position[1] = ny;this.position[2] = nz;};BlossomParticle.prototype.setEulerAngles = function(rx, ry, rz) {this.euler[0] = rx;this.euler[1] = ry;this.euler[2] = rz;};BlossomParticle.prototype.setSize = function(s) {this.size = s;};BlossomParticle.prototype.update = function(dt, et) {this.position[0] += this.velocity[0] * dt;this.position[1] += this.velocity[1] * dt;this.position[2] += this.velocity[2] * dt;this.euler[0] += this.rotation[0] * dt;this.euler[1] += this.rotation[1] * dt;this.euler[2] += this.rotation[2] * dt;};function createPointFlowers() {// get point sizesvar prm = gl.getParameter(gl.ALIASED_POINT_SIZE_RANGE);renderSpec.pointSize = {'min': prm[0],'max': prm[1]};var vtxsrc = document.getElementById("sakura_point_vsh").textContent;var frgsrc = document.getElementById("sakura_point_fsh").textContent;pointFlower.program = createShader(vtxsrc, frgsrc,['uProjection', 'uModelview', 'uResolution', 'uOffset', 'uDOF', 'uFade'],['aPosition', 'aEuler', 'aMisc']);useShader(pointFlower.program);pointFlower.offset = new Float32Array([0.0, 0.0, 0.0]);pointFlower.fader = Vector3.create(0.0, 10.0, 0.0);// paramerters: velocity[3], rotate[3]pointFlower.numFlowers = 1600;pointFlower.particles = new Array(pointFlower.numFlowers);// vertex attributes {position[3], euler_xyz[3], size[1]}pointFlower.dataArray = new Float32Array(pointFlower.numFlowers * (3 + 3 + 2));pointFlower.positionArrayOffset = 0;pointFlower.eulerArrayOffset = pointFlower.numFlowers * 3;pointFlower.miscArrayOffset = pointFlower.numFlowers * 6;pointFlower.buffer = gl.createBuffer();gl.bindBuffer(gl.ARRAY_BUFFER, pointFlower.buffer);gl.bufferData(gl.ARRAY_BUFFER, pointFlower.dataArray, gl.DYNAMIC_DRAW);gl.bindBuffer(gl.ARRAY_BUFFER, null);unuseShader(pointFlower.program);for (var i = 0; i < pointFlower.numFlowers; i++) {pointFlower.particles[i] = new BlossomParticle();}}function initPointFlowers() {//areapointFlower.area = Vector3.create(20.0, 20.0, 20.0);pointFlower.area.x = pointFlower.area.y * renderSpec.aspect;pointFlower.fader.x = 10.0; //env fade startpointFlower.fader.y = pointFlower.area.z; //env fade halfpointFlower.fader.z = 0.1; //near fade start//particlesvar PI2 = Math.PI * 2.0;var tmpv3 = Vector3.create(0, 0, 0);var tmpv = 0;var symmetryrand = function() {return (Math.random() * 2.0 - 1.0);};for (var i = 0; i < pointFlower.numFlowers; i++) {var tmpprtcl = pointFlower.particles[i];//velocitytmpv3.x = symmetryrand() * 0.3 + 0.8;tmpv3.y = symmetryrand() * 0.2 - 1.0;tmpv3.z = symmetryrand() * 0.3 + 0.5;Vector3.normalize(tmpv3);tmpv = 2.0 + Math.random() * 1.0;tmpprtcl.setVelocity(tmpv3.x * tmpv, tmpv3.y * tmpv, tmpv3.z * tmpv);//rotationtmpprtcl.setRotation(symmetryrand() * PI2 * 0.5,symmetryrand() * PI2 * 0.5,symmetryrand() * PI2 * 0.5);//positiontmpprtcl.setPosition(symmetryrand() * pointFlower.area.x,symmetryrand() * pointFlower.area.y,symmetryrand() * pointFlower.area.z);//eulertmpprtcl.setEulerAngles(Math.random() * Math.PI * 2.0,Math.random() * Math.PI * 2.0,Math.random() * Math.PI * 2.0);//sizetmpprtcl.setSize(0.9 + Math.random() * 0.1);}}function renderPointFlowers() {//updatevar PI2 = Math.PI * 2.0;var limit = [pointFlower.area.x, pointFlower.area.y, pointFlower.area.z];var repeatPos = function(prt, cmp, limit) {if (Math.abs(prt.position[cmp]) - prt.size * 0.5 > limit) {//out of areaif (prt.position[cmp] > 0) {prt.position[cmp] -= limit * 2.0;} else {prt.position[cmp] += limit * 2.0;}}};var repeatEuler = function(prt, cmp) {prt.euler[cmp] = prt.euler[cmp] % PI2;if (prt.euler[cmp] < 0.0) {prt.euler[cmp] += PI2;}};for (var i = 0; i < pointFlower.numFlowers; i++) {var prtcl = pointFlower.particles[i];prtcl.update(timeInfo.delta, timeInfo.elapsed);repeatPos(prtcl, 0, pointFlower.area.x);repeatPos(prtcl, 1, pointFlower.area.y);repeatPos(prtcl, 2, pointFlower.area.z);repeatEuler(prtcl, 0);repeatEuler(prtcl, 1);repeatEuler(prtcl, 2);prtcl.alpha = 1.0; //(pointFlower.area.z - prtcl.position[2]) * 0.5;prtcl.zkey = (camera.matrix[2] * prtcl.position[0] +camera.matrix[6] * prtcl.position[1] +camera.matrix[10] * prtcl.position[2] +camera.matrix[14]);}// sortpointFlower.particles.sort(function(p0, p1) {return p0.zkey - p1.zkey;});// update datavar ipos = pointFlower.positionArrayOffset;var ieuler = pointFlower.eulerArrayOffset;var imisc = pointFlower.miscArrayOffset;for (var i = 0; i < pointFlower.numFlowers; i++) {var prtcl = pointFlower.particles[i];pointFlower.dataArray[ipos] = prtcl.position[0];pointFlower.dataArray[ipos + 1] = prtcl.position[1];pointFlower.dataArray[ipos + 2] = prtcl.position[2];ipos += 3;pointFlower.dataArray[ieuler] = prtcl.euler[0];pointFlower.dataArray[ieuler + 1] = prtcl.euler[1];pointFlower.dataArray[ieuler + 2] = prtcl.euler[2];ieuler += 3;pointFlower.dataArray[imisc] = prtcl.size;pointFlower.dataArray[imisc + 1] = prtcl.alpha;imisc += 2;}//drawgl.enable(gl.BLEND);//gl.disable(gl.DEPTH_TEST);gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);var prog = pointFlower.program;useShader(prog);gl.uniformMatrix4fv(prog.uniforms.uProjection, false, projection.matrix);gl.uniformMatrix4fv(prog.uniforms.uModelview, false, camera.matrix);gl.uniform3fv(prog.uniforms.uResolution, renderSpec.array);gl.uniform3fv(prog.uniforms.uDOF, Vector3.arrayForm(camera.dof));gl.uniform3fv(prog.uniforms.uFade, Vector3.arrayForm(pointFlower.fader));gl.bindBuffer(gl.ARRAY_BUFFER, pointFlower.buffer);gl.bufferData(gl.ARRAY_BUFFER, pointFlower.dataArray, gl.DYNAMIC_DRAW);gl.vertexAttribPointer(prog.attributes.aPosition, 3, gl.FLOAT, false, 0, pointFlower.positionArrayOffset *Float32Array.BYTES_PER_ELEMENT);gl.vertexAttribPointer(prog.attributes.aEuler, 3, gl.FLOAT, false, 0, pointFlower.eulerArrayOffset * Float32Array.BYTES_PER_ELEMENT);gl.vertexAttribPointer(prog.attributes.aMisc, 2, gl.FLOAT, false, 0, pointFlower.miscArrayOffset * Float32Array.BYTES_PER_ELEMENT);// doublerfor (var i = 1; i < 2; i++) {var zpos = i * -2.0;pointFlower.offset[0] = pointFlower.area.x * -1.0;pointFlower.offset[1] = pointFlower.area.y * -1.0;pointFlower.offset[2] = pointFlower.area.z * zpos;gl.uniform3fv(prog.uniforms.uOffset, pointFlower.offset);gl.drawArrays(gl.POINT, 0, pointFlower.numFlowers);pointFlower.offset[0] = pointFlower.area.x * -1.0;pointFlower.offset[1] = pointFlower.area.y * 1.0;pointFlower.offset[2] = pointFlower.area.z * zpos;gl.uniform3fv(prog.uniforms.uOffset, pointFlower.offset);gl.drawArrays(gl.POINT, 0, pointFlower.numFlowers);pointFlower.offset[0] = pointFlower.area.x * 1.0;pointFlower.offset[1] = pointFlower.area.y * -1.0;pointFlower.offset[2] = pointFlower.area.z * zpos;gl.uniform3fv(prog.uniforms.uOffset, pointFlower.offset);gl.drawArrays(gl.POINT, 0, pointFlower.numFlowers);pointFlower.offset[0] = pointFlower.area.x * 1.0;pointFlower.offset[1] = pointFlower.area.y * 1.0;pointFlower.offset[2] = pointFlower.area.z * zpos;gl.uniform3fv(prog.uniforms.uOffset, pointFlower.offset);gl.drawArrays(gl.POINT, 0, pointFlower.numFlowers);}//mainpointFlower.offset[0] = 0.0;pointFlower.offset[1] = 0.0;pointFlower.offset[2] = 0.0;gl.uniform3fv(prog.uniforms.uOffset, pointFlower.offset);gl.drawArrays(gl.POINT, 0, pointFlower.numFlowers);gl.bindBuffer(gl.ARRAY_BUFFER, null);unuseShader(prog);gl.enable(gl.DEPTH_TEST);gl.disable(gl.BLEND);}// effects//common utilfunction createEffectProgram(vtxsrc, frgsrc, exunifs, exattrs) {var ret = {};var unifs = ['uResolution', 'uSrc', 'uDelta'];if (exunifs) {unifs = unifs.concat(exunifs);}var attrs = ['aPosition'];if (exattrs) {attrs = attrs.concat(exattrs);}ret.program = createShader(vtxsrc, frgsrc, unifs, attrs);useShader(ret.program);ret.dataArray = new Float32Array([-1.0, -1.0,1.0, -1.0,-1.0, 1.0,1.0, 1.0]);ret.buffer = gl.createBuffer();gl.bindBuffer(gl.ARRAY_BUFFER, ret.buffer);gl.bufferData(gl.ARRAY_BUFFER, ret.dataArray, gl.STATIC_DRAW);gl.bindBuffer(gl.ARRAY_BUFFER, null);unuseShader(ret.program);return ret;}// basic usage// useEffect(prog, srctex({'texture':texid, 'dtxArray':(f32)[dtx, dty]})); //basic initialize// gl.uniform**(...); //additional uniforms// drawEffect()// unuseEffect(prog)// TEXTURE0 makes srcfunction useEffect(fxobj, srctex) {var prog = fxobj.program;useShader(prog);gl.uniform3fv(prog.uniforms.uResolution, renderSpec.array);if (srctex != null) {gl.uniform2fv(prog.uniforms.uDelta, srctex.dtxArray);gl.uniform1i(prog.uniforms.uSrc, 0);gl.activeTexture(gl.TEXTURE0);gl.bindTexture(gl.TEXTURE_2D, srctex.texture);}}function drawEffect(fxobj) {gl.bindBuffer(gl.ARRAY_BUFFER, fxobj.buffer);gl.vertexAttribPointer(fxobj.program.attributes.aPosition, 2, gl.FLOAT, false, 0, 0);gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);}function unuseEffect(fxobj) {unuseShader(fxobj.program);}var effectLib = {};function createEffectLib() {var vtxsrc, frgsrc;//commonvar cmnvtxsrc = document.getElementById("fx_common_vsh").textContent;//backgroundfrgsrc = document.getElementById("bg_fsh").textContent;effectLib.sceneBg = createEffectProgram(cmnvtxsrc, frgsrc, ['uTimes'], null);// make brightpixels bufferfrgsrc = document.getElementById("fx_brightbuf_fsh").textContent;effectLib.mkBrightBuf = createEffectProgram(cmnvtxsrc, frgsrc, null, null);// direction blurfrgsrc = document.getElementById("fx_dirblur_r4_fsh").textContent;effectLib.dirBlur = createEffectProgram(cmnvtxsrc, frgsrc, ['uBlurDir'], null);//final compositevtxsrc = document.getElementById("pp_final_vsh").textContent;frgsrc = document.getElementById("pp_final_fsh").textContent;effectLib.finalComp = createEffectProgram(vtxsrc, frgsrc, ['uBloom'], null);}// backgroundfunction createBackground() {//console.log("create background");}function initBackground() {//console.log("init background");}function renderBackground() {gl.disable(gl.DEPTH_TEST);useEffect(effectLib.sceneBg, null);gl.uniform2f(effectLib.sceneBg.program.uniforms.uTimes, timeInfo.elapsed, timeInfo.delta);drawEffect(effectLib.sceneBg);unuseEffect(effectLib.sceneBg);gl.enable(gl.DEPTH_TEST);}// post processvar postProcess = {};function createPostProcess() {//console.log("create post process");}function initPostProcess() {//console.log("init post process");}function renderPostProcess() {gl.enable(gl.TEXTURE_2D);gl.disable(gl.DEPTH_TEST);var bindRT = function(rt, isclear) {gl.bindFramebuffer(gl.FRAMEBUFFER, rt.frameBuffer);gl.viewport(0, 0, rt.width, rt.height);if (isclear) {gl.clearColor(0, 0, 0, 0);gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);}};//make bright buffbindRT(renderSpec.wHalfRT0, true);useEffect(effectLib.mkBrightBuf, renderSpec.mainRT);drawEffect(effectLib.mkBrightBuf);unuseEffect(effectLib.mkBrightBuf);// make bloomfor (var i = 0; i < 2; i++) {var p = 1.5 + 1 * i;var s = 2.0 + 1 * i;bindRT(renderSpec.wHalfRT1, true);useEffect(effectLib.dirBlur, renderSpec.wHalfRT0);gl.uniform4f(effectLib.dirBlur.program.uniforms.uBlurDir, p, 0.0, s, 0.0);drawEffect(effectLib.dirBlur);unuseEffect(effectLib.dirBlur);bindRT(renderSpec.wHalfRT0, true);useEffect(effectLib.dirBlur, renderSpec.wHalfRT1);gl.uniform4f(effectLib.dirBlur.program.uniforms.uBlurDir, 0.0, p, 0.0, s);drawEffect(effectLib.dirBlur);unuseEffect(effectLib.dirBlur);}//displaygl.bindFramebuffer(gl.FRAMEBUFFER, null);gl.viewport(0, 0, renderSpec.width, renderSpec.height);gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);useEffect(effectLib.finalComp, renderSpec.mainRT);gl.uniform1i(effectLib.finalComp.program.uniforms.uBloom, 1);gl.activeTexture(gl.TEXTURE1);gl.bindTexture(gl.TEXTURE_2D, renderSpec.wHalfRT0.texture);drawEffect(effectLib.finalComp);unuseEffect(effectLib.finalComp);gl.enable(gl.DEPTH_TEST);}/var SceneEnv = {};function createScene() {createEffectLib();createBackground();createPointFlowers();createPostProcess();sceneStandBy = true;}function initScene() {initBackground();initPointFlowers();initPostProcess();//camera.position.z = 17.320508;camera.position.z = pointFlower.area.z + projection.nearfar[0];projection.angle = Math.atan2(pointFlower.area.y, camera.position.z + pointFlower.area.z) * 180.0 / Math.PI * 2.0;Matrix44.loadProjection(projection.matrix, renderSpec.aspect, projection.angle, projection.nearfar[0], projection.nearfar[1]);}function renderScene() {//drawMatrix44.loadLookAt(camera.matrix, camera.position, camera.lookat, camera.up);gl.enable(gl.DEPTH_TEST);//gl.bindFramebuffer(gl.FRAMEBUFFER, null);gl.bindFramebuffer(gl.FRAMEBUFFER, renderSpec.mainRT.frameBuffer);gl.viewport(0, 0, renderSpec.mainRT.width, renderSpec.mainRT.height);gl.clearColor(0.005, 0, 0.05, 0);gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);renderBackground();renderPointFlowers();renderPostProcess();}/function onResize(e) {makeCanvasFullScreen(document.getElementById("sakura"));setViewports();if (sceneStandBy) {initScene();}}function setViewports() {renderSpec.setSize(gl.canvas.width, gl.canvas.height);gl.clearColor(0.2, 0.2, 0.5, 1.0);gl.viewport(0, 0, renderSpec.width, renderSpec.height);var rtfunc = function(rtname, rtw, rth) {var rt = renderSpec[rtname];if (rt) deleteRenderTarget(rt);renderSpec[rtname] = createRenderTarget(rtw, rth);};rtfunc('mainRT', renderSpec.width, renderSpec.height);rtfunc('wFullRT0', renderSpec.width, renderSpec.height);rtfunc('wFullRT1', renderSpec.width, renderSpec.height);rtfunc('wHalfRT0', renderSpec.halfWidth, renderSpec.halfHeight);rtfunc('wHalfRT1', renderSpec.halfWidth, renderSpec.halfHeight);}function render() {renderScene();}var animating = true;function toggleAnimation(elm) {animating ^= true;if (animating) animate();if (elm) {elm.innerHTML = animating ? "Stop" : "Start";}}function stepAnimation() {if (!animating) animate();}function animate() {var curdate = new Date();timeInfo.elapsed = (curdate - timeInfo.start) / 1000.0;timeInfo.delta = (curdate - timeInfo.prev) / 1000.0;timeInfo.prev = curdate;if (animating) requestAnimationFrame(animate);render();}function makeCanvasFullScreen(canvas) {var b = document.body;var d = document.documentElement;fullw = Math.max(b.clientWidth, b.scrollWidth, d.scrollWidth, d.clientWidth);fullh = Math.max(b.clientHeight, b.scrollHeight, d.scrollHeight, d.clientHeight);canvas.width = fullw;canvas.height = fullh;}window.addEventListener('load', function(e) {var canvas = document.getElementById("sakura");try {makeCanvasFullScreen(canvas);gl = canvas.getContext('experimental-webgl');} catch (e) {alert("WebGL not supported." + e);console.error(e);return;}window.addEventListener('resize', onResize);setViewports();createScene();initScene();timeInfo.start = new Date();timeInfo.prev = timeInfo.start;animate();});//set window.requestAnimationFrame(function(w, r) {w['r' + r] = w['r' + r] || w['webkitR' + r] || w['mozR' + r] || w['msR' + r] || w['oR' + r] || function(c) {w.setTimeout(c, 1000 / 60);};})(window, 'equestAnimationFrame');</script>
<audio autoplay="autoplay" loop="loop" preload="auto"src="http://music.163.com/song/media/outer/url?id=488249475.mp3">
</audio>
</body>
</html>

再次感谢 你能默默的关注我 再见2021 2022我来了 我希望2022年我一定不要有对象 一定呀

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/307799.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

「软件项目管理」一文详解软件项目质量计划

一文详解软件项目质量计划&#x1f3a9;前言&#x1f452;一、质量概述1. 质量与软件质量2. 质量成本二、质量模型1. 定义2. 几种模型3. 模型解读&#xff08;1&#xff09;Bohem质量模型&#xff08;2&#xff09;McCall质量模型&#xff08;3&#xff09;ISO/IEC 9126质量模型…

WSL2 支持挂载物理磁盘,Windows 可直接访问 ext4

喜欢就关注我们吧&#xff01;最新的 Windows Insiders Preview Build 为 WSL2 的命令行程序增加了新功能&#xff1a;wsl --mount&#xff0c;这个新参数支持在 WSL2 添加和挂载物理磁盘&#xff0c;用户通过它能访问 Windows 没有原生支持的 Linux 文件系统&#xff08;例如 …

2招解决并发问题,省几百万设备费用!说穿了很简单...

经大佬介绍&#xff0c;接了个技术顾问的私活儿&#xff0c;3天搞定报酬8000&#xff0c;Mark一下&#xff0c;也分享下经验心得。&#xff08;经大家要求&#xff0c;文末增加了一段接私活儿经验&#xff09;背景交代甲方是广东某国企信息部&#xff0c;美其名曰是邀请技术顾问…

「软件项目管理」一文详解软件配置管理计划

一文详解软件配置管理计划前言一、配置管理概述1. 配置管理(SCM)定义2. 软件配置项目(SCI)3. 基线4. 软件配置控制委员会&#xff08;SCCB&#xff09;二、软件配置管理过程1. 管理过程2. 管理过程解析&#xff08;1&#xff09;配置项标识、跟踪I. 定义II. SPM项目要求&#x…

Kubernetes探针踩坑记

1. 荒腔走板最近一两个月生产K8s集群频繁出现短时503 Service Temporarily Unavailable&#xff0c;还不能主动复现&#xff0c;相当郁闷&#xff0c;压力山大。HTTP 5xx响应状态码用于定义服务端错误。500 Internal Server Error&#xff1a;所请求的服务器遇到意外的情况并阻…

「软件项目管理」一文了解软件项目团队计划

一文了解软件项目团队计划序言一、人力资源计划1. 团队定义2. 项目组织结构&#xff08;1&#xff09;职能型&#xff08;2&#xff09;项目型&#xff08;3&#xff09;矩阵型3. 责任分配矩阵二、项目干系人计划1. 干系人定义2. 干系人识别3. 干系人参与分类4. 干系人参与评估…

leetcode40. 组合总和 II

一:题目 二:上码 class Solution { public:/**思路:1.题目中说的每个数字只在每个组合中使用一次的话 我们可以考虑 在递归遍历的时候 index1不断缩小范围&#xff08;因为这也是在一个大的集合中挑选小的集合&#xff0c;所以是需要记录index的&#xff09;2.但是我们在填写…

DDD:架构思想的旧瓶新酒?阿里等大厂却对它趋之若鹜!

4月&#xff0c;InfoQ 发布了软件架构与设计的趋势报告。在报告中可以看出&#xff0c;微服务、领域驱动设计等已经非常流行&#xff0c;并成为目前软件开发行业的主流趋势。大家都知道&#xff0c;微服务划分的一个重要理论基础就是领域驱动设计。但由于 DDD 门槛高、概念多&a…

「软件项目管理」一文浅谈软件项目风险计划

一文浅谈软件项目风险计划序言一、风险基本概念1. 风险的定义及特性2. 风险三要素3. 风险图示3. 风险类型&#xff08;1&#xff09;预测角度&#xff08;2&#xff09;范围角度二、风险管理过程三、风险识别1. 定义2. 风险识别方法3. 风险条目检查表之七个条目四、风险评估1. …

.NET Core 下使用 gRPC

gRPC 是一种与语言无关的高性能远程过程调用 (RPC) 框架。https://grpc.io/docs/guides/https://github.com/grpc/grpc-dotnethttps://docs.microsoft.com/zh-cn/aspnet/core/grpc“gRPC 的主要优点现代高性能轻量级 RPC 框架。协定优先 API 开发&#xff0c;默认使用协议缓冲区…

leetcode93. 复原 IP 地址

一&#xff1a;每日论语解读 follow me !! 君子坦荡荡 小人常威威 二:题目 三:上码 class Solution { public:/**思路:1.分析题意本题依然是切割字符串(我们需要对要分割的字符串做出处理 需要判断我们截取的字符串是否合法)2。关于‘.’的处理 我们是在原字符串的基础上进…

ASP.NET Core整合Zipkin链路跟踪

前言在日常使用ASP.NET Core的开发或学习中&#xff0c;如果有需要使用链路跟踪系统&#xff0c;大多数情况下会优先选择SkyAPM。我们之前也说过SkyAPM设计确实比较优秀&#xff0c;巧妙的利用DiagnosticSource诊断跟踪日志&#xff0c;可以做到对项目无入侵方式的集成。其实还…

探秘react,一文弄懂react的基本使用和高级特性

一文详解react的基本使用、高级特性和周边插件⏰序言&#x1f4dd;一、React的基本使用1、JSX基本使用&#xff08;1&#xff09;变量、表达式&#xff08;2&#xff09;class和style&#xff08;3&#xff09;子元素和组件&#xff08;4&#xff09;原生 html2、条件判断&…

使用React hooks,些许又多了不少摸鱼时间

一文详解react-hooks&#x1f399;️前言一、&#x1f4fb;概述1、关于React Hooks2、认识React Hooks&#xff08;1&#xff09;回顾React函数式组件&#xff08;2&#xff09;函数组件的特点&#xff08;3&#xff09;class组件的问题&#xff08;4&#xff09;React 组件二、…

手把手教学之如何设计财务对账系统

在设计一个对账系统前&#xff0c;我们先想清楚&#xff0c;对账目的、方式、对账场景、使用对象。其次就是和财务了解一下&#xff0c;他们所期望的效果&#xff0c;毕竟他们是使用方。财务对账是一个琐碎而复杂的工作&#xff0c;极需要工作耐心和细心&#xff0c;还要求对账…

不平凡的2021,末流普本生秋招上岸大厂的历程

&#x1f4fb;叮&#xff01; 2021年接近尾声&#xff0c;周一也开始拾起了年终总结。 回顾2021&#xff0c;有喧嚣&#xff0c;也有欢呼&#xff1b;有奔溃&#xff0c;也有快乐。 但好在✏️ 对待一件又一件的小事上&#xff0c;始终保持着对自己的要求&#x1f4ca; 不…

leetcode491. 递增子序列

一&#xff1a;论语 二:题目 三&#xff1a;上码 class Solution { public:vector<vector<int> >ans;vector<vector<int> >ans1;vector<int> path;void backstacking(vector<int>& nums,int index) {if(path.size() > 2) {ans.pus…

送福利 | 送书5本《ASP.NET Core项目开发实战入门》带你走进ASP.NET Core开发

《ASP.NET Core项目开发实战入门》从基础到实际项目开发部署带你走进ASP.NET Core开发。ASP.NET Core项目开发实战入门是基于ASP.NET Core 3.1 所写&#xff0c;后续ASP.NET Core 5也会对应更新。简介本书共14章&#xff0c;深入浅出地介绍了ASP.NET Core基础及项目开发方面的知…

海有舟可渡、山有路可循‍‍ —— 大学四年圆满落幕

⛺️前言 仅以此篇文章记录我的大学四年&#xff01; 回忆大学四年&#xff0c;有惊喜、有快乐、有崩溃、有欢呼&#xff1b; 有过无数个为了赶策划、赶ddl的熬夜&#xff0c;更有凌晨2点做志愿活动、凌晨5点赶项目的通宵达旦。 梳理下大学四年的大事件&#xff1a; 大一 …

程序开发天团必备单品,稳定输出还加持千元商务礼限时送!

有这么一个门派他们用强大的思维逻辑频出“大招”用抗造的硬核体能昼夜练习一水儿的格子衫下&#xff0c;个个骨骼精奇深居简出&#xff0c;却默默改变着世界格局他们都使用同一件武器拼的就是个配置高低这与能否称霸武林有着直接关系看看各位高手怎么说“大内”高手 武功唯快不…