iis服务器助手广告广告

扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >通过JavaScript实现动态圣诞树详解
  • 105

0
分享到

通过JavaScript实现动态圣诞树详解

2024-04-02 19:04:59 105人浏览 薄情痞子
摘要

目录一、只使用 CSS 制作的动画圣诞树二、只使用 CSS 制作的螺旋圣诞树三、使用html+CSS+js制作的圣诞树四、只使用 CSS 的流星圣诞树五、水晶球里的圣诞树六、圣诞贺卡

一、只使用 CSS 制作的动画圣诞树

演示地址：Http://haiyong.site/christmastree1（建议使用电脑打开，没做响应式手机端会有些变形，或者可以看看后面的圣诞树）

HTML代码：

这里的HTML代码是完整无删减的


<div class="card-container">
  <div class="snow-flakes-1"></div>
  <div class="snow-flakes-2"></div>
  <h2>接下来是雪花，圣诞树，新年和</h2>
  <h1>更好的我们</h1>
  <div class="tree-container">
    <div class="ball-0"></div>
    <div class="tree-p1">
      <ul>
        <li>
          <div class="xmas-ball ball-1"></div>
          <div class="tree-left-branch"></div>
        </li>
        <li><div class="tree-right-branch"></div></li>
      </ul>
    </div>
    <div class="tree-p2">
      <ul>
        <li>
          <div class="xmas-ball ball-2"></div>
          <div class="tree-left-branch"></div>
        </li>
        <li>
          <div class="xmas-ball ball-3"></div>
          <div class="tree-right-branch"></div>
        </li>
      </ul>
    </div>
    <div class="tree-p3">
      <ul>
        <li>
          <div class="xmas-ball ball-6"></div>
          <div class="tree-left-branch"></div>
        </li>
        <li>
          <div class="xmas-ball ball-5"></div>
          <div class="xmas-ball ball-4"></div>
          <div class="tree-right-branch"></div>
        </li>
      </ul>
    </div>
    <div class="tree-p4">
      <ul>
        <li>
          <div class="xmas-ball ball-7"></div>
          <div class="xmas-ball ball-8"></div>
          <div class="tree-left-branch"></div>
        </li>
        <li>
          <div class="xmas-ball ball-9"></div>
          <div class="xmas-ball ball-10"></div>
          <div class="tree-right-branch stubborn"></div>
        </li>
      </ul>
    </div>
    <div class="wood"></div>
    <div class="presents">
      <div class="present-container-1">
        <div class="tie"></div>
        <div class="lid"></div>
        <div class="box"></div>
      </div>
      <div class="present-container-2">
        <div class="tie"></div>
        <div class="lid"></div>
        <div class="box"></div>
      </div>
    </div>
  </div>
  <h3>圣诞节快乐!</h3>
  <p><span>from haiyong</span></p>
</div>

CSS主要代码

CSS比较多，我截取了部分主要代码


body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #000;
}

ul {
  list-style-type: none;
}

ul li {
  display: inline-block;
}

h1 {
  font-family: "Mountains of Christmas", cursive;
  font-size: 42px;
  line-height: 60px;
  -WEBkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

h1::before, h1::after {
  content: "❆";
  margin: 0 10px;
}

h2 {
  font-family: "Source Sans Pro", sans-serif;
  font-size: 14px;
  text-transfORM: uppercase;
  letter-spacing: 2px;
}

h3 {
  font-family: "Open Sans Condensed", sans-serif;
  font-weight: 300;
  font-size: 18px;
  letter-spacing: 2px;
  margin-bottom: 5px;
}

p {
  font-family: "Dancing Script", cursive;
  font-size: 20px;
  font-weight: 700;
}

span {
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  font-weight: 400;
}

.card-container {
  height: 675px;
  width: 675px;
  padding: 30px;
  background-color: rgba(255, 255, 255, 0.6);
  border: 8px double #fff;
  border-radius: 20px;
  text-align: center;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  overflow: hidden;
  position: relative;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}

二、只使用 CSS 制作的螺旋圣诞树

演示地址：http://haiyong.site/christmastree2（在手机端和PC端都可以完美响应）

HTML代码


<div class="tree">
		  <div class="tree__light" style="--appear: 0; --y: 0; --rotate: 1440; --radius: 12.5; --speed: 9.235939340131775; --delay: -2.416794939166802;"></div>
		  <div class="tree__light" style="--appear: 1; --y: 2; --rotate: 1411.2; --radius: 12.25; --speed: 7.165430171444827; --delay: -2.992603509592233;"></div>
		  <div class="tree__light" style="--appear: 2; --y: 4; --rotate: 1382.4; --radius: 12; --speed: 3.5061879558149545; --delay: -0.7704234444726743;"></div>
		  <div class="tree__light" style="--appear: 3; --y: 6; --rotate: 1353.6000000000001; --radius: 11.75; --speed: 4.727223159267884; --delay: -9.55238654379912;"></div>
		  <div class="tree__light" style="--appear: 4; --y: 8; --rotate: 1324.8; --radius: 11.5; --speed: 0.702989829906826; --delay: -4.2545348853934435;"></div>
		  <div class="tree__light" style="--appear: 5; --y: 10; --rotate: 1296; --radius: 11.25; --speed: 6.842573668088441; --delay: -4.560144802030952;"></div>
		  <div class="tree__light" style="--appear: 6; --y: 12; --rotate: 1267.2; --radius: 11; --speed: 5.8193198565131965; --delay: -8.605875056439737;"></div>
		  <!-- 一样的规律一直写到 style="--appear: 49;此处省略为了博客简洁-->
		  <div class="tree__light" style="--appear: 49; --y: 98; --rotate: 28.8; --radius: 0.25; --speed: 1.7070837859932286; --delay: -3.8515175108122546;"></div>
		  <svg class="tree__star" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 113.32 108.44" style="--delay: 50">
		    <path d="M90.19 104.33L57.12 87.38 24.4 105l5.91-36.69L3.44 42.65l36.72-5.72 16.1-33.5L73.06 36.6l36.83 4.97-26.35 26.21z" fill="none" stroke-width="6.88" stroke-linecap="round" stroke-linejoin="round"></path>
		  </svg>
		</div>

完整CSS代码

复制粘贴即可


* {
  box-sizing: border-box;
}
body {
  background: #233343;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1200px;
  transform-style: preserve-3D;
}
.tree {
  position: relative;
  height: 50vmin;
  width: 25vmin;
  transform-style: preserve-3d;
  -webkit-animation: spin 2s infinite linear;
          animation: spin 2s infinite linear;
}
.tree__light {
  transform-style: preserve-3d;
  position: absolute;
  height: 1vmin;
  width: 1vmin;
  border-radius: 50%;
  -webkit-animation: flash calc(var(--speed) * 1s) calc(var(--delay) * 1s) infinite steps(4), appear 0.5s calc(var(--appear) * 0.05s) both;
          animation: flash calc(var(--speed) * 1s) calc(var(--delay) * 1s) infinite steps(4), appear 0.5s calc(var(--appear) * 0.05s) both;
  left: 50%;
  transform: translate(-50%, 50%) rotateY(calc(var(--rotate, 0) * 1deg)) translate3d(0, 0, calc(var(--radius, 0) * 1vmin));
  bottom: calc(var(--y, 0) * 1%);
}
.tree__star {
  stroke-width: 5vmin;
  stroke: #f5e0a3;
  filter: drop-shadow(0 0 2vmin #fcf1cf);
  height: 5vmin;
  width: 5vmin;
  overflow: visible !important;
  bottom: 100%;
  left: 50%;
  transform: translate(-50%, 0);
  position: absolute;
  stroke-dasharray: 1000 1000;
  fill: none;
  -webkit-animation: stroke 1s calc((var(--delay) * 0.95) * 0.05s) both;
          animation: stroke 1s calc((var(--delay) * 0.95) * 0.05s) both;
}
@-webkit-keyframes stroke {
  from {
    stroke-dashoffset: -1000;
  }
}
@keyframes stroke {
  from {
    stroke-dashoffset: -1000;
  }
}
@-webkit-keyframes spin {
  to {
    transform: rotateY(360deg);
  }
}
@keyframes spin {
  to {
    transform: rotateY(360deg);
  }
}
@-webkit-keyframes appear {
  from {
    opacity: 0;
  }
}
@keyframes appear {
  from {
    opacity: 0;
  }
}
@-webkit-keyframes flash {
  0%, 100% {
    background: #f00;
  }
  20% {
    background: #fff;
  }
  40% {
    background: #f00;
  }
  60% {
    background: #fff;
  }
  80% {
    background: #f00;
  }
}
@keyframes flash {
  0%, 100% {
    background: #f00;
  }
  20% {
    background: #fff;
  }
  40% {
    background: #f00;
  }
  60% {
    background: #fff;
  }
  80% {
    background: #f00;
  }
}

三、使用HTML+CSS+JS制作的圣诞树

演示地址：http://haiyong.site/christmastree3（最好在PC端预览）

完整CSS


body {
  background-color:#151522;
  overflow: hidden;
    display: flex;
  align-items: center;
  justify-content: center; 
}

body,
html {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}


svg{
  width:90%;
  height:90%;
  visibility:hidden;
 
}

部分JS


MorphSVGPlugin.convertToPath('polyGon');
	var xmlns = "http://www.w3.org/2000/svg",
	  xlinkns = "http://www.w3.org/1999/xlink",
	select = function(s) {
	    return document.querySelector(s);
	  },
	  selectAll = function(s) {
	    return document.querySelectorAll(s);
	  },
	  pContainer = select('.pContainer'),
	  mainSVG = select('.mainSVG'),
	  star = select('#star'),
	  sparkle = select('.sparkle'),
	  tree = select('#tree'),
	  showParticle = true,
	  particleColorArray = ['#E8F6F8', '#ACE8F8', '#F6FBFE','#A2CBDC','#B74551', '#5DBA72', '#910B28', '#910B28', '#446D39'],
	  particleTypeArray = ['#star','#circ','#cross','#heart'],
	  particlePool = [],
	  particleCount = 0,
	  numParticles = 201
	
	
	gsap.set('svg', {
	  visibility: 'visible'
	})
	
	gsap.set(sparkle, {
		transformOrigin:'50% 50%',
		y:-100
	})
	
	let getSVGPoints = (path) => {
		
		let arr = []
		var rawPath = MotionPathPlugin.getRawPath(path)[0];
		rawPath.forEach((el, value) => {
			let obj = {}
			obj.x = rawPath[value * 2]
			obj.y = rawPath[(value * 2) + 1]
			if(value % 2) {
				arr.push(obj)
			}
		})
		return arr;
	}
	let treePath = getSVGPoints('.treePath')	
	var treeBottomPath = getSVGPoints('.treeBottomPath')
	var mainTl = gsap.timeline({delay:0, repeat:0}), starTl;
	function flicker(p){
	  gsap.killTweensOf(p, {opacity:true});
	  gsap.fromTo(p, {
	    opacity:1
	  }, {
			duration: 0.07,
	    opacity:Math.random(),
	    repeat:-1
	  })
	}
	
	function createParticles() {
	  var i = numParticles, p, particleTl, step = numParticles/treePath.length, pos;
	  while (--i > -1) {
	    
	    p = select(particleTypeArray[i%particleTypeArray.length]).clonenode(true);
	    mainSVG.appendChild(p);
	    p.setAttribute('fill', particleColorArray[i % particleColorArray.length]);
	    p.setAttribute('class', "particle");   
	    particlePool.push(p);
	    gsap.set(p, {
	                 x:-100, 
	                 y:-100,
	   transformOrigin:'50% 50%'
	                 })
	  }
	
	}
	
	var getScale = gsap.utils.random(0.5, 3, 0.001, true);
	
	function playParticle(p){
	  if(!showParticle){return};
	  var p = particlePool[particleCount]
	 gsap.set(p, {
		 x: gsap.getProperty('.pContainer', 'x'),
		 y: gsap.getProperty('.pContainer', 'y'),
		 scale:getScale()
	    }
	    );
	var tl = gsap.timeline();
	  tl.to(p, {
			duration: gsap.utils.random(0.61,6),
	      physics2D: {
	        velocity: gsap.utils.random(-23, 23),
	        angle:gsap.utils.random(-180, 180),
	        gravity:gsap.utils.random(-6, 50)
	      },
	      scale:0,
	      rotation:gsap.utils.random(-123,360),
	      ease: 'power1',
	      onStart:flicker,
	      onStartParams:[p],
	      //repeat:-1,
	      onRepeat: (p) => {
	        gsap.set(p, {         
	            scale:getScale()
	        })
	      },
	      onRepeatParams: [p]
	
	    });

	  particleCount++;
	  particleCount = (particleCount >=numParticles) ? 0 : particleCount
	  
	}
	
	function drawStar(){
	  
	  starTl = gsap.timeline({onUpdate:playParticle})
	  starTl.to('.pContainer, .sparkle', {
			duration: 6,
			motionPath :{
				path: '.treePath',
	      autoRotate: false
			},
	    ease: 'linear'
	  })  
	  .to('.pContainer, .sparkle', {
			duration: 1,
	    onStart:function(){showParticle = false},
	    x:treeBottomPath[0].x,
	    y:treeBottomPath[0].y
	  })
	  .to('.pContainer, .sparkle',  {
			duration: 2,
	    onStart:function(){showParticle = true},
			motionPath :{
				path: '.treeBottomPath',
	      autoRotate: false
			},
	    ease: 'linear'    
	  },'-=0')
	.from('.treeBottomMask', {
			duration: 2,
	  drawSVG:'0% 0%',
	  stroke:'#FFF',
	  ease:'linear'
	},'-=2')  
	  
	}
	
	
	createParticles();
	drawStar();
	//ScrubGSAPTimeline(mainTl)
	
	mainTl.from(['.treePathMask','.treePotMask'],{
		duration: 6,
	  drawSVG:'0% 0%',
	  stroke:'#FFF',
		stagger: {
			each: 6
		},
	    duration: gsap.utils.wrap([6, 1,2]),
	  ease:'linear'
	})
	.from('.treeStar', {
		duration: 3,
	  //skewY:270,
	  scaleY:0,
	  scaleX:0.15,
	  transformOrigin:'50% 50%',
	  ease: 'elastic(1,0.5)'
	},'-=4')
	
	 .to('.sparkle', {
		duration: 3,
	    opacity:0,
	    ease:"rough({strength: 2, points: 100, template: linear, taper: both, randomize: true, clamp: false})"
	  },'-=0')
	  .to('.treeStarOutline', {
		duration: 1,
	    opacity:1,
	    ease:"rough({strength: 2, points: 16, template: linear, taper: none, randomize: true, clamp: false})"
	  },'+=1')		
	mainTl.add(starTl, 0)
	gsap.globalTimeline.timeScale(1.5);

四、只使用 CSS 的流星圣诞树

演示地址：http://haiyong.site/christmastree4（响应式的，手机和PC端都可预览）

HTML代码


<ul>
 <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>
<ul>
<!-- 此处省略256行 <li></li> -->
</ul>

CSS代码


:root {
  --background:#3C3B3D;
}

body {
  background: var(--background);
}
body ul {
  padding: 0;
}
body ul li {
  list-style: none;
}
body ul:nth-child(1) {
  position: absolute;
  top: 20vh;
  left: 50%;
  width: 1rem;
  height: 1rem;
  border-radius: 100%;
  transform: translate(-50%, -50%);
}
body ul:nth-child(1) li {
  position: absolute;
  width: 0;
  height: 0;
  border-width: 0 0.5rem 1rem 0.5rem;
  border-style: solid;
  border-color: transparent;
  border-bottom-color: #FFCE54;
  transform-origin: 0.5rem 1rem;
}
body ul:nth-child(1) li:nth-child(0) {
  transform: rotate(0deg);
}
body ul:nth-child(1) li:nth-child(1) {
  transform: rotate(72deg);
}
body ul:nth-child(1) li:nth-child(2) {
  transform: rotate(144deg);
}
body ul:nth-child(1) li:nth-child(3) {
  transform: rotate(216deg);
}
body ul:nth-child(1) li:nth-child(4) {
  transform: rotate(288deg);
}
body ul:nth-child(2) li {
  position: absolute;
  top: 20vh;
  left: 50%;
  width: 0.0625rem;
  height: 60vh;
  transform-origin: 50% 0%;
}
body ul:nth-child(2) li:nth-child(1) {
  transform: rotate(4.9322004015deg);
}
body ul:nth-child(2) li:nth-child(1):before, body ul:nth-child(2) li:nth-child(1):after {
  -webkit-animation-delay: -0.015625s;
          animation-delay: -0.015625s;
}
body ul:nth-child(2) li:nth-child(2) {
  transform: rotate(7.7960629984deg);
}
body ul:nth-child(2) li:nth-child(2):before, body ul:nth-child(2) li:nth-child(2):after {
  -webkit-animation-delay: -0.03125s;
          animation-delay: -0.03125s;
}
body ul:nth-child(2) li:nth-child(3) {
  transform: rotate(10.5294548885deg);
}
body ul:nth-child(2) li:nth-child(3):before, body ul:nth-child(2) li:nth-child(3):after {
  -webkit-animation-delay: -0.046875s;
          animation-delay: -0.046875s;
}


body ul:nth-child(2) li:nth-child(256) {
  transform: rotate(2deg);
}
body ul:nth-child(2) li:nth-child(256):before, body ul:nth-child(2) li:nth-child(256):after {
  -webkit-animation-delay: -4s;
          animation-delay: -4s;
}
body ul:nth-child(2) li:before, body ul:nth-child(2) li:after {
  content: "";
  position: absolute;
  top: 0%;
  -webkit-animation: fall 4s linear infinite;
          animation: fall 4s linear infinite;
}
body ul:nth-child(2) li:before {
  width: 0.0625rem;
  height: 3rem;
  background: linear-gradient(rgba(46, 204, 113, 0), rgba(46, 204, 113, 0.5));
}
body ul:nth-child(2) li:after {
  bottom: 0;
  transform: translate(-50%, 3rem);
  width: 0.1875rem;
  height: 0.1875rem;
  border-radius: 100%;
  background: #ffce54;
}
body ul:nth-child(2) li:nth-child(4n):after {
  background: #D8334A;
}
body ul:nth-child(2) li:nth-child(4n+1):after {
  background: #FFCE54;
}
body ul:nth-child(2) li:nth-child(4n+2):after {
  background: #2ECC71;
}
body ul:nth-child(2) li:nth-child(4n+3):after {
  background: #5D9CEC;
}

@-webkit-keyframes fall {
  0% {
    opacity: 0;
    top: 0%;
  }
  5% {
    opacity: 0;
  }
  15%, 90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    top: 100%;
  }
}

@keyframes fall {
  0% {
    opacity: 0;
    top: 0%;
  }
  5% {
    opacity: 0;
  }
  15%, 90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    top: 100%;
  }
}

