JavaScript によるダイナミッククリスマスツリーの詳細な説明

JavaScript によるダイナミッククリスマスツリーの詳細な説明

1. CSS のみを使用して作成したアニメーションのクリスマスツリー

デモアドレス: http://haiyong.site/christmastree1 (コンピューターで開くことをお勧めします。モバイル版は応答しない場合は少し歪んでしまいますが、後ろのクリスマスツリーを見ることもできます)

HTMLコード:

ここの HTML コードは完全で、切り取られていません。

<div class="カードコンテナ">
  <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="クリスマスボールボール-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="クリスマスボールボール-10"></div>
          <div class="tree-right-branch 頑固"></div>
        </li>
      </ul>
    </div>
    <div class="wood"></div>
    <div class="presents">
      <div class="present-container-1">
        <div class="tie"></div>
        <div class="ふた"></div>
        <div class="box"></div>
      </div>
      <div class="present-container-2">
        <div class="tie"></div>
        <div class="ふた"></div>
        <div class="box"></div>
      </div>
    </div>
  </div>
  <h3>メリークリスマス！</h3>
  <p><span>haiyong より</span></p>
</div>

CSSメインコード

CSSがたくさんあります。主要なコードの一部を傍受しました

体 {
  高さ：100vh;
  ディスプレイ: フレックス;
  コンテンツの中央揃え: 中央;
  アイテムの位置を中央揃えにします。
  色: #000;
}

ul {
  リストスタイルタイプ: なし;
}

ul li {
  表示: インラインブロック;
}

h1 {
  フォントファミリー: 「Mountains of Christmas」、筆記体;
  フォントサイズ: 42px;
  行の高さ: 60px;
  -webkit-background-clip: テキスト;
  -webkit-テキストの塗りつぶし色: 透明;
}

h1::before、h1::after {
  内容: "❆";
  マージン: 0 10px;
}

h2 {
  フォントファミリ: "Source Sans Pro"、サンセリフ;
  フォントサイズ: 14px;
  テキスト変換:大文字;
  文字間隔: 2px;
}

h3 {
  フォントファミリー: "Open Sans Condensed"、サンセリフ;
  フォントの太さ: 300;
  フォントサイズ: 18px;
  文字間隔: 2px;
  下部マージン: 5px;
}

ｐ {
  フォントファミリー: 「Dancing Script」、筆記体;
  フォントサイズ: 20px;
  フォントの太さ: 700;
}

スパン {
  フォントファミリ: "Roboto"、サンセリフ;
  フォントサイズ: 14px;
  フォントの太さ: 400;
}

.カードコンテナ{
  高さ: 675px;
  幅: 675ピクセル;
  パディング: 30px;
  背景色: rgba(255, 255, 255, 0.6);
  境界線: 8px ダブル #fff;
  境界線の半径: 20px;
  テキスト配置: 中央;
  境界線の半径: 50%;
  -webkit-border-radius: 50%;
  オーバーフロー: 非表示;
  位置: 相対的;
  -webkit-mask-image: -webkit-radial-gradient(白、黒);
}

2. 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.60000000000001; --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" スタイル="--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コード

コピーして貼り付けるだけ

* {
  ボックスのサイズ: 境界線ボックス;
}
体 {
  背景: #233343;
  最小高さ: 100vh;
  ディスプレイ: フレックス;
  アイテムの位置を中央揃えにします。
  コンテンツの中央揃え: 中央;
  パースペクティブ: 1200px;
  変換スタイル: 3D を保持します。
}
。木 {
  位置: 相対的;
  高さ: 50vmin;
  幅: 25vmin;
  変換スタイル: 3D を保持します。
  -webkit-animation: スピン 2 秒 無限線形;
          アニメーション: 2 秒間の無限線形スピン。
}
.tree__light {
  変換スタイル: 3D を保持します。
  位置: 絶対;
  高さ: 1vmin;
  幅: 1vmin;
  境界線の半径: 50%;
  -webkit-animation: flash calc(var(--speed) * 1s) calc(var(--delay) * 1s) 無限ステップ(4)、0.5秒表示 calc(var(--appear) * 0.05s) 両方;
          アニメーション: フラッシュ calc(var(--speed) * 1s) calc(var(--delay) * 1s) 無限ステップ(4)、0.5秒表示 calc(var(--appear) * 0.05s) 両方;
  左: 50%;
  変換: translate(-50%, 50%) rotateY(calc(var(--rotate, 0) * 1deg)) translate3d(0, 0, calc(var(--radius, 0) * 1vmin));
  下部: calc(var(--y, 0) * 1%);
}
.tree__star {
  ストローク幅: 5vmin;
  ストローク: #f5e0a3;
  フィルター: ドロップシャドウ(0 0 2vmin #fcf1cf);
  高さ: 5vmin;
  幅: 5vmin;
  オーバーフロー: 表示 !important;
  下部: 100%;
  左: 50%;
  変換: translate(-50%, 0);
  位置: 絶対;
  ストロークダッシュ配列: 1000 1000;
  塗りつぶし: なし;
  -webkit-animation: ストローク 1s calc((var(--delay) * 0.95) * 0.05s) 両方;
          アニメーション: ストローク 1s calc((var(--delay) * 0.95) * 0.05s) 両方;
}
@-webkit-keyframes ストローク {
  から {
    ストロークダッシュオフセット: -1000;
  }
}
@keyframes ストローク {
  から {
    ストロークダッシュオフセット: -1000;
  }
}
@-webkit-keyframes スピン {
  に {
    変換: rotateY(360deg);
  }
}
@keyframes スピン {
  に {
    変換: rotateY(360deg);
  }
}
@-webkit-キーフレームが表示される{
  から {
    不透明度: 0;
  }
}
@キーフレームが表示される{
  から {
    不透明度: 0;
  }
}
@-webkit-keyframes フラッシュ {
  0%、100% {
    背景: #f00;
  }
  20% {
    背景: #fff;
  }
  40% {
    背景: #f00;
  }
  60% {
    背景: #fff;
  }
  80% {
    背景: #f00;
  }
}
@keyframes フラッシュ {
  0%、100% {
    背景: #f00;
  }
  20% {
    背景: #fff;
  }
  40% {
    背景: #f00;
  }
  60% {
    背景: #fff;
  }
  80% {
    背景: #f00;
  }
}

3. HTML+CSS+JSで作ったクリスマスツリー

デモアドレス: http://haiyong.site/christmastree3 (PC でのプレビューが最適です)

フルCSS

体 {
  背景色:#151522;
  オーバーフロー: 非表示;
    ディスプレイ: フレックス;
  アイテムの位置を中央揃えにします。
  コンテンツの中央揃え: 中央; 
}

体、
html{
  高さ: 100%;
  幅: 100%;
  マージン: 0;
  パディング: 0;
}


svg{
  幅:90%;
  高さ:90%;
  可視性:非表示;
 
}

部分的なJS

MorphSVGPlugin.convertToPath('ポリゴン');
	var xmlns = "http://www.w3.org/2000/svg",
	  xlinkns = "http://www.w3.org/1999/xlink",
	select = 関数 {
	    document.querySelector を返します。
	  },
	  selectAll = 関数{
	    document.querySelectorAll(s); を返します。
	  },
	  pContainer = select('.pContainer')、
	  mainSVG = select('.mainSVG')、
	  星 = select('#星'),
	  スパークル = select('.sparkle'),
	  ツリー = select('#tree')、
	  パーティクルを表示 = true、
	  粒子カラー配列 = ['#E8F6F8', '#ACE8F8', '#F6FBFE','#A2CBDC','#B74551', '#5DBA72', '#910B28', '#910B28', '#446D39'],
	  粒子タイプ配列 = ['#星','#円','#十字','#ハート'],
	  粒子プール = [],
	  粒子数 = 0、
	  粒子数 = 201
	
	
	gsap.set('svg', {
	  可視性: '可視'
	})
	
	gsap.set(スパークル, {
		変換元:'50% 50%',
		y:-100
	})
	
	getSVGPoints = (パス) => {
		
		arr = [] とします
		var rawPath = MotionPathPlugin.getRawPath(path)[0];
		rawPath.forEach((el, 値) => {
			obj = {} とします
			obj.x = rawPath[値 * 2]
			obj.y = rawPath[(値 * 2) + 1]
			if(値 % 2) {
				arr.push(オブジェクト)
			}
		})
		arr を返します。
	}
	treePath = getSVGPoints('.treePath') とします。	
	var treeBottomPath = getSVGPoints('.treeBottomPath')
	var mainTl = gsap.timeline({delay:0, repeat:0}), starTl;
	関数 flicker(p){
	  gsap.killTweensOf(p, {不透明度:true});
	  gsap.fromTo(p, {
	    不透明度:1
	  }, {
			持続時間: 0.07、
	    不透明度:Math.random(),
	    繰り返し:-1
	  })
	}
	
	関数createParticles() {
	  var i = numParticles、p、particleTl、ステップ = numParticles/treePath.length、pos;
	  (--i > -1) の間 {
	    
	    p = select(particleTypeArray[i%particleTypeArray.length]).cloneNode(true);
	    mainSVG.appendChild(p);
	    p.setAttribute('fill', 粒子カラー配列[i % 粒子カラー配列.length]);
	    p.setAttribute('クラス', "粒子");   
	    パーティクルプールをpにプッシュします。
	    gsap.set(p, {
	                 x:-100, 
	                 y:-100,
	   変換元:'50% 50%'
	                 })
	  }
	
	}
	
	var getScale = gsap.utils.random(0.5, 3, 0.001, true);
	
	関数playParticle(p){
	  if(!showParticle){return};
	  var p = 粒子プール[粒子数]
	 gsap.set(p, {
		 x: gsap.getProperty('.pContainer', 'x'),
		 y: gsap.getProperty('.pContainer', 'y'),
		 スケール:getScale()
	    }
	    );
	var tl = gsap.timeline();
	  tl.to(p, {
			期間: gsap.utils.random(0.61,6)、
	      物理2D:
	        速度: gsap.utils.random(-23, 23)、
	        角度:gsap.utils.random(-180, 180),
	        重力:gsap.utils.random(-6, 50)
	      },
	      スケール:0,
	      回転:gsap.utils.random(-123,360)、
	      容易さ: 'power1',
	      onStart: ちらつき、
	      onStartParams:[p],
	      //繰り返し:-1,
	      繰り返し: (p) => {
	        gsap.set(p, {         
	            スケール:getScale()
	        })
	      },
	      onRepeatParams: [p]
	
	    });

	  粒子数++;
	  粒子数 = (粒子数 >= 粒子数) ? 0 : 粒子数
	  
	}
	
	関数drawStar(){
	  
	  starTl = gsap.timeline({onUpdate:playParticle})
	  starTl.to('.pContainer, .sparkle', {
			所要時間: 6,
			モーションパス:
				パス: '.treePath',
	      自動回転: false
			},
	    容易さ: '線形'
	  })  
	  .to('.pContainer, .sparkle', {
			期間: 1,
	    onStart:function(){showParticle = false},
	    x:treeBottomPath[0].x,
	    y:ツリー下部パス[0].y
	  })
	  .to('.pContainer, .sparkle', {
			期間: 2,
	    onStart:function(){showParticle = true},
			モーションパス:
				パス: '.treeBottomPath',
	      自動回転: false
			},
	    容易さ: '線形'    
	  },'-=0')
	.from('.treeBottomMask', {
			期間: 2,
	  描画SVG:'0% 0%',
	  ストローク:'#FFF',
	  容易さ:'線形'
	},'-=2')  
	  
	}
	
	
	パーティクルを作成します。
	星を描画します。
	//GSAPタイムラインをスクラブ(mainTl)
	
	mainTl.from(['.treePathMask','.treePotMask'],{
		期間: 6,
	  描画SVG:'0% 0%',
	  ストローク:'#FFF',
		よろめく：
			各: 6
		},
	    期間: gsap.utils.wrap([6, 1,2]),
	  容易さ:'線形'
	})
	.from('.treeStar', {
		期間: 3,
	  // 傾斜Y:270,
	  スケールY:0,
	  スケールX:0.15、
	  変換元:'50% 50%',
	  イージー: 'elastic(1,0.5)'
	},'-=4')
	
	 .to('.sparkle', {
		期間: 3,
	    不透明度:0,
	    イージー:"rough({強度: 2、ポイント: 100、テンプレート: 線形、テーパー: 両方、ランダム化: true、クランプ: false})"
	  },'-=0')
	  .to('.treeStarOutline', {
		期間: 1,
	    不透明度:1、
	    イージー:"rough({強度: 2、ポイント: 16、テンプレート: 線形、テーパー: なし、ランダム化: true、クランプ: false})"
	  },'+=1')		
	mainTl.add(スターTl, 0)
	gsap.globalTimeline.timeScale(1.5);

