做网站台式还是笔记本重庆市工程建设招投标交易中心网站

做网站台式还是笔记本,重庆市工程建设招投标交易中心网站,seo和sem是什么,网页链接怎么转换成pdf本文提供了一个相对名次算法的Python实现和可视化教学工具。Python代码使用字典和排序将运动员分数转换为奖牌名次#xff08;金、银、铜牌#xff09;或数字排名。HTML部分展示了一个交互式教学界面#xff0c;包含代码高亮、变量跟踪和分步执行功能#xff0c;帮助学习者…本文提供了一个相对名次算法的Python实现和可视化教学工具。Python代码使用字典和排序将运动员分数转换为奖牌名次金、银、铜牌或数字排名。HTML部分展示了一个交互式教学界面包含代码高亮、变量跟踪和分步执行功能帮助学习者理解算法流程。界面采用现代化设计具有代码区、变量区和控制按钮支持输入自定义分数进行可视化学习。[前提信息成绩是独一无二的]classSolution:deffindRelativeRanks(self,score:List[int])-List[str]:infos[Gold Medal,Silver Medal,Bronze Medal]dic_{s:ifori,sinenumerate(score)}sortScoresorted(score,reverseTrue)res_list[0]*len(score)fori,sinenumerate(sortScore):resstr(i1)ifiin[0,1,2]:resinfos[i]res_list[dic_[s]]resreturnres_list!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8metanameviewportcontentwidthdevice-width, initial-scale1.0title相对名次算法单步教学工具/titlelinkrelstylesheethrefhttps://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.cssstyle*{margin:0;padding:0;box-sizing:border-box;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;}body{background-color:#f5f7fa;color:#333;line-height:1.6;padding:20px;}.container{max-width:1400px;margin:0 auto;background-color:white;border-radius:12px;box-shadow:0 5px 25pxrgba(0,0,0,0.1);overflow:hidden;}header{background:linear-gradient(135deg,#4b6cb7 0%,#182848 100%);color:white;padding:25px 30px;border-bottom:1px solidrgba(255,255,255,0.1);}h1{font-size:28px;margin-bottom:10px;display:flex;align-items:center;gap:12px;}h1 i{font-size:32px;}.subtitle{font-size:16px;opacity:0.85;font-weight:300;}.input-section{padding:20px 30px;background-color:#f8fafc;border-bottom:1px solid #e1e5eb;}.input-row{display:flex;align-items:center;gap:15px;flex-wrap:wrap;}.input-group{display:flex;align-items:center;gap:10px;}label{font-weight:600;color:#2d3748;}input{padding:10px 15px;border:1px solid #cbd5e0;border-radius:6px;width:250px;font-size:15px;}button{padding:10px 20px;background-color:#4b6cb7;color:white;border:none;border-radius:6px;cursor:pointer;font-weight:600;transition:all 0.3s ease;display:flex;align-items:center;gap:8px;}button:hover{background-color:#3a5795;transform:translateY(-2px);}button:disabled{background-color:#a0aec0;cursor:not-allowed;transform:none;}.content{display:flex;min-height:600px;}.code-section{flex:1;padding:25px;background-color:#1e1e1e;color:#d4d4d4;overflow-y:auto;border-right:1px solid #333;}.code-section h3{color:white;margin-bottom:15px;font-size:20px;display:flex;align-items:center;gap:10px;}.code-container{background-color:#1e1e1e;border-radius:8px;padding:20px;font-family:Consolas,Monaco,monospace;font-size:16px;line-height:1.8;overflow-x:auto;}.code-line{padding:4px 10px;border-radius:4px;margin:2px 0;transition:all 0.3s ease;display:flex;}.line-number{display:inline-block;width:30px;color:#6a9955;user-select:none;margin-right:15px;}.active-line{background-color:#264f78;box-shadow:0 0 0 1px #569cd6;}.executed-line{background-color:rgba(86,156,214,0.1);}.variable-section{flex:1;padding:25px;background-color:white;overflow-y:auto;}.variable-section h3{color:#2d3748;margin-bottom:15px;font-size:20px;display:flex;align-items:center;gap:10px;}.variables-container{display:flex;flex-direction:column;gap:25px;}.variable-card{background-color:#f8fafc;border-radius:10px;padding:20px;border-left:4px solid #4b6cb7;box-shadow:0 3px 10pxrgba(0,0,0,0.05);}.variable-title{font-weight:700;color:#2d3748;margin-bottom:15px;font-size:18px;display:flex;align-items:center;gap:10px;}.variable-content{font-family:Consolas,Monaco,monospace;background-color:white;padding:15px;border-radius:6px;border:1px solid #e2e8f0;min-height:60px;overflow-x:auto;}.array-display{display:flex;flex-wrap:wrap;gap:10px;margin-top:5px;}.array-item{display:flex;flex-direction:column;align-items:center;min-width:70px;}.array-value{background-color:#4b6cb7;color:white;padding:12px;border-radius:6px;font-weight:600;font-size:16px;width:100%;text-align:center;}.array-index{margin-top:5px;color:#718096;font-size:14px;}.dictionary-display{display:flex;flex-wrap:wrap;gap:15px;}.dict-item{display:flex;flex-direction:column;align-items:center;min-width:80px;}.dict-key{background-color:#38a169;color:white;padding:10px;border-radius:6px;font-weight:600;font-size:16px;width:100%;text-align:center;}.dict-value{margin-top:5px;color:#2d3748;font-weight:600;}.explanation-section{margin-top:25px;padding:20px;background-color:#f0f9ff;border-radius:10px;border-left:4px solid #3b82f6;}.explanation-title{font-weight:700;color:#1e40af;margin-bottom:10px;font-size:18px;display:flex;align-items:center;gap:10px;}.explanation-text{color:#1e293b;font-size:16px;line-height:1.7;}.controls{padding:25px 30px;background-color:#f8fafc;border-top:1px solid #e1e5eb;display:flex;justify-content:center;gap:15px;}.step-info{padding:15px;background-color:#e6fffa;border-radius:8px;margin-top:20px;border-left:4px solid #38b2ac;}.step-title{font-weight:700;color:#234e52;margin-bottom:8px;}.step-desc{color:#234e52;}.highlight{background-color:#fffacd;padding:2px 4px;border-radius:3px;font-weight:600;}media(max-width:1100px){.content{flex-direction:column;}.code-section{border-right:none;border-bottom:1px solid #333;}}media(max-width:768px){.input-row{flex-direction:column;align-items:flex-start;gap:15px;}input{width:100%;}.array-display, .dictionary-display{justify-content:center;}}/style/headbodydivclasscontainerheaderh1iclassfas fa-code/i相对名次算法单步教学工具/h1pclasssubtitle可视化展示 findRelativeRanks 函数的执行过程支持单步执行和自定义输入/p/headerdivclassinput-sectiondivclassinput-rowdivclassinput-grouplabelforscore-inputiclassfas fa-list-ol/i输入分数数组/labelinputtypetextidscore-inputvalue10,3,8,9,4placeholder例如10,3,8,9,4/divbuttonidupdate-btniclassfas fa-sync-alt/i更新输入/buttonbuttonidreset-btniclassfas fa-redo/i重置执行/button/div/divdivclasscontentdivclasscode-sectionh3iclassfas fa-file-code/i算法代码/h3divclasscode-containeridcode-container!-- 代码将通过JavaScript动态生成 --/div/divdivclassvariable-sectionh3iclassfas fa-project-diagram/i数据结构状态/h3divclassvariables-containeridvariables-container!-- 变量状态将通过JavaScript动态生成 --/divdivclassexplanation-sectiondivclassexplanation-titleiclassfas fa-lightbulb/i当前步骤说明/divdivclassexplanation-textidexplanation-text点击下一步开始执行算法.../div/divdivclassstep-infoidstep-infodivclassstep-title算法思路/divdivclassstep-desc这个算法的核心思想是先创建一个分数到原始索引的映射字典然后对分数进行降序排序最后根据排序结果给每个分数分配名次前3名使用特殊奖牌名称。/div/div/div/divdivclasscontrolsbuttonidprev-btniclassfas fa-step-backward/i上一步/buttonbuttonidnext-btniclassfas fa-step-forward/i下一步/buttonbuttonidauto-step-btniclassfas fa-play/i自动执行/button/div/divscript// 算法代码行constcodeLines[def findRelativeRanks(self, score: List[int]) - List[str]:, infos [Gold Medal,Silver Medal,Bronze Medal], dic_ {s: i for i, s in enumerate(score)}, sortScore sorted(score,reverseTrue), res_list [0]*len(score), for i,s in enumerate(sortScore):, res str(i1), if i in [0,1,2]:, res infos[i], res_list[dic_[s]]res, return res_list];// 步骤说明conststepExplanations[函数开始定义奖牌名称数组 infos,创建字典 dic_将分数映射到它们在原始数组中的索引,对分数进行降序排序得到 sortScore 数组,创建结果数组 res_list初始化为与输入相同长度的零数组,开始遍历排序后的分数数组 sortScore,将当前排名转换为字符串i1因为索引从0开始,检查当前索引i是否在前3名内0,1,2,如果是前3名将对应的奖牌名称赋给res,使用字典dic_找到原始索引将结果赋给res_list的对应位置,循环结束后返回结果数组res_list];// 算法执行状态letexecutionState{currentStep:-1,scores:[10,3,8,9,4],infos:[],dic_:{},sortScore:[],res_list:[],i:null,s:null,res:null,executedSteps:newSet()};// 初始化页面functioninitializePage(){renderCode();renderVariables();updateExplanation();updateButtons();}// 渲染代码区域functionrenderCode(){constcodeContainerdocument.getElementById(code-container);codeContainer.innerHTML;codeLines.forEach((line,index){constcodeLinedocument.createElement(div);codeLine.classNamecode-line;if(executionState.currentStepindex){codeLine.classList.add(active-line);}elseif(executionState.executedSteps.has(index)){codeLine.classList.add(executed-line);}codeLine.innerHTMLspan classline-number${index1}/span span${escapeHtml(line)}/span;codeContainer.appendChild(codeLine);});}// 渲染变量区域functionrenderVariables(){constvariablesContainerdocument.getElementById(variables-container);// 清空容器variablesContainer.innerHTML;// 分数数组variablesContainer.appendChild(createVariableCard(score (原始分数数组),createArrayDisplay(executionState.scores,false,score),输入的原始分数数组算法将根据此数组计算相对名次));// infos 数组if(executionState.currentStep0){variablesContainer.appendChild(createVariableCard(infos (奖牌名称数组),createArrayDisplay(executionState.infos,false,infos),存储前三名的特殊名称金牌、银牌、铜牌));}// 字典 dic_if(executionState.currentStep1){variablesContainer.appendChild(createVariableCard(dic_ (分数到索引的映射),createDictionaryDisplay(executionState.dic_),将每个分数映射到它在原始数组中的索引位置));}// 排序后的数组if(executionState.currentStep2){variablesContainer.appendChild(createVariableCard(sortScore (排序后的分数),createArrayDisplay(executionState.sortScore,false,sortScore),原始分数降序排列后的数组用于确定排名));}// 结果数组if(executionState.currentStep3){variablesContainer.appendChild(createVariableCard(res_list (结果数组),createArrayDisplay(executionState.res_list,true,res_list),存储最终结果每个原始分数对应的名次));}// 循环变量if(executionState.currentStep4){constloopVars[];if(executionState.i!null){loopVars.push(i (当前索引): span classhighlight${executionState.i}/span);}if(executionState.s!null){loopVars.push(s (当前分数): span classhighlight${executionState.s}/span);}if(executionState.res!null){loopVars.push(res (当前名次): span classhighlight${executionState.res}/span);}if(loopVars.length0){variablesContainer.appendChild(createVariableCard(循环变量,div styledisplay: flex; flex-direction: column; gap: 10px;${loopVars.join(br)}/div,当前循环迭代中的变量值));}}}// 创建变量卡片functioncreateVariableCard(title,content,description){constcarddocument.createElement(div);card.classNamevariable-card;card.innerHTMLdiv classvariable-titlei classfas fa-cube/i${title}/div div classvariable-content${content}/div div stylemargin-top: 10px; color: #718096; font-size: 14px; i classfas fa-info-circle/i${description}/div;returncard;}// 创建数组显示functioncreateArrayDisplay(array,isResultfalse,arrayName){if(!array||array.length0){returndiv stylecolor: #a0aec0; font-style: italic;(空数组)/div;}lethtmldiv classarray-display;array.forEach((value,index){// 如果是结果数组且当前步骤正在处理这个索引高亮显示lethighlightClass;if(isResultexecutionState.currentStep8executionState.dic_[executionState.s]index){highlightClass stylebackground-color: #fbbf24;;}htmldiv classarray-item div classarray-value${highlightClass}${value}/div div classarray-index${arrayName}[${index}]/div /div;});html/div;returnhtml;}// 创建字典显示functioncreateDictionaryDisplay(dict){if(!dict||Object.keys(dict).length0){returndiv stylecolor: #a0aec0; font-style: italic;(空字典)/div;}lethtmldiv classdictionary-display;Object.entries(dict).forEach(([key,value]){htmldiv classdict-item div classdict-key${key}/div div classdict-value→${value}/div /div;});html/div;returnhtml;}// 更新步骤说明functionupdateExplanation(){constexplanationTextdocument.getElementById(explanation-text);if(executionState.currentStep0){explanationText.innerHTML点击\下一步\开始执行算法...;return;}if(executionState.currentStepstepExplanations.length){explanationText.innerHTML算法执行完成所有分数已分配名次。;return;}explanationText.innerHTMLstepExplanations[executionState.currentStep];}// 执行下一步functionnextStep(){if(executionState.currentStepcodeLines.length){return;}executionState.currentStep;executionState.executedSteps.add(executionState.currentStep);// 根据当前步骤更新状态switch(executionState.currentStep){case0:executionState.infos[Gold Medal,Silver Medal,Bronze Medal];break;case1:// 创建分数到索引的映射executionState.dic_{};executionState.scores.forEach((score,index){executionState.dic_[score]index;});break;case2:// 对分数进行降序排序executionState.sortScore[...executionState.scores].sort((a,b)b-a);break;case3:// 初始化结果数组executionState.res_listnewArray(executionState.scores.length).fill(0);break;case4:// 开始循环初始化循环变量executionState.i0;executionState.sexecutionState.sortScore[0];break;case5:// 计算当前排名executionState.resString(executionState.i1);break;case6:// 检查是否为前三名break;case7:// 如果是前三名使用奖牌名称if(executionState.i3){executionState.resexecutionState.infos[executionState.i];}break;case8:// 将结果放入正确位置executionState.res_list[executionState.dic_[executionState.s]]executionState.res;// 准备下一次循环executionState.i;// 如果还有更多元素继续循环if(executionState.iexecutionState.sortScore.length){executionState.sexecutionState.sortScore[executionState.i];// 回退到步骤5继续循环executionState.currentStep4;executionState.executedSteps.add(5);executionState.executedSteps.add(6);executionState.executedSteps.add(7);executionState.executedSteps.add(8);}break;case9:// 返回结果算法结束break;}renderCode();renderVariables();updateExplanation();updateButtons();}// 执行上一步functionprevStep(){if(executionState.currentStep0){return;}// 从已执行步骤中移除当前步骤executionState.executedSteps.delete(executionState.currentStep);// 回退状态switch(executionState.currentStep){case0:executionState.infos[];break;case1:executionState.dic_{};break;case2:executionState.sortScore[];break;case3:executionState.res_list[];break;case4:// 如果i为0说明是第一次进入循环if(executionState.i0){executionState.inull;executionState.snull;}else{// 否则需要处理循环回退逻辑executionState.i--;executionState.sexecutionState.sortScore[executionState.i];// 我们需要重新设置当前步骤为8以便下一次prevStep可以正确处理executionState.currentStep8;executionState.executedSteps.delete(5);executionState.executedSteps.delete(6);executionState.executedSteps.delete(7);executionState.executedSteps.delete(8);renderCode();renderVariables();updateExplanation();updateButtons();return;}break;case5:executionState.resnull;break;case6:// 无状态变化break;case7:// 无状态变化break;case8:// 回退res_list的变化executionState.res_list[executionState.dic_[executionState.s]]0;// 回退循环变量executionState.i--;if(executionState.i0){executionState.sexecutionState.sortScore[executionState.i];}// 我们需要重新设置当前步骤为4以便下一次prevStep可以正确处理executionState.currentStep4;executionState.executedSteps.delete(5);executionState.executedSteps.delete(6);executionState.executedSteps.delete(7);executionState.executedSteps.delete(8);renderCode();renderVariables();updateExplanation();updateButtons();return;}executionState.currentStep--;renderCode();renderVariables();updateExplanation();updateButtons();}// 更新按钮状态functionupdateButtons(){document.getElementById(prev-btn).disabledexecutionState.currentStep0;document.getElementById(next-btn).disabledexecutionState.currentStepcodeLines.length;if(executionState.currentStepcodeLines.length){document.getElementById(next-btn).innerHTMLi classfas fa-check/i 已完成;}else{document.getElementById(next-btn).innerHTMLi classfas fa-step-forward/i 下一步;}}// 自动执行letautoStepIntervalnull;functiontoggleAutoStep(){constautoStepBtndocument.getElementById(auto-step-btn);if(autoStepInterval){clearInterval(autoStepInterval);autoStepIntervalnull;autoStepBtn.innerHTMLi classfas fa-play/i 自动执行;autoStepBtn.style.backgroundColor#4b6cb7;}else{autoStepIntervalsetInterval((){if(executionState.currentStepcodeLines.length){toggleAutoStep();return;}nextStep();},1500);autoStepBtn.innerHTMLi classfas fa-stop/i 停止;autoStepBtn.style.backgroundColor#e53e3e;}}// 重置执行状态functionresetExecution(){executionState{currentStep:-1,scores:executionState.scores,// 保留当前分数infos:[],dic_:{},sortScore:[],res_list:[],i:null,s:null,res:null,executedSteps:newSet()};if(autoStepInterval){clearInterval(autoStepInterval);autoStepIntervalnull;document.getElementById(auto-step-btn).innerHTMLi classfas fa-play/i 自动执行;document.getElementById(auto-step-btn).style.backgroundColor#4b6cb7;}renderCode();renderVariables();updateExplanation();updateButtons();}// 更新分数输入functionupdateScores(){constscoreInputdocument.getElementById(score-input).value;try{// 解析输入支持逗号或空格分隔constscoresscoreInput.split(/[,\s]/).map(s{constnumparseInt(s.trim());if(isNaN(num))thrownewError(包含非数字内容);returnnum;});if(scores.length0)thrownewError(请输入至少一个分数);executionState.scoresscores;// 重置执行状态resetExecution();// 显示成功消息showTemporaryMessage(分数已更新,success);}catch(error){showTemporaryMessage(输入无效请使用逗号或空格分隔数字,error);}}// 显示临时消息functionshowTemporaryMessage(message,type){// 移除可能已存在的消息constexistingMessagedocument.querySelector(.temp-message);if(existingMessage)existingMessage.remove();// 创建消息元素constmessageEldocument.createElement(div);messageEl.classNametemp-message${type};messageEl.textContentmessage;// 样式messageEl.style.cssTextposition: fixed; top: 20px; right: 20px; padding: 15px 20px; background-color:${typesuccess?#38a169:#e53e3e}; color: white; border-radius: 6px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); z-index: 1000; font-weight: 600; animation: slideIn 0.3s ease;;// 添加动画conststyledocument.createElement(style);style.textContentkeyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } };document.head.appendChild(style);document.body.appendChild(messageEl);// 3秒后移除setTimeout((){messageEl.style.animationfadeOut 0.5s ease;setTimeout((){if(messageEl.parentNode){messageEl.parentNode.removeChild(messageEl);}},500);},3000);}// HTML转义functionescapeHtml(text){constdivdocument.createElement(div);div.textContenttext;returndiv.innerHTML;}// 初始化事件监听器functioninitEventListeners(){document.getElementById(next-btn).addEventListener(click,nextStep);document.getElementById(prev-btn).addEventListener(click,prevStep);document.getElementById(auto-step-btn).addEventListener(click,toggleAutoStep);document.getElementById(reset-btn).addEventListener(click,resetExecution);document.getElementById(update-btn).addEventListener(click,updateScores);// 输入框支持按Enter键更新document.getElementById(score-input).addEventListener(keyup,(event){if(event.keyEnter){updateScores();}});}// 页面加载完成后初始化document.addEventListener(DOMContentLoaded,(){initializePage();initEventListeners();});/script/body/html