圣诞节 - Javascript (1)

📌 相关文章

📜 圣诞节 - Javascript (1)

📅 最后修改于: 2023-12-03 14:50:50.185000 🧑 作者: Mango

圣诞节 - Javascript

简介

圣诞节是西方的一个传统节日，通常在12月25日庆祝。在这一天，人们会进行庆祝活动，比如送礼物、欢聚一堂、享用美味佳肴等。在Javascript中，我们也可以通过各种方式来庆祝圣诞节。本文将介绍一些关于圣诞节的Javascript编程技巧和实现方法。

实现

1. 网页实现雪花效果

//HTML
<body onload="startSnow()">
  <canvas id="canvas"></canvas>
</body>

//CSS
#canvas {
  position: absolute;
  z-index: -1;
}

//Javascript
function startSnow() {
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  
  // 雪花数量
  var snowCount = 100;
  var snowArr = [];

  for (var i = 0; i < snowCount; i++) {
     // 雪花每秒移动的像素
    var speed = Math.random() * 1 + 0.5;
     // 雪花大小
    var size = Math.random() * 10 + 10;
     // 雪花位置
    var x = Math.random() * (canvas.width - size);
    var y = Math.random() * (canvas.height - size);
     // 雪花方向
    var dx = (Math.random() - 0.5) * 2;
    var dy = speed;
     // 存储雪花属性
    snowArr.push({ x: x, y: y, dx: dx, dy: dy, size: size, speed: speed });
  }

  function drawSnow() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    for (var i = 0; i < snowCount; i++) {
      var snow = snowArr[i];
      snow.x += snow.dx;
      snow.y += snow.dy;
      if (snow.y > canvas.height) {
        snow.y = 0;
        snow.x = Math.random() * (canvas.width - snow.size);
      }
      ctx.fillStyle = "#fff";
      ctx.beginPath();
      ctx.arc(snow.x, snow.y, snow.size, 0, Math.PI * 2);
      ctx.closePath();
      ctx.fill();
    }
  }
  setInterval(drawSnow, 30);
}

2. 实现圣诞节倒计时

//HTML
<div id="countdown"></div>

//Javascript
function countdown() {
  var now = new Date();
  var target = new Date("December 25, 2021");
  var timeleft = (target - now) / 1000;

  var days = Math.floor(timeleft / 86400);
  var hours = Math.floor((timeleft - days * 86400) / 3600);
  var minutes = Math.floor((timeleft - days * 86400 - hours * 3600) / 60);
  var seconds = Math.floor(timeleft - days * 86400 - hours * 3600 - minutes * 60);

  var countdownDiv = document.getElementById("countdown");
  countdownDiv.innerHTML =
    "还有 " +
    days +
    " 天 " +
    hours +
    " 小时 " +
    minutes +
    " 分钟 " +
    seconds +
    " 秒 倒计时！";
}
setInterval(countdown, 1000);

3. 实现圣诞树

//HTML
<div id="tree"></div>

//CSS
#tree {
  width: 0;
  height: 0;
  border-left: 75px solid transparent;
  border-right: 75px solid transparent;
  border-bottom: 100px solid green;
  position: relative;
  margin: 100px auto 0;
}

.tree-topper {
  width: 0;
  height: 0;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  border-bottom: 30px solid yellow;
  position: absolute;
  top: -25px;
  left: 50px;
}

.tree-lights {
  position: absolute;
  top: -10px;
  left: 20px;
  z-index: 10;
  animation: blink 2s infinite;
}

@keyframes blink {
  50% {
    opacity: 0.3;
  }
}

//Javascript
var tree = document.getElementById("tree");
for (var i = 0; i < 10; i++) {
  var lights = document.createElement("div");
  lights.className = "tree-lights";
  lights.style.left = Math.random() * 100 + "%";
  tree.appendChild(lights);
}
var topper = document.createElement("div");
topper.className = "tree-topper";
tree.appendChild(topper);

总结

通过Javascript的编程技巧和实现方法，我们可以在网页上实现雪花效果、倒计时和圣诞树等特效，为我们的页面增添一些节日的气息。希望你们也在编程中体验到欢乐的圣诞节！