4. 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コード

：根 {
  --背景:#3C3B3D;
}

体 {
  背景: var(--background);
}
本文 ul {
  パディング: 0;
}
ボディ ul li {
  リストスタイル: なし;
}
本体 ul:nth-child(1) {
  位置: 絶対;
  トップ：20vh;
  左: 50%;
  幅: 1rem;
  高さ: 1rem;
  境界線の半径: 100%;
  変換: translate(-50%, -50%);
}
本体 ul:nth-child(1) li {
  位置: 絶対;
  幅: 0;
  高さ: 0;
  境界線の幅: 0 0.5rem 1rem 0.5rem;
  境界線のスタイル: solid;
  境界線の色: 透明;
  境界線下部の色: #FFCE54;
  変換の原点: 0.5rem 1rem;
}
本体 ul:n番目の子(1) li:n番目の子(0) {
  変換: 回転(0度);
}
本体 ul:nth-child(1) li:nth-child(1) {
  変換: 回転(72度);
}
本体 ul:nth-child(1) li:nth-child(2) {
  変換: 回転(144度);
}
本体 ul:nth-child(1) li:nth-child(3) {
  変換: 回転(216度);
}
本体 ul:nth-child(1) li:nth-child(4) {
  変換: 回転(288度);
}
本体 ul:nth-child(2) li {
  位置: 絶対;
  トップ：20vh;
  左: 50%;
  幅: 0.0625rem;
  高さ: 60vh;
  変換原点: 50% 0%;
}
本体 ul:nth-child(2) li:nth-child(1) {
  変換: 回転(4.9322004015度);
}
本体 ul:nth-child(2) li:nth-child(1):before、本体 ul:nth-child(2) li:nth-child(1):after {
  -webkit アニメーション遅延: -0.015625 秒;
          アニメーション遅延: -0.015625秒;
}
本体 ul:nth-child(2) li:nth-child(2) {
  変換: 回転(7.7960629984度);
}
本体 ul:nth-child(2) li:nth-child(2):before、本体 ul:nth-child(2) li:nth-child(2):after {
  -webkit アニメーション遅延: -0.03125 秒;
          アニメーション遅延: -0.03125秒;
}
本体 ul:nth-child(2) li:nth-child(3) {
  変換: 回転(10.5294548885度);
}
本体 ul:nth-child(2) li:nth-child(3):before、本体 ul:nth-child(2) li:nth-child(3):after {
  -webkit アニメーション遅延: -0.046875 秒;
          アニメーション遅延: -0.046875秒;
}
/* ...... */
/* 256番目まで同じパターン */
本体 ul:nth-child(2) li:nth-child(256) {
  変換: 回転(2度);
}
本体 ul:nth-child(2) li:nth-child(256):before、本体 ul:nth-child(2) li:nth-child(256):after {
  -webkit アニメーション遅延: -4 秒;
          アニメーション遅延: -4秒;
}
本体 ul:nth-child(2) li:before、本体 ul:nth-child(2) li:after {
  コンテンツ： "";
  位置: 絶対;
  トップ: 0%;
  -webkit-animation: fall 4s linear infinite;
          アニメーション: 落下 4 秒 線形無限;
}
本体 ul:nth-child(2) li:before {
  幅: 0.0625rem;
  高さ: 3rem;
  背景: linear-gradient(rgba(46, 204, 113, 0), rgba(46, 204, 113, 0.5));
}
本体 ul:nth-child(2) li:after {
  下部: 0;
  変換: translate(-50%, 3rem);
  幅: 0.1875rem;
  高さ: 0.1875rem;
  境界線の半径: 100%;
  背景: #ffce54;
}
本体 ul:nth-child(2) li:nth-child(4n):after {
  背景: #D8334A;
}
本体 ul:nth-child(2) li:nth-child(4n+1):after {
  背景: #FFCE54;
}
本体 ul:n番目の子(2) li:n番目の子(4n+2):後 {
  背景: #2ECC71;
}
本体 ul:nth-child(2) li:nth-child(4n+3):after {
  背景: #5D9CEC;
}

@-webkit-keyframes 秋 {
  0% {
    不透明度: 0;
    トップ: 0%;
  }
  5% {
    不透明度: 0;
  }
  15%、90% {
    不透明度: 1;
  }
  100% {
    不透明度: 0;
    上: 100%;
  }
}

@keyframes 落ちる {
  0% {
    不透明度: 0;
    トップ: 0%;
  }
  5% {
    不透明度: 0;
  }
  15%、90% {
    不透明度: 1;
  }
  100% {
    不透明度: 0;
    上: 100%;
  }
}

5. 水晶玉の中のクリスマスツリー

デモアドレス: http://haiyong.site/christmastree5 (レスポンシブ、モバイルと PC の両方でプレビュー可能)

CSS 完全コード

html、本文{
    マージン:0;
    幅: 100%;
    高さ: 100%;
    位置: 絶対;
    オーバーフロー: 非表示;
    背景: linear-gradient(135deg, rgba(180,186,214,1) 0%, rgba(232,203,192,1) 100%);
}

。コンテンツ {
    テキスト配置: 中央;
    幅: 100%;
}

svg {
    最大幅: 575px;
}

#キャンバス {
    境界線の半径: 50%;
    位置: 相対的;
    幅: 310ピクセル;
    高さ: 290px;
    上: 10px;
    左: 0px;
}

