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

news/2024/10/31 1:34:48/

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

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>

最终结果就变成
在这里插入图片描述
点击图片:
在这里插入图片描述
点击切换用户按钮:
在这里插入图片描述
在这里插入图片描述


http://www.ppmy.cn/news/275721.html

相关文章

creative thoughts开源软件

转载: https://zhuanlan.zhihu.com/p/609516460 1。 IT公司研发系统系列工具打造 https://github.com/hokhyk/actionview.git 需求管理、项目管理、验收资料生成&#xff08;政府、国企与互联网公司验收资料要求不同&#xff09; 开源的网址导航网站项目WebStack-Laravel GitH…

如何在Maya中修改已经绑定后的模型的法线

前言:最近想把尼尔机械纪元的2B导入到UE中看看效果,可不知道是不是我解包的过程有问题,2B模型的裙子部分的发现有问题,而且裙子的模型还被拆分为了3个部分,直接软边是不管用的,而且已经绑定的模型就算修改了法线导出之后也没有效果, 本文分为两个部分,分别是翻译的一篇artstati…

【2018.10.10】通知

通知 最近要准备NOIP的初赛&#xff0c;没什么时间写博客&#xff0c;不好意思啊&#xff0c;短时间内都不会写博客了。 还有就是以后博客一般在周三&#xff0c;周四&#xff0c;周五以及周六发&#xff0c;平时不上课&#xff0c;请体谅。

我的读书清单

这个清单是我从大学以来读过的书以及简要的书评&#xff0c;最初是在豆瓣上写的书评&#xff0c;后来逐渐认同了读书对于自己各方面的好处&#xff0c;认认真真的读完一本好书&#xff0c;要比花同样时间去阅读网络上的碎知识或者鸡汤文章要有益的多。在这里先做一个整理&#…

UE4 射击游戏(游戏机制完善中)

Windows左方向键,视口贴到左边&#xff1b;Windows右方向键&#xff0c;视口贴到右边 一、视角切换:调整第一人称和第三人称的视角有两种方案, 1、双摄像机&#xff0c;通过使用SetActive来使能选定的相机 ​ ​ 问题是&#xff1a;这对第三人称动画的质量要求非常高 2、…

【基础知识整理】图的基本概念 邻接矩阵 邻接表

一、图概述 定义&#xff1a; 图(graph)是由一些点(vertex)和这些点之间的连线(edge)所组成的&#xff1b; 其中&#xff0c;点通常被成为"顶点(vertex)“&#xff0c;而点与点之间的连线则被成为"边或弧”(edege)。 通常记为&#xff0c;G(V,E)。 图是一种重要的…

我认为ACT游戏开发必用的程序设计模式!!!

ACT游戏以它流畅的游玩体验、华丽的招式和炸裂的打击反馈被人所喜爱&#xff0c;那么在开发ACT游戏的时候如何做到这一点呢&#xff1f;&#xff1f;&#xff1f;这一篇博客就来说说我认为在开发ACT游戏过程中一定要用到的程序设计模式&#xff01; 模式_1&#xff1a;状态模式…

为什么说“角色移动”看上去很简单,却需要极高的技术力与细节成本?

“角色移动”是大部分游戏的玩法基础。不过在游戏中&#xff0c;他看起来如此的简单自然以至于很容易被玩家所忽略掉。实际上&#xff0c;角色的移动涉及到动画、渲染、物理、同步等多项开发技术以及大量的美术工作。即使单从设计上讲&#xff0c;“角色移动”也经常会给开发者…