diff --git a/404.html b/404.html
index 9c7e849..6a1da7b 100644
--- a/404.html
+++ b/404.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
 	<head>
-		<meta charset="GB2312" />
+		<meta charset="UTF-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
 		<title>YuanRetro-404 Not Found</title>
 		<link rel="stylesheet" href="https://www.yuanshen.dev/style.css">
@@ -35,8 +35,8 @@ <h2>404 Not Found</h2>
 		</center>
 		<div class="row">
 			<img src="https://www.yuanshen.dev/paimon.bmp" width="150" height="246">
-			<span>前面的区域，以后再来探索吧~<br />How about we explore the area ahead of us later~~
-				<br /><a href="http://www.yuanshen.dev">返回主页</a>/<a href="http://www.yuanshen.dev/en/index.html">Return
+			<span>鍓嶉潰鐨勫尯鍩燂紝浠ュ悗鍐嶆潵鎺㈢储鍚<br />How about we explore the area ahead of us later~~
+				<br /><a href="http://www.yuanshen.dev">杩斿洖涓婚〉</a>/<a href="http://www.yuanshen.dev/en/index.html">Return
 					to main page</a>
 			</span>
 		</div>
diff --git a/about.html b/about.html
index f7c7fce..2f19a9b 100644
--- a/about.html
+++ b/about.html
@@ -1,37 +1,37 @@
 <!DOCTYPE html>
 <html>
 	<head>
-		<meta charset="GB2312">
+		<meta charset="UTF-8">
 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
-		<title>YuanRetro-关于</title>
+		<title>YuanRetro-鍏充簬</title>
 		<link rel="stylesheet" href="./style.css">
 	</head>
 	<body class="body">
 		<ul>
-			<li class="navi"><a href="http://www.yuanshen.dev/">主页</a></li>
-			<li class="navi"><a href="http://www.yuanshen.dev/music.html">音乐</a></li>
-			<li class="navi"><a href="http://www.yuanshen.dev/pinball.html">JS弹球</a></li>
-			<li class="navi"><a href="http://www.yuanshen.dev/morse.html">莫尔斯电码</a></li>
-			<li class="navi"><a href="http://www.yuanshen.dev/crtirgen.html">中国铁路行程信息提示生成器(CRTIRGen)</a></li>
-			<li class="navi"><a href="http://www.yuanshen.dev/about.html">关于</a></li>
+			<li class="navi"><a href="http://www.yuanshen.dev/">涓婚〉</a></li>
+			<li class="navi"><a href="http://www.yuanshen.dev/music.html">闊充箰</a></li>
+			<li class="navi"><a href="http://www.yuanshen.dev/pinball.html">JS寮圭悆</a></li>
+			<li class="navi"><a href="http://www.yuanshen.dev/morse.html">鑾皵鏂數鐮�</a></li>
+			<li class="navi"><a href="http://www.yuanshen.dev/crtirgen.html">涓浗閾佽矾琛岀▼淇℃伅鎻愮ず鐢熸垚鍣�(CRTIRGen)</a></li>
+			<li class="navi"><a href="http://www.yuanshen.dev/about.html">鍏充簬</a></li>
 			<li class="navi"><a href="http://www.yuanshen.dev/en/index.html">English</a></li>
 		</ul>
 		<br />
-		<h2>关于我……</h2>
+		<h2>鍏充簬鎴戔€︹€�</h2>
 		<p>
-			一枚喜欢古董科技的高中生哦~这个网站是自己用不多的HTML和JS知识从零写<del>（拼凑）</del>出来的，不足之处还请多多谅解啦~<br />
-			当然你也可以在Github仓库向我提交Issue呦~<br />
-			2017年的时候，我机缘巧合在中入坑了古董科技，之后我就渐渐地学习了一些硬件知识，并且经常造访本地的电脑城和电子回收站，寻找一些古董硬件<br />
-			在此期间，我的计算机知识也得到了不少进步，比如我用来开发这个网站的主力电脑，就是自己用许多不同来源的配件一点点组装起来的awa<br />
-			回看刚刚入坑时候的一些迷惑行为，真心感觉自己很傻55555，但是哪怕现在，还是有数不清的小小细节是我所不知道的，学习的路是永无止境的哩~
+			涓€鏋氬枩娆㈠彜钁ｇ鎶€鐨勯珮涓敓鍝杩欎釜缃戠珯鏄嚜宸辩敤涓嶅鐨凥TML鍜孞S鐭ヨ瘑浠庨浂鍐�<del>锛堟嫾鍑戯級</del>鍑烘潵鐨勶紝涓嶈冻涔嬪杩樿澶氬璋呰В鍟<br />
+			褰撶劧浣犱篃鍙互鍦℅ithub浠撳簱鍚戞垜鎻愪氦Issue鍛<br />
+			2017骞寸殑鏃跺€欙紝鎴戞満缂樺阀鍚堝湪涓叆鍧戜簡鍙よ懀绉戞妧锛屼箣鍚庢垜灏辨笎娓愬湴瀛︿範浜嗕竴浜涚‖浠剁煡璇嗭紝骞朵笖缁忓父閫犺鏈湴鐨勭數鑴戝煄鍜岀數瀛愬洖鏀剁珯锛屽鎵句竴浜涘彜钁ｇ‖浠�<br />
+			鍦ㄦ鏈熼棿锛屾垜鐨勮绠楁満鐭ヨ瘑涔熷緱鍒颁簡涓嶅皯杩涙锛屾瘮濡傛垜鐢ㄦ潵寮€鍙戣繖涓綉绔欑殑涓诲姏鐢佃剳锛屽氨鏄嚜宸辩敤璁稿涓嶅悓鏉ユ簮鐨勯厤浠朵竴鐐圭偣缁勮璧锋潵鐨刟wa<br />
+			鍥炵湅鍒氬垰鍏ュ潙鏃跺€欑殑涓€浜涜糠鎯戣涓猴紝鐪熷績鎰熻鑷繁寰堝偦55555锛屼絾鏄摢鎬曠幇鍦紝杩樻槸鏈夋暟涓嶆竻鐨勫皬灏忕粏鑺傛槸鎴戞墍涓嶇煡閬撶殑锛屽涔犵殑璺槸姘告棤姝㈠鐨勫摡~
 		</p>
-		<h2>联系我……</h2>
-		最快的方式自然是发邮件啦~以下的两个邮箱地址都可以使用哦~<a
+		<h2>鑱旂郴鎴戔€︹€�</h2>
+		鏈€蹇殑鏂瑰紡鑷劧鏄彂閭欢鍟浠ヤ笅鐨勪袱涓偖绠卞湴鍧€閮藉彲浠ヤ娇鐢ㄥ摝~<a
 			href="mailto:lijiaxuan1815@gmail.com">lijiaxuan1815@gmail.com</a> (or <a
 			href="mailto:lijiaxuan1811@163.com">lijiaxuan1811@163.com</a>)
-		<h2>源代码……</h2>
-		<p>自然是完全开源的啦（行程信息提示生成器还有单独仓库诶）~可以在以下地址找到哦~<a
+		<h2>婧愪唬鐮佲€︹€�</h2>
+		<p>鑷劧鏄畬鍏ㄥ紑婧愮殑鍟︼紙琛岀▼淇℃伅鎻愮ず鐢熸垚鍣ㄨ繕鏈夊崟鐙粨搴撹锛墌鍙互鍦ㄤ互涓嬪湴鍧€鎵惧埌鍝<a
 				href="https://github.com/lijiaxuan1811/yuanshen.dev">https://github.com/lijiaxuan1811/yuanshen.dev</a>.
-			如果需要的话，随便使用就好啦~</p>
+			濡傛灉闇€瑕佺殑璇濓紝闅忎究浣跨敤灏卞ソ鍟</p>
 	</body>
 </html>
\ No newline at end of file
diff --git a/crtirgen.html b/crtirgen.html
index 16b346d..fe0d4bd 100644
--- a/crtirgen.html
+++ b/crtirgen.html
@@ -1,129 +1,129 @@
 <!DOCTYPE html>
 <html>
 	<head>
-		<meta charset="GB2312">
+		<meta charset="UTF-8">
 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
-		<title>YuanRetro-中国铁路行程信息提示生成器(CRTIRGen)</title>
+		<title>YuanRetro-涓浗閾佽矾琛岀▼淇℃伅鎻愮ず鐢熸垚鍣�(CRTIRGen)</title>
 		<link rel="stylesheet" href="./style.css">
 	</head>
 	<body class="body">
 		<ul>
-			<li class="navi"><a href="http://www.yuanshen.dev/">主页</a></li>
-			<li class="navi"><a href="http://www.yuanshen.dev/music.html">音乐</a></li>
-			<li class="navi"><a href="http://www.yuanshen.dev/pinball.html">JS弹球</a></li>
-			<li class="navi"><a href="http://www.yuanshen.dev/morse.html">莫尔斯电码</a></li>
-			<li class="navi"><a href="http://www.yuanshen.dev/crtirgen.html">中国铁路行程信息提示生成器(CRTIRGen)</a></li>
-			<li class="navi"><a href="http://www.yuanshen.dev/about.html">关于</a></li>
+			<li class="navi"><a href="http://www.yuanshen.dev/">涓婚〉</a></li>
+			<li class="navi"><a href="http://www.yuanshen.dev/music.html">闊充箰</a></li>
+			<li class="navi"><a href="http://www.yuanshen.dev/pinball.html">JS寮圭悆</a></li>
+			<li class="navi"><a href="http://www.yuanshen.dev/morse.html">鑾皵鏂數鐮�</a></li>
+			<li class="navi"><a href="http://www.yuanshen.dev/crtirgen.html">涓浗閾佽矾琛岀▼淇℃伅鎻愮ず鐢熸垚鍣�(CRTIRGen)</a></li>
+			<li class="navi"><a href="http://www.yuanshen.dev/about.html">鍏充簬</a></li>
 			<li class="navi"><a href="http://www.yuanshen.dev/en/index.html">English</a></li>
 		</ul>
 		<br />
-		<h2>中国铁路行程信息提示生成器 V1.2-2024.07.23</h2>
-		<p>一、铁路磁票（报销凭证）票号（21字符）构成：车站TMIS（5位数，查询请前往<a href="https://rail.re/">https://rail.re/</a>）+出票机器类型（2位数，00-09为人工售票窗口，20-29为车票代售点，30-39为自动售票机）+出票机器编号（3位数）+结算日期（4位数，MMDD格式，一般为乘车日期下一天）+票纸编号（7字符，一般为1字母+6数字）</p>
-	    <p>如：（1）18089（青岛站）31（售票机）042（机器号）0517（结算日期,5月17日）H000565（票纸号）<br />（2）17984（胶州站）00（人工窗口）003（机器号）0229（结算日期，2月29日）P062258（票纸号）<br />（3）17999（蓝村站）30（售票机）031（机器号）1213（结算日期，12月13日）A016888（票纸号）</p>
-		<p>二、电子票号（25数字）构成：车站TMIS（5位数）+出票机器类型（2位数，同上）+出票机器编号（3位数）+结算日期（4位数，同上）+7位数（一般9开头，含义未知，如果您恰好知道，请不吝赐教哦~）+年份（4位数）</p>
-		<p>如：（1）22972（东莞港站）30（售票机）003（机器号）1114（结算日期，11月14日）9005786（未知）2020（年份）<br />（2）29957（达州站）00（人工窗口）005（机器号）0319（结算日期，3月19日）9110473（未知）2021（年份）<br />（3）39500（咸阳站）00（人工窗口）003（机器号）0214（结算日期，2月14日）9155434（未知）2022（年份）</p>
-		<p>三、行程信息提示“出单”号码（10位数）构成：车站TMIS（5位数）+出票机器类型（2位数，同上）+出票机器编号（3位数）</p>
-		<p>如：（1）17963（胶州北站）30（售票机）008（机器号）<br />（2）66827（徐州东站）30（售票机）088（机器号）<br />（3）18056（城阳站）00（人工窗口）003（机器号）</p>
+		<h2>涓浗閾佽矾琛岀▼淇℃伅鎻愮ず鐢熸垚鍣� V1.2-2024.07.23</h2>
+		<p>涓€銆侀搧璺绁紙鎶ラ攢鍑瘉锛夌エ鍙凤紙21瀛楃锛夋瀯鎴愶細杞︾珯TMIS锛�5浣嶆暟锛屾煡璇㈣鍓嶅線<a href="https://rail.re/">https://rail.re/</a>锛�+鍑虹エ鏈哄櫒绫诲瀷锛�2浣嶆暟锛�00-09涓轰汉宸ュ敭绁ㄧ獥鍙ｏ紝20-29涓鸿溅绁ㄤ唬鍞偣锛�30-39涓鸿嚜鍔ㄥ敭绁ㄦ満锛�+鍑虹エ鏈哄櫒缂栧彿锛�3浣嶆暟锛�+缁撶畻鏃ユ湡锛�4浣嶆暟锛孧MDD鏍煎紡锛屼竴鑸负涔樿溅鏃ユ湡涓嬩竴澶╋級+绁ㄧ焊缂栧彿锛�7瀛楃锛屼竴鑸负1瀛楁瘝+6鏁板瓧锛�</p>
+	    <p>濡傦細锛�1锛�18089锛堥潚宀涚珯锛�31锛堝敭绁ㄦ満锛�042锛堟満鍣ㄥ彿锛�0517锛堢粨绠楁棩鏈�,5鏈�17鏃ワ級H000565锛堢エ绾稿彿锛�<br />锛�2锛�17984锛堣兌宸炵珯锛�00锛堜汉宸ョ獥鍙ｏ級003锛堟満鍣ㄥ彿锛�0229锛堢粨绠楁棩鏈燂紝2鏈�29鏃ワ級P062258锛堢エ绾稿彿锛�<br />锛�3锛�17999锛堣摑鏉戠珯锛�30锛堝敭绁ㄦ満锛�031锛堟満鍣ㄥ彿锛�1213锛堢粨绠楁棩鏈燂紝12鏈�13鏃ワ級A016888锛堢エ绾稿彿锛�</p>
+		<p>浜屻€佺數瀛愮エ鍙凤紙25鏁板瓧锛夋瀯鎴愶細杞︾珯TMIS锛�5浣嶆暟锛�+鍑虹エ鏈哄櫒绫诲瀷锛�2浣嶆暟锛屽悓涓婏級+鍑虹エ鏈哄櫒缂栧彿锛�3浣嶆暟锛�+缁撶畻鏃ユ湡锛�4浣嶆暟锛屽悓涓婏級+7浣嶆暟锛堜竴鑸�9寮€澶达紝鍚箟鏈煡锛屽鏋滄偍鎭板ソ鐭ラ亾锛岃涓嶅悵璧愭暀鍝锛�+骞翠唤锛�4浣嶆暟锛�</p>
+		<p>濡傦細锛�1锛�22972锛堜笢鑾炴腐绔欙級30锛堝敭绁ㄦ満锛�003锛堟満鍣ㄥ彿锛�1114锛堢粨绠楁棩鏈燂紝11鏈�14鏃ワ級9005786锛堟湭鐭ワ級2020锛堝勾浠斤級<br />锛�2锛�29957锛堣揪宸炵珯锛�00锛堜汉宸ョ獥鍙ｏ級005锛堟満鍣ㄥ彿锛�0319锛堢粨绠楁棩鏈燂紝3鏈�19鏃ワ級9110473锛堟湭鐭ワ級2021锛堝勾浠斤級<br />锛�3锛�39500锛堝捀闃崇珯锛�00锛堜汉宸ョ獥鍙ｏ級003锛堟満鍣ㄥ彿锛�0214锛堢粨绠楁棩鏈燂紝2鏈�14鏃ワ級9155434锛堟湭鐭ワ級2022锛堝勾浠斤級</p>
+		<p>涓夈€佽绋嬩俊鎭彁绀衡€滃嚭鍗曗€濆彿鐮侊紙10浣嶆暟锛夋瀯鎴愶細杞︾珯TMIS锛�5浣嶆暟锛�+鍑虹エ鏈哄櫒绫诲瀷锛�2浣嶆暟锛屽悓涓婏級+鍑虹エ鏈哄櫒缂栧彿锛�3浣嶆暟锛�</p>
+		<p>濡傦細锛�1锛�17963锛堣兌宸炲寳绔欙級30锛堝敭绁ㄦ満锛�008锛堟満鍣ㄥ彿锛�<br />锛�2锛�66827锛堝緪宸炰笢绔欙級30锛堝敭绁ㄦ満锛�088锛堟満鍣ㄥ彿锛�<br />锛�3锛�18056锛堝煄闃崇珯锛�00锛堜汉宸ョ獥鍙ｏ級003锛堟満鍣ㄥ彿锛�</p>
 	<form id="customSelection">
 	<br />
-			<label for="date1">开车日期：</label>
+			<label for="date1">寮€杞︽棩鏈燂細</label>
 			<input type="date" id="date1" min="0000-01-01" max="9999-12-31" />
-			<label for="time1">开车时间：</label>
+			<label for="time1">寮€杞︽椂闂达細</label>
 			<input type="time" id="time1" /><br />
-			<label for="date2">打印日期：</label>
+			<label for="date2">鎵撳嵃鏃ユ湡锛�</label>
 			<input type="date" id="date2" min="0000-01-01" max="9999-12-31" />
-			<label for="time2">打印时间：</label>
-			<input type="time" id="time2" step="1" /><br /><!--添加step="1"使秒数选框出现-->
-			<label for="depStation">出发车站：</label>
+			<label for="time2">鎵撳嵃鏃堕棿锛�</label>
+			<input type="time" id="time2" step="1" /><br /><!--娣诲姞step="1"浣跨鏁伴€夋鍑虹幇-->
+			<label for="depStation">鍑哄彂杞︾珯锛�</label>
 			<input type="text" id="depStation" size="10" />
-			<label for="depStation">站</label>
-			<label for="depPy">站名拼音（首字母大写）：</label>
+			<label for="depStation">绔�</label>
+			<label for="depPy">绔欏悕鎷奸煶锛堥瀛楁瘝澶у啓锛夛細</label>
 			<input type="text" id="depPy" size="14" /><br />
-			<label for="trainTypeDrop">车次号：</label>
+			<label for="trainTypeDrop">杞︽鍙凤細</label>
 			<select id="trainTypeDrop">
-				<option value="normal">普客(无前缀)</option><!--"Normal"通过判断语句转为无前缀，其他的直接使用value中的值作为车次号前缀-->
-				<option value="K">快速(K)</option>
-				<option value="T">特快(T)</option>
-				<option value="Z">直特(Z)</option>
-				<option value="T">旅游(Y)</option>
-				<option value="L">临客(L)</option>
-				<option value="S">市域/市郊(S)</option>
-				<option value="C">城际(C)</option>
-				<option value="D">动车(D)</option>
-				<option value="G">高铁(G)</option>
+				<option value="normal">鏅(鏃犲墠缂€)</option><!--"Normal"閫氳繃鍒ゆ柇璇彞杞负鏃犲墠缂€锛屽叾浠栫殑鐩存帴浣跨敤value涓殑鍊间綔涓鸿溅娆″彿鍓嶇紑-->
+				<option value="K">蹇€�(K)</option>
+				<option value="T">鐗瑰揩(T)</option>
+				<option value="Z">鐩寸壒(Z)</option>
+				<option value="T">鏃呮父(Y)</option>
+				<option value="L">涓村(L)</option>
+				<option value="S">甯傚煙/甯傞儕(S)</option>
+				<option value="C">鍩庨檯(C)</option>
+				<option value="D">鍔ㄨ溅(D)</option>
+				<option value="G">楂橀搧(G)</option>
 			</select>
-			<label for="trainTypeDrop">次</label>
+			<label for="trainTypeDrop">娆�</label>
 			<input type="text" id="trainNo" size="8" /><br />
-			<label for="arrStation">到达车站：</label>
+			<label for="arrStation">鍒拌揪杞︾珯锛�</label>
 			<input type="text" id="arrStation" size="10" />
-			<label for="arrStation">站</label>
-			<label for="arrPy">站名拼音（首字母大写）：</label>
+			<label for="arrStation">绔�</label>
+			<label for="arrPy">绔欏悕鎷奸煶锛堥瀛楁瘝澶у啓锛夛細</label>
 			<input type="text" id="arrPy" size="14" /><br />
-			<label for="seatNumber">座号：</label>
+			<label for="seatNumber">搴у彿锛�</label>
 			<input type="text" id="seatNumber" size="10" />
-			<label for="seatType">坐席类别：</label>
+			<label for="seatType">鍧愬腑绫诲埆锛�</label>
 			<input type="text" id="seatType" size="10" /><br />
-			<label for="fare">票价（带小数点后一位）：</label>
+			<label for="fare">绁ㄤ环锛堝甫灏忔暟鐐瑰悗涓€浣嶏級锛�</label>
 			<input type="text" id="fare" size="6" />
-			<label for="fare">元</label>
-			<label for="ticketCheck">检票口（没有可不填）：</label>
+			<label for="fare">鍏�</label>
+			<label for="ticketCheck">妫€绁ㄥ彛锛堟病鏈夊彲涓嶅～锛夛細</label>
 			<input type="text" id="ticketCheck" size="12" /><br />
-			<label for="TMIS">车站TMIS号码（5位数，查询请前往<a href="https://rail.re/">https://rail.re/</a>）：</label><!--TMIS为每个铁路车站的唯一五位数编号-->
+			<label for="TMIS">杞︾珯TMIS鍙风爜锛�5浣嶆暟锛屾煡璇㈣鍓嶅線<a href="https://rail.re/">https://rail.re/</a>锛夛細</label><!--TMIS涓烘瘡涓搧璺溅绔欑殑鍞竴浜斾綅鏁扮紪鍙�-->
 			<input type="text" id="TMIS" size="8" /><br />
-			<label for="machineType">打印机器类型（2位数，00-09：车站售票窗口；20-29：车票代售点；30-39：自动售票机）：</label>
+			<label for="machineType">鎵撳嵃鏈哄櫒绫诲瀷锛�2浣嶆暟锛�00-09锛氳溅绔欏敭绁ㄧ獥鍙ｏ紱20-29锛氳溅绁ㄤ唬鍞偣锛�30-39锛氳嚜鍔ㄥ敭绁ㄦ満锛夛細</label>
 			<input type="text" id="machineType" size="5" /><br />
-			<label for="machineNo">打印机器编号（3位数）：</label><!--凭条尾部的“出单”10位数号码即为TMIS（5位数）+机器类型（2位数）+机器编号（3位数）-->
+			<label for="machineNo">鎵撳嵃鏈哄櫒缂栧彿锛�3浣嶆暟锛夛細</label><!--鍑潯灏鹃儴鐨勨€滃嚭鍗曗€�10浣嶆暟鍙风爜鍗充负TMIS锛�5浣嶆暟锛�+鏈哄櫒绫诲瀷锛�2浣嶆暟锛�+鏈哄櫒缂栧彿锛�3浣嶆暟锛�-->
 			<input type="text" id="machineNo" size="5" />
-			<label for="orderNo">订单号（10个字符）：</label><!--一般为E开头-->
+			<label for="orderNo">璁㈠崟鍙凤紙10涓瓧绗︼級锛�</label><!--涓€鑸负E寮€澶�-->
 			<input type="text" id="orderNo" size="10" /><br />
-			<label for="ticketNo">电子票号（25位数）：</label><!--前14位数为TMIS（5位数）+机器类型（2位数）+机器编号（3位数）+结算日期（MMDD，4位数）；最后4位数为年份；两部分中间的7位数未知-->
+			<label for="ticketNo">鐢靛瓙绁ㄥ彿锛�25浣嶆暟锛夛細</label><!--鍓�14浣嶆暟涓篢MIS锛�5浣嶆暟锛�+鏈哄櫒绫诲瀷锛�2浣嶆暟锛�+鏈哄櫒缂栧彿锛�3浣嶆暟锛�+缁撶畻鏃ユ湡锛圡MDD锛�4浣嶆暟锛夛紱鏈€鍚�4浣嶆暟涓哄勾浠斤紱涓ら儴鍒嗕腑闂寸殑7浣嶆暟鏈煡-->
 			<input type="text" id="ticketNo" size="30" /><br />
-			<label for="name">乘车人姓名：</label>
+			<label for="name">涔樿溅浜哄鍚嶏細</label>
 			<input type="text" id="name" size="8" />
-			<label for="idTypeEng">身份证件类型代码（2字母）：</label>
+			<label for="idTypeEng">韬唤璇佷欢绫诲瀷浠ｇ爜锛�2瀛楁瘝锛夛細</label>
 			<input type="text" id="idTypeEng" size="6" /><br />
-			<label for="idTypeChn">身份证件类型（中文）：</label>
+			<label for="idTypeChn">韬唤璇佷欢绫诲瀷锛堜腑鏂囷級锛�</label>
 			<input type="text" id="idTypeChn" size="12" />
-			<label for="idNo">身份证件号码（必要位置使用‘*’代替）：</label>
+			<label for="idNo">韬唤璇佷欢鍙风爜锛堝繀瑕佷綅缃娇鐢ㄢ€�*鈥欎唬鏇匡級锛�</label>
 			<input type="text" id="idNo" size="18" />
-			<input type="button" value="确认" id="submit1" />
+			<input type="button" value="纭" id="submit1" />
 		</form>
 		<canvas id="canvas" width="800" height="1400"></canvas>
 		<script type="text/javascript">
-			var canv = document.getElementById("canvas");//声明画布对象
-			var ctx = canv.getContext("2d");//声明画笔对象
+			var canv = document.getElementById("canvas");//澹版槑鐢诲竷瀵硅薄
+			var ctx = canv.getContext("2d");//澹版槑鐢荤瑪瀵硅薄
 			var img1 = new Image();
-			var img2 = new Image();//声明中国铁路logo和二维码的图片对象
+			var img2 = new Image();//澹版槑涓浗閾佽矾logo鍜屼簩缁寸爜鐨勫浘鐗囧璞�
 			img1.src = "./img1.gif";
 			img2.src = "./img2.gif";
-			var date1, time1, date2, time2, trainTypeDrop, trainNo;//声明表单中若干项目的对象变量
-			var button = document.getElementById("submit1");//声明提交按钮对象
+			var date1, time1, date2, time2, trainTypeDrop, trainNo;//澹版槑琛ㄥ崟涓嫢骞查」鐩殑瀵硅薄鍙橀噺
+			var button = document.getElementById("submit1");//澹版槑鎻愪氦鎸夐挳瀵硅薄
 			var depTime = "", depYear = "", depStation = "", depPy = "", arrStation = "", arrPy = "",
 			prtDate = "", prtTime = "", trainNumber = "", machineType = "", machineNo = "",code1 = "",
 			seatNumber = "", seatType = "", fare = "", ticketCheck = "", orderNo = "", ticketNo = "",
-			name = "", idTypeEng = "", idTypeChn = "", idNo = "", TMIS = "";//声明所有字符串变量
-			var depMonth = 0, depDay = 0, pointer = 0, pointer1 = 0, temp = 0, temp1 = "", temp2 = 0, temp3 = 0;//声明数字、临时变量
+			name = "", idTypeEng = "", idTypeChn = "", idNo = "", TMIS = "";//澹版槑鎵€鏈夊瓧绗︿覆鍙橀噺
+			var depMonth = 0, depDay = 0, pointer = 0, pointer1 = 0, temp = 0, temp1 = "", temp2 = 0, temp3 = 0;//澹版槑鏁板瓧銆佷复鏃跺彉閲�
 
 			function readForm() {
-				//本函数从输入表单中读取所有输入的数据
+				//鏈嚱鏁颁粠杈撳叆琛ㄥ崟涓鍙栨墍鏈夎緭鍏ョ殑鏁版嵁
 				date1 = document.getElementById("date1");
 				time1 = document.getElementById("time1");
 				date2 = document.getElementById("date2");
-				time2 = document.getElementById("time2");//日期时间选框
-				trainTypeDrop = document.getElementById("trainTypeDrop");//车次类型下拉框对象
+				time2 = document.getElementById("time2");//鏃ユ湡鏃堕棿閫夋
+				trainTypeDrop = document.getElementById("trainTypeDrop");//杞︽绫诲瀷涓嬫媺妗嗗璞�
 				trainNo = document.getElementById("trainNo");
-				temp1 = trainTypeDrop.options[trainTypeDrop.selectedIndex].value;//获取下拉框所有选择项中被选中项的值
+				temp1 = trainTypeDrop.options[trainTypeDrop.selectedIndex].value;//鑾峰彇涓嬫媺妗嗘墍鏈夐€夋嫨椤逛腑琚€変腑椤圭殑鍊�
 				if (temp1 == "normal") {
-					trainNumber = trainNo.value;//如果类型为普客，则不加任何前缀
+					trainNumber = trainNo.value;//濡傛灉绫诲瀷涓烘櫘瀹紝鍒欎笉鍔犱换浣曞墠缂€
 				} else {
-					trainNumber = temp1 + trainNo.value;//否则，使用该项的值作为车次号前缀
+					trainNumber = temp1 + trainNo.value;//鍚﹀垯锛屼娇鐢ㄨ椤圭殑鍊间綔涓鸿溅娆″彿鍓嶇紑
 				}
 				depTime = time1.value;
-				depYear = date1.value.substr(0, 4);//分别截取开车年月日
+				depYear = date1.value.substr(0, 4);//鍒嗗埆鎴彇寮€杞﹀勾鏈堟棩
 				depMonth = Number(date1.value.substr(5, 2));
-				depDay = Number(date1.value.substr(8, 2));//将开车月日转换为数字类型，避免一位数前导0
+				depDay = Number(date1.value.substr(8, 2));//灏嗗紑杞︽湀鏃ヨ浆鎹负鏁板瓧绫诲瀷锛岄伩鍏嶄竴浣嶆暟鍓嶅0
 				prtDate = date2.value;
-				prtTime = time2.value;//出票日期时间格式可直接使用，无需转换
+				prtTime = time2.value;//鍑虹エ鏃ユ湡鏃堕棿鏍煎紡鍙洿鎺ヤ娇鐢紝鏃犻渶杞崲
 				depStation = document.getElementById("depStation").value;
 				depPy = document.getElementById("depPy").value;
 				arrStation = document.getElementById("arrStation").value;
@@ -140,174 +140,174 @@
 				name = document.getElementById("name").value;
 				idTypeEng = document.getElementById("idTypeEng").value;
 				idTypeChn = document.getElementById("idTypeChn").value;
-				idNo = document.getElementById("idNo").value;//获取输入框的输入值（直接使用document.getElementById方法，减少需要声明的对象数量）
+				idNo = document.getElementById("idNo").value;//鑾峰彇杈撳叆妗嗙殑杈撳叆鍊硷紙鐩存帴浣跨敤document.getElementById鏂规硶锛屽噺灏戦渶瑕佸０鏄庣殑瀵硅薄鏁伴噺锛�
 			}
 
 			function init() {
-				//触发按钮或者键盘事件之后，首先调用本函数，读取输入值并填充固定内容
-				readForm();//调用函数读取表单
-				ctx.clearRect(0, 0, canv.width, canv.height);//清除画布上的所有元素
-				//设置画布底色白色
+				//瑙﹀彂鎸夐挳鎴栬€呴敭鐩樹簨浠朵箣鍚庯紝棣栧厛璋冪敤鏈嚱鏁帮紝璇诲彇杈撳叆鍊煎苟濉厖鍥哄畾鍐呭
+				readForm();//璋冪敤鍑芥暟璇诲彇琛ㄥ崟
+				ctx.clearRect(0, 0, canv.width, canv.height);//娓呴櫎鐢诲竷涓婄殑鎵€鏈夊厓绱�
+				//璁剧疆鐢诲竷搴曡壊鐧借壊
 				ctx.fillStyle = "#FFFFFF";
-				ctx.fillRect(0, 0, canv.width, canv.height);//填充画布底色
-				//设置文字颜色黑色
+				ctx.fillRect(0, 0, canv.width, canv.height);//濉厖鐢诲竷搴曡壊
+				//璁剧疆鏂囧瓧棰滆壊榛戣壊
 				ctx.fillStyle = "#000000";
 				pointer = 0;
-				pointer1 = 0;//清空文字x坐标指针
-				ctx.drawImage(img1, 50, 90, 45, 45);//填充中国铁路logo
-				ctx.drawImage(img2, 470, 850, 300, 300);//填充二维码
-				ctx.font = "35px 黑体";
-				ctx.fillText("中国铁路", 100, 130);
+				pointer1 = 0;//娓呯┖鏂囧瓧x鍧愭爣鎸囬拡
+				ctx.drawImage(img1, 50, 90, 45, 45);//濉厖涓浗閾佽矾logo
+				ctx.drawImage(img2, 470, 850, 300, 300);//濉厖浜岀淮鐮�
+				ctx.font = "35px 榛戜綋";
+				ctx.fillText("涓浗閾佽矾", 100, 130);
 				ctx.font = "Bold 30px Times New Roman";
 				ctx.fillText("China Railway", 250, 130);
-				ctx.font = "50px 宋体";
-				ctx.fillText("行程信息提示", 260, 195);
+				ctx.font = "50px 瀹嬩綋";
+				ctx.fillText("琛岀▼淇℃伅鎻愮ず", 260, 195);
 				ctx.font = "37px Times New Roman";
 				ctx.fillText("Trip Information Reminders", 190, 240);
-				ctx.setLineDash([15, 3]);//设置直线类型为虚线，每段15像素，间隔3像素
-				ctx.lineDashOffset = -0;//设置虚线起始端偏移为0像素
-				ctx.beginPath();//开始绘制虚线
-				ctx.moveTo(40, 260);//设置起点为(40,260)
-				ctx.lineTo(775, 260);//设置终点为(775,260)
-				ctx.stroke();//绘制第一条虚线
-				ctx.moveTo(40, 800);//设置起点为(40,800)
-				ctx.lineTo(775, 800);//设置终点为(775,800)
-				ctx.stroke();//绘制第二条虚线
-				ctx.moveTo(40, 1200);//设置起点为(40,1200)
-				ctx.lineTo(775, 1200);//设置终点为(775,1200)
-				ctx.stroke();//绘制第三条虚线
-				ctx.closePath();//结束绘制虚线
-				ctx.font = "30px 宋体";
-				ctx.fillText("限乘当日当次车", 40, 570);
-				ctx.fillText("元", 750, 775);
-				ctx.fillText("温馨提示", 180, 860);
-				ctx.fillText("1.此凭条不可作为乘车凭证使用", 40, 900);
-				ctx.fillText("，请您持购票证件进站检票乘车", 40, 940);
-				ctx.fillText("。", 40, 980);
-				ctx.fillText("2.为方便您在网上办理行程变更", 40, 1020);
-				ctx.fillText("手续，建议在行程结束后按需领", 40, 1060);
-				ctx.fillText("取报销凭证。", 40, 1100);
-				ctx.fillText("3.欢迎扫码查阅乘车须知、下载", 40, 1140);
-				ctx.fillText("铁路12306APP。", 40, 1180);
-				ctx.font = "35px 宋体";
-				ctx.fillText("请按行程信息提示乘车，祝您旅途愉快！", 100, 1250);
-				ctx.font = "30px 宋体";
-				ctx.fillText("出单：", 145, 1300);
-				cusGen();//调用函数填充可变内容
+				ctx.setLineDash([15, 3]);//璁剧疆鐩寸嚎绫诲瀷涓鸿櫄绾匡紝姣忔15鍍忕礌锛岄棿闅�3鍍忕礌
+				ctx.lineDashOffset = -0;//璁剧疆铏氱嚎璧峰绔亸绉讳负0鍍忕礌
+				ctx.beginPath();//寮€濮嬬粯鍒惰櫄绾�
+				ctx.moveTo(40, 260);//璁剧疆璧风偣涓�(40,260)
+				ctx.lineTo(775, 260);//璁剧疆缁堢偣涓�(775,260)
+				ctx.stroke();//缁樺埗绗竴鏉¤櫄绾�
+				ctx.moveTo(40, 800);//璁剧疆璧风偣涓�(40,800)
+				ctx.lineTo(775, 800);//璁剧疆缁堢偣涓�(775,800)
+				ctx.stroke();//缁樺埗绗簩鏉¤櫄绾�
+				ctx.moveTo(40, 1200);//璁剧疆璧风偣涓�(40,1200)
+				ctx.lineTo(775, 1200);//璁剧疆缁堢偣涓�(775,1200)
+				ctx.stroke();//缁樺埗绗笁鏉¤櫄绾�
+				ctx.closePath();//缁撴潫缁樺埗铏氱嚎
+				ctx.font = "30px 瀹嬩綋";
+				ctx.fillText("闄愪箻褰撴棩褰撴杞�", 40, 570);
+				ctx.fillText("鍏�", 750, 775);
+				ctx.fillText("娓╅Θ鎻愮ず", 180, 860);
+				ctx.fillText("1.姝ゅ嚟鏉′笉鍙綔涓轰箻杞﹀嚟璇佷娇鐢�", 40, 900);
+				ctx.fillText("锛岃鎮ㄦ寔璐エ璇佷欢杩涚珯妫€绁ㄤ箻杞�", 40, 940);
+				ctx.fillText("銆�", 40, 980);
+				ctx.fillText("2.涓烘柟渚挎偍鍦ㄧ綉涓婂姙鐞嗚绋嬪彉鏇�", 40, 1020);
+				ctx.fillText("鎵嬬画锛屽缓璁湪琛岀▼缁撴潫鍚庢寜闇€棰�", 40, 1060);
+				ctx.fillText("鍙栨姤閿€鍑瘉銆�", 40, 1100);
+				ctx.fillText("3.娆㈣繋鎵爜鏌ラ槄涔樿溅椤荤煡銆佷笅杞�", 40, 1140);
+				ctx.fillText("閾佽矾12306APP銆�", 40, 1180);
+				ctx.font = "35px 瀹嬩綋";
+				ctx.fillText("璇锋寜琛岀▼淇℃伅鎻愮ず涔樿溅锛岀鎮ㄦ梾閫旀剦蹇紒", 100, 1250);
+				ctx.font = "30px 瀹嬩綋";
+				ctx.fillText("鍑哄崟锛�", 145, 1300);
+				cusGen();//璋冪敤鍑芥暟濉厖鍙彉鍐呭
 			}
 
 			function pyLocation(lastPointer, turn) {
-				//本函数用于计算始发到达站拼音和车次号的x坐标位置，以便更好与其他元素对齐
+				//鏈嚱鏁扮敤浜庤绠楀鍙戝埌杈剧珯鎷奸煶鍜岃溅娆″彿鐨剎鍧愭爣浣嶇疆锛屼互渚挎洿濂戒笌鍏朵粬鍏冪礌瀵归綈
 				if (turn == 1) {
-					//计算始发站拼音位置
+					//璁＄畻濮嬪彂绔欐嫾闊充綅缃�
 					return (((lastPointer - 60) / 2) + 90) - depPy.length / 2 * 13 - 5;
 				} else if (turn == 2) {
-					//计算车次号位置
+					//璁＄畻杞︽鍙蜂綅缃�
 					return (lastPointer - (125 / 2)) - trainNumber.length / 2 * 13 - 5;
 				} else if (turn == 3) {
-					//计算到达站拼音位置
+					//璁＄畻鍒拌揪绔欐嫾闊充綅缃�
 					return ((lastPointer + 30 - temp) / 2 + temp) - depPy.length / 2 * 13 - 5;
 				}
 			}
 
 			function cusGen() {
-				//本函数用于填充可变文字
-				ctx.font = "30px 宋体";
-				ctx.fillText("开车时间：", pointer += 40, 325);
+				//鏈嚱鏁扮敤浜庡～鍏呭彲鍙樻枃瀛�
+				ctx.font = "30px 瀹嬩綋";
+				ctx.fillText("寮€杞︽椂闂达細", pointer += 40, 325);
 				ctx.fillText(depYear, pointer += 150, 325);
-				ctx.fillText("年", pointer += 60, 325);
-				ctx.font = "60px 宋体";
+				ctx.fillText("骞�", pointer += 60, 325);
+				ctx.font = "60px 瀹嬩綋";
 				if (depMonth != 0 && depDay != 0) {
-					//本判断语句为极其早期所写，后期将进行进一步优化
-					//fillText()方法可以传入第三个参数，用于限制本次填充的文字的最大宽度，因此可以做出文字细长效果
+					//鏈垽鏂鍙ヤ负鏋佸叾鏃╂湡鎵€鍐欙紝鍚庢湡灏嗚繘琛岃繘涓€姝ヤ紭鍖�
+					//fillText()鏂规硶鍙互浼犲叆绗笁涓弬鏁帮紝鐢ㄤ簬闄愬埗鏈濉厖鐨勬枃瀛楃殑鏈€澶у搴︼紝鍥犳鍙互鍋氬嚭鏂囧瓧缁嗛暱鏁堟灉
 					if (depMonth >= 0 && depMonth < 10) {
-						//月份为一位数
+						//鏈堜唤涓轰竴浣嶆暟
 						ctx.fillText(depMonth, pointer += 35, 320, 15);
-						ctx.font = "30px 宋体";
-						ctx.fillText("月", pointer += 15, 325);//指针移动15px
+						ctx.font = "30px 瀹嬩綋";
+						ctx.fillText("鏈�", pointer += 15, 325);//鎸囬拡绉诲姩15px
 					} else if (depMonth >= 10) {
-						//月份为两位数
+						//鏈堜唤涓轰袱浣嶆暟
 						ctx.fillText(depMonth, pointer += 35, 320, 35);
-						ctx.font = "30px 宋体";
-						ctx.fillText("月", pointer += 35, 325);//指针移动35px
+						ctx.font = "30px 瀹嬩綋";
+						ctx.fillText("鏈�", pointer += 35, 325);//鎸囬拡绉诲姩35px
 					}
 					if (depDay >= 0 && depDay < 10) {
-						//日期为一位数
-						ctx.font = "60px 宋体";
+						//鏃ユ湡涓轰竴浣嶆暟
+						ctx.font = "60px 瀹嬩綋";
 						ctx.fillText(depDay, pointer += 35, 320, 15);
-						ctx.font = "30px 宋体";
-						ctx.fillText("日", pointer += 15, 325);//指针移动15px
+						ctx.font = "30px 瀹嬩綋";
+						ctx.fillText("鏃�", pointer += 15, 325);//鎸囬拡绉诲姩15px
 					} else if (depDay >= 10) {
-						//日期为两位数
-						ctx.font = "60px 宋体";
+						//鏃ユ湡涓轰袱浣嶆暟
+						ctx.font = "60px 瀹嬩綋";
 						ctx.fillText(depDay, pointer += 35, 320, 35);
-						ctx.font = "30px 宋体";
-						ctx.fillText("日", pointer += 35, 325);//指针移动35px
+						ctx.font = "30px 瀹嬩綋";
+						ctx.fillText("鏃�", pointer += 35, 325);//鎸囬拡绉诲姩35px
 					}
-					ctx.font = "60px 宋体";
-					ctx.fillText(depTime, pointer += 85, 320, 95);//填充开车时间
+					ctx.font = "60px 瀹嬩綋";
+					ctx.fillText(depTime, pointer += 85, 320, 95);//濉厖寮€杞︽椂闂�
 				} else {
-					//如果没有传入的日期参数，那么只显示占位符（年月日）
-					ctx.font = "30px 宋体";
-					ctx.fillText("月", 320, 325);
-					ctx.fillText("日", 390, 325);
-					ctx.font = "60px 宋体";
+					//濡傛灉娌℃湁浼犲叆鐨勬棩鏈熷弬鏁帮紝閭ｄ箞鍙樉绀哄崰浣嶇锛堝勾鏈堟棩锛�
+					ctx.font = "30px 瀹嬩綋";
+					ctx.fillText("鏈�", 320, 325);
+					ctx.fillText("鏃�", 390, 325);
+					ctx.font = "60px 瀹嬩綋";
 					ctx.fillText(depTime, 475, 320, 95);
 				}
-				ctx.font = "45px 宋体";
-				ctx.fillText(depStation, pointer1 += 90, 390);//填充出发站中文
-				ctx.font = "30px 宋体";
-				pointer1 += depStation.length * 45;//指针移动站名长度*45px
-				ctx.fillText("站", pointer1, 390);
+				ctx.font = "45px 瀹嬩綋";
+				ctx.fillText(depStation, pointer1 += 90, 390);//濉厖鍑哄彂绔欎腑鏂�
+				ctx.font = "30px 瀹嬩綋";
+				pointer1 += depStation.length * 45;//鎸囬拡绉诲姩绔欏悕闀垮害*45px
+				ctx.fillText("绔�", pointer1, 390);
 				ctx.font = "30px Times New Roman";
-				ctx.fillText(depPy, pyLocation(pointer1, 1), 430);//填充出发站拼音，调用函数确定位置
+				ctx.fillText(depPy, pyLocation(pointer1, 1), 430);//濉厖鍑哄彂绔欐嫾闊筹紝璋冪敤鍑芥暟纭畾浣嶇疆
 				pointer1 += 30;
-				ctx.setLineDash([]);//重新设置绘制类型为直线
-				ctx.beginPath();//开始绘制直线
-				ctx.moveTo(pointer1 += 80, 400);//起点为(指针位置+80px,400)
-				ctx.lineTo(pointer1 += 125, 400);//终点为(指针位置+125px,400) 绘制长度45px
-				ctx.stroke();//结束绘制
+				ctx.setLineDash([]);//閲嶆柊璁剧疆缁樺埗绫诲瀷涓虹洿绾�
+				ctx.beginPath();//寮€濮嬬粯鍒剁洿绾�
+				ctx.moveTo(pointer1 += 80, 400);//璧风偣涓�(鎸囬拡浣嶇疆+80px,400)
+				ctx.lineTo(pointer1 += 125, 400);//缁堢偣涓�(鎸囬拡浣嶇疆+125px,400) 缁樺埗闀垮害45px
+				ctx.stroke();//缁撴潫缁樺埗
 				ctx.fillText(trainNumber, pyLocation(pointer1, 2), 390);
-				ctx.font = "45px 宋体";
-				ctx.fillText(arrStation, pointer1 += 80, 390);//填充到达站中文
-				temp = pointer1;//将现在的指针位置保存为temp，以便运算到达站拼音位置
-				ctx.font = "30px 宋体";
-				pointer1 += arrStation.length * 45;//指针移动站名长度*45px
-				ctx.fillText("站", pointer1, 390);
+				ctx.font = "45px 瀹嬩綋";
+				ctx.fillText(arrStation, pointer1 += 80, 390);//濉厖鍒拌揪绔欎腑鏂�
+				temp = pointer1;//灏嗙幇鍦ㄧ殑鎸囬拡浣嶇疆淇濆瓨涓簍emp锛屼互渚胯繍绠楀埌杈剧珯鎷奸煶浣嶇疆
+				ctx.font = "30px 瀹嬩綋";
+				pointer1 += arrStation.length * 45;//鎸囬拡绉诲姩绔欏悕闀垮害*45px
+				ctx.fillText("绔�", pointer1, 390);
 				ctx.font = "30px Times New Roman";
-				ctx.fillText(arrPy, pyLocation(pointer1, 3), 430);//填充到达站拼音，调用函数确定位置
-				ctx.font = "60px 宋体";
-				temp2 = 750 - 23 * ticketCheck.length + 30;//确定检票口信息填充x坐标
-				ctx.fillText(ticketCheck, temp2, 530, 23 * ticketCheck.length);//填充检票口信息，限制每个字符宽度平均为23px
-				ctx.fillText(seatNumber, 40, 530, 23 * seatNumber.length);//填充座位号信息，限制每个字符宽度平均为23px
-				temp3 = 750 - 23 * fare.length;//确定票价信息填充x坐标
-				ctx.fillText(fare, temp3, 775, 23 * fare.length);//填充票价信息，限制每个字符宽度平均为23px
-				ctx.font = "30px 宋体";
-				if (ticketCheck != "") ctx.fillText("检票口：", temp2 - 110, 530);//如果检票口信息不为空，那么填充“检票口”三个汉字
-				ctx.fillText("票价：", temp3 - 80, 775);//填充“票价”二字，x坐标为票价信息填充x坐标-80px
-				ctx.fillText(seatType, 40 + 23 * seatNumber.length + 10, 530);//填充坐席类别，x坐标为座位号尾部+10px
-				ctx.fillText(name, 40, 610);//填充姓名
-				ctx.fillText(idNo + " " + idTypeEng + " " + idTypeChn, 40, 650);//填充身份证件号码+类型代码+类型中文
-				code1 = TMIS.concat(machineType, machineNo);//拼接车站TMIS+出票机器类型+机器号
-				ctx.fillText("电子票号：" + ticketNo, 40, 690);//填充电子票号
-				ctx.fillText("订 单 号：" + orderNo, 40, 775);//填充订单号
-				ctx.fillText(code1 + " " + prtDate + " " + prtTime, 235, 1300);//填充code1(车站TMIS+出票机器类型+机器号)和打印日期时间
+				ctx.fillText(arrPy, pyLocation(pointer1, 3), 430);//濉厖鍒拌揪绔欐嫾闊筹紝璋冪敤鍑芥暟纭畾浣嶇疆
+				ctx.font = "60px 瀹嬩綋";
+				temp2 = 750 - 23 * ticketCheck.length + 30;//纭畾妫€绁ㄥ彛淇℃伅濉厖x鍧愭爣
+				ctx.fillText(ticketCheck, temp2, 530, 23 * ticketCheck.length);//濉厖妫€绁ㄥ彛淇℃伅锛岄檺鍒舵瘡涓瓧绗﹀搴﹀钩鍧囦负23px
+				ctx.fillText(seatNumber, 40, 530, 23 * seatNumber.length);//濉厖搴т綅鍙蜂俊鎭紝闄愬埗姣忎釜瀛楃瀹藉害骞冲潎涓�23px
+				temp3 = 750 - 23 * fare.length;//纭畾绁ㄤ环淇℃伅濉厖x鍧愭爣
+				ctx.fillText(fare, temp3, 775, 23 * fare.length);//濉厖绁ㄤ环淇℃伅锛岄檺鍒舵瘡涓瓧绗﹀搴﹀钩鍧囦负23px
+				ctx.font = "30px 瀹嬩綋";
+				if (ticketCheck != "") ctx.fillText("妫€绁ㄥ彛锛�", temp2 - 110, 530);//濡傛灉妫€绁ㄥ彛淇℃伅涓嶄负绌猴紝閭ｄ箞濉厖鈥滄绁ㄥ彛鈥濅笁涓眽瀛�
+				ctx.fillText("绁ㄤ环锛�", temp3 - 80, 775);//濉厖鈥滅エ浠封€濅簩瀛楋紝x鍧愭爣涓虹エ浠蜂俊鎭～鍏厁鍧愭爣-80px
+				ctx.fillText(seatType, 40 + 23 * seatNumber.length + 10, 530);//濉厖鍧愬腑绫诲埆锛寈鍧愭爣涓哄骇浣嶅彿灏鹃儴+10px
+				ctx.fillText(name, 40, 610);//濉厖濮撳悕
+				ctx.fillText(idNo + " " + idTypeEng + " " + idTypeChn, 40, 650);//濉厖韬唤璇佷欢鍙风爜+绫诲瀷浠ｇ爜+绫诲瀷涓枃
+				code1 = TMIS.concat(machineType, machineNo);//鎷兼帴杞︾珯TMIS+鍑虹エ鏈哄櫒绫诲瀷+鏈哄櫒鍙�
+				ctx.fillText("鐢靛瓙绁ㄥ彿锛�" + ticketNo, 40, 690);//濉厖鐢靛瓙绁ㄥ彿
+				ctx.fillText("璁� 鍗� 鍙凤細" + orderNo, 40, 775);//濉厖璁㈠崟鍙�
+				ctx.fillText(code1 + " " + prtDate + " " + prtTime, 235, 1300);//濉厖code1(杞︾珯TMIS+鍑虹エ鏈哄櫒绫诲瀷+鏈哄櫒鍙�)鍜屾墦鍗版棩鏈熸椂闂�
 			}
 			button.addEventListener("click", function() {
-				//单击按钮执行初始化函数
+				//鍗曞嚮鎸夐挳鎵ц鍒濆鍖栧嚱鏁�
 				init();
 			});
 			document.onkeydown = function(event) {
-				//按下回车键与单击按钮效果相同
+				//鎸変笅鍥炶溅閿笌鍗曞嚮鎸夐挳鏁堟灉鐩稿悓
 				if (event.keyCode == 13) {
-					//键码13为回车键
+					//閿爜13涓哄洖杞﹂敭
 					init();
 				}
 			}
 		</script>
-		<p>注：如需保存生成的图片，右键单击上方区域并选择“图片另存为”选项就可以哦~</p>
-		<p>站长建议在桌面端使用基于Chromium内核的浏览器或火狐浏览器访问诶~</p>
-		<p>本站不会收集任何个人信息，请放心使用；使用时请大家遵守国家法律法规，切忌用于违法违规用途噢~</p>
-		<p>如有任何意见或反馈，请大胆联系站长哦~<a href="mailto:lijiaxuan1811@163.com">lijiaxuan1811@163.com</a>或者在以下页面提交Issue：<a href="https://github.com/lijiaxuan1811/China-Railway-Trip-Information-Reminder-Generator">https://github.com/lijiaxuan1811/China-Railway-Trip-Information-Reminder-Generator</a> 非常感谢诸位宝贵的反馈噢！</p>
+		<p>娉細濡傞渶淇濆瓨鐢熸垚鐨勫浘鐗囷紝鍙抽敭鍗曞嚮涓婃柟鍖哄煙骞堕€夋嫨鈥滃浘鐗囧彟瀛樹负鈥濋€夐」灏卞彲浠ュ摝~</p>
+		<p>绔欓暱寤鸿鍦ㄦ闈㈢浣跨敤鍩轰簬Chromium鍐呮牳鐨勬祻瑙堝櫒鎴栫伀鐙愭祻瑙堝櫒璁块棶璇秪</p>
+		<p>鏈珯涓嶄細鏀堕泦浠讳綍涓汉淇℃伅锛岃鏀惧績浣跨敤锛涗娇鐢ㄦ椂璇峰ぇ瀹堕伒瀹堝浗瀹舵硶寰嬫硶瑙勶紝鍒囧繉鐢ㄤ簬杩濇硶杩濊鐢ㄩ€斿櫌~</p>
+		<p>濡傛湁浠讳綍鎰忚鎴栧弽棣堬紝璇峰ぇ鑳嗚仈绯荤珯闀垮摝~<a href="mailto:lijiaxuan1811@163.com">lijiaxuan1811@163.com</a>鎴栬€呭湪浠ヤ笅椤甸潰鎻愪氦Issue锛�<a href="https://github.com/lijiaxuan1811/China-Railway-Trip-Information-Reminder-Generator">https://github.com/lijiaxuan1811/China-Railway-Trip-Information-Reminder-Generator</a> 闈炲父鎰熻阿璇镐綅瀹濊吹鐨勫弽棣堝櫌锛�</p>
 	</body>
 </html>
\ No newline at end of file
diff --git a/en/about.html b/en/about.html
index c1ce5c9..6a6425b 100644
--- a/en/about.html
+++ b/en/about.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
 	<head>
-		<meta charset="GB2312">
+		<meta charset="UTF-8">
 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
 		<title>YuanRetro-About</title>
 		<link rel="stylesheet" href="./style.css">
@@ -12,9 +12,9 @@
 			<li class="navi"><a href="http://www.yuanshen.dev/en/music.html">Music</a></li>
 			<li class="navi"><a href="http://www.yuanshen.dev/en/pinball.html">JS Pinball Game</a></li>
 			<li class="navi"><a href="http://www.yuanshen.dev/en/morse.html">Morse Code</a></li>
-			<li class="navi"><a href="http://www.yuanshen.dev/en/crtirgen.html">中国铁路行程信息提示生成器(CRTIRGen)</a></li>
+			<li class="navi"><a href="http://www.yuanshen.dev/en/crtirgen.html">涓浗閾佽矾琛岀▼淇℃伅鎻愮ず鐢熸垚鍣�(CRTIRGen)</a></li>
 			<li class="navi"><a href="http://www.yuanshen.dev/en/about.html">About</a></li>
-			<li class="navi"><a href="http://www.yuanshen.dev/">简体中文</a></li>
+			<li class="navi"><a href="http://www.yuanshen.dev/">绠€浣撲腑鏂�</a></li>
 		</ul>
 		<br />
 		<h2>About me...</h2>
diff --git a/en/crtirgen.html b/en/crtirgen.html
index aa51602..fb7f1db 100644
--- a/en/crtirgen.html
+++ b/en/crtirgen.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
 	<head>
-		<meta charset="GB2312">
+		<meta charset="UTF-8">
 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
 		<title>YuanRetro-Trip Information Reminders Generator</title>
 		<link rel="stylesheet" href="./style.css">
@@ -12,9 +12,9 @@
 			<li class="navi"><a href="http://www.yuanshen.dev/en/music.html">Music</a></li>
 			<li class="navi"><a href="http://www.yuanshen.dev/en/pinball.html">JS Pinball Game</a></li>
 			<li class="navi"><a href="http://www.yuanshen.dev/en/morse.html">Morse Code</a></li>
-			<li class="navi"><a href="http://www.yuanshen.dev/en/crtirgen.html">中国铁路行程信息提示生成器(CRTIRGen)</a></li>
+			<li class="navi"><a href="http://www.yuanshen.dev/en/crtirgen.html">涓浗閾佽矾琛岀▼淇℃伅鎻愮ず鐢熸垚鍣�(CRTIRGen)</a></li>
 			<li class="navi"><a href="http://www.yuanshen.dev/en/about.html">About</a></li>
-			<li class="navi"><a href="http://www.yuanshen.dev/">简体中文</a></li>
+			<li class="navi"><a href="http://www.yuanshen.dev/">绠€浣撲腑鏂�</a></li>
 		</ul>
 		<br />
 		<h2>China Railway Trip Information Reminders Generator V1.2-2024.07.23</h2>
@@ -28,7 +28,7 @@ <h2>China Railway Trip Information Reminders Generator V1.2-2024.07.23</h2>
 			<label for="date2">Print Date:</label>
 			<input type="date" id="date2" min="0000-01-01" max="9999-12-31" />
 			<label for="time2">Print Time:</label>
-			<input type="time" id="time2" step="1" /><br /><!--添加step="1"使秒数选框出现-->
+			<input type="time" id="time2" step="1" /><br /><!--娣诲姞step="1"浣跨鏁伴€夋鍑虹幇-->
 			<label for="depStation">Departure Station:</label>
 			<input type="text" id="depStation" size="10" />
 			<label for="depStation">Station</label>
@@ -36,7 +36,7 @@ <h2>China Railway Trip Information Reminders Generator V1.2-2024.07.23</h2>
 			<input type="text" id="depPy" size="14" /><br />
 			<label for="trainTypeDrop">Train Number:</label>
 			<select id="trainTypeDrop">
-				<option value="normal">Local(No Prefix)</option><!--"Normal"通过判断语句转为无前缀，其他的直接使用value中的值作为车次号前缀-->
+				<option value="normal">Local(No Prefix)</option><!--"Normal"閫氳繃鍒ゆ柇璇彞杞负鏃犲墠缂€锛屽叾浠栫殑鐩存帴浣跨敤value涓殑鍊间綔涓鸿溅娆″彿鍓嶇紑-->
 				<option value="K">Rapid(K)</option>
 				<option value="T">Express(T)</option>
 				<option value="Z">Limited Express(Z)</option>
@@ -63,15 +63,15 @@ <h2>China Railway Trip Information Reminders Generator V1.2-2024.07.23</h2>
 			<label for="fare">Yuan</label>
 			<label for="ticketCheck">Ticket Check (Leave blank if none):</label>
 			<input type="text" id="ticketCheck" size="12" /><br />
-			<label for="TMIS">Station TMIS</label><!--TMIS为每个铁路车站的唯一五位数编号-->
+			<label for="TMIS">Station TMIS</label><!--TMIS涓烘瘡涓搧璺溅绔欑殑鍞竴浜斾綅鏁扮紪鍙�-->
 			<input type="text" id="TMIS" size="8" /><br />
 			<label for="machineType">Printer Type:</label>
 			<input type="text" id="machineType" size="5" /><br />
-			<label for="machineNo">Printer ID:</label><!--凭条尾部的“出单”10位数号码即为TMIS（5位数）+机器类型（2位数）+机器编号（3位数）-->
+			<label for="machineNo">Printer ID:</label><!--鍑潯灏鹃儴鐨勨€滃嚭鍗曗€�10浣嶆暟鍙风爜鍗充负TMIS锛�5浣嶆暟锛�+鏈哄櫒绫诲瀷锛�2浣嶆暟锛�+鏈哄櫒缂栧彿锛�3浣嶆暟锛�-->
 			<input type="text" id="machineNo" size="5" />
-			<label for="orderNo">Order Number:</label><!--一般为E开头-->
+			<label for="orderNo">Order Number:</label><!--涓€鑸负E寮€澶�-->
 			<input type="text" id="orderNo" size="10" /><br />
-			<label for="ticketNo">E-ticket Number:</label><!--前14位数为TMIS（5位数）+机器类型（2位数）+机器编号（3位数）+结算日期（MMDD，4位数）；最后4位数为年份；两部分中间的7位数未知-->
+			<label for="ticketNo">E-ticket Number:</label><!--鍓�14浣嶆暟涓篢MIS锛�5浣嶆暟锛�+鏈哄櫒绫诲瀷锛�2浣嶆暟锛�+鏈哄櫒缂栧彿锛�3浣嶆暟锛�+缁撶畻鏃ユ湡锛圡MDD锛�4浣嶆暟锛夛紱鏈€鍚�4浣嶆暟涓哄勾浠斤紱涓ら儴鍒嗕腑闂寸殑7浣嶆暟鏈煡-->
 			<input type="text" id="ticketNo" size="30" /><br />
 			<label for="name">Name:</label>
 			<input type="text" id="name" size="8" />
@@ -81,44 +81,44 @@ <h2>China Railway Trip Information Reminders Generator V1.2-2024.07.23</h2>
 			<input type="text" id="idTypeChn" size="12" />
 			<label for="idNo">ID Code (Put '*' on proper locations):</label>
 			<input type="text" id="idNo" size="18" />