.キャンバスコンテナ{
    位置: 絶対;
    幅: 100%;
}

.draw_container{
    位置: 絶対;
    上: 50px;
    幅: 100%;
}

JS 完全コード

$(関数() {
		    var キャンバス = $("#canvas")[0];
		    var ctx = canvas.getContext("2d");
		    var 幅 = 320;
		    var 高さ = 320;
		    キャンバスの幅 = 幅;
		    キャンバスの高さ = 高さ;
		    キャンバスをクリアします。
		
		    var 粒子 = [];
		    (var i = 0; i < WIDTH; i++) の場合 {
		        粒子.push({
		            x: Math.random() * 幅、
		            y: Math.random() * 高さ、
		            r: Math.random() * 2 + 1
		        })
		    }
		    
		    関数draw() {
		        キャンバスをクリアします。
		        ctx.fillStyle = "rgba(255, 255, 255, 0.6)";
		        ctx.beginPath();
		
		        (i = 0; i < WIDTH; i++) の場合 {
		            p = particles[i]とします。
		            ctx.moveTo(px, py);
		            ctx.arc(px, py, pr, 0, Math.PI * 2, true);
		        }
		        ctx.fill();
		        アップデート（）;
		    }
		    
		    関数 update() {
		        (i = 0; i < WIDTH; i++) の場合 {
		            p = particles[i]とします。
		            py + = pr;
		            キャンバスの高さが
		                粒子[i] = {
		                    x: Math.random() * キャンバス幅、
		                    y: -10,
		                    r:pr
		                };
		            }
		        }
		    }
		    var timer = setInterval(draw, 50);
		
		    関数 clearCanvas() {
		        ctx.clearRect(0, 0, キャンバス.幅, キャンバス.高さ);
		    }
		
		})

6. クリスマスカード

デモアドレス: http://haiyong.site/shengdanheka

以上がJavaScriptで実装したダイナミッククリスマスツリーの詳しい内容です。JavaScriptクリスマスツリーの詳細については、123WORDPRESS.COMの他の関連記事もご覧ください。

以下もご興味があるかもしれません:
  • JS2Image をベースにしたクリスマスツリーのコードを実装する
  • JavaScript フラッシュクリスマスツリー実装コード
  • JS を使用して HTML で回転するクリスマスツリーを実装する

<<:  HTML の基礎必読 - CSS スタイルシートの包括的な理解

>>:  MySQLのマスタースレーブレプリケーションと読み取り書き込み分離を理解するための記事

推薦する

HTML でさまざまなスペースの特徴と表現を探る (推奨)

I. 概要HTML テンプレートを作成するときに、テキスト レイアウトの手段としてスペースが使用さ...

Windows Server 2008 R2 リモート デスクトップのポート 3389 を変更する方法

Windows サーバー リモート デスクトップのデフォルトのポート番号は 3389 です。職場でサ...

Linux で LVGL エミュレータをコンパイルする際のエラーの解決方法

目次1. エラー現象2. エラー分析3. エラー解決1. エラー現象仮想マシンでLVGLエミュレータ...

MySQL でテーブル メタデータ ロックを待機する理由と方法

MySQL が alter table などの DDL 操作を実行すると、テーブル メタデータ ロッ...

デザイン理論：人間中心のグリーンデザイン

「人間中心」と「グリーンデザイン」という2つの視点から考える——デザイン業界の同僚とも議論する2つの...

Linux サーバーに SSH パスワードなしでログインする方法

テスト サーバーにログインするたびに、必ず ssh ログインのパスワードを入力する必要があります。ロ...

大きな MySQL テーブルに列を追加する方法

質問は https://www.zhihu.com/question/440231149 から参照さ...

効果的なウェブフォームのための 8 つのルール

ユーザーから情報を収集する場合、Web フォームを使用するより簡単で直接的な方法はありません。適切に...

MySQL 5.5.27 winx64 のインストールと設定方法のグラフィックチュートリアル

1. インストールパッケージMYSQLサービスダウンロードアドレス：MySQL公式サイトからダウンロ...

yum インストールエラーの問題を解決する 保護されたマルチライブラリバージョン

現在、クラウドサーバーに nginx をインストールする際、最初に zlib などの依存ライブラリを...

Vue での mixin の応用について議論する

Mixin は、再利用可能な機能を Vue コンポーネント間で分散する非常に柔軟な方法を提供します。...

Js の継承とプロトタイプチェーンを理解するのに役立つ記事

目次継承とプロトタイプチェーン継承されたプロパティ継承されたメソッドJavaScript でのプロト...

JavaScript におけるイベント バブリング メカニズムの詳細な分析

バブリングとは何ですか? DOM イベント フローには、イベント キャプチャ ステージ、ターゲット ...

MySQLのマスタースレーブレプリケーションと読み取り書き込み分離を理解するための記事

目次導入1. MySQL マスタースレーブレプリケーション1. MySQLレプリケーションタイプ2....

HTMLの基本概念の詳細な説明

HTMLとは何ですか? HTML は Web ページを記述するために使用される言語です。 •HTML...