功能一:添加了图片转换功能
let myImage = document.querySelector('img');
myImage.onclick = function() {//将函数和事件绑定let mySrc = myImage.getAttribute('src');//将图片的路径赋值给变量名mySrcif(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>
最终结果就变成
点击图片:
点击切换用户按钮: