JS 코드 형식 지정 및 구문 색상 지정 V2_javascript 팁-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

JS 코드 형식 지정 및 구문 색상 지정 V2_javascript 팁

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 07:25 PM

2차 버전으로 업그레이드 된 기념으로 포스팅을 열어봅니다 ㅎㅎ

Ver1.1에서 컨텐츠 업그레이드
1. 기능 목록 추가
2. 기능 추가
3. 분석 (다른 소프트웨어에서 이 기능을 구현한 것을 본 적이 없습니다. 저는 창의적이고 문제가 많습니다. 현재 분석 능력은 상대적으로 제한적입니다. 전역 함수 종속성만 분석할 수 있습니다. 복잡한 코드에서는 버그가 발생할 수 있습니다.)
4. for 문 분석 버그 수정
5. 구문 접기 버그 수정
6. 모두 축소 작업 방식 개선 ※ 행 개수가 너무 많을 때 충돌 방지를 위한 모두 확장 기능
7. 줄 번호 분석 메커니즘을 개선하여 줄 수가 너무 많을 때 충돌을 방지합니다

코드 복사 코드는 다음과 같습니다.

<머리>
JSer 버전 2.0

<스타일>
/* 전역 CSS */

* { padding:0px; 여백:0px; 글꼴 크기:13px; 글꼴 모음: Arial 宋体; }

본문 { overflow:auto; 테두리:0px 없음 검은색; 배경색:버튼면; }

li { 여백:0px 0px 0px 40px; 패딩:2px 4px; }

div { 글꼴 크기:13px; 줄 높이:14px; }

p { 글꼴 크기:13px; 줄 높이:14px; }

/* 클래스 CSS */

.codeRoot { line-height:14px; }
.quote { color:#999; }
.comments { color: #009090; }
.indent { margin-left:25px; }
.regexp { color:#F000F0; }
.keyWord { color:blue; }
.object { color:red; }
.method_property { color:#FF8000; }
.operator { color:#004000; }

.colsp { 글꼴 크기:12px; 너비:14px; 높이:14px; 오버플로:숨김; 테두리:1px 아웃셋 버튼페이스; 텍스트 정렬:가운데;
커서:포인터; 왼쪽 패딩:2px; }
.colsp2 { 글꼴 크기:12px; 너비:14px; 높이:14px; 오버플로:숨김; 테두리:1px 삽입 버튼페이스; 텍스트 정렬:가운데;
커서:포인터; 왼쪽 패딩:2px; 색상:빨간색!중요; 배경색:#E0FFF8!중요; }

/* 식별된 CSS */

#divTools { height:20px; border-bottom:1px solid #555; 왼쪽 패딩:15px; }

#divTools a { color:navy; 텍스트 장식:없음; 높이:20px; 줄 높이:20px; 패딩:0px 25px; }

#divTools a:hover { color:white; 배경색:네이비; 텍스트 장식:없음; 높이:20px; 줄 높이:20px; }

#divJSInput { display:none; 너비:600px; 높이:450px; 테두리:2px 시작 버튼페이스; 위치:절대; 배경-
color:buttonface; z-색인:2; }

#divJSInputTitle { color:white; 배경색:네이비; 높이:20px; 줄 높이:20px; 패딩:0px 10px; 커서:기본값; }

#txtJSInput { 너비:598px; 높이:406px; 오버플로:자동; 패딩:4px 8px; 배경색:흰색;}

#divJSInputBar { 높이:24px; 패딩:0px 4px; }

#divJSInputBar 입력 { 너비:110px; 높이:22px; 테두리:1px 솔리드 #555; 줄 높이:20px; }

#divMain { 너비:100%; 높이:500; 오버플로:숨김; 위치:상대적; }

#divJSOutputLineNo { 너비:32px; 높이:100%; 오버플로:숨김; 배경색:#DDD; 위치:절대; 왼쪽:0px; 상단:0px;
텍스트 정렬:오른쪽; }

#divJSOutputLineNo p { font-size:12px; 줄 높이:14px; }

#divJSOutputPlus { 너비:14px; 높이:100%; 오버플로:숨김; 배경색:#EEE; 위치:절대; 왼쪽:32px; 상단:0px; z
-색인:2; }

#divJSOutputPlus p { 글꼴 크기:12px; 줄 높이:14px; }

#divJSOutput { 배경색:흰색; 테두리:1px 삽입 버튼페이스; 높이:100%; 위치:절대; 왼쪽:45px; 상단:0px;
오버플로:스크롤; }

#divWaiting { display:none; 너비:400px; 높이:60px; 테두리:1px 솔리드 버튼페이스; 위치:절대; 배경-
색상:#E0F0F0; z-색인:3; 텍스트 정렬:가운데; 패딩 상단:10px; }

#div입력 대기 중 { width:140px; 높이:22px; 테두리:1px 솔리드 #555; 줄 높이:20px; 커서:기본값; 여백 상단:4px; }

#divJSExport { display:none; 너비:600px; 높이:450px; 테두리:2px 시작 버튼페이스; 위치:절대; 배경-
color:buttonface; z-색인:2; }

#divJSExportTitle { color:white; 배경색:네이비; 높이:20px; 줄 높이:20px; 패딩:0px 10px; 커서:기본값; }

#selJSExport { 너비:598px; 높이:406px; 오버플로:자동; 패딩:4px 8px; 배경색:흰색; }

#divJSExportContent { 너비:598px; 높이:406px; 오버플로:자동; 패딩:4px 8px; 배경색:흰색; 표시:없음; }

#divJSExportBar { 높이:24px; 패딩:0px 4px; }

#divJSExportBar 입력 { 너비:170px; 높이:22px; 테두리:1px 솔리드 #555; 줄 높이:20px; }

Input JS
Collapse All
Expand All
Export JS

Please Input the JS:

<br>/**********************
 Author: Hutia
 
*********************/

<br>window.onload=init;

//------------------
// Static Variable
//----- <br>------------- <br>

var KEYWORDS="abstract break byte case catch char class cons <br>t continue default delete do double else extends false final finally f <br>loat for function goto if implements import in instanceof int interface&nbs <br>p;long native null package private protected public reset return short stat <br>ic super switch synchronized this throw transient true try var void wh <br>ile with";
var OBJECTS="Anchor Applet Area Arguments Array Boolean  <br>;Button Checkbox Collection Crypto Date Dictionary Document Drive Drives Element <br> Enumerator Event File FileObject FileSystemObject FileUpload Folder Folders For <br>m Frame Function Global Hidden History HTMLElement Image Infinity Input Jav <br>aArray JavaClass JavaObject JavaPackage JSObject Layer Link Math MimeType Naviga <br>tor Number Object Option Packages Password Plugin PrivilegeManager Random RegExp <br> Screen Select String Submit Text Textarea URL VBArray Window WScript" <br>;
var METHODS_PROPERTIES="above abs acos action activeElement alert alinkCol <br>or all altKey anchor anchors appCodeName applets apply appName appVersion a <br>rguments arity asin assign atan atan2 atob  availHeight availLeft availTop& <br>nbsp;availWidth ActiveXObject back background below bgColor big blink blur bold& <br>nbsp;border borderWidths bottom btoa button call callee caller cancelBubble capt <br>ureEvents ceil charAt charCodeAt charset checked children classes className clea <br>r clearInterval clearTimeout click clientInformation  clientX clientY close clos <br>ed colorDepth compile complete concat confirm constructir contains contextual co <br>okie cos crypto ctrlKey current data defaultCharset defaultChecked defaultSelected&nb <br>sp;defaultStatus defaultValue description disableExternalCapture disablePrivilege document doma <br>in E Echo  element elements embeds enabledPlugin enableExternalCapture enablePri <br>vilege encoding escape eval event exec exp expando FromPoint fgColor fileNa <br>me find fixed floor focus fontColor fontSize form forms forward frames  <br>;fromCharCode fromElement  getAttribute get getClass getDate getDay getFullYear  <br>getHours getMember getMilliseconds getMinutes getMonth getSeconds getSelection getSlot&nbs <br>p;getTime getTimezoneOffset  getUTCDate getUTCDay getUTCFullYear getUTCHours getUTCMillise <br>conds getUTCMinutes getUTCMonth getUTCSeconds getWindow getYear global go HandleEvent <br> Height  hash hidden history home host hostName href hspace id id <br>s ignoreCase images index indexOf inner innerHTML innerText innerWidth insertAdj <br>acentHTML insertAdjacentText isFinite isNAN italics java javaEnabled join keyCode&nbs <br>p;Links LN10 LN2 LOG10E LOG2E  lang language lastIndex lastIndexOf lastMatc <br>h lastModified lastParen layers layerX layerY left leftContext length link  <br>linkColor load location locationBar log lowsrc MAX_VALUE MIN_VALUE  margins  <br>;match max menubar method mimeTypes min modifiers moveAbove moveBelow moveBy&nbs <br>p;moveTo moveToAbsolute multiline NaN NEGATIVE_INFINITY  name navigate navigator  <br>;netscape next number offscreenBuffering offset offsetHeight offsetLeft offsetParent  <br>offsetTop offsetWidth offsetX offsetY onabort onblur onchange onclick ondblclick  <br>;ondragdrop onerror onfocus  onHelp onkeydown onkeypress onkeyup onload onmoused <br>own onmousemove onmouseout onmouseover onmouseup onmove onreset onresize onsubmit&nbs <br>p;onunload open opener options outerHeight  outerHTML outerText outerWidth POSIT <br>IVE_INFINITY PI  paddings pageX pageXOffset pageY pageYOffset parent parentEleme <br>nt parentLayer parentWindow parse parseFloat parseInt pathname personalbar pixelDepth <br> platform plugins pop  port pow preference previous print prompt proto <br>col prototype push random readyState reason referrer refresh releaseEvents reloa <br>d removeAttribute removeMember replace resizeBy resizeTo returnValue reverse right&nb <br>sp;rightcontext round SQRT1_2 SQRT2  screenX screenY scroll scrollbars scrollBy& <br>nbsp;scrollIntoView scrollTo search select selected selectedIndex self setAttribute s <br>etDay setFullYear setHotkeys setHours setInterval  setMember setMilliseconds setMinut <br>es setMonth setResizable setSeconds setSlot setTime setTimeout setUTCDate setUTCFullY <br>ear setUTCHours setUTCMillseconds setUTCMinutes  setUTCMonth setUTCSeconds setYear se <br>tZOptions shift shiftKey siblingAbove siblingBelow signText sin slice smallsort  <br>source sourceIndex splice split sqrt src  srcElement srcFilter status statu <br>sbar stop strike style sub submit substr substring suffixes sun sup sy <br>stemLanguage TYPE  tagName tags taint taintEnabled tan target test text&nbs <br>p;title toElement toGMTString toLocaleString toLowerCase toolbar top toString toUpper <br>Case toUTCString type typeOf UTC unescape unshift untaint unwatch userAgent  <br>;userLanguage  value valueOf visibility vlinkColor vspace watch which width  <br>;window write writeln x y zIndex";
var OPS="! $ % <br> & * + - // / : < = > ? [ ] <br> ^ | ~ is  new sizeof  typeof unchecked";

var  <br>regKW=new RegExp("(\\W"+KEYWORDS.replace(/ /g,"$)|(\\W")+"$) <br>","g");
var regObj=new RegExp("(\\W"+OBJECTS.replace(/ /g,"$)| <br>(\\W")+"$)","g");
var regMP=new RegExp(" <br>(\\W"+METHODS_PROPERTIES.replace(/ /g,"$)|(\\W")+"$) <br>","g");
//var regOP=new RegExp("(\\W"+OPS.replace(/ /g,"$)|(\\W") <br>+"$)","g");

//------------------
// Global Variables
//-- <br>---------------- <br>
var divJSInput, txtJSInput, divMain, divJSOutputLineNo, divJSOutputPlus, divJSOutput, <br> divWaiting;
var spnProcess, cmdStop, divJSExport, selJSExport, divJSExportContent; <br>3;
var glbStr, glbP, glbRe, curRe, glbTimer, glbBusy, glbFuntionNames;

& <br>#10;
function init() <br>{
 // init global variables
 divJSInput=document.getElementById <br>("divJSInput");
 txtJSInput=document.getElementById <br>("txtJSInput");
 divMain=document.getElementById <br>("divMain");
 divJSOutputLineNo=document.getElementById <br>("divJSOutputLineNo");
 divJSOutputPlus=document.getElementById <br>("divJSOutputPlus");
 divJSOutput=document.getElementById <br>("divJSOutput");
 divWaiting=document.getElementById <br>("divWaiting");
 spnProcess=document.getElementById <br>("spnProcess");
 cmdStop=document.getElementById <br>("cmdStop");
 divJSExport=document.getElementById <br>("divJSExport");
 selJSExport=document.getElementById <br>("selJSExport");
 divJSExportContent=document.getElementById <br>("divJSExportContent");
 
 // 초기화 창 상태
 최대화W <br>indow();
 
 divMain.style.width=document.body.clientWidth- <br>4;
 divMain.style.height=document.body.clientHeight- <br>26;
 
 divJSOutput.style.width=document.body.clientWidth- <br>52;
 
 
 // 글로벌 이벤트 초기화
 divJSOutputLineNo.onse <br>lectstart=divJSOutputLineNo.onselect=divJSOutputPlus.onselectstart=divJSOutputPlus.onselect=cancelEvents;
 divJ <br>SOutput.onscroll=divJSOutput_onscroll;
 
 divJSInput.onkeydown=divJSInput_keydown;
  <br>;divJSExport.onkeydown=divJSExport_keydown;
 
}

//------ <br>
// 이벤트 스크립트
//------

함수 취소이벤트(e) <br>{
 var e=window.event?window.event:e;
 e.returnValue=false;
 반환 <br>(거짓);
}

함수 divJSInput_keydown(e){
 var e=window.event? <br>window.event:e;
 var srcEle=e.srcElement? <br>e.srcElement:e.target;
 var sel;
 if(e.keyCode==27)hideJSInput();
 if <br>(e.keyCode==13&&e.ctrlKey)execJSInput();
 if(e.keyCode==9&&srcEle==txtJSInput) <br>{
  document.selection.createRange().text="t";return <br>(false); // FF를 지원하지 않음 
 }
} <br>

함수 divJSExport_keydown(e){
 var e=window.event? <br>window.event:e;
 var srcEle=e.srcElement? <br>e.srcElement:e.target;
 var sel;
 if(e.keyCode==27)hideJSExport();
 if <br>(e.keyCode==13&&e.ctrlKey)hideJSExport();
}

함수 divJSOutput_onscroll() <br>{
 divJSOutputLineNo.scrollTop=divJSOutputPlus.scrollTop=divJSOutput.scrollTop;
} <br>

//------
// 기능적 스크립트
//------------ <br>-------

함수 showJSInput(){
 if(glbBusy)return;
 hideJSExport <br>();
 with(divJSInput.style){
  디스플레이="차단";
  왼쪽= <br>(document.body.clientWidth-divJSInput.offsetWidth)/2;
  top=(document.body.clientHeight- <br>divJSInput.offsetHeight)/2;
 }
 
 txtJSInput.focus <br>();
 
 반환(거짓);
}

함수 showJSExport() <br>{
 if(glbBusy)return;
 hideJSInput();
 with(divJSExport.style) <br>{
  디스플레이="차단";
  왼쪽=(document.body.clientWidth- <br>divJSExport.offsetWidth)/2;
  상단=(document.body.clientHeight</divjsoutputplus.buttons.length>
</div>

</div>
					</div>
					<div class="wzconShengming_sp">
						<div class="bzsmdiv_sp">본 웹사이트의 성명</div>
						<div>본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.</div>
					</div>
				</div>

<ins class="adsbygoogle"
     style="display:block"
     data-ad-format="autorelaxed"
     data-ad-client="ca-pub-5902227090019525"
     data-ad-slot="2507867629"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

<ins class="adsbygoogle"
        style="display:block"
        data-ad-client="ca-pub-5902227090019525"
        data-ad-slot="3653428331"
        data-ad-format="auto"
        data-full-width-responsive="true"></ins>
    <script>
        (adsbygoogle = window.adsbygoogle || []).push({});
    </script>

<div class="phpgenera_Details_mainR3">
							<div class="phpmain1_4R_readrank">
								<div class="phpmain1_4R_readrank_top">
									<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
										onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
										src="/static/imghw/hottools2.png" alt="" />
									<h2>핫 AI 도구</h2>
								</div>
								<div class="phpgenera_Details_mainR3_bottom">
																		<div class="phpmain_tab2_mids_top">
											<a href="https://www.php.cn/ko/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_top_img">
												<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													class="lazy"  data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411540686492.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undresser.AI Undress" />
											</a>
											<div class="phpmain_tab2_mids_info">
												<a href="https://www.php.cn/ko/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_title">
													<h3>Undresser.AI Undress</h3>
												</a>
												<p>사실적인 누드 사진을 만들기 위한 AI 기반 앱</p>
											</div>
										</div>
																		<div class="phpmain_tab2_mids_top">
											<a href="https://www.php.cn/ko/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_top_img">
												<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													class="lazy"  data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411552797167.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="AI Clothes Remover" />
											</a>
											<div class="phpmain_tab2_mids_info">
												<a href="https://www.php.cn/ko/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_title">
													<h3>AI Clothes Remover</h3>
												</a>
												<p>사진에서 옷을 제거하는 온라인 AI 도구입니다.</p>
											</div>
										</div>
																		<div class="phpmain_tab2_mids_top">
											<a href="https://www.php.cn/ko/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_top_img">
												<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													class="lazy"  data-src="https://img.php.cn/upload/ai_manual/001/246/273/173410641626608.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undress AI Tool" />
											</a>
											<div class="phpmain_tab2_mids_info">
												<a href="https://www.php.cn/ko/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_title">
													<h3>Undress AI Tool</h3>
												</a>
												<p>무료로 이미지를 벗다</p>
											</div>
										</div>
																		<div class="phpmain_tab2_mids_top">
											<a href="https://www.php.cn/ko/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_top_img">
												<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													class="lazy"  data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411529149311.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Clothoff.io" />
											</a>
											<div class="phpmain_tab2_mids_info">
												<a href="https://www.php.cn/ko/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_title">
													<h3>Clothoff.io</h3>
												</a>
												<p>AI 옷 제거제</p>
											</div>
										</div>
																		<div class="phpmain_tab2_mids_top">
											<a href="https://www.php.cn/ko/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_top_img">
												<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													class="lazy"  data-src="https://img.php.cn/upload/ai_manual/001/246/273/173414504068133.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Video Face Swap" />
											</a>
											<div class="phpmain_tab2_mids_info">
												<a href="https://www.php.cn/ko/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_title">
													<h3>Video Face Swap</h3>
												</a>
												<p>완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!</p>
											</div>
										</div>
																</div>
								<div class="phpgenera_Details_mainR3_more">
									<a href="https://www.php.cn/ko/ai">더보기</a>
								</div>
							</div>
						</div>

<div class="phpgenera_Details_mainR4">
						<div class="phpmain1_4R_readrank">
							<div class="phpmain1_4R_readrank_top">
								<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
									onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
									src="/static/imghw/hotarticle2.png" alt="" />
								<h2>인기 기사</h2>
							</div>
							<div class="phpgenera_Details_mainR4_bottom">
															<div class="phpgenera_Details_mainR4_bottoms">
									<a href="https://www.php.cn/ko/faq/1796785841.html" title="어 ass 신 크리드 그림자 : 조개 수수께끼 솔루션" class="phpgenera_Details_mainR4_bottom_title">어 ass 신 크리드 그림자 : 조개 수수께끼 솔루션</a>
									<div class="phpgenera_Details_mainR4_bottoms_info">
										<span>3 몇 주 전</span>
										<span>By DDD</span>
									</div>
								</div>
															<div class="phpgenera_Details_mainR4_bottoms">
									<a href="https://www.php.cn/ko/faq/1796789525.html" title="Windows 11 KB5054979의 새로운 기능 및 업데이트 문제를 해결하는 방법" class="phpgenera_Details_mainR4_bottom_title">Windows 11 KB5054979의 새로운 기능 및 업데이트 문제를 해결하는 방법</a>
									<div class="phpgenera_Details_mainR4_bottoms_info">
										<span>2 몇 주 전</span>
										<span>By DDD</span>
									</div>
								</div>
															<div class="phpgenera_Details_mainR4_bottoms">
									<a href="https://www.php.cn/ko/faq/1796785857.html" title="Atomfall에서 크레인 제어 키 카드를 찾을 수 있습니다" class="phpgenera_Details_mainR4_bottom_title">Atomfall에서 크레인 제어 키 카드를 찾을 수 있습니다</a>
									<div class="phpgenera_Details_mainR4_bottoms_info">
										<span>3 몇 주 전</span>
										<span>By DDD</span>
									</div>
								</div>
															<div class="phpgenera_Details_mainR4_bottoms">
									<a href="https://www.php.cn/ko/faq/1796783009.html" title="어 ass 신 크리드 섀도우 - 대장장이를 찾고 무기 및 갑옷 커스터마 화 잠금 해제 방법" class="phpgenera_Details_mainR4_bottom_title">어 ass 신 크리드 섀도우 - 대장장이를 찾고 무기 및 갑옷 커스터마 화 잠금 해제 방법</a>
									<div class="phpgenera_Details_mainR4_bottoms_info">
										<span>1 몇 달 전</span>
										<span>By DDD</span>
									</div>
								</div>
															<div class="phpgenera_Details_mainR4_bottoms">
									<a href="https://www.php.cn/ko/faq/1796784440.html" title="<s> : 데드 레일 - 모든 도전을 완료하는 방법" class="phpgenera_Details_mainR4_bottom_title"><s> : 데드 레일 - 모든 도전을 완료하는 방법</a>
									<div class="phpgenera_Details_mainR4_bottoms_info">
										<span>3 몇 주 전</span>
										<span>By DDD</span>
									</div>
								</div>
														</div>
							<div class="phpgenera_Details_mainR3_more">
								<a href="https://www.php.cn/ko/article.html">더보기</a>
							</div>
						</div>
					</div>

<div class="phpgenera_Details_mainR3">
							<div class="phpmain1_4R_readrank">
								<div class="phpmain1_4R_readrank_top">
									<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
										onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
										src="/static/imghw/hottools2.png" alt="" />
									<h2>뜨거운 도구</h2>
								</div>
								<div class="phpgenera_Details_mainR3_bottom">
																		<div class="phpmain_tab2_mids_top">
											<a href="https://www.php.cn/ko/toolset/development-tools/92" title="메모장++7.3.1" class="phpmain_tab2_mids_top_img">
												<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													class="lazy"  data-src="https://img.php.cn/upload/manual/000/000/001/58ab96f0f39f7357.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="메모장++7.3.1" />
											</a>
											<div class="phpmain_tab2_mids_info">
												<a href="https://www.php.cn/ko/toolset/development-tools/92" title="메모장++7.3.1" class="phpmain_tab2_mids_title">
													<h3>메모장++7.3.1</h3>
												</a>
												<p>사용하기 쉬운 무료 코드 편집기</p>
											</div>
										</div>
																			<div class="phpmain_tab2_mids_top">
											<a href="https://www.php.cn/ko/toolset/development-tools/93" title="SublimeText3 중국어 버전" class="phpmain_tab2_mids_top_img">
												<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													class="lazy"  data-src="https://img.php.cn/upload/manual/000/000/001/58ab97a3baad9677.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3 중국어 버전" />
											</a>
											<div class="phpmain_tab2_mids_info">
												<a href="https://www.php.cn/ko/toolset/development-tools/93" title="SublimeText3 중국어 버전" class="phpmain_tab2_mids_title">
													<h3>SublimeText3 중국어 버전</h3>
												</a>
												<p>중국어 버전, 사용하기 매우 쉽습니다.</p>
											</div>
										</div>
																			<div class="phpmain_tab2_mids_top">
											<a href="https://www.php.cn/ko/toolset/development-tools/121" title="스튜디오 13.0.1 보내기" class="phpmain_tab2_mids_top_img">
												<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													class="lazy"  data-src="https://img.php.cn/upload/manual/000/000/001/58ab97ecd1ab2670.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="스튜디오 13.0.1 보내기" />
											</a>
											<div class="phpmain_tab2_mids_info">
												<a href="https://www.php.cn/ko/toolset/development-tools/121" title="스튜디오 13.0.1 보내기" class="phpmain_tab2_mids_title">
													<h3>스튜디오 13.0.1 보내기</h3>
												</a>
												<p>강력한 PHP 통합 개발 환경</p>
											</div>
										</div>
																			<div class="phpmain_tab2_mids_top">
											<a href="https://www.php.cn/ko/toolset/development-tools/469" title="드림위버 CS6" class="phpmain_tab2_mids_top_img">
												<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													class="lazy"  data-src="https://img.php.cn/upload/manual/000/000/001/58d0e0fc74683535.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="드림위버 CS6" />
											</a>
											<div class="phpmain_tab2_mids_info">
												<a href="https://www.php.cn/ko/toolset/development-tools/469" title="드림위버 CS6" class="phpmain_tab2_mids_title">
													<h3>드림위버 CS6</h3>
												</a>
												<p>시각적 웹 개발 도구</p>
											</div>
										</div>
																			<div class="phpmain_tab2_mids_top">
											<a href="https://www.php.cn/ko/toolset/development-tools/500" title="SublimeText3 Mac 버전" class="phpmain_tab2_mids_top_img">
												<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													class="lazy"  data-src="https://img.php.cn/upload/manual/000/000/001/58d34035e2757995.png?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3 Mac 버전" />
											</a>
											<div class="phpmain_tab2_mids_info">
												<a href="https://www.php.cn/ko/toolset/development-tools/500" title="SublimeText3 Mac 버전" class="phpmain_tab2_mids_title">
													<h3>SublimeText3 Mac 버전</h3>
												</a>
												<p>신 수준의 코드 편집 소프트웨어(SublimeText3)</p>
											</div>
										</div>
																	</div>
								<div class="phpgenera_Details_mainR3_more">
									<a href="https://www.php.cn/ko/ai">더보기</a>
								</div>
							</div>
						</div>

<div class="phpgenera_Details_mainR4">
						<div class="phpmain1_4R_readrank">
							<div class="phpmain1_4R_readrank_top">
								<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
									onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
									src="/static/imghw/hotarticle2.png" alt="" />
								<h2>뜨거운 주제</h2>
							</div>
							<div class="phpgenera_Details_mainR4_bottom">
															<div class="phpgenera_Details_mainR4_bottoms">
									<a href="https://www.php.cn/ko/faq/gmailyxdlrkzn" title="Gmail 이메일의 로그인 입구는 어디에 있나요?" class="phpgenera_Details_mainR4_bottom_title">Gmail 이메일의 로그인 입구는 어디에 있나요?</a>
									<div class="phpgenera_Details_mainR4_bottoms_info">
										<div class="phpgenera_Details_mainR4_bottoms_infos">
											<img src="/static/imghw/eyess.png" alt="" />
											<span>7621</span>
										</div>
										<div class="phpgenera_Details_mainR4_bottoms_infos">
											<img src="/static/imghw/tiezi.png" alt="" />
											<span>15</span>
										</div>
									</div>
								</div>
															<div class="phpgenera_Details_mainR4_bottoms">
									<a href="https://www.php.cn/ko/faq/cakephp-tutor" title="Cakephp 튜토리얼" class="phpgenera_Details_mainR4_bottom_title">Cakephp 튜토리얼</a>
									<div class="phpgenera_Details_mainR4_bottoms_info">
										<div class="phpgenera_Details_mainR4_bottoms_infos">
											<img src="/static/imghw/eyess.png" alt="" />
											<span>1389</span>
										</div>
										<div class="phpgenera_Details_mainR4_bottoms_infos">
											<img src="/static/imghw/tiezi.png" alt="" />
											<span>52</span>
										</div>
									</div>
								</div>
															<div class="phpgenera_Details_mainR4_bottoms">
									<a href="https://www.php.cn/ko/faq/steamdzhmcssmgs" title="Steam의 계정 이름 형식은 무엇입니까?" class="phpgenera_Details_mainR4_bottom_title">Steam의 계정 이름 형식은 무엇입니까?</a>
									<div class="phpgenera_Details_mainR4_bottoms_info">
										<div class="phpgenera_Details_mainR4_bottoms_infos">
											<img src="/static/imghw/eyess.png" alt="" />
											<span>89</span>
										</div>
										<div class="phpgenera_Details_mainR4_bottoms_infos">
											<img src="/static/imghw/tiezi.png" alt="" />
											<span>11</span>
										</div>
									</div>
								</div>
															<div class="phpgenera_Details_mainR4_bottoms">
									<a href="https://www.php.cn/ko/faq/winactivationkeyper" title="Win11 활성화 키 영구" class="phpgenera_Details_mainR4_bottom_title">Win11 활성화 키 영구</a>
									<div class="phpgenera_Details_mainR4_bottoms_info">
										<div class="phpgenera_Details_mainR4_bottoms_infos">
											<img src="/static/imghw/eyess.png" alt="" />
											<span>70</span>
										</div>
										<div class="phpgenera_Details_mainR4_bottoms_infos">
											<img src="/static/imghw/tiezi.png" alt="" />
											<span>19</span>
										</div>
									</div>
								</div>
															<div class="phpgenera_Details_mainR4_bottoms">
									<a href="https://www.php.cn/ko/faq/newyorktimesdailybrief" title="NYT 연결 힌트와 답변" class="phpgenera_Details_mainR4_bottom_title">NYT 연결 힌트와 답변</a>
									<div class="phpgenera_Details_mainR4_bottoms_info">
										<div class="phpgenera_Details_mainR4_bottoms_infos">
											<img src="/static/imghw/eyess.png" alt="" />
											<span>31</span>
										</div>
										<div class="phpgenera_Details_mainR4_bottoms_infos">
											<img src="/static/imghw/tiezi.png" alt="" />
											<span>136</span>
										</div>
									</div>
								</div>
														</div>
							<div class="phpgenera_Details_mainR3_more">
								<a href="https://www.php.cn/ko/faq/zt">더보기</a>
							</div>
						</div>
					</div>
				</div>
			</div>
							<div class="Article_Details_main2">
					<div class="phpgenera_Details_mainL4">
						<div class="phpmain1_2_top">
							<a href="javascript:void(0);" class="phpmain1_2_top_title">Related knowledge<img
									src="/static/imghw/index2_title2.png" alt="" /></a>
						</div>
						<div class="phpgenera_Details_mainL4_info">

<div class="phphistorical_Version2_mids">
								<a href="https://www.php.cn/ko/faq/1796790201.html" title="프론트 엔드 열 용지 영수증에 대한 차량 코드 인쇄를 만나면 어떻게해야합니까?" class="phphistorical_Version2_mids_img">
									<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
										src="/static/imghw/default1.png" class="lazy"  data-src="https://img.php.cn/upload/article/001/246/273/174270062124226.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="프론트 엔드 열 용지 영수증에 대한 차량 코드 인쇄를 만나면 어떻게해야합니까?" />
								</a>
								<a href="https://www.php.cn/ko/faq/1796790201.html" title="프론트 엔드 열 용지 영수증에 대한 차량 코드 인쇄를 만나면 어떻게해야합니까?" class="phphistorical_Version2_mids_title">프론트 엔드 열 용지 영수증에 대한 차량 코드 인쇄를 만나면 어떻게해야합니까?</a>
								<span class="Articlelist_txts_time">Apr 04, 2025 pm	 02:42 PM</span>
								<p class="Articlelist_txts_p">프론트 엔드 개발시 프론트 엔드 열지대 티켓 인쇄를위한 자주 묻는 질문과 솔루션, 티켓 인쇄는 일반적인 요구 사항입니다. 그러나 많은 개발자들이 구현하고 있습니다 ...</p>
							</div>
														<div class="phphistorical_Version2_mids">
								<a href="https://www.php.cn/ko/faq/1796789661.html" title="누가 더 많은 파이썬이나 자바 스크립트를 지불합니까?" class="phphistorical_Version2_mids_img">
									<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
										src="/static/imghw/default1.png" class="lazy"  data-src="https://img.php.cn/upload/article/001/253/068/174369658137192.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="누가 더 많은 파이썬이나 자바 스크립트를 지불합니까?" />
								</a>
								<a href="https://www.php.cn/ko/faq/1796789661.html" title="누가 더 많은 파이썬이나 자바 스크립트를 지불합니까?" class="phphistorical_Version2_mids_title">누가 더 많은 파이썬이나 자바 스크립트를 지불합니까?</a>
								<span class="Articlelist_txts_time">Apr 04, 2025 am	 12:09 AM</span>
								<p class="Articlelist_txts_p">기술 및 산업 요구에 따라 Python 및 JavaScript 개발자에 대한 절대 급여는 없습니다. 1. 파이썬은 데이터 과학 및 기계 학습에서 더 많은 비용을 지불 할 수 있습니다. 2. JavaScript는 프론트 엔드 및 풀 스택 개발에 큰 수요가 있으며 급여도 상당합니다. 3. 영향 요인에는 경험, 지리적 위치, 회사 규모 및 특정 기술이 포함됩니다.</p>
							</div>
														<div class="phphistorical_Version2_mids">
								<a href="https://www.php.cn/ko/faq/1796793115.html" title="Demystifying JavaScript : 그것이하는 일과 중요한 이유" class="phphistorical_Version2_mids_img">
									<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
										src="/static/imghw/default1.png" class="lazy"  data-src="https://img.php.cn/upload/article/001/253/068/174412846042688.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Demystifying JavaScript : 그것이하는 일과 중요한 이유" />
								</a>
								<a href="https://www.php.cn/ko/faq/1796793115.html" title="Demystifying JavaScript : 그것이하는 일과 중요한 이유" class="phphistorical_Version2_mids_title">Demystifying JavaScript : 그것이하는 일과 중요한 이유</a>
								<span class="Articlelist_txts_time">Apr 09, 2025 am	 12:07 AM</span>
								<p class="Articlelist_txts_p">JavaScript는 현대 웹 개발의 초석이며 주요 기능에는 이벤트 중심 프로그래밍, 동적 컨텐츠 생성 및 비동기 프로그래밍이 포함됩니다. 1) 이벤트 중심 프로그래밍을 사용하면 사용자 작업에 따라 웹 페이지가 동적으로 변경 될 수 있습니다. 2) 동적 컨텐츠 생성을 사용하면 조건에 따라 페이지 컨텐츠를 조정할 수 있습니다. 3) 비동기 프로그래밍은 사용자 인터페이스가 차단되지 않도록합니다. JavaScript는 웹 상호 작용, 단일 페이지 응용 프로그램 및 서버 측 개발에 널리 사용되며 사용자 경험 및 크로스 플랫폼 개발의 유연성을 크게 향상시킵니다.</p>
							</div>
														<div class="phphistorical_Version2_mids">
								<a href="https://www.php.cn/ko/faq/1796790250.html" title="JavaScript를 사용하여 동일한 ID와 동일한 ID로 배열 요소를 하나의 객체로 병합하는 방법은 무엇입니까?" class="phphistorical_Version2_mids_img">
									<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
										src="/static/imghw/default1.png" class="lazy"  data-src="https://img.php.cn/upload/article/001/246/273/174261411019446.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="JavaScript를 사용하여 동일한 ID와 동일한 ID로 배열 요소를 하나의 객체로 병합하는 방법은 무엇입니까?" />
								</a>
								<a href="https://www.php.cn/ko/faq/1796790250.html" title="JavaScript를 사용하여 동일한 ID와 동일한 ID로 배열 요소를 하나의 객체로 병합하는 방법은 무엇입니까?" class="phphistorical_Version2_mids_title">JavaScript를 사용하여 동일한 ID와 동일한 ID로 배열 요소를 하나의 객체로 병합하는 방법은 무엇입니까?</a>
								<span class="Articlelist_txts_time">Apr 04, 2025 pm	 05:09 PM</span>
								<p class="Articlelist_txts_p">동일한 ID로 배열 요소를 JavaScript의 하나의 객체로 병합하는 방법은 무엇입니까? 데이터를 처리 할 때 종종 동일한 ID를 가질 필요가 있습니다 ...</p>
							</div>
														<div class="phphistorical_Version2_mids">
								<a href="https://www.php.cn/ko/faq/1796790259.html" title="Shiseido의 공식 웹 사이트와 같은 시차 스크롤 및 요소 애니메이션 효과를 달성하는 방법은 무엇입니까?
또는:
Shiseido의 공식 웹 사이트와 같은 페이지 스크롤과 함께 애니메이션 효과를 어떻게 달성 할 수 있습니까?" class="phphistorical_Version2_mids_img">
									<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
										src="/static/imghw/default1.png" class="lazy"  data-src="https://img.php.cn/upload/article/001/246/273/174261349469659.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Shiseido의 공식 웹 사이트와 같은 시차 스크롤 및 요소 애니메이션 효과를 달성하는 방법은 무엇입니까?
또는:
Shiseido의 공식 웹 사이트와 같은 페이지 스크롤과 함께 애니메이션 효과를 어떻게 달성 할 수 있습니까?" />
								</a>
								<a href="https://www.php.cn/ko/faq/1796790259.html" title="Shiseido의 공식 웹 사이트와 같은 시차 스크롤 및 요소 애니메이션 효과를 달성하는 방법은 무엇입니까?
또는:
Shiseido의 공식 웹 사이트와 같은 페이지 스크롤과 함께 애니메이션 효과를 어떻게 달성 할 수 있습니까?" class="phphistorical_Version2_mids_title">Shiseido의 공식 웹 사이트와 같은 시차 스크롤 및 요소 애니메이션 효과를 달성하는 방법은 무엇입니까?
또는:
Shiseido의 공식 웹 사이트와 같은 페이지 스크롤과 함께 애니메이션 효과를 어떻게 달성 할 수 있습니까?</a>
								<span class="Articlelist_txts_time">Apr 04, 2025 pm	 05:36 PM</span>
								<p class="Articlelist_txts_p">이 기사에서 시차 스크롤 및 요소 애니메이션 효과 실현에 대한 토론은 Shiseido 공식 웹 사이트 (https://www.shiseido.co.jp/sb/wonderland/)와 유사하게 달성하는 방법을 살펴볼 것입니다.</p>
							</div>
														<div class="phphistorical_Version2_mids">
								<a href="https://www.php.cn/ko/faq/1796790251.html" title="Console.log 출력 결과의 차이 : 두 통화가 다른 이유는 무엇입니까?" class="phphistorical_Version2_mids_img">
									<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
										src="/static/imghw/default1.png" class="lazy"  data-src="https://img.php.cn/upload/article/001/246/273/174261396498229.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Console.log 출력 결과의 차이 : 두 통화가 다른 이유는 무엇입니까?" />
								</a>
								<a href="https://www.php.cn/ko/faq/1796790251.html" title="Console.log 출력 결과의 차이 : 두 통화가 다른 이유는 무엇입니까?" class="phphistorical_Version2_mids_title">Console.log 출력 결과의 차이 : 두 통화가 다른 이유는 무엇입니까?</a>
								<span class="Articlelist_txts_time">Apr 04, 2025 pm	 05:12 PM</span>
								<p class="Articlelist_txts_p">Console.log 출력의 차이의 근본 원인에 대한 심층적 인 논의. 이 기사에서는 Console.log 함수의 출력 결과의 차이점을 코드에서 분석하고 그에 따른 이유를 설명합니다. � ...</p>
							</div>
														<div class="phphistorical_Version2_mids">
								<a href="https://www.php.cn/ko/faq/1796788947.html" title="JavaScript는 배우기가 어렵습니까?" class="phphistorical_Version2_mids_img">
									<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
										src="/static/imghw/default1.png" class="lazy"  data-src="https://img.php.cn/upload/article/001/253/068/174361081173887.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="JavaScript는 배우기가 어렵습니까?" />
								</a>
								<a href="https://www.php.cn/ko/faq/1796788947.html" title="JavaScript는 배우기가 어렵습니까?" class="phphistorical_Version2_mids_title">JavaScript는 배우기가 어렵습니까?</a>
								<span class="Articlelist_txts_time">Apr 03, 2025 am	 12:20 AM</span>
								<p class="Articlelist_txts_p">JavaScript를 배우는 것은 어렵지 않지만 어려운 일입니다. 1) 변수, 데이터 유형, 기능 등과 같은 기본 개념을 이해합니다. 2) 마스터 비동기 프로그래밍 및 이벤트 루프를 통해이를 구현하십시오. 3) DOM 운영을 사용하고 비동기 요청을 처리합니다. 4) 일반적인 실수를 피하고 디버깅 기술을 사용하십시오. 5) 성능을 최적화하고 모범 사례를 따르십시오.</p>
							</div>
														<div class="phphistorical_Version2_mids">
								<a href="https://www.php.cn/ko/faq/1796787607.html" title="PowerPoint가 JavaScript를 실행할 수 있습니까?" class="phphistorical_Version2_mids_img">
									<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
										src="/static/imghw/default1.png" class="lazy"  data-src="https://img.php.cn/upload/article/001/253/068/174349902146404.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="PowerPoint가 JavaScript를 실행할 수 있습니까?" />
								</a>
								<a href="https://www.php.cn/ko/faq/1796787607.html" title="PowerPoint가 JavaScript를 실행할 수 있습니까?" class="phphistorical_Version2_mids_title">PowerPoint가 JavaScript를 실행할 수 있습니까?</a>
								<span class="Articlelist_txts_time">Apr 01, 2025 pm	 05:17 PM</span>
								<p class="Articlelist_txts_p">JavaScript는 PowerPoint에서 실행할 수 있으며 외부 JavaScript 파일을 호출하거나 VBA를 통해 HTML 파일을 포함시켜 구현할 수 있습니다. 1. VBA를 사용하여 JavaScript 파일을 호출하려면 매크로를 활성화하고 VBA 프로그래밍 지식이 있어야합니다. 2. JavaScript가 포함 된 HTML 파일을 포함시켜 간단하고 사용하기 쉽지만 보안 제한이 적용됩니다. 장점에는 확장 된 기능과 유연성이 포함되며, 단점에는 보안, 호환성 및 복잡성이 포함됩니다. 실제로 보안, 호환성, 성능 및 사용자 경험에주의를 기울여야합니다.</p>
							</div>
													</div>

<a href="https://www.php.cn/ko/web-designer.html" class="phpgenera_Details_mainL4_botton">
								<span>See all articles</span>
								<img src="/static/imghw/down_right.png" alt="" />
							</a>
											</div>
				</div>
					</div>
	</main>
	<footer>
    <div class="footer">
        <div class="footertop">
            <img src="/static/imghw/logo.png" alt="">
            <p>공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！</p>
        </div>
        <div class="footermid">
            <a href="https://www.php.cn/ko/about/us.html">회사 소개</a>
            <a href="https://www.php.cn/ko/about/disclaimer.html">부인 성명</a>
            <a href="https://www.php.cn/ko/update/article_0_1.html">Sitemap</a>
        </div>
        <div class="footerbottom">
            <p>
                © php.cn All rights reserved
            </p>
        </div>
    </div>
</footer>

<input type="hidden" id="verifycode" value="/captcha.html">
<script>layui.use(['element', 'carousel'], function () {var element = layui.element;$ = layui.jquery;var carousel = layui.carousel;carousel.render({elem: '#test1', width: '100%', height: '330px', arrow: 'always'});$.getScript('/static/js/jquery.lazyload.min.js', function () {$("img").lazyload({placeholder: "/static/images/load.jpg", effect: "fadeIn", threshold: 200, skip_invisible: false});});});</script>

