跨年倒计时html代码圣诞树

以下是HTML+CSS+JS实现跨年倒计时和绘制精美彩色闪灯圣诞树的代码：

1. 跨年倒计时HTML代码：

<div id="countdown">
  <div>
    <span id="days"></span>
    <div class="smalltext">Days</div>
  </div>
  <div>
    <span id="hours"></span>
    <div class="smalltext">Hours</div>
  </div>
  <div>
    <span id="minutes"></span>
    <div class="smalltext">Minutes</div>
  </div>
  <div>
    <span id="seconds"></span>
    <div class="smalltext">Seconds</div>
  </div>
</div>

2. 跨年倒计时CSS代码：

#countdown {
  font-family: Arial, sans-serif;
  text-align: center;
  margin-top: 50px;
}

#countdown > div {
  display: inline-block;
  margin-right: 20px;
}

#countdown span {
  display: block;
  font-size: 50px;
  color: #fff;
  text-shadow: 2px 2px 5px #000;
}

.smalltext {
  color: #fff;
  text-shadow: 2px 2px 5px #000;
}

3. 跨年倒计时JS代码：

function countdown() {
  var now = new Date();
  var eventDate = new Date(2022, 0, 1);

  var currentTime = now.getTime();
  var eventTime = eventDate.getTime();

  var remTime = eventTime - currentTime;

  var s = Math.floor(remTime / 1000);
  var m = Math.floor(s / 60);
  var h = Math.floor(m / 60);
  var d = Math.floor(h / 24);

  h %= 24;
  m %= 60;
  s %= 60;

  h = (h < 10) ? "0" + h : h;
  m = (m < 10) ? "0" + m : m;
  s = (s < 10) ? "0" + s : s;

  document.getElementById("days").textContent = d;
  document.getElementById("hours").textContent = h;
  document.getElementById("minutes").textContent = m;
  document.getElementById("seconds").textContent = s;

  setTimeout(countdown, 1000);
}

countdown();

4. 绘制精美彩色闪灯圣诞树HTML+CSS+SVG代码：

<div class="tree">
  <div class="tree-top"></div>
  <div class="tree-body">
    <div class="tree-layer"></div>
    <div class="tree-layer"></div>
    <div class="tree-layer"></div>
    <div class="tree-layer"></div>
    <div class="tree-layer"></div>
    <div class="tree-layer"></div>
    <div class="tree-layer"></div>
    <div class="tree-layer"></div>
    <div class="tree-layer"></div>
    <div class="tree-layer"></div>
  </div>
</div>

.tree {
  position: relative;
  width: 0;
  height: 0;
  margin: 0 auto;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid green;
}

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

.tree-body {
  position: absolute;
  top: 0;
  left: -50px;
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 50px solid green;
}

.tree-layer {
  position: relative;
  width: 0;
  height: 0;
  margin: 0 auto;
  border-left: 45px solid transparent;
  border-right: 45px solid transparent;
  border-bottom: 40px solid red;
  transform: translateY(-30px);
}

.tree-layer:nth-child(2n) {
  border-bottom-color: yellow;
}

.tree-layer:nth-child(3n) {
  border-bottom-color: blue;
}

.tree-layer:nth-child(4n) {
  border-bottom-color: purple;
}

.tree-layer:nth-child(5n) {
  border-bottom-color: orange;
}

.tree-layer:nth-child(6n) {
  border-bottom-color: pink;
}

.tree-layer:nth-child(7n) {
  border-bottom-color: brown;
}

.tree-layer:nth-child(8n) {
  border-bottom-color: gray;
}

.tree-layer:nth-child(9n) {
  border-bottom-color: gold;
}

.tree-layer:nth-child(10n) {
  border-bottom-color: silver;
}

.tree-layer:nth-child(11n) {
  border-bottom-color: black;
}

.tree-layer:nth-child(12n) {
  border-bottom-color: white;
}

.tree-layer:nth-child(13n) {
  border-bottom-color: cyan;
}

.tree-layer:nth-child(14n) {
  border-bottom-color: magenta;
}

.tree-layer:nth-child(15n) {
  border-bottom-color: lime;
}

.tree-layer:nth-child(16n) {
  border-bottom-color: teal;
}

.tree-layer:nth-child(17n) {
  border-bottom-color: navy;
}

.tree-layer:nth-child(18n) {
  border-bottom-color: olive;
}

.tree-layer:nth-child(19n) {
  border-bottom-color: maroon;
}

.tree-layer:nth-child(20n) {
  border-bottom-color: fuchsia;
}

5. 绘制精美彩色闪灯圣诞树JS代码：

var tree = document.querySelector('.tree');
var lights = document.createElement('div');
lights.classList.add('lights');
tree.appendChild(lights);

for (var i = 0; i < 50; i++) {
  var light = document.createElement('div');
  light.classList.add('light');
  light.style.animationDelay = Math.random() * 10 + 's';
  lights.appendChild(light);
}