Yan Home

右键菜单

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      .container1 {
        width: 200px;
        height: 200px;
        background: pink;
        float: left;
      }

      .container2 {
        width: 300px;
        height: 300px;
        background: #008c8c;
        float: right;
      }

      .context-menu {
        position: fixed;
        left: 500px;
        top: 200px;
        border: 1px solid #ccc;
        padding: 10px;
        line-height: 2;
        min-width: 200px;
        background: #fff;
        display: none;
      }

      .context-menu ul {
        margin: 0;
        padding: 0;
        list-style: none;
      }
    </style>
  </head>

  <body>
    <div class="container1"></div>
    <div class="container2"></div>

    <div class="context-menu">
      <ul>
        <li>菜单1</li>
        <li>菜单2</li>
        <li>菜单3</li>
        <li>菜单4</li>
        <li>菜单5</li>
        <li>菜单6</li>
        <li>菜单7</li>
        <li>菜单8</li>
        <li>菜单9</li>
        <li>菜单10</li>
      </ul>
    </div>

    <script>
      var div1 = document.querySelector(".container1");
      var div2 = document.querySelector(".container2");
      var menu = document.querySelector(".context-menu");

      div1.oncontextmenu = div2.oncontextmenu = function (e) {
        e.preventDefault();
        menu.style.display = "block";
        menu.style.left = e.clientX + "px";
        menu.style.top = e.clientY + "px";
      };

      window.onmousedown = function () {
        menu.style.display = "none";
        console.log("window.mousedown");
      };
    </script>
  </body>
</html>

许愿墙

思路:

初始-创建便利贴 createWish(content)
便利贴拖拽使用pageX来计算,movementX是会根据电脑分辨率缩放的。
窗口变化
计算出缩放因子: oldLeft/oldLeft+oldRight
应该补偿给左侧的距离 = 缩放后的dx * 缩放因子 newLeft = oldLeft + 补偿给左侧的距离
随机颜色和随机位置颜色: background:rgb(getRandom(80,255),getRandom(80,255),getRandom(80,255)); 位置: left = getRandom(0,maxLeft); top = getRandom(0,maxTop);

const getRandom = (min, max) => {
  return Math.floor(Math.random() * (max - min + 1) + min);
};

实现代码 :::codeGroup

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <link rel="stylesheet" href="index.css" />
  </head>

  <body>
    <div id="container"></div>
    <input type="text" placeholder="请输入你的愿望" />
    <script src="index.js"></script>
  </body>
</html>

css

body,
p {
  margin: 0;
}

.paper {
  width: 170px;
  height: 170px;
  background: rgb(243, 168, 168);
  border-radius: 5px;
  box-sizing: border-box;
  padding: 20px;
  position: fixed;
  left: 100px;
  top: 100px;
  cursor: move;
}

.paper span {
  cursor: pointer;
  position: absolute;
  right: 5px;
  top: 5px;
}

input {
  position: fixed;
  width: 300px;
  height: 40px;
  padding: 0 10px;
  border: 1px solid #aaa;
  font-size: 20px;
  border-radius: 5px;
  left: 0;
  right: 0;
  margin: 0 auto;
  bottom: 30px;
}

var zIndex = 1;
var container = document.getElementById("container");
var paperWidth = 170,
  paperHeight = 170;
var vWidth = document.documentElement.clientWidth; //视口宽度
var vHeight = document.documentElement.clientHeight; //视口宽度
var input = document.querySelector("input");
//实现拖拽功能
window.onmousedown = function (e) {
  var div = getMoveDiv(e.target);
  if (!div) {
    return;
  }
  div.style.zIndex = zIndex;
  zIndex++;
  var style = getComputedStyle(div);
  var divLeft = parseFloat(style.left);
  var divTop = parseFloat(style.top);
  var pageX = e.pageX;
  var pageY = e.pageY;
  window.onmousemove = function (e) {
    var disX = e.pageX - pageX;
    var disY = e.pageY - pageY;
    var newLeft = divLeft + disX;
    var newTop = divTop + disY;
    if (newLeft < 0) {
      newLeft = 0;
    }
    if (newLeft > document.documentElement.clientWidth - paperWidth) {
      newLeft = document.documentElement.clientWidth - paperWidth;
    }
    if (newTop < 0) {
      newTop = 0;
    }
    if (newTop > document.documentElement.clientHeight - paperHeight - 80) {
      newTop = document.documentElement.clientHeight - paperHeight - 80;
    }
    div.style.left = newLeft + "px";
    div.style.top = newTop + "px";
  };

  window.onmouseup = window.onmouseleave = function () {
    window.onmousemove = null;
  };
};

//实现关闭功能
window.onclick = function (e) {
  if (
    e.target.parentElement &&
    e.target.parentElement.className === "paper" &&
    e.target.tagName === "SPAN"
  ) {
    e.target.parentElement.remove();
  }
};

/**
 * 得到可移动的div
 */
function getMoveDiv(dom) {
  if (dom.className === "paper") {
    return dom;
  } else if (
    dom.parentElement &&
    dom.parentElement.className === "paper" &&
    dom.tagName === "P"
  ) {
    return dom.parentElement;
  }
}

/**
 * 创建一个愿望
 * @param {*} words
 */
function createWish(words) {
  var div = document.createElement("div");
  div.className = "paper";
  div.innerHTML = `<p>${words}</p><span>X</span>`;
  //设置颜色
  div.style.background = `rgb(${getRandom(100, 200)}, ${getRandom(100, 200)}, ${getRandom(100, 200)})`;
  //设置位置
  var maxLeft = document.documentElement.clientWidth - paperWidth;
  var maxTop = document.documentElement.clientHeight - paperHeight - 80;
  div.style.left = getRandom(0, maxLeft) + "px";
  div.style.top = getRandom(0, maxTop) + "px";

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

function createInitPapers() {
  var arr = ["世界和平", "发财暴富"];
  arr.forEach(function (item) {
    createWish(item);
  });
}

window.onresize = function () {
  //重新调整所有的div.paper的位置
  var disX = document.documentElement.clientWidth - vWidth;
  var disY = document.documentElement.clientHeight - vHeight;
  for (var i = 0; i < container.children.length; i++) {
    var paper = container.children[i];
    //改变paper的left值
    var left = parseFloat(paper.style.left);
    var right = vWidth - paperWidth - left;
    var newLeft = left + (left / (left + right)) * disX;
    paper.style.left = newLeft + "px";

    //改变paper的top值
    var top = parseFloat(paper.style.top);
    var bottom = vHeight - paperHeight - top;
    var newTop = top + (top / (top + bottom)) * disY;
    paper.style.top = newTop + "px";
  }
  vWidth = document.documentElement.clientWidth;
  vHeight = document.documentElement.clientHeight;
};

input.onkeypress = function (e) {
  if (e.key === "Enter") {
    if (this.value) {
      createWish(this.value);
      this.value = "";
    }
  }
};

createInitPapers();

:::

另一种思路：面向对象

将每一个Note看成一个对象，每个对象拥有自己的一些属性和行为。
将这些对象存放在一个数组集合中，创建就new Note()即可。

class Note {
    id:"",//id标识
    content:"",//心愿内容
    point:{x:0,y:0},//坐标点
    show(){},//更新自己坐标点
    remove(){},//移除自己
}

右键菜单 ​

许愿墙 ​

右键菜单

许愿墙