有些网站吧，点进入就会有新手指导，还会有下一步和退出这样的操作，看起来还是蛮高级，尝试编写一下实现这样的用户交互手段。
思想
新手指导主要思想就是在原有的界面基础上，点击按钮，添加一层蒙版，在蒙版上弹出指导语，示例如下
1.按钮
首先就是在原来界面上，添加按钮，标签如下，一个div标签，type类型为button
<div type="button" id="showContentButton" class="logohelp"> <span class="tooltip-text">用户指导</span></div>
按钮标签样式如下，其中在阿里巴巴图库中下载了一个图标，放在了static下的imgages文件夹下，并将其命名为help.jpg，并将其 background-size、background-position、 background-repeat样式重新定义，使其能够自适应
.logohelp{
margin-right: 15px;
background-image: url("../static/images/help.png");
background-size: contain;
background-position: center center;
background-repeat: no-repeat;
position: relative;
display: inline-block;
cursor: pointer;
}
2.蒙版
添加的蒙版旨在将原来的界面上蒙上一层灰色
<div id="modal" class="modal"></div>
定义其样式如下，将其display样式定义为none，自定义背景颜色
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 2;
}
3.点击按钮触发显示蒙版
触发按钮的id的click事件，将蒙版id的display样式修改为block或是空
var showGuideBtn=document.getElementById("showContentButton")
var modal = document.getElementById("modal");
showGuideBtn.addEventListener("click", function() {
modal.style.display = "block";
});
4.编写指导欢迎首句
点击按钮之后，出现蒙版，在蒙版之中就是用户指导步骤，在首句欢迎句之后，需要有下一步和退出两个按钮，并在其左侧编写运行到的步骤，代码如下
<div id="guide" class="guide">
<p id="guideText" style="margin-top: 12px;" >欢迎！这里是新手指导，跟着小安熟悉AI知识问答平台怎么使用吧</p>
<div id="buttonContainer" style="display: flex">
<div style="margin-top: 10px;color: #BBBBBB">
步骤 <span id="stepCount">0</span> / <span id="totalSteps">4</span>
</div>
<div style="float: right;margin-left: 45%">
<button id="nextStepBtn" class="guide-button1">下一步</button>
<button id="exitGuideBtn" class="guide-button2">退出</button>
</div>
</div>
</div>
样式如下
.guide {
width: 35%;
height: 20%;
display: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgba(0, 0, 0, 0.8);
color: white;
padding: 10px;
border-radius: 5px;
z-index: 3;
}
.guide.active {
display: block;
}
.guide-button1 {
background-color: #4CAF50;
color: white;
border: none;
padding: 8px 12px;
border-radius: 5px;
cursor: pointer;
margin: 6px;
}
.guide-button2 {
background-color: #F04C4C;
color: white;
border: none;
padding: 8px 12px;
border-radius: 5px;
cursor: pointer;
margin: 6px;
}
5.编写步骤
因为新手指导肯定不止一步，就需要多写几步，以下为示例，每个步骤中的text指的是步骤中的文字，top指的是距屏幕顶端的大小，left指的是距屏幕左侧的大小
var currentStep ;
var steps = [
{ text: "在这里可以输入您的问题，就可以与小安进行多轮次的对话了", top: "70%", left: "20%"},
{ text: "不知道问什么？小安总结了同事们关注的部分问答供您查看", top: "50%", left: "20%"},
{ text: "在您首次使用时请您务必阅读，小安当前的知识能力有限，我会努力学习", top: "70%", left: "80%"},
{ text: "介绍完毕！在这里可以再次见到我", top: "20%", left: "80%" },
6.编写步骤点击逻辑
由于要使用到下一步和退出，需要将步骤序列加载到guide中，需要获得当前到底进行到哪一步，主要的几个需要注意的点如下
- 在每次点击显示蒙版时，需要将步骤序列加载到guide中，将步骤归零
- 点击下一步之后，将步骤加1
- 当步骤大于总的步骤数目时，直接退出蒙版，需要将步骤序列消除到guide中
var showGuideBtn=document.getElementById("showContentButton")
var guide = document.getElementById("guide");
var modal = document.getElementById("modal");
var stepCount = document.getElementById("stepCount");
var totalSteps = document.getElementById("totalSteps");
var guideText = document.getElementById("guideText");
var nextStepBtn = document.getElementById("nextStepBtn");
var exitGuideBtn = document.getElementById("exitGuideBtn");
var buttonContainer = document.getElementById("buttonContainer");
showGuideBtn.addEventListener("click", function() {
currentStep=0
guide.classList.add("active");
modal.style.display = "block";
});
nextStepBtn.addEventListener("click", function() {
if (currentStep < steps.length ) {
updateGuideContent()
} else {
currentStep = 0;
modal.style.display = "none";
guide.classList.remove("active");
}
});
exitGuideBtn.addEventListener("click", function() {
guide.classList.remove("active");
modal.style.display = "none";
currentStep = 0;
});
function updateGuideContent() {
if(currentStep<steps.length){
circle.style.display = "block";
guideText.textContent = steps[currentStep].text;
guide.style.top = steps[currentStep].top;
guide.style.left = steps[currentStep].left;
currentStep++;
stepCount.textContent = currentStep;
totalSteps.textContent = steps.length;
}
else{
currentStep=0;
updateGuideContent()
}
}
```
7.添加箭头指示
毕竟没有箭头，新手指导就没有什么卵用啦，所以我们需要添加一个箭头指示
<div id="circle" class="circle"></div>
添加箭头样式，其中使用::before添加小箭头，也可以更换箭头方向
.circle{
position: absolute;
width: 35px;
height: 35px;
background-color: white;
border-radius: 50%;
display: none;
}
.circle::before {
content: "";
position: absolute;
top: 50%;
right: -20px; /* 将箭头放在右侧 */
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid #f0f0f0; /* 调整颜色以匹配背景 */
transform: translateY(-50%);
}
其中，箭头需要从第一步开始显示，并且需要跟随步骤变换其位置，其中箭头的top和left是相对于指示框来说的，代码如下：
var circle = document.getElementById("circle");
var steps = [
{ text: "在这里可以输入您的问题，就可以与小安进行多轮次的对话了", top: "70%", left: "20%",cir_top:'115%',cir_left:'15%'},
{ text: "不知道问什么？小安总结了同事们关注的部分问答供您查看", top: "50%", left: "20%",cir_top:'-50%',cir_left:'8%'},
{ text: "在您首次使用时请您务必阅读，小安当前的知识能力有限，我会努力学习", top: "70%", left: "80%",cir_top:'123%',cir_left:'85%'},
{ text: "介绍完毕！在这里可以再次见到我", top: "20%", left: "80%" ,cir_top:'-45%',cir_left:'65%'},
];
showGuideBtn.addEventListener("click", function() {
currentStep=0
guide.classList.add("active");
circle.style.display = "none";
if(currentStep>0){
circle.style.display = "block";
}
modal.style.display = "block";
});
nextStepBtn.addEventListener("click", function() {
if (currentStep < steps.length ) {
console.log(currentStep)
updateGuideContent()
} else {
currentStep = 0;
modal.style.display = "none";
guide.classList.remove("active");
}
});
exitGuideBtn.addEventListener("click", function() {
guide.classList.remove("active");
modal.style.display = "none";
circle.style.display = "none";
currentStep = 0;
});
function updateGuideContent() {
if(currentStep<steps.length){
circle.style.display = "block";
guideText.textContent = steps[currentStep].text;
guide.style.top = steps[currentStep].top;
guide.style.left = steps[currentStep].left;
circle.style.top = steps[currentStep].cir_top;
circle.style.left =steps[currentStep].cir_left;
currentStep++;
stepCount.textContent = currentStep;
totalSteps.textContent = steps.length;
}
else{
currentStep=0;
updateGuideContent()
}
}
运行之后我们发现点击退出之后，或是重新点击按钮出现蒙版，每次都会显示最后出现的那个步骤，我们查看点击按钮触发的那个函数，发现重新定义currentStep=0了，应该是没问题的，但是我们需要重新将guide列表进行替换
showGuideBtn.addEventListener("click", function() {
currentStep=0
guide.classList.add("active");
guideText.textContent ="欢迎！这里是新手指导，跟着小安熟悉AI知识问答平台怎么使用吧";
guide.style.top ="50%";
guide.style.left = "50%";
stepCount.textContent = currentStep;
totalSteps.textContent = steps.length;
console.log(currentStep)
circle.style.display = "none";
if(currentStep>0){
circle.style.display = "block";
}
modal.style.display = "block";
});
总结
以上，就是HTML编写的新手指导啦，本人之前主要是使用vue，HTML实在也算是小新手，请大家多多指教奥
493
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