-			<input type="button" value="确认" id="submit1" />
+			<input type="button" value="纭" id="submit1" />
 		</form>
 		<canvas id="canvas" width="800" height="1400"></canvas>
 		<script type="text/javascript">
-			var canv = document.getElementById("canvas");//声明画布对象
-			var ctx = canv.getContext("2d");//声明画笔对象
+			var canv = document.getElementById("canvas");//澹版槑鐢诲竷瀵硅薄
+			var ctx = canv.getContext("2d");//澹版槑鐢荤瑪瀵硅薄
 			var img1 = new Image();
-			var img2 = new Image();//声明中国铁路logo和二维码的图片对象
+			var img2 = new Image();//澹版槑涓浗閾佽矾logo鍜屼簩缁寸爜鐨勫浘鐗囧璞�
 			img1.src = "../img1.gif";
 			img2.src = "../img2.gif";
-			var date1, time1, date2, time2, trainTypeDrop, trainNo;//声明表单中若干项目的对象变量
-			var button = document.getElementById("submit1");//声明提交按钮对象
+			var date1, time1, date2, time2, trainTypeDrop, trainNo;//澹版槑琛ㄥ崟涓嫢骞查」鐩殑瀵硅薄鍙橀噺
+			var button = document.getElementById("submit1");//澹版槑鎻愪氦鎸夐挳瀵硅薄
 			var depTime = "", depYear = "", depStation = "", depPy = "", arrStation = "", arrPy = "",
 			prtDate = "", prtTime = "", trainNumber = "", machineType = "", machineNo = "",code1 = "",
 			seatNumber = "", seatType = "", fare = "", ticketCheck = "", orderNo = "", ticketNo = "",
-			name = "", idTypeEng = "", idTypeChn = "", idNo = "", TMIS = "";//声明所有字符串变量
-			var depMonth = 0, depDay = 0, pointer = 0, pointer1 = 0, temp = 0, temp1 = "", temp2 = 0, temp3 = 0;//声明数字、临时变量
+			name = "", idTypeEng = "", idTypeChn = "", idNo = "", TMIS = "";//澹版槑鎵€鏈夊瓧绗︿覆鍙橀噺
+			var depMonth = 0, depDay = 0, pointer = 0, pointer1 = 0, temp = 0, temp1 = "", temp2 = 0, temp3 = 0;//澹版槑鏁板瓧銆佷复鏃跺彉閲�
 
 			function readForm() {
-				//本函数从输入表单中读取所有输入的数据
+				//鏈嚱鏁颁粠杈撳叆琛ㄥ崟涓鍙栨墍鏈夎緭鍏ョ殑鏁版嵁
 				date1 = document.getElementById("date1");
 				time1 = document.getElementById("time1");
 				date2 = document.getElementById("date2");
-				time2 = document.getElementById("time2");//日期时间选框
-				trainTypeDrop = document.getElementById("trainTypeDrop");//车次类型下拉框对象
+				time2 = document.getElementById("time2");//鏃ユ湡鏃堕棿閫夋
+				trainTypeDrop = document.getElementById("trainTypeDrop");//杞︽绫诲瀷涓嬫媺妗嗗璞�
 				trainNo = document.getElementById("trainNo");
-				temp1 = trainTypeDrop.options[trainTypeDrop.selectedIndex].value;//获取下拉框所有选择项中被选中项的值
+				temp1 = trainTypeDrop.options[trainTypeDrop.selectedIndex].value;//鑾峰彇涓嬫媺妗嗘墍鏈夐€夋嫨椤逛腑琚€変腑椤圭殑鍊�
 				if (temp1 == "normal") {
-					trainNumber = trainNo.value;//如果类型为普客，则不加任何前缀
+					trainNumber = trainNo.value;//濡傛灉绫诲瀷涓烘櫘瀹紝鍒欎笉鍔犱换浣曞墠缂€
 				} else {
-					trainNumber = temp1 + trainNo.value;//否则，使用该项的值作为车次号前缀
+					trainNumber = temp1 + trainNo.value;//鍚﹀垯锛屼娇鐢ㄨ椤圭殑鍊间綔涓鸿溅娆″彿鍓嶇紑
 				}
 				depTime = time1.value;
-				depYear = date1.value.substr(0, 4);//分别截取开车年月日
+				depYear = date1.value.substr(0, 4);//鍒嗗埆鎴彇寮€杞﹀勾鏈堟棩
 				depMonth = Number(date1.value.substr(5, 2));
-				depDay = Number(date1.value.substr(8, 2));//将开车月日转换为数字类型，避免一位数前导0
+				depDay = Number(date1.value.substr(8, 2));//灏嗗紑杞︽湀鏃ヨ浆鎹负鏁板瓧绫诲瀷锛岄伩鍏嶄竴浣嶆暟鍓嶅0
 				prtDate = date2.value;
-				prtTime = time2.value;//出票日期时间格式可直接使用，无需转换
+				prtTime = time2.value;//鍑虹エ鏃ユ湡鏃堕棿鏍煎紡鍙洿鎺ヤ娇鐢紝鏃犻渶杞崲
 				depStation = document.getElementById("depStation").value;
 				depPy = document.getElementById("depPy").value;
 				arrStation = document.getElementById("arrStation").value;
@@ -135,167 +135,167 @@ <h2>China Railway Trip Information Reminders Generator V1.2-2024.07.23</h2>
 				name = document.getElementById("name").value;
 				idTypeEng = document.getElementById("idTypeEng").value;
 				idTypeChn = document.getElementById("idTypeChn").value;
-				idNo = document.getElementById("idNo").value;//获取输入框的输入值（直接使用document.getElementById方法，减少需要声明的对象数量）
+				idNo = document.getElementById("idNo").value;//鑾峰彇杈撳叆妗嗙殑杈撳叆鍊硷紙鐩存帴浣跨敤document.getElementById鏂规硶锛屽噺灏戦渶瑕佸０鏄庣殑瀵硅薄鏁伴噺锛�
 			}
 
 			function init() {
-				//触发按钮或者键盘事件之后，首先调用本函数，读取输入值并填充固定内容
-				readForm();//调用函数读取表单
-				ctx.clearRect(0, 0, canv.width, canv.height);//清除画布上的所有元素
-				//设置画布底色白色
+				//瑙﹀彂鎸夐挳鎴栬€呴敭鐩樹簨浠朵箣鍚庯紝棣栧厛璋冪敤鏈嚱鏁帮紝璇诲彇杈撳叆鍊煎苟濉厖鍥哄畾鍐呭
+				readForm();//璋冪敤鍑芥暟璇诲彇琛ㄥ崟
+				ctx.clearRect(0, 0, canv.width, canv.height);//娓呴櫎鐢诲竷涓婄殑鎵€鏈夊厓绱�
+				//璁剧疆鐢诲竷搴曡壊鐧借壊
 				ctx.fillStyle = "#FFFFFF";
-				ctx.fillRect(0, 0, canv.width, canv.height);//填充画布底色
-				//设置文字颜色黑色
+				ctx.fillRect(0, 0, canv.width, canv.height);//濉厖鐢诲竷搴曡壊
+				//璁剧疆鏂囧瓧棰滆壊榛戣壊
 				ctx.fillStyle = "#000000";
 				pointer = 0;
-				pointer1 = 0;//清空文字x坐标指针
-				ctx.drawImage(img1, 50, 90, 45, 45);//填充中国铁路logo
-				ctx.drawImage(img2, 470, 850, 300, 300);//填充二维码
-				ctx.font = "35px 黑体";
-				ctx.fillText("中国铁路", 100, 130);
+				pointer1 = 0;//娓呯┖鏂囧瓧x鍧愭爣鎸囬拡
+				ctx.drawImage(img1, 50, 90, 45, 45);//濉厖涓浗閾佽矾logo
+				ctx.drawImage(img2, 470, 850, 300, 300);//濉厖浜岀淮鐮�
+				ctx.font = "35px 榛戜綋";
+				ctx.fillText("涓浗閾佽矾", 100, 130);
 				ctx.font = "Bold 30px Times New Roman";
 				ctx.fillText("China Railway", 250, 130);
-				ctx.font = "50px 宋体";
-				ctx.fillText("行程信息提示", 260, 195);
+				ctx.font = "50px 瀹嬩綋";
+				ctx.fillText("琛岀▼淇℃伅鎻愮ず", 260, 195);
 				ctx.font = "37px Times New Roman";
 				ctx.fillText("Trip Information Reminders", 190, 240);
-				ctx.setLineDash([15, 3]);//设置直线类型为虚线，每段15像素，间隔3像素
-				ctx.lineDashOffset = -0;//设置虚线起始端偏移为0像素
-				ctx.beginPath();//开始绘制虚线
-				ctx.moveTo(40, 260);//设置起点为(40,260)
-				ctx.lineTo(775, 260);//设置终点为(775,260)
-				ctx.stroke();//绘制第一条虚线
-				ctx.moveTo(40, 800);//设置起点为(40,800)
-				ctx.lineTo(775, 800);//设置终点为(775,800)
-				ctx.stroke();//绘制第二条虚线
-				ctx.moveTo(40, 1200);//设置起点为(40,1200)
-				ctx.lineTo(775, 1200);//设置终点为(775,1200)
-				ctx.stroke();//绘制第三条虚线
-				ctx.closePath();//结束绘制虚线
-				ctx.font = "30px 宋体";
-				ctx.fillText("限乘当日当次车", 40, 570);
-				ctx.fillText("元", 750, 775);
-				ctx.fillText("温馨提示", 180, 860);
-				ctx.fillText("1.此凭条不可作为乘车凭证使用", 40, 900);
-				ctx.fillText("，请您持购票证件进站检票乘车", 40, 940);
-				ctx.fillText("。", 40, 980);
-				ctx.fillText("2.为方便您在网上办理行程变更", 40, 1020);
-				ctx.fillText("手续，建议在行程结束后按需领", 40, 1060);
-				ctx.fillText("取报销凭证。", 40, 1100);
-				ctx.fillText("3.欢迎扫码查阅乘车须知、下载", 40, 1140);
-				ctx.fillText("铁路12306APP。", 40, 1180);
-				ctx.font = "35px 宋体";
-				ctx.fillText("请按行程信息提示乘车，祝您旅途愉快！", 100, 1250);
-				ctx.font = "30px 宋体";
-				ctx.fillText("出单：", 145, 1300);
-				cusGen();//调用函数填充可变内容
+				ctx.setLineDash([15, 3]);//璁剧疆鐩寸嚎绫诲瀷涓鸿櫄绾匡紝姣忔15鍍忕礌锛岄棿闅�3鍍忕礌
+				ctx.lineDashOffset = -0;//璁剧疆铏氱嚎璧峰绔亸绉讳负0鍍忕礌
+				ctx.beginPath();//寮€濮嬬粯鍒惰櫄绾�
+				ctx.moveTo(40, 260);//璁剧疆璧风偣涓�(40,260)
+				ctx.lineTo(775, 260);//璁剧疆缁堢偣涓�(775,260)
+				ctx.stroke();//缁樺埗绗竴鏉¤櫄绾�
+				ctx.moveTo(40, 800);//璁剧疆璧风偣涓�(40,800)
+				ctx.lineTo(775, 800);//璁剧疆缁堢偣涓�(775,800)
+				ctx.stroke();//缁樺埗绗簩鏉¤櫄绾�
+				ctx.moveTo(40, 1200);//璁剧疆璧风偣涓�(40,1200)
+				ctx.lineTo(775, 1200);//璁剧疆缁堢偣涓�(775,1200)
+				ctx.stroke();//缁樺埗绗笁鏉¤櫄绾�
+				ctx.closePath();//缁撴潫缁樺埗铏氱嚎
+				ctx.font = "30px 瀹嬩綋";
+				ctx.fillText("闄愪箻褰撴棩褰撴杞�", 40, 570);
+				ctx.fillText("鍏�", 750, 775);
+				ctx.fillText("娓╅Θ鎻愮ず", 180, 860);
+				ctx.fillText("1.姝ゅ嚟鏉′笉鍙綔涓轰箻杞﹀嚟璇佷娇鐢�", 40, 900);
+				ctx.fillText("锛岃鎮ㄦ寔璐エ璇佷欢杩涚珯妫€绁ㄤ箻杞�", 40, 940);
+				ctx.fillText("銆�", 40, 980);
+				ctx.fillText("2.涓烘柟渚挎偍鍦ㄧ綉涓婂姙鐞嗚绋嬪彉鏇�", 40, 1020);
+				ctx.fillText("鎵嬬画锛屽缓璁湪琛岀▼缁撴潫鍚庢寜闇€棰�", 40, 1060);
+				ctx.fillText("鍙栨姤閿€鍑瘉銆�", 40, 1100);
+				ctx.fillText("3.娆㈣繋鎵爜鏌ラ槄涔樿溅椤荤煡銆佷笅杞�", 40, 1140);
+				ctx.fillText("閾佽矾12306APP銆�", 40, 1180);
+				ctx.font = "35px 瀹嬩綋";
+				ctx.fillText("璇锋寜琛岀▼淇℃伅鎻愮ず涔樿溅锛岀鎮ㄦ梾閫旀剦蹇紒", 100, 1250);
+				ctx.font = "30px 瀹嬩綋";
+				ctx.fillText("鍑哄崟锛�", 145, 1300);
+				cusGen();//璋冪敤鍑芥暟濉厖鍙彉鍐呭
 			}
 
 			function pyLocation(lastPointer, turn) {
-				//本函数用于计算始发到达站拼音和车次号的x坐标位置，以便更好与其他元素对齐
+				//鏈嚱鏁扮敤浜庤绠楀鍙戝埌杈剧珯鎷奸煶鍜岃溅娆″彿鐨剎鍧愭爣浣嶇疆锛屼互渚挎洿濂戒笌鍏朵粬鍏冪礌瀵归綈
 				if (turn == 1) {
-					//计算始发站拼音位置
+					//璁＄畻濮嬪彂绔欐嫾闊充綅缃�
 					return (((lastPointer - 60) / 2) + 90) - depPy.length / 2 * 13 - 5;
 				} else if (turn == 2) {
-					//计算车次号位置
+					//璁＄畻杞︽鍙蜂綅缃�
 					return (lastPointer - (125 / 2)) - trainNumber.length / 2 * 13 - 5;
 				} else if (turn == 3) {
-					//计算到达站拼音位置
+					//璁＄畻鍒拌揪绔欐嫾闊充綅缃�
 					return ((lastPointer + 30 - temp) / 2 + temp) - depPy.length / 2 * 13 - 5;
 				}
 			}
 
 			function cusGen() {
-				//本函数用于填充可变文字
-				ctx.font = "30px 宋体";
-				ctx.fillText("开车时间：", pointer += 40, 325);
+				//鏈嚱鏁扮敤浜庡～鍏呭彲鍙樻枃瀛�
+				ctx.font = "30px 瀹嬩綋";
+				ctx.fillText("寮€杞︽椂闂达細", pointer += 40, 325);
 				ctx.fillText(depYear, pointer += 150, 325);
-				ctx.fillText("年", pointer += 60, 325);
-				ctx.font = "60px 宋体";
+				ctx.fillText("骞�", pointer += 60, 325);
+				ctx.font = "60px 瀹嬩綋";
 				if (depMonth != 0 && depDay != 0) {
-					//本判断语句为极其早期所写，后期将进行进一步优化
-					//fillText()方法可以传入第三个参数，用于限制本次填充的文字的最大宽度，因此可以做出文字细长效果
+					//鏈垽鏂鍙ヤ负鏋佸叾鏃╂湡鎵€鍐欙紝鍚庢湡灏嗚繘琛岃繘涓€姝ヤ紭鍖�
+					//fillText()鏂规硶鍙互浼犲叆绗笁涓弬鏁帮紝鐢ㄤ簬闄愬埗鏈濉厖鐨勬枃瀛楃殑鏈€澶у搴︼紝鍥犳鍙互鍋氬嚭鏂囧瓧缁嗛暱鏁堟灉
 					if (depMonth >= 0 && depMonth < 10) {
-						//月份为一位数
+						//鏈堜唤涓轰竴浣嶆暟
 						ctx.fillText(depMonth, pointer += 35, 320, 15);
-						ctx.font = "30px 宋体";
-						ctx.fillText("月", pointer += 15, 325);//指针移动15px
+						ctx.font = "30px 瀹嬩綋";
+						ctx.fillText("鏈�", pointer += 15, 325);//鎸囬拡绉诲姩15px
 					} else if (depMonth >= 10) {
-						//月份为两位数
+						//鏈堜唤涓轰袱浣嶆暟
 						ctx.fillText(depMonth, pointer += 35, 320, 35);
-						ctx.font = "30px 宋体";
-						ctx.fillText("月", pointer += 35, 325);//指针移动35px
+						ctx.font = "30px 瀹嬩綋";
+						ctx.fillText("鏈�", pointer += 35, 325);//鎸囬拡绉诲姩35px
 					}
 					if (depDay >= 0 && depDay < 10) {
-						//日期为一位数
-						ctx.font = "60px 宋体";
+						//鏃ユ湡涓轰竴浣嶆暟
+						ctx.font = "60px 瀹嬩綋";
 						ctx.fillText(depDay, pointer += 35, 320, 15);
-						ctx.font = "30px 宋体";
-						ctx.fillText("日", pointer += 15, 325);//指针移动15px
+						ctx.font = "30px 瀹嬩綋";
+						ctx.fillText("鏃�", pointer += 15, 325);//鎸囬拡绉诲姩15px
 					} else if (depDay >= 10) {
-						//日期为两位数
-						ctx.font = "60px 宋体";
+						//鏃ユ湡涓轰袱浣嶆暟
+						ctx.font = "60px 瀹嬩綋";
 						ctx.fillText(depDay, pointer += 35, 320, 35);
-						ctx.font = "30px 宋体";
-						ctx.fillText("日", pointer += 35, 325);//指针移动35px
+						ctx.font = "30px 瀹嬩綋";
+						ctx.fillText("鏃�", pointer += 35, 325);//鎸囬拡绉诲姩35px
 					}
-					ctx.font = "60px 宋体";
-					ctx.fillText(depTime, pointer += 85, 320, 95);//填充开车时间
+					ctx.font = "60px 瀹嬩綋";
+					ctx.fillText(depTime, pointer += 85, 320, 95);//濉厖寮€杞︽椂闂�
 				} else {
-					//如果没有传入的日期参数，那么只显示占位符（年月日）
-					ctx.font = "30px 宋体";
-					ctx.fillText("月", 320, 325);
-					ctx.fillText("日", 390, 325);
-					ctx.font = "60px 宋体";
+					//濡傛灉娌℃湁浼犲叆鐨勬棩鏈熷弬鏁帮紝閭ｄ箞鍙樉绀哄崰浣嶇锛堝勾鏈堟棩锛�
+					ctx.font = "30px 瀹嬩綋";
+					ctx.fillText("鏈�", 320, 325);
+					ctx.fillText("鏃�", 390, 325);
+					ctx.font = "60px 瀹嬩綋";
 					ctx.fillText(depTime, 475, 320, 95);
 				}
-				ctx.font = "45px 宋体";
-				ctx.fillText(depStation, pointer1 += 90, 390);//填充出发站中文
-				ctx.font = "30px 宋体";
-				pointer1 += depStation.length * 45;//指针移动站名长度*45px
-				ctx.fillText("站", pointer1, 390);
+				ctx.font = "45px 瀹嬩綋";
+				ctx.fillText(depStation, pointer1 += 90, 390);//濉厖鍑哄彂绔欎腑鏂�
+				ctx.font = "30px 瀹嬩綋";
+				pointer1 += depStation.length * 45;//鎸囬拡绉诲姩绔欏悕闀垮害*45px
+				ctx.fillText("绔�", pointer1, 390);
 				ctx.font = "30px Times New Roman";
-				ctx.fillText(depPy, pyLocation(pointer1, 1), 430);//填充出发站拼音，调用函数确定位置
+				ctx.fillText(depPy, pyLocation(pointer1, 1), 430);//濉厖鍑哄彂绔欐嫾闊筹紝璋冪敤鍑芥暟纭畾浣嶇疆
 				pointer1 += 30;
-				ctx.setLineDash([]);//重新设置绘制类型为直线
-				ctx.beginPath();//开始绘制直线
-				ctx.moveTo(pointer1 += 80, 400);//起点为(指针位置+80px,400)
-				ctx.lineTo(pointer1 += 125, 400);//终点为(指针位置+125px,400) 绘制长度45px
-				ctx.stroke();//结束绘制
+				ctx.setLineDash([]);//閲嶆柊璁剧疆缁樺埗绫诲瀷涓虹洿绾�
+				ctx.beginPath();//寮€濮嬬粯鍒剁洿绾�
+				ctx.moveTo(pointer1 += 80, 400);//璧风偣涓�(鎸囬拡浣嶇疆+80px,400)
+				ctx.lineTo(pointer1 += 125, 400);//缁堢偣涓�(鎸囬拡浣嶇疆+125px,400) 缁樺埗闀垮害45px
+				ctx.stroke();//缁撴潫缁樺埗
 				ctx.fillText(trainNumber, pyLocation(pointer1, 2), 390);
-				ctx.font = "45px 宋体";
-				ctx.fillText(arrStation, pointer1 += 80, 390);//填充到达站中文
-				temp = pointer1;//将现在的指针位置保存为temp，以便运算到达站拼音位置
-				ctx.font = "30px 宋体";
-				pointer1 += arrStation.length * 45;//指针移动站名长度*45px
-				ctx.fillText("站", pointer1, 390);
+				ctx.font = "45px 瀹嬩綋";
+				ctx.fillText(arrStation, pointer1 += 80, 390);//濉厖鍒拌揪绔欎腑鏂�
+				temp = pointer1;//灏嗙幇鍦ㄧ殑鎸囬拡浣嶇疆淇濆瓨涓簍emp锛屼互渚胯繍绠楀埌杈剧珯鎷奸煶浣嶇疆
+				ctx.font = "30px 瀹嬩綋";
+				pointer1 += arrStation.length * 45;//鎸囬拡绉诲姩绔欏悕闀垮害*45px
+				ctx.fillText("绔�", pointer1, 390);
 				ctx.font = "30px Times New Roman";
-				ctx.fillText(arrPy, pyLocation(pointer1, 3), 430);//填充到达站拼音，调用函数确定位置
-				ctx.font = "60px 宋体";
-				temp2 = 750 - 23 * ticketCheck.length + 30;//确定检票口信息填充x坐标
-				ctx.fillText(ticketCheck, temp2, 530, 23 * ticketCheck.length);//填充检票口信息，限制每个字符宽度平均为23px
-				ctx.fillText(seatNumber, 40, 530, 23 * seatNumber.length);//填充座位号信息，限制每个字符宽度平均为23px
-				temp3 = 750 - 23 * fare.length;//确定票价信息填充x坐标
-				ctx.fillText(fare, temp3, 775, 23 * fare.length);//填充票价信息，限制每个字符宽度平均为23px
-				ctx.font = "30px 宋体";
-				if (ticketCheck != "") ctx.fillText("检票口：", temp2 - 110, 530);//如果检票口信息不为空，那么填充“检票口”三个汉字
-				ctx.fillText("票价：", temp3 - 80, 775);//填充“票价”二字，x坐标为票价信息填充x坐标-80px
-				ctx.fillText(seatType, 40 + 23 * seatNumber.length + 10, 530);//填充坐席类别，x坐标为座位号尾部+10px
-				ctx.fillText(name, 40, 610);//填充姓名
-				ctx.fillText(idNo + " " + idTypeEng + " " + idTypeChn, 40, 650);//填充身份证件号码+类型代码+类型中文
-				code1 = TMIS.concat(machineType, machineNo);//拼接车站TMIS+出票机器类型+机器号
-				ctx.fillText("电子票号：" + ticketNo, 40, 690);//填充电子票号
-				ctx.fillText("订 单 号：" + orderNo, 40, 775);//填充订单号
-				ctx.fillText(code1 + " " + prtDate + " " + prtTime, 235, 1300);//填充code1(车站TMIS+出票机器类型+机器号)和打印日期时间
+				ctx.fillText(arrPy, pyLocation(pointer1, 3), 430);//濉厖鍒拌揪绔欐嫾闊筹紝璋冪敤鍑芥暟纭畾浣嶇疆
+				ctx.font = "60px 瀹嬩綋";
+				temp2 = 750 - 23 * ticketCheck.length + 30;//纭畾妫€绁ㄥ彛淇℃伅濉厖x鍧愭爣
+				ctx.fillText(ticketCheck, temp2, 530, 23 * ticketCheck.length);//濉厖妫€绁ㄥ彛淇℃伅锛岄檺鍒舵瘡涓瓧绗﹀搴﹀钩鍧囦负23px
+				ctx.fillText(seatNumber, 40, 530, 23 * seatNumber.length);//濉厖搴т綅鍙蜂俊鎭紝闄愬埗姣忎釜瀛楃瀹藉害骞冲潎涓�23px
+				temp3 = 750 - 23 * fare.length;//纭畾绁ㄤ环淇℃伅濉厖x鍧愭爣
+				ctx.fillText(fare, temp3, 775, 23 * fare.length);//濉厖绁ㄤ环淇℃伅锛岄檺鍒舵瘡涓瓧绗﹀搴﹀钩鍧囦负23px
+				ctx.font = "30px 瀹嬩綋";
+				if (ticketCheck != "") ctx.fillText("妫€绁ㄥ彛锛�", temp2 - 110, 530);//濡傛灉妫€绁ㄥ彛淇℃伅涓嶄负绌猴紝閭ｄ箞濉厖鈥滄绁ㄥ彛鈥濅笁涓眽瀛�
+				ctx.fillText("绁ㄤ环锛�", temp3 - 80, 775);//濉厖鈥滅エ浠封€濅簩瀛楋紝x鍧愭爣涓虹エ浠蜂俊鎭～鍏厁鍧愭爣-80px
+				ctx.fillText(seatType, 40 + 23 * seatNumber.length + 10, 530);//濉厖鍧愬腑绫诲埆锛寈鍧愭爣涓哄骇浣嶅彿灏鹃儴+10px
+				ctx.fillText(name, 40, 610);//濉厖濮撳悕
+				ctx.fillText(idNo + " " + idTypeEng + " " + idTypeChn, 40, 650);//濉厖韬唤璇佷欢鍙风爜+绫诲瀷浠ｇ爜+绫诲瀷涓枃
+				code1 = TMIS.concat(machineType, machineNo);//鎷兼帴杞︾珯TMIS+鍑虹エ鏈哄櫒绫诲瀷+鏈哄櫒鍙�
+				ctx.fillText("鐢靛瓙绁ㄥ彿锛�" + ticketNo, 40, 690);//濉厖鐢靛瓙绁ㄥ彿
+				ctx.fillText("璁� 鍗� 鍙凤細" + orderNo, 40, 775);//濉厖璁㈠崟鍙�
+				ctx.fillText(code1 + " " + prtDate + " " + prtTime, 235, 1300);//濉厖code1(杞︾珯TMIS+鍑虹エ鏈哄櫒绫诲瀷+鏈哄櫒鍙�)鍜屾墦鍗版棩鏈熸椂闂�
 			}
 			button.addEventListener("click", function() {
-				//单击按钮执行初始化函数
+				//鍗曞嚮鎸夐挳鎵ц鍒濆鍖栧嚱鏁�
 				init();
 			});
 			document.onkeydown = function(event) {
-				//按下回车键与单击按钮效果相同
+				//鎸変笅鍥炶溅閿笌鍗曞嚮鎸夐挳鏁堟灉鐩稿悓
 				if (event.keyCode == 13) {
-					//键码13为回车键
+					//閿爜13涓哄洖杞﹂敭
 					init();
 				}
 			}