五、水晶球里的圣诞树

演示地址：http://haiyong.site/christmastree5（响应式的，手机和PC端都可预览）

CSS完整代码


html, body {
    margin:0;
    width: 100%;
    height: 100%;
    position: absolute;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(180,186,214,1) 0%, rgba(232,203,192,1) 100%);
}

.content {
    text-align: center;
    width: 100%;
}

svg {
    max-width: 575px;
}

#canvas {
    border-radius: 50%;
    position: relative;
    width: 310px;
    height: 290px;
    top: 10px;
    left: 0px;
}

.canvas_container {
    position: absolute;
    width: 100%;
}

.draw_container {
    position: absolute;
    top: 50px;
    width: 100%;
}

JS完整代码


$(function() {
		    var canvas = $("#canvas")[0];
		    var ctx = canvas.getContext("2d");
		    var WIDTH = 320;
		    var HEIGHT = 320;
		    canvas.width = WIDTH;
		    canvas.height = HEIGHT;
		    clearCanvas();
		
		    var particles = [];
		    for (var i = 0; i < WIDTH; i++) {
		        particles.push({
		            x: Math.random() * WIDTH,
		            y: Math.random() * HEIGHT,
		            r: Math.random() * 2 + 1
		        })
		    }
		    
		    function draw() {
		        clearCanvas();
		        ctx.fillStyle = "rgba(255, 255, 255, 0.6)";
		        ctx.beginPath();
		
		        for (let i = 0; i < WIDTH; i++) {
		            let p = particles[i];
		            ctx.moveTo(p.x, p.y);
		            ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2, true);
		        }
		        ctx.fill();
		        update();
		    }
		    
		    function update() {
		        for (let i = 0; i < WIDTH; i++) {
		            let p = particles[i];
		            p.y += p.r;
		            if (p.y > canvas.height) {
		                particles[i] = {
		                    x: Math.random() * canvas.width,
		                    y: -10,
		                    r: p.r
		                };
		            }
		        }
		    }
		    var timer = setInterval(draw, 50);
		
		    function clearCanvas() {
		        ctx.clearRect(0, 0, canvas.width, canvas.height);
		    }
		
		})