document.addEventListener("DOMContentLoaded", (event) => {
			// 定义一个函数来处理滚动链接的点击事件
			function setupScrollLink(scrollLinkId, targetElementId) {
				const scrollLink = document.getElementById(scrollLinkId);
				const targetElement = document.getElementById(targetElementId);

if (scrollLink && targetElement) {
					scrollLink.addEventListener("click", (e) => {
						e.preventDefault(); // 阻止默认链接行为
						targetElement.scrollIntoView({
							behavior: "smooth"
						}); // 平滑滚动到目标元素
					});
				} else {
					console.warn(
						`Either scroll link with ID '${scrollLinkId}' or target element with ID '${targetElementId}' not found.`
						);
				}
			}

// 使用该函数设置多个滚动链接
			setupScrollLink("Article_Details_main1L2s_1", "article_main_title1");
			setupScrollLink("Article_Details_main1L2s_2", "article_main_title2");
			setupScrollLink("Article_Details_main1L2s_3", "article_main_title3");
			setupScrollLink("Article_Details_main1L2s_4", "article_main_title4");
			setupScrollLink("Article_Details_main1L2s_5", "article_main_title5");
			setupScrollLink("Article_Details_main1L2s_6", "article_main_title6");
			// 可以继续添加更多的滚动链接设置
		});

window.addEventListener("scroll", function () {
			var fixedElement = document.getElementById("Article_Details_main1Lmain");
			var scrollTop = window.scrollY || document.documentElement.scrollTop; // 兼容不同浏览器
			var clientHeight = window.innerHeight || document.documentElement.clientHeight; // 视口高度
			var scrollHeight = document.documentElement.scrollHeight; // 页面总高度

// 计算距离底部的距离
			var distanceToBottom = scrollHeight - scrollTop - clientHeight;

// 当距离底部小于或等于300px时，取消固定定位
			if (distanceToBottom <= 980) {
				fixedElement.classList.remove("Article_Details_main1Lmain");
				fixedElement.classList.add("Article_Details_main1Lmain_relative");
			} else {
				// 否则，保持固定定位
				fixedElement.classList.remove("Article_Details_main1Lmain_relative");
				fixedElement.classList.add("Article_Details_main1Lmain");
      		}
    	});

</script>
</body>

</html>