diff --git a/en/index.html b/en/index.html
index 028deae..bf0793d 100644
--- a/en/index.html
+++ b/en/index.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
 	<head>
-		<meta charset="GB2312">
+		<meta charset="UTF-8">
 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
 		<title>YuanRetro-Main</title>
 		<link rel="stylesheet" href="./style.css">
@@ -30,9 +30,9 @@
 			<li class="navi"><a href="http://www.yuanshen.dev/en/music.html">Music</a></li>
 			<li class="navi"><a href="http://www.yuanshen.dev/en/pinball.html">JS Pinball Game</a></li>
 			<li class="navi"><a href="http://www.yuanshen.dev/en/morse.html">Morse Code</a></li>
-			<li class="navi"><a href="http://www.yuanshen.dev/en/crtirgen.html">中国铁路行程信息提示生成器(CRTIRGen)</a></li>
+			<li class="navi"><a href="http://www.yuanshen.dev/en/crtirgen.html">涓浗閾佽矾琛岀▼淇℃伅鎻愮ず鐢熸垚鍣�(CRTIRGen)</a></li>
 			<li class="navi"><a href="http://www.yuanshen.dev/en/about.html">About</a></li>
-			<li class="navi"><a href="http://www.yuanshen.dev/">简体中文</a></li>
+			<li class="navi"><a href="http://www.yuanshen.dev/">绠€浣撲腑鏂�</a></li>
 		</ul>
 		<br />
 		<h2>Welcome to Genshin Impact(Yuanshen) Retro Computing Hub(GIRCH)...</h2>
diff --git a/en/morse.html b/en/morse.html
index 0a9d0e0..77761f2 100644
--- a/en/morse.html
+++ b/en/morse.html
@@ -1,77 +1,76 @@
 <!DOCTYPE html>
 <html lang="zh">
 <head>
-    <meta charset="GB2312"> <!-- Set character encoding to GB2312 -->
-    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Make the webpage adapt to various device widths -->
-    <title>YuanRetro - Morse Code</title> <!-- Webpage title -->
-    <link rel="stylesheet" href="./style.css"> <!-- Link to external stylesheet -->
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>YuanRetro-Morse Code</title>
+    <link rel="stylesheet" href="./style.css">
     <style>
-        /* Styles defined directly here */
+        /* Style settings */
         #textInput {
-            font-family: GenshinImpactZhLv1; /* Set input box font */
-            font-size: 16px; /* Set input box font size */
+            font-family: GenshinImpactZhLv1; /* Font */
+            font-size: 16px; /* Font size */
         }
         label, input, button {
-            display: inline-block; /* Set elements to block-level, allowing width settings */
-            vertical-align: middle; /* Vertically center align */
-            margin-bottom: 10px; /* Set bottom margin */
+            display: inline-block;
+            vertical-align: middle;
+            margin-bottom: 10px; /* Spacing between elements */
         }
-    
         label {
             width: 250px; /* Label width */
         }
-    
         input {
-            width: 100px; /* Input box width */
-            margin-right: 40px; /* Distance from the button */
+            width: 100px;
+            margin-right: 40px; /* Right margin for input box */
         }
-    
         button {
-            width: 80px; /* Button width */
+            width: 80px;
         }
-    
         #error {
-            color: red; /* Error message color */
-            margin-top: 10px; /* Top margin for error message */
+            color: red;
+            margin-top: 10px; /* Style for error messages */
         }
-    
     </style>
 </head>
 <body class="body">
     <!-- Navigation menu -->
     <ul>
-        <li class="navi"><a href="http://www.yuanshen.dev/en/index.html">Main</a></li>
-        <li class="navi"><a href="http://www.yuanshen.dev/en/music.html">Music</a></li>
-        <li class="navi"><a href="http://www.yuanshen.dev/en/pinball.html">JS Pinball Game</a></li>
-        <li class="navi"><a href="http://www.yuanshen.dev/en/morse.html">Morse Code</a></li>
-        <li class="navi"><a href="http://www.yuanshen.dev/en/crtirgen.html">中国铁路行程信息提示生成器(CRTIRGen)</a></li>
-        <li class="navi"><a href="http://www.yuanshen.dev/en/about.html">About</a></li>
-        <li class="navi"><a href="http://www.yuanshen.dev/">简体中文</a></li>
+    	<li class="navi"><a href="http://www.yuanshen.dev/en/index.html">Main</a></li>
+    	<li class="navi"><a href="http://www.yuanshen.dev/en/music.html">Music</a></li>
+    	<li class="navi"><a href="http://www.yuanshen.dev/en/pinball.html">JS Pinball Game</a></li>
+    	<li class="navi"><a href="http://www.yuanshen.dev/en/morse.html">Morse Code</a></li>
+    	<li class="navi"><a href="http://www.yuanshen.dev/en/crtirgen.html">涓浗閾佽矾琛岀▼淇℃伅鎻愮ず鐢熸垚鍣�(CRTIRGen)</a></li>
+    	<li class="navi"><a href="http://www.yuanshen.dev/en/about.html">About</a></li>
+    	<li class="navi"><a href="http://www.yuanshen.dev/">绠€浣撲腑鏂�</a></li>
     </ul>
     <br />
     
-    <h1>Text to Morse Code</h1> <!-- Main title -->
+    <h1>Text to Morse Code</h1> <!-- Title -->
     
-    <!-- Input area -->
-    <textarea id="textInput" placeholder="Enter text to convert" rows="10" cols="30"></textarea>
+    <!-- User input area for entering text to be converted -->
+    <textarea id="textInput" placeholder="Please input the text" rows="10" cols="60"></textarea>
     <br />
     
-    <label for="WPM">Sending speed (WPM, words per minute):</label>
-    <input type="number" id="WPM" value="20" min="1"/> <!-- Default speed is 20 WPM -->
+    <!-- User can set WPM (words per minute) for the sending speed -->
+    <label for="WPM">Speed (WPM, Words per minute):</label>
+    <input type="number" id="WPM" value="20" min="1"/> <!-- Default WPM set to 20 -->
     <br />
     
-    <label for="fq">Code pitch (Hz, Hertz):</label>
-    <input type="number" id="fq" value="600" min="1"/> <!-- Default pitch is 600 Hz -->
+    <!-- User can set pitch frequency (Hz) -->
+    <label for="fq">Pitch (Hz, Hertz):</label>
+    <input type="number" id="fq" value="600" min="1"/> <!-- Default frequency 600Hz -->
     
-    <!-- Buttons -->
-    <button class="custom-button" onclick="preparation()">Play</button> 
-    <button class="custom-button" onclick="pauseSound()">Pause</button> 
-    <button class="custom-button" onclick="resumeSound()">Resume</button> 
-    <button class="custom-button" onclick="stopSound()">Stop</button> 
-    <div id="error"></div> <!-- Area for displaying error messages -->
+    <!-- Control buttons -->
+    <button class="custom-button" onclick="preparation()">Play</button> <!-- Play button to start sending Morse code -->
+    <button class="custom-button" onclick="pauseSound()">Pause</button> <!-- Pause button -->
+    <button class="custom-button" onclick="resumeSound()">Resume</button> <!-- Resume button -->
+    <button class="custom-button" onclick="stopSound()">Stop</button> <!-- Stop button -->
+	<button class="custom-button" onclick="downloadMorse()">Download Morse Code</button> <!-- Download button -->
+    <div id="error"></div> <!-- Area to display error messages -->
+	<div><img src=../morsesheet.png style="width: 600px; height: auto;"></div> <!-- Morse code reference sheet -->
 
     <script>
-        // Define the mapping for Morse code
+        // Morse code dictionary mapping letters, numbers, and some punctuation to Morse code representations
         const morseCode = {
             'A': '.-', 'B': '-...', 'C': '-.-.', 'D': '-..', 'E': '.',
             'F': '..-.', 'G': '--.', 'H': '....', 'I': '..', 'J': '.---',
@@ -88,131 +87,149 @@ <h1>Text to Morse Code</h1> <!-- Main title -->
             '@': '.--.-.'
         };
 
-        let audioContext; // For audio context
-        let currentTimeouts = []; // For storing current timers
-        let isPlaying = false; // Whether it is currently playing
-        let currentIndex = 0; // Current note index
-        let words = []; // Store the words to be played
-        let dotDuration, dashDuration, elementGap, letterGap, wordGap; // Durations and gaps for notes
-        let currentFrequency = 600; // Current audio frequency
+        let audioContext; // AudioContext object for audio processing
+        let currentTimeouts = []; // Array to store all setTimeout references for clearing later
+        let isPlaying = false; // Indicates whether it is currently playing
+        let currentIndex = 0; // Index of the current Morse symbol being played
+        let words = []; // Converted Morse code sequence
+        let dotDuration, dashDuration, elementGap, letterGap, wordGap; // Various intervals and durations
+        let currentFrequency = 600; // Current audio frequency, default is 600Hz
 
-        // Create audio context
+        // Create and initialize AudioContext
         function createAudioContext() {
             audioContext = new (window.AudioContext || window.webkitAudioContext)();
         }
 
-        // Convert text to Morse code
+        // Convert text to Morse code, returning a string composed of . and -
         function textToMorse(text) {
-            return text.toUpperCase().split('').map(char => morseCode[char] || ' ').join(' ');
+            return text.toUpperCase().split('').map(char => morseCode[char] || ' ').join(' '); // Map each character to Morse code
         }
 
-        // Play sound
+        // Play sound with specified frequency and duration
         function playSound(frequency, duration) {
-            const oscillator = audioContext.createOscillator(); // Create an oscillator
-            oscillator.type = 'sine'; // Set wave type to sine
+            const oscillator = audioContext.createOscillator(); // Create a sound generator
+            oscillator.type = 'sine'; // Set sound type to sine wave
             oscillator.frequency.setValueAtTime(frequency, audioContext.currentTime); // Set frequency
-            oscillator.connect(audioContext.destination); // Connect to the audio context's destination
+            oscillator.connect(audioContext.destination); // Output sound to audio output device
             oscillator.start(); // Start playing
-            oscillator.stop(audioContext.currentTime + duration); // Stop playing
+            oscillator.stop(audioContext.currentTime + duration); // Stop after specified duration
         }
 
-        // Calculate the duration of a dot (in milliseconds)
+        // Calculate the duration of each dot based on WPM (words per minute)
         function getDotDuration(wpm) {
-            return 1200 / wpm; // Calculate duration of a dot
+            return 1200 / wpm; // 1200ms/WPM equals the duration of a dot
         }
 