六、圣诞贺卡

演示地址：http://haiyong.site/shengdanheka

以上就是通过javascript实现动态圣诞树详解的详细内容，更多关于JavaScript圣诞树的资料请关注编程网其它相关文章！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: 通过JavaScript实现动态圣诞树详解

本文链接: https://www.lsjlt.com/news/160322.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档
去做题
猜你喜欢
  • 通过JavaScript实现动态圣诞树详解
    目录一、只使用 CSS 制作的动画圣诞树二、只使用 CSS 制作的螺旋圣诞树三、使用HTML+CSS+JS制作的圣诞树四、只使用 CSS 的流星圣诞树五、水晶球里的圣诞树六、圣诞贺卡...
    99+
    2024-04-02
  • 如何通过RabbitMq实现动态定时任务详解
    目录一、需求背景二、方案思考（1）需求大致分析（2）可尝试的方案三、通过RabbitMQ实现延时任务并间接实现动态定时任务。（1）通过死信的方式实现延时信息消费（2）通过MQ延时插件...
    99+
    2024-04-02
  • C++实现动态规划过程详解
    目录C++实现动态规划1. 动态规划的基础2. 动态规划的实现方法3. 实际应用C++实现动态规划 动态规划是解决一类最优问题的常用方法，它是解决最优化问题的一种途径，因为这种算法通...
    99+
    2023-05-20
    C++实现动态规划 C++动态规划
  • JavaScript实现动态表格的方法详解
    目录JavaScript实现动态表格基本效果如下代码如下：第一种方式（较简单，建议使用）方式二改进版代码如下：总结JavaScript实现动态表格 （改建版，代码见最下面） 基本效...
    99+
    2024-04-02
  • 详解如何通过JavaScript实现函数重载
    有的同学在开发中可能遇到过一个困扰，但是很少有人去解决这个问题，我这用一个例子展现出来 const searcher = {}; searcher.findAll = () =>...
    99+
    2023-01-12
    JavaScript实现函数重载 JavaScript函数重载 JavaScript 重载
  • C语言动态与静态分别实现通讯录详细过程
    目录前言：一.静态通讯录的实现1.环境的分工逻辑2.待实现的功能3.contact.h4.contact.c5.test.c6.实现效果二.通讯录动态的实现1.contact.h2....
    99+
    2024-04-02
  • JavaScript实现动态生成表格案例详解
    目录前言实现思路实现代码 实现效果前言 在这里实现一个动态添加表格的案例，当点击添加按钮时，可以弹出一个表单，然后将输入的内容添加到表格中，也可以将表格中的整行内容清除。 实现思路 ...
    99+
    2024-04-02
  • C语言实现可增容动态通讯录详细过程
    目录创建可自动扩容的通讯录添加用户信息删除用户信息查找联系人修改用户信息以名字将用户排序销毁通讯录创建可自动扩容的通讯录 这里我们想实现通讯录自动扩容，不够了能扩大内存，变得稍微有点...
    99+
    2024-04-02
  • C++通用动态抽象工厂的实现详解
    目录背景实现寄存参数存储所有构造出来的对象寄存指针，可析构的单例装饰工厂函数，责任链工厂允许构造函数之外的参数组合总结背景 一开始，我是想到了下面这个场景： struct A { ...
    99+
    2024-04-02
  • JavaScript实现生成动态表格和动态效果的方法详解
    今天上午完成了Vue实现一个表格的动态样式，那么JavaScript代码能不能实现同样的效果呢？这样也可以学习一下JavaScript的语法，晚上试了一下，完全可以，效果一模一样。 ...
    99+
    2024-04-02
  • SpringBoot通过@Value实现给静态变量注入值详解
    目录一、简介二、@Value给静态变量注入值方案一方案二三、总结一、简介 SpringBoot 中给普通变量注入值只需在变量上添加 @Value 注解即可。 application....
    99+
    2024-04-02
  • C语言静态与动态通讯录的实现流程详解
    目录静态通讯录contact.hcontact.ctest.c动态通讯录contact.hcontact.cqsort.ctest.c本次通讯录的代码已经放到我的Gitee仓库中，感...
    99+
    2024-04-02
  • 如何通过脚本实现数据动态更新
    在数据填报的场景中，常常会遇到根据条件动态更新数据的需求，例如：在条件 A 下将页面所有数据插入到数据库表中，而在条件 B 下则将页面中做了修改的数据更新到数据库表中。遇到这种需求，脑海中的第一个想法就是：存储过程更新、或者 java 代码...
    99+
    2023-06-02
  • 如何通过动态参数实现周报制作
    需求描述在货品交易系统里，用户不仅要看当天的交易情况，还需要查看一周 / 一个月 / 一年的情况，也叫做周报 / 月报 / 年报。下图所示就是其中订货信息周报的效果。它是如何根据用户输入的一个日期查询出该日期所在周的订货信息表的呢？实现步骤...
    99+
    2023-06-02
  • JavaScript圣杯布局与双飞翼布局实现案例详解
    目录一、圣杯布局和双飞翼布局的功能介绍二、圣杯布局高度如何自适应屏幕高度圣杯布局思路圣杯布局代码三、双飞翼布局双飞翼布局的思路双飞翼布局的代码圣杯布局和双飞翼布局的区别四、圣杯布局和...
    99+
    2022-11-13
    JavaScript 圣杯布局 JavaScript 双飞翼布局
  • JDK动态代理过程原理及手写实现详解
    目录JDK动态代理的过程手写实现JDK动态代理创建MyInvocationHandler接口创建MyClassLoader类加载器创建代理类使用自定义动态代理类创建接口创建被代理接口...
    99+
    2024-04-02
  • Vue怎么通过监听滚动事件实现动态锚点
    本文小编为大家详细介绍“Vue怎么通过监听滚动事件实现动态锚点”，内容详细，步骤清晰，细节处理妥当，希望这篇“Vue怎么通过监听滚动事件实现动态锚点”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。具体效果如下：一、...
    99+
    2023-07-04
  • Vue.js如何通过监听滚动事件实现动态锚点
    这篇文章主要介绍了Vue.js如何通过监听滚动事件实现动态锚点，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。具体效果如下：如果是传统项目，这...
    99+
    2024-04-02
  • springboot怎么通过spel结合aop实现动态传参
    这篇文章主要介绍了springboot怎么通过spel结合aop实现动态传参的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇springboot怎么通过spel结合aop实现动态传参文章都会有所收获，下面我们一起...
    99+
    2023-07-06
  • 通过Python实现控制手机详解
    几天前我在考虑使用 python 从 whatsapp 发送消息。和你们一样，我开始潜伏在互联网上寻找一些解决方案并找到了关于twilio. 一开始，是一个不错的解决方案，但它不是...
    99+
    2024-04-02
软考高级职称资格查询
iis服务器助手广告
软考职称历年真题下载
软考职称资料下载
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作