许愿墙效果

最新推荐文章于 2022-10-25 21:58:56 发布

原创最新推荐文章于 2022-10-25 21:58:56 发布 · 1.2k 阅读

14 ·

CC 4.0 BY-SA版权

文章标签：

#js实现许愿墙 #拖动效果

js实例专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何利用JavaScript技术创建一个动态的许愿墙，包括用户可以方便地拖动心愿进行交互的功能。通过理解DOM操作和事件监听，你可以创建一个吸引人的、用户友好的许愿墙应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .container {
      position: fixed;
      left: 0;
      right: 0;
      top: 0;
      bottom: 150px;
    }

    .item {
      position: absolute;
      box-sizing: border-box;
      width: 170px;
      height: 170px;
      padding: 15px;
      border-radius: 5px;
      cursor: move;
      background-color: lightblue;
    }

    .close {
      position: absolute;
      font-style: normal;
      right: 5px;
      top: 5px;
      cursor: pointer;
    }

    .text {
      font-size: 1.2em;
      padding: 0 10px;
      width: 250px;
      height: 40px;
      bottom: 40px;
      position: fixed;
      left: 0;
      right: 0;
      margin: auto;
      border-radius: 5px;
      border: 1px solid #aaa;
      outline: none;
    }
  </style>
</head>

<body>
  <div class="container" id="container">
    <!-- <div class="item">
      <div class="text">
        秦时明月汉时关，万里长征人未还。但使龙城飞将在，不教胡马度阴山
      </div>
      <i class="close">X</i>
    </div> -->
  </div>
  <input type="text" id="txtWish" placeholder="许个愿吧" class="text">
  <script src="./script/Untitled-1.js"></script>
</body>

</html>

function getRandom(min, max) {
  return Math.floor(Math.random() * (max - min) + min);
}

let container = document.getElementById('container');
let nextZIndex = 1;

function createWish(content) {
  // 生成元素
  let itemDiv = document.createElement('div');
  itemDiv.className = 'item';

  let textDiv = document.createElement('div');
  textDiv.className = 'item-text';
  textDiv.innerText = content;

  let closeI = document.createElement('i');
  closeI.className = 'close';
  closeI.innerText = 'X';

  container.appendChild(itemDiv);
  itemDiv.appendChild(textDiv);
  itemDiv.appendChild(closeI);
  
  //随机背景（颜色不能太深）
  let r = getRandom(150, 256);
  let g = getRandom(150, 256);
  let b = getRandom(150, 256);

  itemDiv.style.backgroundColor = `rgb(${r},${g},${b})`;

  // 随机位置
  // 生成的 top 最大为 container 的最大高度 - item 的高度
  // 生成的 left 最大为 container 的最大宽度 - item 的宽度
  let maxTop = container.clientHeight - 170;
  itemDiv.style.top = `${getRandom(0, maxTop)}px`;

  let maxLeft = container.clientWidth - 170;
  itemDiv.style.left = `${getRandom(0, maxLeft)}px`;


  // 删除 item
  closeI.addEventListener('click', () => {
    itemDiv.remove();
  })
  
  // 拖动效果
  itemDiv.onmousedown = function (e) {
    // div要跑到最前面
    itemDiv.style.zIndex = nextZIndex;
    nextZIndex++;
    // 按下时，鼠标的坐标
    var x1 = e.clientX,
      y1 = e.clientY; 
    // 按下时，元素的坐标
    var a1 = parseFloat(itemDiv.style.left), 
      b1 = parseFloat(itemDiv.style.top); 
    // 鼠标按下的时候，监控鼠标移动
    window.onmousemove = function (e) {
      // 移动了一段后，鼠标的坐标
      var x2 = e.clientX,
        y2 = e.clientY; 
      // 鼠标移动的距离
      var xDis = x2 - x1; 
      var yDis = y2 - y1;

      // 元素新的坐标
      var a2 = a1 + xDis;
      var b2 = b1 + yDis;

      // 新的横纵坐标是有界限的
      if (a2 < 0) {
        a2 = 0;
      } else if (a2 > maxLeft) {
        a2 = maxLeft;
      }

      if (b2 < 0) {
        b2 = 0;
      } else if (b2 > maxTop) {
        b2 = maxTop;
      }

      itemDiv.style.left = a2 + "px";
      itemDiv.style.top = b2 + "px";
    };

    // 鼠标抬起的时候，不要监控鼠标移动
    window.onmouseup = function () {
      window.onmousemove = null;
    };
  };
}


var txtWish = document.getElementById("txtWish");
txtWish.onkeydown = function (e) {
  if (e.key !== "Enter") {
    // 按下的不是回车键
    return;
  }
  if (!txtWish.value) {
    return; // 如果没有输入内容，不做任何事情
  }
  createWish(txtWish.value);
  txtWish.value = "";
};

在这里插入图片描述