未来之窗昭和仙君(九十三)用户指引自助教学源码—东方仙盟

代码!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta http-equivX-UA-Compatible contentIEedge,chrome1 title你的导师-未来之窗/title style *{margin:0;padding:0;box-sizing:border-box;} body{padding:50px 80px;font-family: Microsoft YaHei, sans-serif;} .title{ font-size: 30px; font-weight: bold; color: #222; text-align: center; margin-bottom: 8px; } .subtitle{ font-size: 18px; color: #666; text-align: center; margin-bottom: 50px; } .btn-item{ display:inline-block; padding:14px 30px; margin:15px; background:#1976d2; color:#fff; border:0; border-radius:6px; font-size:15px; cursor:pointer; position:relative; z-index:99998; } .inp-item{ padding:12px; width:260px; margin:15px; border:1px solid #ccc; border-radius:6px; font-size:15px; position:relative; z-index:99998; } .tab-box{margin:20px 15px;position:relative;z-index:99998;} .tab-btn{padding:10px 20px;background:#eee;border:none;margin-right:5px;cursor:pointer;border-radius:4px;} .tab-btn.active{background:#1976d2;color:#fff;} .tab-con{padding:20px;border:1px solid #ccc;margin-top:10px;width:300px;} .tab-item{display:none;} .tab-item.show{display:block;} /style /head body div classtitle你的导师-未来之窗/div div classsubtitle教操一体化/div button classbtn-item data-step1 onclickalert(点击按钮1成功)按钮1/button button classbtn-item data-step2 onclickalert(点击按钮2成功)按钮2/button input typetext classinp-item data-step3 placeholder请输入内容 div classtab-box data-step4 button classtab-btn active onclickchangeTab(1)标签一/button button classtab-btn onclickchangeTab(2)标签二/button div classtab-con div classtab-item show idtab1标签一内容/div div classtab-item show idtab2标签二内容/div /div /div button classbtn-item data-step5 onclickalert(最后一步按钮)结束按钮/button br button stylemargin:10px;padding:8px 16px; onclickGuideModule.setGuide(guideSteps);GuideModule.startRange(1)从头开始(1到结束)/button button stylemargin:10px;padding:8px 16px; onclickGuideModule.setGuide(guideSteps);GuideModule.startRange(3)从第3步开始到结束/button button stylemargin:10px;padding:8px 16px; onclickGuideModule.setGuide(guideSteps);GuideModule.startRange(2,4)区间2~4步/button script function changeTab(id){ var tabs document.getElementsByClassName(tab-item); var btns document.getElementsByClassName(tab-btn); for(var i0;itabs.length;i){ tabs[i].className tab-item; btns[i].className tab-btn; } document.getElementById(tabid).className tab-item show; btns[id-1].className tab-btn active; } var guideSteps [ { selector: [data-step1], text: 请点击此按钮, checkClick: true }, { selector: [data-step2], text: 点击第二个功能按钮, checkClick: true }, { selector: [data-step3], text: 请在输入框填写内容, checkFill: true }, { selector: [data-step4], text: 点击区域切换标签, checkClick: true }, { selector: [data-step5], text: 点击完成按钮, checkClick: true } ]; var GuideModule (function(){ var stepList []; var curIndex 0; var endLimitIndex 0; var mask, highlightBox, tipsBox; var prevBtn, nextBtn; var styleNode null; var targetEl null; var lastTargetEl null; var areaClickFlag false; function loadGuideStyle(){ if(styleNode) return; var css .guide-mask{ position:fixed;top:0;left:0;width:100%;height:100%; background:rgba(0,0,0,0.75);z-index:99997; pointer-events:auto; } .highlight-box{ position:fixed;box-shadow:0 0 12px 4px #fff;border-radius:4px; pointer-events:none;z-index:99999; } .guide-tips{ position:fixed;padding:18px;background:#fff;border-radius:8px; z-index:100000;min-width:280px;pointer-events:auto; } .guide-tips .text{font-size:14px;color:#333;margin-bottom:15px;} .guide-tips .btn-box{text-align:right;} .guide-tips .tip-btn{padding:6px 14px;margin-left:8px;border:0;border-radius:4px;cursor:pointer;} .tip-prev{background:#eee;} .tip-next{background:#1976d2;color:#fff;} .tip-close{background:#666;color:#fff;} ; styleNode document.createElement(style); styleNode.type text/css; styleNode.innerHTML css; document.head.appendChild(styleNode); } function createDom(){ loadGuideStyle(); areaClickFlag false; mask document.createElement(div); mask.className guide-mask; document.body.appendChild(mask); highlightBox document.createElement(div); highlightBox.className highlight-box; document.body.appendChild(highlightBox); tipsBox document.createElement(div); tipsBox.className guide-tips; tipsBox.innerHTML div classtext/div div classbtn-box button classtip-btn tip-prev上一步/button button classtip-btn tip-next下一步/button button classtip-btn tip-close关闭/button /div; document.body.appendChild(tipsBox); prevBtn tipsBox.querySelector(.tip-prev); nextBtn tipsBox.querySelector(.tip-next); prevBtn.onclick prevStep; nextBtn.onclick checkNextStep; tipsBox.querySelector(.tip-close).onclick closeGuide; } function checkNextStep(){ var currStep stepList[curIndex]; if(currStep.checkClick !areaClickFlag){ alert(请先点击当前指引区域再进行下一步); return; } if(currStep.checkFill){ var inputVal (targetEl.value || ).trim(); if(inputVal ){ alert(请先填写输入框内容再进行下一步); return; } } goNext(); } function goNext(){ curIndex; if(curIndex endLimitIndex){ closeGuide(); return; } renderStep(); } function updateBtnStatus(){ prevBtn.style.display curIndex 0 ? none : inline-block; nextBtn.innerText (curIndex endLimitIndex) ? 完成 : 下一步; } function renderStep(){ if(lastTargetEl){ // 不清理 z-index保持可点 } areaClickFlag false; var step stepList[curIndex]; targetEl document.querySelector(step.selector); if(!targetEl) return; // 监听目标元素点击自动标记完成 targetEl.addEventListener(click, function(){ areaClickFlag true; }); var rect targetEl.getBoundingClientRect(); highlightBox.style.left rect.left px; highlightBox.style.top rect.top px; highlightBox.style.width rect.width px; highlightBox.style.height rect.height px; tipsBox.querySelector(.text).innerText step.text; tipsBox.style.left rect.left px; tipsBox.style.top rect.bottom 15 px; updateBtnStatus(); } function prevStep(){ if(curIndex 0) return; curIndex--; renderStep(); } function closeGuide(){ if(mask) mask.remove(); if(highlightBox) highlightBox.remove(); if(tipsBox) tipsBox.remove(); if(styleNode) styleNode.remove(); mask highlightBox tipsBox styleNode targetEl lastTargetEl null; curIndex 0; endLimitIndex 0; } function setGuide(steps){ stepList steps; } function startRange(startNum, endNum){ if(!stepList || stepList.length 0) return; var total stepList.length - 1; curIndex Math.max(startNum - 1, 0); endLimitIndex (endNum null) ? total : Math.min(endNum - 1, total); if(curIndex endLimitIndex) return; lastTargetEl null; createDom(); renderStep(); } function start(){ startRange(1); } return { setGuide: setGuide, start: start, startRange: startRange, close: closeGuide }; })(); /script /body /html人人皆为创造者共创方能共成长每个人都是使用者也是创造者是数字世界的消费者更是价值的生产者与分享者。在智能时代的浪潮里单打独斗的发展模式早已落幕唯有开放连接、创意共创、利益共享才能让个体价值汇聚成生态合力让技术与创意双向奔赴实现平台与伙伴的快速成长、共赢致远。原创永久分成共赴星辰大海原创创意共创、永久收益分成是东方仙盟始终坚守的核心理念。我们坚信每一份原创智慧都值得被尊重与回馈以永久分成锚定共创初心让创意者长期享有价值红利携手万千伙伴向着科技星辰大海笃定前行拥抱硅基 生命与数字智能交融的未来共筑跨越时代的数字文明共同体。东方仙盟拥抱知识开源共筑数字新生态在全球化与数字化浪潮中东方仙盟始终秉持开放协作、知识共享的理念积极拥抱开源技术与开放标准。我们相信唯有打破技术壁垒、汇聚全球智慧才能真正推动行业的可持续发展。开源赋能中小商户通过将前端异常检测、跨系统数据互联等核心能力开源化东方仙盟为全球中小商户提供了低成本、高可靠的技术解决方案让更多商家能够平等享受数字转型的红利。共建行业标准我们积极参与国际技术社区与全球开发者、合作伙伴共同制定开放协议 与技术规范推动跨境零售、文旅、餐饮等多业态的系统互联互通构建更加公平、高效的数字生态。知识普惠共促发展通过开源社区 、技术文档与培训体系东方仙盟致力于将前沿技术转化为可落地的行业实践赋能全球合作伙伴共同培育创新人才推动数字经济 的普惠式增长阿雪技术观在科技发展浪潮中我们不妨积极投身技术共享。不满足于做受益者更要主动担当贡献者 。无论是分享代码、撰写技术博客还是参与开源项目 维护改进每一个微小举动都可能蕴含推动技术进步的巨大能量。东方仙盟是汇聚力量的天地我们携手在此探索硅基 生命为科技进步添砖加瓦。Hey folks, in this wild tech - driven world, why not dive headfirst into the whole tech - sharing scene? Dont just be the one reaping all the benefits; step up and be a contributor too. Whether youre tossing out your code snippets , hammering out some tech blogs, or getting your hands dirty with maintaining and sprucing up open - source projects, every little thing you do might just end up being a massive force that pushes tech forward. And guess what? The Eastern FairyAlliance is this awesome place where we all come together. Were gonna team up and explore the whole silicon - based life thing, and in the process, well be fueling the growth of technology