HTML+JavaScript为网页添一点小功能【尼尔机械纪元】

功能一：添加了图片转换功能

let myImage = document.querySelector('img');
myImage.onclick = function() {//将函数和事件绑定
    let mySrc = myImage.getAttribute('src');//将图片的路径赋值给变量名mySrc
    if(mySrc === 'images/[Thumb]640797182467-d3e67264-b3d8-48bb-afb4-ac821.png') {//判断次路径是否和第一张图片一致，若一致则换为另一张图片
      myImage.setAttribute('src', 'images/002946.png');
    } else {
      myImage.setAttribute('src', 'images/[Thumb]640797182467-d3e67264-b3d8-48bb-afb4-ac821.png');
    }
}//一个图片转换器，点击原有图片就会转换成另一张

功能二：添加“切换用户”的选项
在自己的JavaScript文件mian.js中添加代码

let myButton = document.querySelector('button');
let myHeading = document.querySelector('h1');//将获取新按钮和标题的引用，并保存至变量中：
function setUserName() {//定义用户名函数
    let myName = prompt('请输入你的名字。');//prompt函数的功能和alert()的功能一样：弹出一个对话框
    localStorage.setItem('name', myName);//这里用 localStorage 的 setItem() 函数来创建一个'name' 数据项，并把 myName 变量复制给它
    myHeading.textContent = 'NIER 酷毙了，' + myName;
  }

if(!localStorage.getItem('name')) {//检测 'name' 数据是否存在。若不存在，调用 setUserName() 创建。若存在（即用户上次访问时设置过），调用 getItem() 获取保存的名字
    setUserName();
  } else {
    let storedName = localStorage.getItem('name');
    myHeading.textContent = 'NIER 酷毙了，' + storedName;
  }

  myButton.onclick = function() {//事件函数，点击以后就进入到了函数setUserName()
    setUserName();
 }
 function setUserName() {//点击取消可以防止函数出现null情况，因为这事JavaScript的特性
    let myName = prompt('请输入你的名字。');
    if(!myName || myName === null) {
      setUserName();
    } else {
      localStorage.setItem('name', myName);
      myHeading.innerHTML = 'NIER 酷毙了，' + myName;
    }
  }

然后还要在自己的html文件下添加

<button>切换用户</button>

最终结果就变成

点击图片：

点击切换用户按钮: