翻转创意的魔法师：探索JavaScript实训中的随机生成头像功能

吾虽二十，未有谋生之苦，亦有人间之愁。今观先生之文，不禁心生赞叹。忽忆王将军《兰亭集序》之作，虽时代不同，但情感相通。后人观之，亦能感受其中的情思。尽管难以理解先生所经历的艰辛，但仍不禁泪下。作为不才的后辈，身怀热血，怀揣着凌云之志和报国之心，愿同行于滕王阁，留下名篇，传颂千古。虽然我们不能与先生相提并论，但从他的言行和志向中，仍能汲取勇气和力量。东方已逝，夕阳仍未晚照，我们不应自谦唐突，而是等待时机的到来，冲破重重困难的浪潮！

引言

我们实现了一个随机生成头像的功能，能够为每一条留言赋予一个独特的头像。这样，页面就不再单调，每个用户都有自己独特的形象。然后代码写的有点粗糙，但是可以勉强看看（主要是体现JS，CSS就没有太在意）。

没有任何发帖的界面

发帖后的界面

使用技术

1. HTML和CSS：我们利用HTML和CSS布局和设计了网页的结构和样式，包括帖子列表和头像的展示。

2. JavaScript：我们使用JavaScript编写了生成随机头像的逻辑。通过随机选择头像库中的图片，我们实现了每次加载页面时都生成一个唯一的头像。

3. DOM操作：通过JavaScript中的DOM操作，我们将生成的头像插入到帖子列表中的每一条帖子中。

具体实现代码

1. 随机生成头像功能的实现

为了实现随机生成头像的功能，我们使用了getRandomAvatar函数。该函数从一个头像URL数组中随机选择一个头像，并返回该URL。这样，每当调用getRandomAvatar函数时，都会获得一个不同的随机头像。（可是这个我不知道为什么没有显示出来）😥

function getRandomAvatar() {
  const avatars = [
    'https://cn.bing.com/images/search?view=detailV2&ccid=JPKI0PCe&id=A200409163DB07A8C7199F605403C347B3A7A9DA&thid=OIP.JPKI0PCenvLegSa7lkQQjwAAAA&mediaurl=https%3a%2f%2fts1.cn.mm.bing.net%2fth%2fid%2fR-C.24f288d0f09e9ef2de8126bb9644108f%3frik%3d2qmns0fDA1Rgnw%26riu%3dhttp%253a%252f%252fimg.name2012.com%252fuploads%252fallimg%252f180421%252f005S22550-11.jpg%26ehk%3dFGcYQnAuN256DyHhc4kK1%252fBJODf2r5%252boop54AhYWk2Q%253d%26risl%3d%26pid%3dImgRaw%26r%3d0&exph=400&expw=400&q=%e5%a4%b4%e5%83%8f&simid=608005191696727085&FORM=IRPRST&ck=0918214C3E0B5850B1367503E2B90C13&selectedIndex=0',
    'https://cn.bing.com/images/search?view=detailV2&ccid=JPKI0PCe&id=A200409163DB07A8C7199F605403C347B3A7A9DA&thid=OIP.JPKI0PCenvLegSa7lkQQjwAAAA&mediaurl=https%3a%2f%2fts1.cn.mm.bing.net%2fth%2fid%2fR-C.24f288d0f09e9ef2de8126bb9644108f%3frik%3d2qmns0fDA1Rgnw%26riu%3dhttp%253a%252f%252fimg.name2012.com%252fuploads%252fallimg%252f180421%252f005S22550-11.jpg%26ehk%3dFGcYQnAuN256DyHhc4kK1%252fBJODf2r5%252boop54AhYWk2Q%253d%26risl%3d%26pid%3dImgRaw%26r%3d0&exph=400&expw=400&q=%e5%a4%b4%e5%83%8f&simid=608005191696727085&FORM=IRPRST&ck=0918214C3E0B5850B1367503E2B90C13&selectedIndex=0',
    'https://cn.bing.com/images/search?view=detailV2&ccid=JPKI0PCe&id=A200409163DB07A8C7199F605403C347B3A7A9DA&thid=OIP.JPKI0PCenvLegSa7lkQQjwAAAA&mediaurl=https%3a%2f%2fts1.cn.mm.bing.net%2fth%2fid%2fR-C.24f288d0f09e9ef2de8126bb9644108f%3frik%3d2qmns0fDA1Rgnw%26riu%3dhttp%253a%252f%252fimg.name2012.com%252fuploads%252fallimg%252f180421%252f005S22550-11.jpg%26ehk%3dFGcYQnAuN256DyHhc4kK1%252fBJODf2r5%252boop54AhYWk2Q%253d%26risl%3d%26pid%3dImgRaw%26r%3d0&exph=400&expw=400&q=%e5%a4%b4%e5%83%8f&simid=608005191696727085&FORM=IRPRST&ck=0918214C3E0B5850B1367503E2B90C13&selectedIndex=0',
    // 更多头像URL
  ];

  const randomIndex = Math.floor(Math.random() * avatars.length);
  return avatars[randomIndex];
}

2. 获取当前时间功能的实现

为了获取当前时间，我们使用了getCurrentTime函数。该函数创建一个Date对象表示当前时间，然后使用toLocaleString方法将其转换为指定的时间格式。通过调整options选项，我们可以自定义所需的时间显示格式。

function getCurrentTime() {
  const now = new Date();
  const options = { year: 'numeric', month: 'long', day: 'numeric', hour: 'numeric', minute: 'numeric' };
  return now.toLocaleString('en-US', options);
}

3. 发帖逻辑功能的实现

在发帖逻辑中，我们为"发表"按钮添加了onclick事件，点击按钮会触发publishPost函数。该函数首先获取用户在帖子内容输入框中输入的内容。然后，调用getRandomAvatar函数获取随机头像的URL，调用getCurrentTime函数获取当前时间。

function publishPost() {
  const postContentInput = document.getElementById('postContent');
  const postContent = postContentInput.value;

  // 调用 getRandomAvatar 函数获取随机头像的 URL
  const avatar = getRandomAvatar();
  // 调用 getCurrentTime 函数获取当前时间
  const currentTime = getCurrentTime();

  // 创建帖子的 HTML 元素
  const postElement = document.createElement('div');
  postElement.classList.add('post');

  const postHeader = document.createElement('div');
  postHeader.classList.add('post-header');
  postHeader.innerHTML = `<img src="${avatar}" alt="Avatar" class="avatar">${postContent}`;

  const postFooter = document.createElement('div');
  postFooter.classList.add('post-footer');
  postFooter.textContent = currentTime;

  postElement.appendChild(postHeader);
  postElement.appendChild(postFooter);

  // 将新创建的帖子元素添加到帖子列表中
  const postList = document.getElementById('postList');
  postList.appendChild(postElement);

  // 重置帖子内容输入框
  postContentInput.value = "";
}

总结

通过以上代码的实现，我们成功创建了一个带有发帖功能的页面。用户可以输入帖子内容，并点击"发表"按钮将帖子添加到帖子列表中。随机生成头像和获取当前时间的功能通过相应的函数实现，并在发帖逻辑中被调用。当用户点击"发表"按钮时，会触发publishPost函数，将帖子内容、随机头像和当前时间添加到帖子列表中，并且重置帖子内容输入框。

GitHub访问不进去，我就放到了另一个仓库，点击访问