-        // Play Morse code
+        // Clear all set timeouts
+        function clearTimeouts() {
+            currentTimeouts.forEach(timeout => clearTimeout(timeout)); // Clear all setTimeouts one by one
+            currentTimeouts = []; // Clear the timeout array
+        }
+
+        // Play the next Morse code symbol
         function playNextSymbol() {
-            // Exit if paused or finished playing
+            // Exit the function if playback has stopped or reached the end
             if (!isPlaying || currentIndex >= words.length) {
                 return;
             }
 
-            const symbol = words[currentIndex]; // Get current note
-            if (symbol === '.') { // Play dot
-                playSound(currentFrequency, dotDuration / 1000);
-                currentIndex++; // Move to next note
-                setTimeout(playNextSymbol, dotDuration + elementGap); // Wait to play the next note
-            } else if (symbol === '-') { // Play dash
-                playSound(currentFrequency, dashDuration / 1000);
-                currentIndex++; // Move to next note
-                setTimeout(playNextSymbol, dashDuration + elementGap); // Wait to play the next note
-            } else if (symbol === ' ') { // Add gap between letters
-                currentIndex++;
-                setTimeout(playNextSymbol, letterGap); // Wait to play the next note
-            } else if (symbol === '   ') { // Add gap between words
-                currentIndex++;
-                setTimeout(playNextSymbol, wordGap); // Wait to play the next note
+            const symbol = words[currentIndex]; // Get the current symbol to be played
+            let timeoutDuration = 0; // Duration for the timeout
+
+            if (symbol === '.') {
+                // Play dot
+                playSound(currentFrequency, dotDuration / 1000); // Convert dot duration to seconds
+                timeoutDuration = dotDuration + elementGap; // Dot followed by element gap
+            } else if (symbol === '-') {
+                // Play dash
+                playSound(currentFrequency, dashDuration / 1000); // Dash duration is three times that of a dot
+                timeoutDuration = dashDuration + elementGap;
+            } else if (symbol === ' ') {
+                // Letter gap
+                timeoutDuration = letterGap;
+            } else if (symbol === '   ') {
+                // Word gap
+                timeoutDuration = wordGap;
             }
+
+            currentIndex++; // Play the next symbol
+            const timeoutId = setTimeout(playNextSymbol, timeoutDuration); // Set the next symbol to play
+            currentTimeouts.push(timeoutId); // Save timeout reference for clearing
         }
 
-        // Play Morse code
+        // Prepare and start playing Morse code
         function playMorse(wpm, freq) {
-            dotDuration = getDotDuration(wpm); // Calculate dot duration
-            dashDuration = 3 * dotDuration; // Dash duration is three times that of a dot
-            elementGap = dotDuration; // Gap between elements
-            letterGap = 3 * dotDuration; // Gap between letters
-            wordGap = 7 * dotDuration; // Gap between words (7 times the duration of a dot)
+            // Calculate various durations: dot, dash, element gap, letter gap, word gap
+            dotDuration = getDotDuration(wpm);
+            dashDuration = 3 * dotDuration;
+            elementGap = dotDuration;
+            letterGap = 3 * dotDuration;
+            wordGap = 7 * dotDuration;
 
-            const text = document.getElementById('textInput').value.trim(); // Get input text
-            const morseText = text.split(' ').map(word => textToMorse(word)).join('   '); // Convert to Morse code
-            words = morseText.split(''); // Split Morse code into individual characters
-            currentFrequency = freq; // Set current frequency
-            currentIndex = 0; // Reset current index
-            isPlaying = true; // Mark as playing
-            playNextSymbol(); // Start playing notes
-        }
+            // Get the text from the input box and convert to Morse code
+            const text = document.getElementById('textInput').value.trim();
+            const morseText = text.split(' ').map(word => textToMorse(word)).join('   '); // Convert text to Morse code with spaces between words
+            words = morseText.split(''); // Split Morse text into individual symbols
+            currentIndex = 0; // Reset the index
+            isPlaying = true; // Set playing state to true
 
-        // Validate user input
-        function validateInput(text) {
-            // Regular expression: allow letters, numbers, and specific symbols
-            const validChars = /^[A-Za-z0-9.,?'!()/&:;=+-_"$@ ]*$/;
-            return validChars.test(text); // Return whether the input is valid
+            // Start playing the Morse code
+            playNextSymbol(); // Begin playing the Morse code
         }
 
-        // Prepare to play audio
+        // Prepare the Morse code and handle user input
         function preparation() {
-            const textInput = document.getElementById('textInput').value; // Get user input text
-
-            // Validate user input
-            if (!validateInput(textInput)) {
-                document.getElementById('error').innerText = 'Please enter valid characters only!';
+            const inputText = document.getElementById('textInput').value.trim(); // Get user input
+            const errorMessage = document.getElementById('error'); // Get error message area
+            errorMessage.textContent = ''; // Clear previous error message
+            if (!validateInput(inputText)) {
+                errorMessage.textContent = 'Only A-Z, 0-9, and some punctuation (.,?\'!()/&:;=+-_"$@) are allowed!'; // Set error message
                 return; // Exit if input is invalid
-            } else {
-                document.getElementById('error').innerText = ''; // Clear error message
             }
-
-            // Get WPM and frequency values
-            const wpm = parseInt(document.getElementById('WPM').value);
-            const freq = parseInt(document.getElementById('fq').value);
-
-            // Create audio context if not already created
+            clearTimeouts(); // Clear any existing timeouts
             if (!audioContext) {
-                createAudioContext(); // Create audio context
+                createAudioContext(); // Create audio context if it doesn't exist
             }
-
-            // Play Morse code
-            playMorse(wpm, freq);
+            const wpm = document.getElementById('WPM').value; // Get user-defined WPM
+            currentFrequency = document.getElementById('fq').value; // Get user-defined frequency
+            playMorse(wpm, currentFrequency); // Start playing Morse code
         }
 
-        // Pause playback
+        // Pause the playback
         function pauseSound() {
-            isPlaying = false; // Mark as paused
+            isPlaying = false; // Set playing state to false
         }
 
         // Resume playback
         function resumeSound() {
-            if (!isPlaying) {
-                isPlaying = true; // Mark as playing
-                playNextSymbol(); // Resume playing
+            if (!isPlaying && currentIndex < words.length) {
+                isPlaying = true; // Set playing state to true
+                playNextSymbol(); // Resume playing from current index
             }
         }
 
         // Stop playback
         function stopSound() {
-            isPlaying = false; // Mark as not playing
-            currentIndex = 0; // Reset current index
-            words = []; // Clear words
+            clearTimeouts(); // Clear all timeouts
+            isPlaying = false; // Set playing state to false
+            currentIndex = 0; // Reset index
+        }
+
+        // Validate user input
+        function validateInput(inputText) {
+            const allowedChars = /^[A-Za-z0-9.,?!'()&:;=-_\/\"$@ ]*$/; // Regular expression to allow only specific characters
+            return allowedChars.test(inputText); // Return true if input is valid
+        }
+
+        // Download Morse code as a text file
+        function downloadMorse() {
+            const text = document.getElementById('textInput').value.trim(); // Get input text
+            const morseText = textToMorse(text); // Convert to Morse code
+            const blob = new Blob([morseText], { type: 'text/plain' }); // Create a blob for the Morse code
+            const link = document.createElement('a'); // Create a link element
+            link.href = window.URL.createObjectURL(blob); // Set the link to the blob URL
+            link.download = 'morse_code.txt'; // Set the default file name for download
+            link.click(); // Trigger the download
         }
     </script>
 </body>
diff --git a/en/music.html b/en/music.html
index 57ce5f5..ce4bdb3 100644
--- a/en/music.html
+++ b/en/music.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
 	<head>
-		<meta charset="GB2312">
+		<meta charset="UTF-8">
 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
 		<title>YuanRetro-Music</title>
 		<link rel="stylesheet" href="./style.css">
@@ -12,9 +12,9 @@
 			<li class="navi"><a href="http://www.yuanshen.dev/en/music.html">Music</a></li>
 			<li class="navi"><a href="http://www.yuanshen.dev/en/pinball.html">JS Pinball Game</a></li>
 			<li class="navi"><a href="http://www.yuanshen.dev/en/morse.html">Morse Code</a></li>
-			<li class="navi"><a href="http://www.yuanshen.dev/en/crtirgen.html">中国铁路行程信息提示生成器(CRTIRGen)</a></li>
+			<li class="navi"><a href="http://www.yuanshen.dev/en/crtirgen.html">涓浗閾佽矾琛岀▼淇℃伅鎻愮ず鐢熸垚鍣�(CRTIRGen)</a></li>
 			<li class="navi"><a href="http://www.yuanshen.dev/en/about.html">About</a></li>
-			<li class="navi"><a href="http://www.yuanshen.dev/">简体中文</a></li>
+			<li class="navi"><a href="http://www.yuanshen.dev/">绠€浣撲腑鏂�</a></li>
 		</ul>
 		<br />
 		<p>
@@ -28,11 +28,11 @@
 			<br />
 			<audio src="../GenshinTheme.mp3" controls>Your browser doesn't seem to support HTML 5 and audio element.</audio>
 			<br />
-			<a href="../Liyue.mp3">2.璃月 Liyue-HOYO-MIX/Yu-Peng Chen (mp3 format)</a>
+			<a href="../Liyue.mp3">2.鐠冩湀 Liyue-HOYO-MIX/Yu-Peng Chen (mp3 format)</a>
 			<br />
 			<audio src="../Liyue.mp3" controls>Your browser doesn't seem to support HTML 5 and audio element.</audio>
 			<br />
-			<a href="../th07_02.mp3">3.无何有之乡～ Deep Mountain-Team Shanghai Alice/ZUN (mp3 format)</a>
+			<a href="../th07_02.mp3">3.鏃犱綍鏈変箣涔★綖 Deep Mountain-Team Shanghai Alice/ZUN (mp3 format)</a>
 			<br />
 			<audio src="../th07_02.mp3" controls>Your browser doesn't seem to support HTML 5 and audio element.</audio>
 			<br />
diff --git a/en/pinball.html b/en/pinball.html
index c190081..dec74b0 100644
--- a/en/pinball.html
+++ b/en/pinball.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
 	<head>
-		<meta charset="GB2312">
+		<meta charset="UTF-8">
 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
 		<title>YuanRetro-Pinball</title>
 		<link rel="stylesheet" href="./style.css">
@@ -35,9 +35,9 @@
 			<li class="navi"><a href="http://www.yuanshen.dev/en/music.html">Music</a></li>
 			<li class="navi"><a href="http://www.yuanshen.dev/en/pinball.html">JS Pinball Game</a></li>
 			<li class="navi"><a href="http://www.yuanshen.dev/en/morse.html">Morse Code</a></li>
-			<li class="navi"><a href="http://www.yuanshen.dev/en/crtirgen.html">中国铁路行程信息提示生成器(CRTIRGen)</a></li>
+			<li class="navi"><a href="http://www.yuanshen.dev/en/crtirgen.html">涓浗閾佽矾琛岀▼淇℃伅鎻愮ず鐢熸垚鍣�(CRTIRGen)</a></li>
 			<li class="navi"><a href="http://www.yuanshen.dev/en/about.html">About</a></li>
-			<li class="navi"><a href="http://www.yuanshen.dev/">简体中文</a></li>
+			<li class="navi"><a href="http://www.yuanshen.dev/">绠€浣撲腑鏂�</a></li>
 		</ul>
 		<br />
 		<h2>Pinball game V2.0... Updated 2024.09.11</h2>
diff --git a/index.html b/index.html
index f1a5524..c6d0486 100644
--- a/index.html
+++ b/index.html
@@ -1,9 +1,9 @@
 <!DOCTYPE html>
 <html>
 	<head>
-		<meta charset="GB2312">
+		<meta charset="UTF-8">
 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
-		<title>YuanRetro-主页</title>
+		<title>YuanRetro-涓婚〉</title>
 		<link rel="stylesheet" href="./style.css">
 		<style>
 			.column1 {
@@ -26,38 +26,38 @@
 	</head>
 	<body class="body">
 		<ul>
-			<li class="navi"><a href="http://www.yuanshen.dev/">主页</a></li>
-			<li class="navi"><a href="http://www.yuanshen.dev/music.html">音乐</a></li>
-			<li class="navi"><a href="http://www.yuanshen.dev/pinball.html">JS弹球</a></li>
-			<li class="navi"><a href="http://www.yuanshen.dev/morse.html">莫尔斯电码</a></li>
-			<li class="navi"><a href="http://www.yuanshen.dev/crtirgen.html">中国铁路行程信息提示生成器(CRTIRGen)</a></li>
-			<li class="navi"><a href="http://www.yuanshen.dev/about.html">关于</a></li>
+			<li class="navi"><a href="http://www.yuanshen.dev/">涓婚〉</a></li>
+			<li class="navi"><a href="http://www.yuanshen.dev/music.html">闊充箰</a></li>
+			<li class="navi"><a href="http://www.yuanshen.dev/pinball.html">JS寮圭悆</a></li>
+			<li class="navi"><a href="http://www.yuanshen.dev/morse.html">鑾皵鏂數鐮�</a></li>
+			<li class="navi"><a href="http://www.yuanshen.dev/crtirgen.html">涓浗閾佽矾琛岀▼淇℃伅鎻愮ず鐢熸垚鍣�(CRTIRGen)</a></li>
+			<li class="navi"><a href="http://www.yuanshen.dev/about.html">鍏充簬</a></li>
 			<li class="navi"><a href="http://www.yuanshen.dev/en/index.html">English</a></li>
 		</ul>
 		<br />
-		<h2>欢迎来到YuanRetro，一个<del>乱乱糟糟</del>的电脑小站</h2>
+		<h2>娆㈣繋鏉ュ埌YuanRetro锛屼竴涓�<del>涔变贡绯熺碂</del>鐨勭數鑴戝皬绔�</h2>
 		<div class="row">
 			<div class="column1">
 				<img src="./nahida.bmp" width="150" height="150">
 			</div>
 			<div class="column2">
-				本站（尽量）做到对较老的浏览器和较慢的网速较为友好
+				鏈珯锛堝敖閲忥級鍋氬埌瀵硅緝鑰佺殑娴忚鍣ㄥ拰杈冩參鐨勭綉閫熻緝涓哄弸濂�
 				<br />
-				尽情探索吧！
+				灏芥儏鎺㈢储鍚э紒
 			</div>
 		</div>
-		你的浏览器User Agent是：
+		浣犵殑娴忚鍣║ser Agent鏄細
 		<div id="userAgentDisplay"></div>
 		<script>
 			function getUserAgent() {
-			  //获取浏览器User Agent
+			  //鑾峰彇娴忚鍣║ser Agent
 			  var userAgent = navigator.userAgent;
 			  
-			  //在前面的分隔符标签中显示
+			  //鍦ㄥ墠闈㈢殑鍒嗛殧绗︽爣绛句腑鏄剧ず
 			  document.getElementById("userAgentDisplay").innerHTML = userAgent;
 			}
 		  
-			//页面加载时调用这个方法
+			//椤甸潰鍔犺浇鏃惰皟鐢ㄨ繖涓柟娉�
 			window.onload = getUserAgent();
 		</script>
 	</body>
diff --git a/morse.html b/morse.html
index 6500e28..0b7f4b4 100644
--- a/morse.html
+++ b/morse.html
@@ -1,77 +1,76 @@
 <!DOCTYPE html>
 <html lang="zh">
 <head>
-    <meta charset="GB2312"> <!-- 设置字符编码为 GB2312 -->
-    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 使网页适应各种设备的宽度 -->
-    <title>YuanRetro-莫尔斯电码</title> <!-- 网页标题 -->
-    <link rel="stylesheet" href="./style.css"> <!-- 引入外部样式表 -->
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>YuanRetro-鑾皵鏂數鐮�</title>
+    <link rel="stylesheet" href="./style.css">
     <style>
-        /* 直接在这里定义的样式 */
+        /* 鏍峰紡璁剧疆 */
         #textInput {
-            font-family: GenshinImpactZhLv1; /* 设置输入框字体 */
-            font-size: 16px; /* 设置输入框字体大小 */
+            font-family: GenshinImpactZhLv1; /* 瀛椾綋 */
+            font-size: 16px; /* 瀛椾綋澶у皬 */
         }
         label, input, button {
-            display: inline-block; /* 设置元素为块级元素，允许设置宽度 */
-            vertical-align: middle; /* 垂直居中对齐 */
-            margin-bottom: 10px; /* 设置底部外边距 */
+            display: inline-block;
+            vertical-align: middle;
+            margin-bottom: 10px; /* 鍏冪礌涔嬮棿鐨勯棿璺� */
         }
-    
         label {
-            width: 250px; /* 标签宽度 */
+            width: 250px; /* 鏍囩瀹藉害 */
         }
-    
         input {
-            width: 100px; /* 输入框宽度 */
-            margin-right: 40px; /* 和按钮的距离 */
+            width: 100px;
+            margin-right: 40px; /* 杈撳叆妗嗗彸杈硅窛 */
         }
-    
         button {
-            width: 80px; /* 按钮宽度 */
+            width: 80px;
         }
-    
         #error {
-            color: red; /* 错误提示颜色 */
-            margin-top: 10px; /* 错误提示的上边距 */
+            color: red;
+            margin-top: 10px; /* 閿欒鎻愮ず鐨勬牱寮� */
         }
-    
     </style>
 </head>
 <body class="body">
-    <!-- 导航菜单 -->
+    <!-- 瀵艰埅鑿滃崟 -->
     <ul>
-        <li class="navi"><a href="http://www.yuanshen.dev/">主页</a></li>
-        <li class="navi"><a href="http://www.yuanshen.dev/music.html">音乐</a></li>
-        <li class="navi"><a href="http://www.yuanshen.dev/pinball.html">JS弹球</a></li>
-        <li class="navi"><a href="http://www.yuanshen.dev/morse.html">莫尔斯电码</a></li>
-        <li class="navi"><a href="http://www.yuanshen.dev/crtirgen.html">中国铁路行程信息提示生成器(CRTIRGen)</a></li>
-        <li class="navi"><a href="http://www.yuanshen.dev/about.html">关于</a></li>
+        <li class="navi"><a href="http://www.yuanshen.dev/">涓婚〉</a></li>
+        <li class="navi"><a href="http://www.yuanshen.dev/music.html">闊充箰</a></li>
+        <li class="navi"><a href="http://www.yuanshen.dev/pinball.html">JS寮圭悆</a></li>
+        <li class="navi"><a href="http://www.yuanshen.dev/morse.html">鑾皵鏂數鐮�</a></li>
+        <li class="navi"><a href="http://www.yuanshen.dev/crtirgen.html">涓浗閾佽矾琛岀▼淇℃伅鎻愮ず鐢熸垚鍣�(CRTIRGen)</a></li>
+        <li class="navi"><a href="http://www.yuanshen.dev/about.html">鍏充簬</a></li>
         <li class="navi"><a href="http://www.yuanshen.dev/en/index.html">English</a></li>
     </ul>
     <br />
     
-    <h1>文字转莫尔斯电码</h1> <!-- 主标题 -->
+    <h1>鏂囧瓧杞帿灏旀柉鐢电爜</h1> <!-- 鏍囬 -->
     
-    <!-- 输入区域 -->
-    <textarea id="textInput" placeholder="输入要转换的文本" rows="10" cols="30"></textarea>
+    <!-- 鐢ㄦ埛杈撳叆妗嗭紝渚涚敤鎴疯緭鍏ラ渶瑕佽浆鎹㈢殑鏂囨湰 -->
+    <textarea id="textInput" placeholder="杈撳叆瑕佽浆鎹㈢殑鏂囨湰" rows="10" cols="60"></textarea>
     <br />
     
-    <label for="WPM">拍发速度（WPM，单词每分钟）：</label>
-    <input type="number" id="WPM" value="20" min="1"/> <!-- 默认速度为 20 WPM -->
+    <!-- 鐢ㄦ埛鍙互璁剧疆WPM(姣忓垎閽熷崟璇嶆暟)锛屽嵆鎷嶅彂閫熷害 -->
+    <label for="WPM">鎷嶅彂閫熷害锛圵PM锛屽崟璇嶆瘡鍒嗛挓锛夛細</label>
+    <input type="number" id="WPM" value="20" min="1"/> <!-- 榛樿WPM璁剧疆涓�20 -->
     <br />
     
-    <label for="fq">电码音高（Hz，赫兹）：</label>
-    <input type="number" id="fq" value="600" min="1"/> <!-- 默认音高为 600 Hz -->
+    <!-- 鐢ㄦ埛鍙互璁剧疆鐢电爜闊抽珮锛圚z锛岃但鍏癸級 -->
+    <label for="fq">鐢电爜闊抽珮锛圚z锛岃但鍏癸級锛�</label>
+    <input type="number" id="fq" value="600" min="1"/> <!-- 榛樿棰戠巼600Hz -->
     
-    <!-- 按钮 -->
-    <button class="custom-button" onclick="preparation()">播放</button> 
-    <button class="custom-button" onclick="pauseSound()">暂停</button> 
-    <button class="custom-button" onclick="resumeSound()">继续</button> 
-    <button class="custom-button" onclick="stopSound()">停止</button> 
-    <div id="error"></div> <!-- 用于显示错误信息的区域 -->
+    <!-- 鎺у埗鎸夐挳 -->
+    <button class="custom-button" onclick="preparation()">鎾斁</button> <!-- 鎾斁鎸夐挳锛岀偣鍑诲紑濮嬫挱鏀捐帿灏旀柉鐢电爜 -->
+    <button class="custom-button" onclick="pauseSound()">鏆傚仠</button> <!-- 鏆傚仠鎸夐挳 -->
+    <button class="custom-button" onclick="resumeSound()">缁х画</button> <!-- 缁х画鎸夐挳 -->
+    <button class="custom-button" onclick="stopSound()">鍋滄</button> <!-- 鍋滄鎸夐挳 -->
+	<button class="custom-button" onclick="downloadMorse()">涓嬭浇鐢电爜</button> <!-- 涓嬭浇鎸夐挳 -->
+    <div id="error"></div> <!-- 鏄剧ず閿欒淇℃伅鐨勫尯鍩� -->
+	<div><img src=./morsesheet.png style="width: 600px; height: auto;"></div> <!--鐢电爜瀵圭収琛�-->
 
     <script>
-        // 定义莫尔斯电码的映射
+        // 鑾皵鏂數鐮佸瓧鍏革紝瀛楁瘝銆佹暟瀛楀拰閮ㄥ垎鏍囩偣绗﹀彿鐨勫搴旇帿灏旀柉鐢电爜琛ㄧず
         const morseCode = {
             'A': '.-', 'B': '-...', 'C': '-.-.', 'D': '-..', 'E': '.',
             'F': '..-.', 'G': '--.', 'H': '....', 'I': '..', 'J': '.---',
@@ -88,126 +87,154 @@
             '@': '.--.-.'
         };
 
-        let audioContext; // 用于音频上下文
-        let currentTimeouts = []; // 用于存储当前的定时器
-        let isPlaying = false; // 是否正在播放
-        let currentIndex = 0; // 当前音符索引
-        let words = []; // 存储要播放的单词
-        let dotDuration, dashDuration, elementGap, letterGap, wordGap; // 音符的时长和间隔
-        let currentFrequency = 600; // 当前音频频率
+        let audioContext; // 鐢ㄤ簬闊抽澶勭悊鐨凙udioContext瀵硅薄
+        let currentTimeouts = []; // 鐢ㄤ簬瀛樺偍鎵€鏈� setTimeout 寮曠敤锛屼互渚垮湪闇€瑕佹椂娓呴櫎
+        let isPlaying = false; // 琛ㄧず鏄惁姝ｅ湪鎾斁
+        let currentIndex = 0; // 褰撳墠鎾斁鐨勮帿灏旀柉绗﹀彿鐨勭储寮�
+        let words = []; // 杞崲鍚庣殑鑾皵鏂數鐮佸簭鍒�
+        let dotDuration, dashDuration, elementGap, letterGap, wordGap; // 鍚勭闂撮殧鍜屾椂闀�
+        let currentFrequency = 600; // 褰撳墠闊抽棰戠巼锛岄粯璁や负600Hz
 
-        // 创建音频上下文
+        // 鍒涘缓骞跺垵濮嬪寲AudioContext
         function createAudioContext() {
             audioContext = new (window.AudioContext || window.webkitAudioContext)();
         }
 
-        // 将文本转换为莫尔斯电码
+        // 灏嗘枃鏈浆鎹负鑾皵鏂數鐮侊紝杩斿洖鐢�.鍜�-缁勬垚鐨勫瓧绗︿覆
         function textToMorse(text) {
             return text.toUpperCase().split('').map(char => morseCode[char] || ' ').join(' ');
         }
 
-        // 播放声音
+        // 鎾斁鎸囧畾棰戠巼鍜屾椂闀跨殑澹伴煶
         function playSound(frequency, duration) {
-            const oscillator = audioContext.createOscillator(); // 创建一个振荡器
-            oscillator.type = 'sine'; // 设置音波形状为正弦波
-            oscillator.frequency.setValueAtTime(frequency, audioContext.currentTime); // 设置频率
-            oscillator.connect(audioContext.destination); // 连接到音频上下文的目标
-            oscillator.start(); // 开始播放
-            oscillator.stop(audioContext.currentTime + duration); // 停止播放
+            const oscillator = audioContext.createOscillator(); // 鍒涘缓涓€涓０闊冲彂鐢熷櫒
+            oscillator.type = 'sine'; // 璁剧疆澹伴煶绫诲瀷涓烘寮︽尝
+            oscillator.frequency.setValueAtTime(frequency, audioContext.currentTime); // 璁剧疆棰戠巼
+            oscillator.connect(audioContext.destination); // 灏嗗０闊宠緭鍑哄埌闊抽杈撳嚭璁惧
+            oscillator.start(); // 寮€濮嬫挱鏀�
+            oscillator.stop(audioContext.currentTime + duration); // 鍦ㄦ寚瀹氱殑鏃堕暱鍚庡仠姝�
         }
 
-        // 计算点的时长（单位为毫秒）
+        // 鏍规嵁WPM锛堟瘡鍒嗛挓鍗曡瘝鏁帮級璁＄畻姣忎釜鐐圭殑鏃堕暱
         function getDotDuration(wpm) {
-            return 1200 / wpm; // 计算一个点的时长
+            return 1200 / wpm; // 1200ms/WPM绛変簬涓€涓偣鐨勬椂闀�
         }
 
-        // 播放莫尔斯电码
+        // 娓呴櫎鎵€鏈夊凡璁剧疆鐨勫畾鏃跺櫒
+        function clearTimeouts() {
+            currentTimeouts.forEach(timeout => clearTimeout(timeout)); // 閫愪竴娓呴櫎鎵€鏈塻etTimeout
+            currentTimeouts = []; // 娓呯┖瀹氭椂鍣ㄦ暟缁�
+        }
+
+        // 鎾斁涓嬩竴涓帿灏旀柉鐢电爜绗﹀彿
         function playNextSymbol() {
-            // 如果暂停或已播放完毕，退出
+            // 濡傛灉宸茬粡鍋滄鎾斁鎴栨挱鏀惧埌鏈熬锛岄€€鍑哄嚱鏁�
             if (!isPlaying || currentIndex >= words.length) {
                 return;
             }
 
-            const symbol = words[currentIndex]; // 获取当前音符
-            if (symbol === '.') { // 播放点
-                playSound(currentFrequency, dotDuration / 1000);
-                currentIndex++; // 移动到下一个音符
-                setTimeout(playNextSymbol, dotDuration + elementGap); // 等待播放下一个音符
-            } else if (symbol === '-') { // 播放划
-                playSound(currentFrequency, dashDuration / 1000);
-                currentIndex++; // 移动到下一个音符
-                setTimeout(playNextSymbol, dashDuration + elementGap); // 等待播放下一个音符
-            } else if (symbol === ' ') { // 添加字母间的间隔
-                currentIndex++;
-                setTimeout(playNextSymbol, letterGap); // 等待播放下一个音符
-            } else if (symbol === '   ') { // 添加单词间的间隔
-                currentIndex++;
-                setTimeout(playNextSymbol, wordGap); // 等待播放下一个音符
+            const symbol = words[currentIndex]; // 鑾峰彇褰撳墠瑕佹挱鏀剧殑绗﹀彿
+            let timeoutDuration = 0; // 瀹氭椂鍣ㄧ殑鏃堕暱
+
+            if (symbol === '.') {
+                // 鎾斁鐐�
+                playSound(currentFrequency, dotDuration / 1000); // 灏嗙偣鐨勬椂闀胯浆鎹负绉�
+                timeoutDuration = dotDuration + elementGap; // 鐐瑰悗闈㈣窡鐫€鍏冪礌闂撮殧
+            } else if (symbol === '-') {
+                // 鎾斁鍒�
+                playSound(currentFrequency, dashDuration / 1000); // 鍒掔殑鏃堕暱鏄偣鐨勪笁鍊�
+                timeoutDuration = dashDuration + elementGap;
+            } else if (symbol === ' ') {
+                // 瀛楃闂撮棿闅�
+                timeoutDuration = letterGap;
+            } else if (symbol === '   ') {
+                // 鍗曡瘝闂撮棿闅�
+                timeoutDuration = wordGap;
             }
+
+            currentIndex++; // 鎾斁涓嬩竴涓鍙�
+            const timeoutId = setTimeout(playNextSymbol, timeoutDuration); // 璁剧疆涓嬩竴涓鍙风殑鎾斁
+            currentTimeouts.push(timeoutId); // 淇濆瓨瀹氭椂鍣ㄧ殑寮曠敤锛屼究浜庢竻闄�
         }
 
-        // 播放莫尔斯电码
+        // 鍑嗗骞跺紑濮嬫挱鏀捐帿灏旀柉鐢电爜
         function playMorse(wpm, freq) {
-            dotDuration = getDotDuration(wpm); // 计算点的时长
-            dashDuration = 3 * dotDuration; // 划的时长为点的三倍
-            elementGap = dotDuration; // 元素间的间隔
-            letterGap = 3 * dotDuration; // 字母间的间隔
-            wordGap = 7 * dotDuration; // 单词间的间隔（7 个点的时长）
-
-            const text = document.getElementById('textInput').value.trim(); // 获取输入的文本
-            const morseText = text.split(' ').map(word => textToMorse(word)).join('   '); // 转换为莫尔斯代码
-            words = morseText.split(''); // 将莫尔斯代码拆分为单个字符
-            currentFrequency = freq; // 设置当前频率
-            currentIndex = 0; // 重置当前索引
-            isPlaying = true; // 标记为正在播放
-            playNextSymbol(); // 开始播放音符
-        }
-
-        // 验证用户输入
+            // 璁＄畻鍚勭鏃堕暱锛氱偣銆佸垝銆佸厓绱犻棿闅斻€佸瓧姣嶉棿闅斻€佸崟璇嶉棿闅�
+            dotDuration = getDotDuration(wpm);
+            dashDuration = 3 * dotDuration;
+            elementGap = dotDuration;
+            letterGap = 3 * dotDuration;
+            wordGap = 7 * dotDuration;
+
+            // 鑾峰彇杈撳叆妗嗙殑鏂囨湰骞惰浆鎹负鑾皵鏂數鐮�
+            const text = document.getElementById('textInput').value.trim();
+            const morseText = text.split(' ').map(word => textToMorse(word)).join('   ');
+            words = morseText.split(''); // 灏嗚浆鎹㈠悗鐨勮帿灏旀柉鐢电爜鎷嗗垎涓哄瓧绗︽暟缁�
+            currentFrequency = freq; // 璁剧疆褰撳墠棰戠巼
+            currentIndex = 0; // 浠庣涓€涓鍙峰紑濮嬫挱鏀�
+            isPlaying = true; // 璁剧疆鎾斁鐘舵€�
+            clearTimeouts(); // 娓呴櫎涔嬪墠鐨勫畾鏃跺櫒锛岄槻姝㈠娆＄偣鍑绘椂鎾斁鍐茬獊
+            playNextSymbol(); // 寮€濮嬫挱鏀剧涓€涓鍙�
+        }
+
+        // 楠岃瘉杈撳叆鍐呭鏄惁鍚堟硶锛堝彧鍏佽瀛楁瘝銆佹暟瀛楀拰閮ㄥ垎鏍囩偣绗﹀彿锛�
         function validateInput(text) {
-            // 正则表达式：允许字母、数字和特定符号
-            const validChars = /^[A-Za-z0-9.,?'!()/&:;=+-_"$@ ]*$/;
-            return validChars.test(text); // 返回输入是否合法
+            const validChars = /^[A-Za-z0-9.,?'!()/&:;=+-_"$@ ]*$/; // 鍏佽鐨勫瓧绗﹂泦
+            return validChars.test(text); // 杩斿洖鏄惁鍖归厤
         }
 
-        // 准备播放音频
+        // 鍑嗗鎾斁杩囩▼
         function preparation() {
-            const textInput = document.getElementById('textInput').value; // 获取用户输入的文本
+            const textInput = document.getElementById('textInput').value; // 鑾峰彇鐢ㄦ埛杈撳叆
 
-            // 验证用户输入
+            // 楠岃瘉杈撳叆鏄惁鍚堟硶
             if (!validateInput(textInput)) {
-                document.getElementById('error').textContent = '输入包含无效字符，请使用字母、数字和以下特殊符号：.,?\'!()/&:;=+-_"$@';
-                return; // 如果输入无效，则返回
-            }
+                document.getElementById('error').textContent = '杈撳叆鍖呭惈鏃犳晥瀛楃锛岃浣跨敤瀛楁瘝銆佹暟瀛楀拰浠ヤ笅鐗规畩绗﹀彿锛�.,?\'!()/&:;=+-_"$@';
+                return;
+            }else {
+				document.getElementById('error').textContent = '';//娓呯┖閿欒淇℃伅
+			}
 
-            // 确保音频上下文在用户交互后创建
+            // 濡傛灉闊抽涓婁笅鏂囦笉瀛樺湪鎴栧凡鍏抽棴锛岄噸鏂板垱寤轰竴涓�
             if (!audioContext || audioContext.state === 'closed') {
                 createAudioContext();
             }
 
-            const WPM = Number(document.getElementById('WPM').value); // 获取用户设置的 WPM
-            const fq = Number(document.getElementById('fq').value); // 获取用户设置的音高
-            playMorse(WPM, fq); // 播放莫尔斯电码
+            const WPM = Number(document.getElementById('WPM').value); // 鑾峰彇鐢ㄦ埛璁剧疆鐨刉PM
+            const fq = Number(document.getElementById('fq').value); // 鑾峰彇鐢ㄦ埛璁剧疆鐨勯鐜�
+            playMorse(WPM, fq); // 寮€濮嬫挱鏀捐帿灏旀柉鐢电爜
         }
 
-        // 暂停播放
+        // 鏆傚仠鎾斁
         function pauseSound() {
-            isPlaying = false; // 设置为暂停状态
+            isPlaying = false; // 璁剧疆鎾斁鐘舵€佷负鏆傚仠
         }
 
-        // 继续播放
+        // 缁х画鎾斁
         function resumeSound() {
-            if (!isPlaying) { // 只有在暂停状态下才继续播放
-                isPlaying = true; // 设置为播放状态
-                playNextSymbol(); // 开始播放下一个音符
+            if (!isPlaying) { // 濡傛灉褰撳墠鏈挱鏀撅紝鎵嶇户缁�
+                isPlaying = true;
+                playNextSymbol(); // 浠庡綋鍓嶇鍙风户缁挱鏀�
             }
         }
 
-        // 停止播放
+        // 鍋滄鎾斁
         function stopSound() {
-            isPlaying = false; // 停止播放
-            currentIndex = 0; // 重置当前索引
-        }
+            isPlaying = false; // 鍋滄鎾斁
+            currentIndex = 0; // 閲嶇疆鎾斁绱㈠紩
+            clearTimeouts(); // 鍋滄鎾斁鏃舵竻闄ゆ墍鏈夊畾鏃跺櫒
+        }
+		
+		function downloadMorse() {
+			//涓嬭浇鑾皵鏂唬鐮佸埌鏂囨湰鏂囦欢
+		    const text = document.getElementById('textInput').value.trim();
+		    const morseText = text.split(' ').map(word => textToMorse(word)).join(' ');
+		    const blob = new Blob([morseText], { type: 'text/plain' });
+		    const link = document.createElement('a');
+		    link.href = URL.createObjectURL(blob);
+		    link.download = 'morse_code.txt';
+		    link.click();
+		}
     </script>
 </body>
 </html>
diff --git a/morsesheet.png b/morsesheet.png
new file mode 100644
index 0000000..7999782
Binary files /dev/null and b/morsesheet.png differ
diff --git a/music.html b/music.html
index 4426369..820a2a9 100644
--- a/music.html
+++ b/music.html
@@ -1,38 +1,38 @@
 <!DOCTYPE html>
 <html>
 	<head>
-		<meta charset="GB2312">
+		<meta charset="UTF-8">
 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
-		<title>YuanRetro-音乐</title>
+		<title>YuanRetro-闊充箰</title>
 		<link rel="stylesheet" href="./style.css">
 	</head>
 	<body class="body">
 		<ul>
-			<li class="navi"><a href="http://www.yuanshen.dev/">主页</a></li>
-			<li class="navi"><a href="http://www.yuanshen.dev/music.html">音乐</a></li>
-			<li class="navi"><a href="http://www.yuanshen.dev/pinball.html">JS弹球</a></li>
-			<li class="navi"><a href="http://www.yuanshen.dev/morse.html">莫尔斯电码</a></li>
-			<li class="navi"><a href="http://www.yuanshen.dev/crtirgen.html">中国铁路行程信息提示生成器(CRTIRGen)</a></li>
-			<li class="navi"><a href="http://www.yuanshen.dev/about.html">关于</a></li>
+			<li class="navi"><a href="http://www.yuanshen.dev/">涓婚〉</a></li>
+			<li class="navi"><a href="http://www.yuanshen.dev/music.html">闊充箰</a></li>
+			<li class="navi"><a href="http://www.yuanshen.dev/pinball.html">JS寮圭悆</a></li>
+			<li class="navi"><a href="http://www.yuanshen.dev/morse.html">鑾皵鏂數鐮�</a></li>
+			<li class="navi"><a href="http://www.yuanshen.dev/crtirgen.html">涓浗閾佽矾琛岀▼淇℃伅鎻愮ず鐢熸垚鍣�(CRTIRGen)</a></li>
+			<li class="navi"><a href="http://www.yuanshen.dev/about.html">鍏充簬</a></li>
 			<li class="navi"><a href="http://www.yuanshen.dev/en/index.html">English</a></li>
 		</ul>
 		<br />
 		<p>
-			<del>以下的音乐均未经授权，仅供测试使用，请勿用于商业用途~</del>
+			<del>浠ヤ笅鐨勯煶涔愬潎鏈粡鎺堟潈锛屼粎渚涙祴璇曚娇鐢紝璇峰嬁鐢ㄤ簬鍟嗕笟鐢ㄩ€攡</del>
 			<br />
-			如果你的<del>古董</del>浏览器不支持HTML5音频元素的话，可以试试直接用出现的超链接下载音频文件哦~
+			濡傛灉浣犵殑<del>鍙よ懀</del>娴忚鍣ㄤ笉鏀寔HTML5闊抽鍏冪礌鐨勮瘽锛屽彲浠ヨ瘯璇曠洿鎺ョ敤鍑虹幇鐨勮秴閾炬帴涓嬭浇闊抽鏂囦欢鍝
 			<br />
-			<a href="./GenshinTheme.mp3">1.<del>原神启动-</del>Genshin Impact Main Theme-HOYO-MIX/陈致逸 (mp3格式)</a>
+			<a href="./GenshinTheme.mp3">1.<del>鍘熺鍚姩-</del>Genshin Impact Main Theme-HOYO-MIX/闄堣嚧閫� (mp3鏍煎紡)</a>
 			<br />
-			<audio src="./GenshinTheme.mp3" controls>你的浏览器似乎不支持HTML5音频标签诶~试试这个链接吧~</audio>
+			<audio src="./GenshinTheme.mp3" controls>浣犵殑娴忚鍣ㄤ技涔庝笉鏀寔HTML5闊抽鏍囩璇秪璇曡瘯杩欎釜閾炬帴鍚</audio>
 			<br />
-			<a href="./Liyue.mp3">2.璃月 Liyue-HOYO-MIX/陈致逸 (mp3格式)</a>
+			<a href="./Liyue.mp3">2.鐠冩湀 Liyue-HOYO-MIX/闄堣嚧閫� (mp3鏍煎紡)</a>
 			<br />
-			<audio src="./Liyue.mp3" controls>你的浏览器似乎不支持HTML5音频标签诶~试试这个链接吧~</audio>
+			<audio src="./Liyue.mp3" controls>浣犵殑娴忚鍣ㄤ技涔庝笉鏀寔HTML5闊抽鏍囩璇秪璇曡瘯杩欎釜閾炬帴鍚</audio>
 			<br />
-			<a href="./th07_02.mp3">3.无何有之乡～ Deep Mountain-Team Shanghai Alice/ZUN (mp3格式)</a>
+			<a href="./th07_02.mp3">3.鏃犱綍鏈変箣涔★綖 Deep Mountain-Team Shanghai Alice/ZUN (mp3鏍煎紡)</a>
 			<br />
-			<audio src="./th07_02.mp3" controls>你的浏览器似乎不支持HTML5音频标签诶~试试这个链接吧~</audio>
+			<audio src="./th07_02.mp3" controls>浣犵殑娴忚鍣ㄤ技涔庝笉鏀寔HTML5闊抽鏍囩璇秪璇曡瘯杩欎釜閾炬帴鍚</audio>
 			<br />
 		</p>
 	</body>
diff --git a/pinball.html b/pinball.html
index 5c06f5d..e340fed 100644
--- a/pinball.html
+++ b/pinball.html
@@ -1,69 +1,69 @@
 <!DOCTYPE html>
 <html>
 	<head>
-		<meta charset="GB2312">
+		<meta charset="UTF-8">
 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
-		<title>YuanRetro-JS弹球</title>
+		<title>YuanRetro-JS寮圭悆</title>
 		<link rel="stylesheet" href="./style.css">
 		<style>	
-			/* 基础按钮样式 */
+			/* 鍩虹鎸夐挳鏍峰紡 */
 			.custom-button {
-  				background-color: #4CAF50; /* 扁平的绿色背景 */
-        		border: none; /* 无边框 */
-        		color: white; /* 字体颜色白色 */
-        		padding: 12px 24px; /* 内边距 */
-       			font-size: 16px; /* 字体大小 */
-        		border-radius: 10px; /* 小的圆角 */
-         		cursor: pointer; /* 鼠标指针样式 */
-        		transition: background-color 0.3s ease; /* 背景颜色的过渡效果 */
+  				background-color: #4CAF50; /* 鎵佸钩鐨勭豢鑹茶儗鏅� */
+        		border: none; /* 鏃犺竟妗� */
+        		color: white; /* 瀛椾綋棰滆壊鐧借壊 */
+        		padding: 12px 24px; /* 鍐呰竟璺� */
+       			font-size: 16px; /* 瀛椾綋澶у皬 */
+        		border-radius: 10px; /* 灏忕殑鍦嗚 */
+         		cursor: pointer; /* 榧犳爣鎸囬拡鏍峰紡 */
+        		transition: background-color 0.3s ease; /* 鑳屾櫙棰滆壊鐨勮繃娓℃晥鏋� */
   				width: 100px;
   				height: 50px;
 			}
-			/* 鼠标悬停时的效果 */
+			/* 榧犳爣鎮仠鏃剁殑鏁堟灉 */
 			.custom-button:hover {
-  				background-color: #45a049; /* 更深的绿色 */
+  				background-color: #45a049; /* 鏇存繁鐨勭豢鑹� */
 			}
-			/* 鼠标按下时的效果 */
+			/* 榧犳爣鎸変笅鏃剁殑鏁堟灉 */
 			.custom-button:active {
-        		background-color: #2E7D32; /* 按下时更深的绿色 */
+        		background-color: #2E7D32; /* 鎸変笅鏃舵洿娣辩殑缁胯壊 */
     		}
 		</style>
 	</head>
 	<body class="body">
 		<ul>
-			<li class="navi"><a href="http://www.yuanshen.dev/">主页</a></li>
-			<li class="navi"><a href="http://www.yuanshen.dev/music.html">音乐</a></li>
-			<li class="navi"><a href="http://www.yuanshen.dev/pinball.html">JS弹球</a></li>
-			<li class="navi"><a href="http://www.yuanshen.dev/morse.html">莫尔斯电码</a></li>
-			<li class="navi"><a href="http://www.yuanshen.dev/crtirgen.html">中国铁路行程信息提示生成器(CRTIRGen)</a></li>
-			<li class="navi"><a href="http://www.yuanshen.dev/about.html">关于</a></li>
+			<li class="navi"><a href="http://www.yuanshen.dev/">涓婚〉</a></li>
+			<li class="navi"><a href="http://www.yuanshen.dev/music.html">闊充箰</a></li>
+			<li class="navi"><a href="http://www.yuanshen.dev/pinball.html">JS寮圭悆</a></li>
+			<li class="navi"><a href="http://www.yuanshen.dev/morse.html">鑾皵鏂數鐮�</a></li>
+			<li class="navi"><a href="http://www.yuanshen.dev/crtirgen.html">涓浗閾佽矾琛岀▼淇℃伅鎻愮ず鐢熸垚鍣�(CRTIRGen)</a></li>
+			<li class="navi"><a href="http://www.yuanshen.dev/about.html">鍏充簬</a></li>
 			<li class="navi"><a href="http://www.yuanshen.dev/en/index.html">English</a></li>
 		</ul>
 		<br />
-		<h2>弹球游戏 V2.2 <del>更新时间2024.09.12</del></h2>
-		<p>用纯JavaScript写的小小游戏，可以分别用键盘的“a”和“d”键控制挡板左右移动，也可以使用<del>（移动设备友好）</del>的按钮哦~<br />如果浏览器不支持或者屏蔽了JavaScript，游戏可（ken）能（ding）就不能运行了哦~<br />每次接住弹球可以得到5分，但是如果没接住的话，就寄喽~</p>
-		<p>感谢<del>（n年前买的x）</del>程晨的《JavaScript网页游戏制作轻松学》(ISBN 978-7-115-46238-1)，这里的算法和部分代码参考了书中的思路哦~</p>
-		<label for="easy">难度选择<br/></label>
-		<!--创建三个难度等级对应的复选框-->
+		<h2>寮圭悆娓告垙 V2.2 <del>鏇存柊鏃堕棿2024.09.12</del></h2>
+		<p>鐢ㄧ函JavaScript鍐欑殑灏忓皬娓告垙锛屽彲浠ュ垎鍒敤閿洏鐨勨€渁鈥濆拰鈥渄鈥濋敭鎺у埗鎸℃澘宸﹀彸绉诲姩锛屼篃鍙互浣跨敤<del>锛堢Щ鍔ㄨ澶囧弸濂斤級</del>鐨勬寜閽摝~<br />濡傛灉娴忚鍣ㄤ笉鏀寔鎴栬€呭睆钄戒簡JavaScript锛屾父鎴忓彲锛坘en锛夎兘锛坉ing锛夊氨涓嶈兘杩愯浜嗗摝~<br />姣忔鎺ヤ綇寮圭悆鍙互寰楀埌5鍒嗭紝浣嗘槸濡傛灉娌℃帴浣忕殑璇濓紝灏卞瘎鍠絶</p>
+		<p>鎰熻阿<del>锛坣骞村墠涔扮殑x锛�</del>绋嬫櫒鐨勩€奐avaScript缃戦〉娓告垙鍒朵綔杞绘澗瀛︺€�(ISBN 978-7-115-46238-1)锛岃繖閲岀殑绠楁硶鍜岄儴鍒嗕唬鐮佸弬鑰冧簡涔︿腑鐨勬€濊矾鍝</p>
+		<label for="easy">闅惧害閫夋嫨<br/></label>
+		<!--鍒涘缓涓変釜闅惧害绛夌骇瀵瑰簲鐨勫閫夋-->
 		<input type="checkbox" id="easy" onclick="clickCheckbox(this)"/>
-		<label for="easy">简单（EZ）<br /></label>
+		<label for="easy">绠€鍗曪紙EZ锛�<br /></label>
 		<input type="checkbox" id="hard" onclick="clickCheckbox(this)"/>
-		<label for="easy">困难（HD）<br /></label>
+		<label for="easy">鍥伴毦锛圚D锛�<br /></label>
 		<input type="checkbox" id="insane" onclick="clickCheckbox(this)"/>
-		<label for="easy">疯狂（IN）<br /></label>
-		<input type="button" id="start" class="custom-button" value="开始游戏！" onclick="start()"/><!--进入游戏按钮-->
+		<label for="easy">鐤媯锛圛N锛�<br /></label>
+		<input type="button" id="start" class="custom-button" value="寮€濮嬫父鎴忥紒" onclick="start()"/><!--杩涘叆娓告垙鎸夐挳-->
 		<br />
-		<input type="button" id="leftButton" class="custom-button" value="左"/><!--向左按钮-->
-		<!--创建400x400像素的画布-->
+		<input type="button" id="leftButton" class="custom-button" value="宸�"/><!--鍚戝乏鎸夐挳-->
+		<!--鍒涘缓400x400鍍忕礌鐨勭敾甯�-->
 		<canvas id="canvas" width="400" height="400"></canvas>
-		<input type="button" id="rightButton" class="custom-button" value="右"/><!--向右按钮-->
+		<input type="button" id="rightButton" class="custom-button" value="鍙�"/><!--鍚戝彸鎸夐挳-->
 		<script type="text/javascript">
 			var canv = document.getElementById("canvas");
-			var ctx = canv.getContext("2d"); //创建画布和画笔对象
+			var ctx = canv.getContext("2d"); //鍒涘缓鐢诲竷鍜岀敾绗斿璞�
 			var easy = document.getElementById("easy");
 			var hard = document.getElementById("hard");
-			var insane = document.getElementById("insane");//创建三个复选框对象
-			//声明一些杂七杂八的变量
+			var insane = document.getElementById("insane");//鍒涘缓涓変釜澶嶉€夋瀵硅薄
+			//澹版槑涓€浜涙潅涓冩潅鍏殑鍙橀噺
 			var startX = 0;
 			var startY = 0;
 			var panelX = 0;
@@ -75,10 +75,10 @@
 			var rightInterval;
 			//var testI = 0;
 			function debounce(func, wait, imme) {
-				//防止键盘按下某个按键之后连续114.5(x)次的重复情况
-				//参数func是传入的需要通过按键执行的方法，wait是如果连续执行则每次执行的间隔时间（毫秒）
-				//布尔类型参数imme如果被设置为“true”则取消等待时间（那你为啥还要用这个方法x）
-				//参（chao）考（de）以下帖子中的代码，作者为Peter Mortensen
+				//闃叉閿洏鎸変笅鏌愪釜鎸夐敭涔嬪悗杩炵画114.5(x)娆＄殑閲嶅鎯呭喌
+				//鍙傛暟func鏄紶鍏ョ殑闇€瑕侀€氳繃鎸夐敭鎵ц鐨勬柟娉曪紝wait鏄鏋滆繛缁墽琛屽垯姣忔鎵ц鐨勯棿闅旀椂闂达紙姣锛�
+				//甯冨皵绫诲瀷鍙傛暟imme濡傛灉琚缃负鈥渢rue鈥濆垯鍙栨秷绛夊緟鏃堕棿锛堥偅浣犱负鍟ヨ繕瑕佺敤杩欎釜鏂规硶x锛�
+				//鍙傦紙chao锛夎€冿紙de锛変互涓嬪笘瀛愪腑鐨勪唬鐮侊紝浣滆€呬负Peter Mortensen
 				//https://www.stackoverflow.com/questions/24004791/what-is-the-debounce-function-in-javascript/24004942#24004942
 				var timeout;
 				return function() {
@@ -105,7 +105,7 @@
 					insane.checked = false;
 					checkbox.checked = true;
 				}
-				//防止同时选择多个复选框
+				//闃叉鍚屾椂閫夋嫨澶氫釜澶嶉€夋
 			}
 
 			function readCheckbox () {
@@ -118,16 +118,16 @@
 				}else {
 					return 30;
 				}
-				//判断选中了哪个复选框，返回对应的间隔时间
+				//鍒ゆ柇閫変腑浜嗗摢涓閫夋锛岃繑鍥炲搴旂殑闂撮殧鏃堕棿
 			}
 
 			function prep() {
-				//随机生成弹球和挡板的初始位置坐标
-				//只有生成的数在某一个范围内才跳出死循环（看起来很危险的样子，不过实际上几乎不会超过几毫秒x）
-				//确实有用数学运算的优化方法，但是实在不（lan）想（de）改代码了
-				//10 px<startX<390 px: 避免球卡进左右边框
-				//10 px<startY<380 px: 避免球卡进上下边框或者一开局就gg（当然还是有可能的）
-				//0 px<panelX<350 px: 避免挡板卡进左右边框
+				//闅忔満鐢熸垚寮圭悆鍜屾尅鏉跨殑鍒濆浣嶇疆鍧愭爣
+				//鍙湁鐢熸垚鐨勬暟鍦ㄦ煇涓€涓寖鍥村唴鎵嶈烦鍑烘寰幆锛堢湅璧锋潵寰堝嵄闄╃殑鏍峰瓙锛屼笉杩囧疄闄呬笂鍑犱箮涓嶄細瓒呰繃鍑犳绉抶锛�
+				//纭疄鏈夌敤鏁板杩愮畻鐨勪紭鍖栨柟娉曪紝浣嗘槸瀹炲湪涓嶏紙lan锛夋兂锛坉e锛夋敼浠ｇ爜浜�
+				//10 px<startX<390 px: 閬垮厤鐞冨崱杩涘乏鍙宠竟妗�
+				//10 px<startY<380 px: 閬垮厤鐞冨崱杩涗笂涓嬭竟妗嗘垨鑰呬竴寮€灞€灏眊g锛堝綋鐒惰繕鏄湁鍙兘鐨勶級
+				//0 px<panelX<350 px: 閬垮厤鎸℃澘鍗¤繘宸﹀彸杈规
 				while (true) {
 					startX = Math.floor(Math.random() * 1000);
 					if (startX > 10 && startX < 390) {
@@ -154,41 +154,41 @@
 				}
 			}
 			var ball = {
-				//声明弹球的基本属性
-				//包括初始坐标，下一步的移动速度和一些方法
+				//澹版槑寮圭悆鐨勫熀鏈睘鎬�
+				//鍖呮嫭鍒濆鍧愭爣锛屼笅涓€姝ョ殑绉诲姩閫熷害鍜屼竴浜涙柟娉�
 				x: startX,
 				y: startY,
-				//移动速度，正负分别代表不同方向
+				//绉诲姩閫熷害锛屾璐熷垎鍒唬琛ㄤ笉鍚屾柟鍚�
 				xSpeed: -2,
 				ySpeed: -2,
 				draw: function() {
 					ctx.fillStyle = "Red";
 					ctx.beginPath();
-					ctx.arc(this.x, this.y, 10, 0, Math.PI * 2, false); //在画布上画出弹球
+					ctx.arc(this.x, this.y, 10, 0, Math.PI * 2, false); //鍦ㄧ敾甯冧笂鐢诲嚭寮圭悆
 					ctx.fill();
 				},
 				move: function(panelSt, panelEn) {
 					if (this.x + this.xSpeed < 10 || this.x + this.xSpeed > 390) {
-						this.xSpeed = -this.xSpeed; //碰左右壁，反弹
+						this.xSpeed = -this.xSpeed; //纰板乏鍙冲锛屽弽寮�
 					} else {
-						this.x += this.xSpeed; //继续移动
+						this.x += this.xSpeed; //缁х画绉诲姩
 					}
 					if (this.y + this.ySpeed < 10 || this.y + this.ySpeed > 390) {
-						this.ySpeed = -this.ySpeed; //碰顶，反弹
+						this.ySpeed = -this.ySpeed; //纰伴《锛屽弽寮�
 					} else if (this.y + this.ySpeed >= 380 && this.y + this.ySpeed <= 390) {
-						//碰底，检测是否被接住了
+						//纰板簳锛屾娴嬫槸鍚﹁鎺ヤ綇浜�
 						if (this.x > panelSt - 10 && this.x < panelEn + 10) {
 							this.ySpeed = -this.ySpeed;
 							score += 5;
-							//接住了，弹起并且加五分
+							//鎺ヤ綇浜嗭紝寮硅捣骞朵笖鍔犱簲鍒�
 						} else {
 							//this.y += this.ySpeed;
-							window.alert("完喽，寄了!");
+							window.alert("瀹屽柦锛屽瘎浜�!");
 							//this.x = 0;
 							//this.y = 0;
 							score = 0;
 							flag = true;
-							//没接住，积分清零并且初始化一些东西
+							//娌℃帴浣忥紝绉垎娓呴浂骞朵笖鍒濆鍖栦竴浜涗笢瑗�
 						}
 					} else {
 						this.y += this.ySpeed; //Continue moving
@@ -196,8 +196,8 @@
 				}
 			};
 			var panel = {
-				//声明挡板的基本属性
-				//比如位置还有键盘控制的方法
+				//澹版槑鎸℃澘鐨勫熀鏈睘鎬�
+				//姣斿浣嶇疆杩樻湁閿洏鎺у埗鐨勬柟娉�
 				x: panelX,
 				y: 390,
 				xSize: 50,
@@ -210,26 +210,26 @@
 
 			function keyPanel(event) {
 				if (event.keyCode == 65) {
-					//‘a’被按下了，向左移动
+					//鈥榓鈥欒鎸変笅浜嗭紝鍚戝乏绉诲姩
 					//console.log("Left!",testI);
 					//testI++;
 					panel.x -= 8;
 					if (panel.x < 0) {
-						panel.x = 0; //再移动就出左边界喽，所以移动到左边界就好
+						panel.x = 0; //鍐嶇Щ鍔ㄥ氨鍑哄乏杈圭晫鍠斤紝鎵€浠ョЩ鍔ㄥ埌宸﹁竟鐣屽氨濂�
 					}
 				}
 				if (event.keyCode == 68) {
-					//‘d’被按下了，向右移动
+					//鈥榙鈥欒鎸変笅浜嗭紝鍚戝彸绉诲姩
 					//console.log("Right!",testI);
 					//testI++;
 					panel.x += 8;
 					if (panel.x > 400 - panel.xSize) {
-						panel.x = 400 - panel.xSize; //再移动就出右边界喽，所以移动到右边界就好
-						//注意哦，挡板的定位点在左上角诶
+						panel.x = 400 - panel.xSize; //鍐嶇Щ鍔ㄥ氨鍑哄彸杈圭晫鍠斤紝鎵€浠ョЩ鍔ㄥ埌鍙宠竟鐣屽氨濂�
+						//娉ㄦ剰鍝︼紝鎸℃澘鐨勫畾浣嶇偣鍦ㄥ乏涓婅璇�
 					}
 				}
 			}
-			//调用debounce函数
+			//璋冪敤debounce鍑芥暟
 			var dbPanelKey = debounce(keyPanel, 20);
 
 			function leftClick() {
@@ -237,14 +237,14 @@
 				if (panel.x < 0) {
 					panel.x = 0;
 				}
-				//如果向左按钮按下了就向左移动（一开始先执行一次以防按下小于100毫秒）
+				//濡傛灉鍚戝乏鎸夐挳鎸変笅浜嗗氨鍚戝乏绉诲姩锛堜竴寮€濮嬪厛鎵ц涓€娆′互闃叉寜涓嬪皬浜�100姣锛�
 				leftInterval = setInterval(function() {
 					panel.x -= 15;
 					if (panel.x < 0) {
 						panel.x = 0;
 					}
 				}, 100);
-				//长按就每100毫秒重复一次
+				//闀挎寜灏辨瘡100姣閲嶅涓€娆�
 			}
 
 			function rightClick() {
@@ -258,18 +258,18 @@
 						panel.x = 400 - panel.xSize;
 					}
 				}, 100);
-				//同理，向右移动并重复
+				//鍚岀悊锛屽悜鍙崇Щ鍔ㄥ苟閲嶅
 			}
-			const leftButton = document.getElementById("leftButton"); //创建向左按钮对象
-			leftButton.addEventListener("mousedown", leftClick); //如果鼠标按下那么执行方法移动挡板
-			leftButton.addEventListener("mouseup", function() {clearInterval(leftInterval);}); //如果鼠标松开那么停止计时器防止鬼畜（
-			const rightButton = document.getElementById("rightButton"); //向右按钮同理
+			const leftButton = document.getElementById("leftButton"); //鍒涘缓鍚戝乏鎸夐挳瀵硅薄
+			leftButton.addEventListener("mousedown", leftClick); //濡傛灉榧犳爣鎸変笅閭ｄ箞鎵ц鏂规硶绉诲姩鎸℃澘
+			leftButton.addEventListener("mouseup", function() {clearInterval(leftInterval);}); //濡傛灉榧犳爣鏉惧紑閭ｄ箞鍋滄璁℃椂鍣ㄩ槻姝㈤鐣滐紙
+			const rightButton = document.getElementById("rightButton"); //鍚戝彸鎸夐挳鍚岀悊
 			rightButton.addEventListener("mousedown", rightClick);
 			rightButton.addEventListener("mouseup", function() {clearInterval(rightInterval);});
-			window.addEventListener("keydown", dbPanelKey); //检测是否有键盘按键按下
-			//每隔特定时间刷新一次弹球位置（更改这个时间就可以显著改变游戏难度哦~）
+			window.addEventListener("keydown", dbPanelKey); //妫€娴嬫槸鍚︽湁閿洏鎸夐敭鎸変笅
+			//姣忛殧鐗瑰畾鏃堕棿鍒锋柊涓€娆″脊鐞冧綅缃紙鏇存敼杩欎釜鏃堕棿灏卞彲浠ユ樉钁楁敼鍙樻父鎴忛毦搴﹀摝~锛�
 			function start() {
-				//点击开始按钮之后就会来到这里～
+				//鐐瑰嚮寮€濮嬫寜閽箣鍚庡氨浼氭潵鍒拌繖閲岋綖
 				clearInterval(mainInterval);
 				score = 0;
 				prep();
@@ -278,25 +278,25 @@
 				panel.x = panelX;
 				clearInterval(leftInterval);
 				clearInterval(rightInterval);
-				intervalTime = readCheckbox();//这个间隔时间是根据难度决定的哦～（EZ=30ms，HD=20ms，IN=10ms，不选=30ms）
+				intervalTime = readCheckbox();//杩欎釜闂撮殧鏃堕棿鏄牴鎹毦搴﹀喅瀹氱殑鍝︼綖锛圗Z=30ms锛孒D=20ms锛孖N=10ms锛屼笉閫�=30ms锛�
 				mainInterval = setInterval(function() {
 					if (flag == true) {
-						//上一次寄了，所以重新生成小球和挡板的位置（也许可以但不能百分百避免游戏寄掉的死循环）
+						//涓婁竴娆″瘎浜嗭紝鎵€浠ラ噸鏂扮敓鎴愬皬鐞冨拰鎸℃澘鐨勪綅缃紙涔熻鍙互浣嗕笉鑳界櫨鍒嗙櫨閬垮厤娓告垙瀵勬帀鐨勬寰幆锛�
 						prep();
 						ball.x = startX;
 						ball.y = startY;
 						panel.x = panelX;
 						flag = false;
 						clearInterval(leftInterval);
-						clearInterval(rightInterval);//如果寄了就重置定时器，防止重开之后挡板不受控移动
+						clearInterval(rightInterval);//濡傛灉瀵勪簡灏遍噸缃畾鏃跺櫒锛岄槻姝㈤噸寮€涔嬪悗鎸℃澘涓嶅彈鎺хЩ鍔�
 					} else {
-						ctx.clearRect(0, 0, 400, 400); //清除画布，不要留下轨迹
-						ctx.font = "20px GenshinImpactZhLv1"; //选择积分显示字体
-						ctx.fillText("分数：" + score, 10, 30); //在画布上显示最新积分
-						ball.draw(); //调用方法绘制弹球
-						panel.draw(); //调用方法绘制挡板
-						ball.move(panel.x, panel.x + panel.xSize); //移动弹球，同时传入挡板最新位置，进行碰撞检测
-						ctx.strokeRect(0, 0, 400, 400); //用黑线标记画布边界hanges.
+						ctx.clearRect(0, 0, 400, 400); //娓呴櫎鐢诲竷锛屼笉瑕佺暀涓嬭建杩�
+						ctx.font = "20px GenshinImpactZhLv1"; //閫夋嫨绉垎鏄剧ず瀛椾綋
+						ctx.fillText("鍒嗘暟锛�" + score, 10, 30); //鍦ㄧ敾甯冧笂鏄剧ず鏈€鏂扮Н鍒�
+						ball.draw(); //璋冪敤鏂规硶缁樺埗寮圭悆
+						panel.draw(); //璋冪敤鏂规硶缁樺埗鎸℃澘
+						ball.move(panel.x, panel.x + panel.xSize); //绉诲姩寮圭悆锛屽悓鏃朵紶鍏ユ尅鏉挎渶鏂颁綅缃紝杩涜纰版挒妫€娴�
+						ctx.strokeRect(0, 0, 400, 400); //鐢ㄩ粦绾挎爣璁扮敾甯冭竟鐣宧anges.
 					}
 				}, intervalTime);
 			}
