前端项目小结

今天又是周日，星期我来了，这个博客主要想说一下关于在写项目时需要在项目本身外的一点小细节

项目主题

在写一个项目之前一定要注意自己的项目主题风格，当然如果在甲方爸爸给定的模板下写主题就不用考虑了，但当并没有给定模板方案时，就需要去确定我们项目面向的对象是谁，例如：当我们的对象是当代年轻人，项目多点风趣和画面感是吸引他们的重要工具，而如果适用对象含有老年或者年长者，就需要将他们也考虑在内，考虑字体的大小，减少一些饶人心乱的动画可能会让这类用户的体验感提升。

项目的体验感

项目的整体体验感是和整个项目是否受欢迎相联系的，对于项目而言提升用户的体验感

1.响应速度：减少加载时间。优化服务器和前端代码；

2.用户界面设计：设计一个简洁、直观和易用的用户界面。使用一致的布局和导航结构

3.错误处理和反馈：提供明确的错误提示和反馈信息，以帮助用户解决问题或避免错误。合理处理用户输入和操作，提供有意义的错误消息，并尽量避免让用户感到困惑或失望。

本次项目我们是使用axios和nodeJs相结合的运行环境

下面是关于如何实现点击出现图片的特效

//生成随机颜色
function getRandomColor() {
  let letters = '0123456789ABCDEF';
  let color = '#';
  for (let i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

const body = document.body;

body.onclick = function (event) {
  event.stopPropagation();
  let x = event.pageX;
  let y = event.pageY;
  // 获取svg图标
  let music = document.querySelectorAll('.icon');
  // 随机读取其中的一个
  let randomMusic = Math.floor(Math.random() * music.length);
  let moveNode = music[randomMusic].cloneNode(true);
  moveNode.style.position = 'absolute';
  moveNode.style.left = x - 20 + 'px';
  moveNode.style.top = y - 20 + 'px';
  body.appendChild(moveNode);

  // 获取svg下的path路径
  let color = getRandomColor();
  const paths = moveNode.querySelectorAll('path');
  for (let i = 0; i < paths.length; i++) {
    paths[i].setAttribute('fill', color);
  }

  let moveTime = setTimeout(() => {
    moveNode.style.opacity = 0;
    clearTimeout(moveTime);
  }, 1900);

  let i = 0;
  let riseTime = setInterval(() => {
    moveNode.style.top = parseInt(moveNode.style.top) - 2 + 'px';
    i++;
    if (i >= 20) {
      clearInterval(riseTime);
      body.removeChild(moveNode);
    }
  }, 10);

};

这周人活就四个字，注意主题！！！