\n\n

GCSE test<\/h1>\n
<\/div>\n
<\/div>\n \n\n<\/body>\n<\/html><\/pre>\n

我們添加了兩個(gè)

<\/code>,並使用特殊的類來識(shí)別應(yīng)在其中呈現(xiàn)搜索表單和結(jié)果的元素。 <\/p>\n

手動(dòng)渲染函數(shù)<\/strong><\/p>\n

現(xiàn)在進(jìn)入您的app.js文件並添加以下內(nèi)容:<\/p>\n

var config = {\n  gcseId: '006267341911716099344:r_iziouh0nw', \/\/ 替換為您的搜索引擎ID\n  resultsUrl: 'http:\/\/localhost:8080', \/\/ 替換為您的本地服務(wù)器地址\n  searchWrapperClass: 'gcse-search-wrapper',\n  resultsWrapperClass: 'gcse-results-wrapper'\n};\n\nvar renderSearchForms = function () {\n  if (document.readyState == 'complete') {\n    queryAndRender();\n  } else {\n    google.setOnLoadCallback(function () {\n      queryAndRender();\n    }, true);\n  }\n};\n\nvar queryAndRender = function() {\n  var gsceSearchForms = document.querySelectorAll('.' + config.searchWrapperClass);\n  var gsceResults = document.querySelectorAll('.' + config.resultsWrapperClass);\n\n  if (gsceSearchForms.length > 0) {\n    renderSearch(gsceSearchForms[0]);\n  }\n  if (gsceResults.length > 0) {\n    renderResults(gsceResults[0]);\n  }\n};\n\nvar renderSearch = function (div) {\n    google.search.cse.element.render(\n      {\n        div: div.id,\n        tag: 'searchbox-only',\n        attributes: {\n          resultsUrl: config.resultsUrl\n        }\n      }\n    );\n    if (div.dataset &&\n        div.dataset.stylingFunction &&\n        window[div.dataset.stylingFunction] &&\n        typeof window[div.dataset.stylingFunction] === 'function') {\n      window[div.dataset.stylingFunction](div); \/\/ 傳遞div而不是form\n    }\n};\n\nvar renderResults = function(div) {\n  google.search.cse.element.render(\n    {\n      div: div.id,\n      tag: 'searchresults-only'\n    });\n};\n\nwindow.__gcse = {\n  parsetags: 'explicit',\n  callback: renderSearchForms\n};\n\n(function () {\n  var cx = config.gcseId;\n  var gcse = document.createElement('script');\n  gcse.type = 'text\/javascript';\n  gcse.async = true;\n  gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +\n    '\/\/cse.google.com\/cse.js?cx=' + cx;\n  var s = document.getElementsByTagName('script')[0];\n  s.parentNode.insertBefore(gcse, s);\n})();\n<\/pre>\n

首先,我們聲明一些用於配置的變量。將您之前記下的ID放入config的gcseId<\/code>字段中。將本地index.html文件的URL放入resultsUrl<\/code>字段中。這是用戶提交查詢後搜索將重定向到的位置。此外,GCSE將期望在提供的URL上呈現(xiàn)結(jié)果字段。 <\/p>\n

renderSearchForms<\/code>函數(shù)檢查頁面是否已加載,如果已加載,則調(diào)用將負(fù)責(zé)渲染queryAndRender()<\/code>的函數(shù);或者,如果文檔尚未加載,則設(shè)置回調(diào)函數(shù),以便稍後在文檔加載完成後返回此處。 <\/p>\n

queryAndRender<\/code>函數(shù)查詢具有在config中提供的類的元素的DOM。如果找到包裝器div,則分別調(diào)用renderSearch()<\/code>和renderResults()<\/code>來呈現(xiàn)搜索和結(jié)果字段。 <\/p>\n

renderSearch<\/code>函數(shù)是實(shí)際的魔法發(fā)生的地方。 <\/p>\n

我們使用Google搜索API(此處有關(guān)如何使用google.search.cse.element<\/code>對(duì)象的更多文檔)來創(chuàng)建搜索框,如果存在活動(dòng)查詢(結(jié)果),則創(chuàng)建結(jié)果框。 <\/p>\n

render函數(shù)接受比此示例中提供的更多參數(shù),因此如果需要進(jìn)一步自定義,請(qǐng)務(wù)必檢查文檔。 div<\/code>參數(shù)實(shí)際上接受我們要渲染搜索的div的ID,tag<\/code>參數(shù)表示我們究竟要渲染什麼(results<\/em>或search<\/em>或兩者)。 <\/p>\n

此外,renderSearch()<\/code>查找包裝器元素的數(shù)據(jù)屬性,如果給出了styling-function<\/em>屬性,它將查找作用域中的函數(shù)名稱並將其應(yīng)用於元素。這是我們可以設(shè)置元素樣式的機(jī)會(huì)。 <\/p>\n

window.__gcse = {\n  parsetags: 'explicit',\n  callback: renderSearchForms\n};<\/pre>\n

在此代碼片段中,我們?cè)谌肿饔糜蛑性O(shè)置了一個(gè)回調(diào)變量,以便GCSE在內(nèi)部使用此變量並在加載完成後執(zhí)行回調(diào)函數(shù)。這使得此方法比使用setTimeout()<\/code>解決方案來編輯輸入字段的佔(zhàn)位符(或任何其他內(nèi)容)好得多。 <\/p>\n

測(cè)試運(yùn)行<\/strong><\/p>

到目前為止,我們已經(jīng)包含了渲染搜索框和結(jié)果所需的一切。如果您已安裝node.js,請(qǐng)進(jìn)入放置index.html和app.js文件的文件夾,然後運(yùn)行http-server<\/code>命令。默認(rèn)情況下,這將在localhost上的端口8080上提供文件夾中的內(nèi)容。 <\/p>\n

\"Quick<\/p>\n

樣式函數(shù)<\/strong><\/p>\n

現(xiàn)在我們準(zhǔn)備向搜索div添加自定義樣式函數(shù)。返回index.html,並在#searchForm<\/code> div上添加一個(gè)styling-function<\/code>屬性:<\/p>\n

\n\n\n    \n    GCSE test<\/title>\n<\/head>\n<body>
<h1><a href="http://www.miracleart.cn/">国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂</a></h1>\n\n    <h1>GCSE test<\/h1>\n    <div   class="377j5v51b"   id=\"searchForm\" class=\"gcse-search-wrapper\"><\/div>\n    <div   class="377j5v51b"   id=\"searchResults\" class=\"gcse-results-wrapper\"><\/div>\n    <??>\n\n<\/body>\n<\/html><\/pre>\n<p>現(xiàn)在進(jìn)入app.js,在文件的頂部,在config變量聲明下,添加一個(gè)新函數(shù):<\/p>\n<pre class='brush:php;toolbar:false;'>var config = {\n  gcseId: '006267341911716099344:r_iziouh0nw', \/\/ 替換為您的搜索引擎ID\n  resultsUrl: 'http:\/\/localhost:8080', \/\/ 替換為您的本地服務(wù)器地址\n  searchWrapperClass: 'gcse-search-wrapper',\n  resultsWrapperClass: 'gcse-results-wrapper'\n};\n\nvar renderSearchForms = function () {\n  if (document.readyState == 'complete') {\n    queryAndRender();\n  } else {\n    google.setOnLoadCallback(function () {\n      queryAndRender();\n    }, true);\n  }\n};\n\nvar queryAndRender = function() {\n  var gsceSearchForms = document.querySelectorAll('.' + config.searchWrapperClass);\n  var gsceResults = document.querySelectorAll('.' + config.resultsWrapperClass);\n\n  if (gsceSearchForms.length > 0) {\n    renderSearch(gsceSearchForms[0]);\n  }\n  if (gsceResults.length > 0) {\n    renderResults(gsceResults[0]);\n  }\n};\n\nvar renderSearch = function (div) {\n    google.search.cse.element.render(\n      {\n        div: div.id,\n        tag: 'searchbox-only',\n        attributes: {\n          resultsUrl: config.resultsUrl\n        }\n      }\n    );\n    if (div.dataset &&\n        div.dataset.stylingFunction &&\n        window[div.dataset.stylingFunction] &&\n        typeof window[div.dataset.stylingFunction] === 'function') {\n      window[div.dataset.stylingFunction](div); \/\/ 傳遞div而不是form\n    }\n};\n\nvar renderResults = function(div) {\n  google.search.cse.element.render(\n    {\n      div: div.id,\n      tag: 'searchresults-only'\n    });\n};\n\nwindow.__gcse = {\n  parsetags: 'explicit',\n  callback: renderSearchForms\n};\n\n(function () {\n  var cx = config.gcseId;\n  var gcse = document.createElement('script');\n  gcse.type = 'text\/javascript';\n  gcse.async = true;\n  gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +\n    '\/\/cse.google.com\/cse.js?cx=' + cx;\n  var s = document.getElementsByTagName('script')[0];\n  s.parentNode.insertBefore(gcse, s);\n})();\n<\/pre>\n<p>現(xiàn)在嘗試再次加載測(cè)試頁面,您將看到正確的佔(zhàn)位符。 <\/p>\n<p><img src=\"https:\/\/img.php.cn\/upload\/article\/000\/000\/000\/173975654190702.jpg\" alt=\"Quick Tip: How to Style Google Custom Search Manually \"><\/p>\n<p><strong>結(jié)論<\/strong><\/p>\n<p>對(duì)於快速設(shè)置簡單的搜索,尤其是在網(wǎng)站只是靜態(tài)HTML的情況下,Google自定義搜索引擎非常有效。只需少量JavaScript代碼,就可以自定義搜索表單和結(jié)果頁面,為用戶提供更無縫的體驗(yàn)。 <\/p>\n<p>您是否正在使用GCSE,或者您是否找到了更好的解決方案?請(qǐng)?jiān)谙路皆u(píng)論! <\/p>\n<p><strong>關(guān)於設(shè)置Google自定義搜索樣式的常見問題解答(FAQ)<\/strong><\/p>\n<h3>如何自定義Google自定義搜索引擎的外觀? <\/h3>\n<p>自定義Google自定義搜索引擎的外觀涉及使用CSS(層疊樣式表)。 CSS是一種樣式表語言,用於描述以HTML編寫的文檔的外觀和格式。您可以更改搜索引擎的顏色、字體、大小和其他元素。為此,您需要訪問可編程搜索元素控制API,該API允許您自定義搜索元素。然後,您可以將CSS添加到正確的部分以更改搜索引擎的外觀。 <\/p>\n<h3>我可以將Google自定義搜索添加到我的網(wǎng)站嗎? <\/h3>\n<p>是的,您可以將Google自定義搜索添加到您的網(wǎng)站。 Google提供了一個(gè)自定義搜索JSON API,您可以使用它來發(fā)送GET請(qǐng)求。此API以JSON格式返回搜索結(jié)果。然後,您可以使用這些結(jié)果在您的網(wǎng)站上創(chuàng)建自定義搜索引擎。這允許您的用戶搜索您的網(wǎng)站或您指定的其他網(wǎng)站。 <\/p>\n<h3>如何使用Google自定義搜索實(shí)現(xiàn)搜索框? <\/h3>\n<p>使用Google自定義搜索實(shí)現(xiàn)搜索框涉及創(chuàng)建搜索引擎ID,您可以在可編程搜索引擎網(wǎng)站上執(zhí)行此操作。獲得ID後,您可以使用自定義搜索元素控制API來創(chuàng)建搜索框。然後,您可以使用CSS自定義此搜索框。 <\/p>\n<h3>什麼是可編程搜索元素控制API? <\/h3>\n<p>可編程搜索元素控制API是由Google提供的一組函數(shù),允許您自定義可編程搜索引擎。這包括創(chuàng)建搜索框、自定義搜索引擎的外觀以及控制搜索結(jié)果。 <\/p>\n<h3>如何控制Google自定義搜索中的搜索結(jié)果? <\/h3>\n<p>您可以使用可編程搜索元素控制API控制Google自定義搜索中的搜索結(jié)果。此API提供允許您指定搜索的網(wǎng)站、返回的結(jié)果數(shù)量以及顯示結(jié)果的順序的函數(shù)。 <\/p>\n<h3>我可以將Google自定義搜索用於商業(yè)用途嗎? <\/h3>\n<p>是的,您可以將Google自定義搜索用於商業(yè)用途。但是,您需要了解服務(wù)條款。例如,您不能使用搜索引擎來顯示成人內(nèi)容或宣傳非法活動(dòng)。 <\/p>\n<h3>如何更改Google自定義搜索中搜索結(jié)果的顏色? <\/h3>\n<p>您可以使用CSS更改Google自定義搜索中搜索結(jié)果的顏色。您需要訪問可編程搜索元素控制API並將CSS添加到正確的部分。您可以更改文本、背景和其他搜索結(jié)果元素的顏色。 <\/p>\n<h3>我可以在移動(dòng)設(shè)備上使用Google自定義搜索嗎? <\/h3>\n<p>是的,您可以在移動(dòng)設(shè)備上使用Google自定義搜索??删幊趟阉饕嬖O(shè)計(jì)為響應(yīng)式,這意味著它將調(diào)整以適應(yīng)其正在查看的設(shè)備的屏幕尺寸。您還可以使用CSS自定義搜索引擎的外觀,使其更適合移動(dòng)設(shè)備。 <\/p>\n<h3>如何在我的Google自定義搜索引擎中添加徽標(biāo)? <\/h3>\n<p>您可以使用CSS在我的Google自定義搜索引擎中添加徽標(biāo)。您需要訪問可編程搜索元素控制API並將CSS添加到正確的部分。然後,您可以添加一個(gè)圖像URL以顯示為您的徽標(biāo)。 <\/p>\n<h3>我可以在沒有編碼知識(shí)的情況下使用Google自定義搜索嗎? <\/h3>\n<p>雖然可以在沒有編碼知識(shí)的情況下使用Google自定義搜索,但建議您對(duì)HTML和CSS有一定的了解,以便充分自定義搜索引擎。但是,Google提供了詳細(xì)的文檔和教程來幫助您入門。 <\/p>"}	</script>
	
<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<script>var V_PATH="/";window.onerror=function(){ return true; };</script>
</head>

<body data-commit-time="2023-12-28T14:50:12+08:00" class="editor_body body2_2">
	<link rel="stylesheet" type="text/css" href="/static/csshw/stylehw.css">
<header>
    <div   id="377j5v51b"   class="head">
        <div   id="377j5v51b"   class="haed_left">
            <div   id="377j5v51b"   class="haed_logo">
                <a href="http://www.miracleart.cn/zh-tw/" title="" class="haed_logo_a">
                    <img src="/static/imghw/logo.png" alt="" class="haed_logoimg">
                </a>
            </div>
            <div   id="377j5v51b"   class="head_nav">
                <div   id="377j5v51b"   class="head_navs">
                    <a href="javascript:;" title="社群" class="head_nava head_nava-template1">社群</a>
                    <div   class="377j5v51b"   id="dropdown-template1" style="display: none;">
                        <div   id="377j5v51b"   class="languagechoose">
                            <a href="http://www.miracleart.cn/zh-tw/article.html" title="文章" class="languagechoosea on">文章</a>
                            <a href="http://www.miracleart.cn/zh-tw/faq/zt" title="合集" class="languagechoosea">合集</a>
                            <a href="http://www.miracleart.cn/zh-tw/wenda.html" title="問答" class="languagechoosea">問答</a>
                        </div>
                    </div>
                </div>

                <div   id="377j5v51b"   class="head_navs">
                    <a href="javascript:;" title="學(xué)習(xí)" class="head_nava head_nava-template1_1">學(xué)習(xí)</a>
                    <div   class="377j5v51b"   id="dropdown-template1_1" style="display: none;">
                        <div   id="377j5v51b"   class="languagechoose">
                            <a href="http://www.miracleart.cn/zh-tw/course.html" title="課程" class="languagechoosea on">課程</a>
                            <a href="http://www.miracleart.cn/zh-tw/dic/" title="程式設(shè)計(jì)字典" class="languagechoosea">程式設(shè)計(jì)字典</a>
                        </div>
                    </div>
                </div>

                <div   id="377j5v51b"   class="head_navs">
                    <a href="javascript:;" title="工具庫" class="head_nava head_nava-template1_2">工具庫</a>
                    <div   class="377j5v51b"   id="dropdown-template1_2" style="display: none;">
                        <div   id="377j5v51b"   class="languagechoose">
                            <a href="http://www.miracleart.cn/zh-tw/toolset/development-tools" title="開發(fā)工具" class="languagechoosea on">開發(fā)工具</a>
                            <a href="http://www.miracleart.cn/zh-tw/toolset/website-source-code" title="網(wǎng)站源碼" class="languagechoosea">網(wǎng)站源碼</a>
                            <a href="http://www.miracleart.cn/zh-tw/toolset/php-libraries" title="PHP 函式庫" class="languagechoosea">PHP 函式庫</a>
                            <a href="http://www.miracleart.cn/zh-tw/toolset/js-special-effects" title="JS特效" class="languagechoosea on">JS特效</a>
                            <a href="http://www.miracleart.cn/zh-tw/toolset/website-materials" title="網(wǎng)站素材" class="languagechoosea on">網(wǎng)站素材</a>
                            <a href="http://www.miracleart.cn/zh-tw/toolset/extension-plug-ins" title="擴(kuò)充插件" class="languagechoosea on">擴(kuò)充插件</a>
                        </div>
                    </div>
                </div>

                <div   id="377j5v51b"   class="head_navs">
                    <a href="http://www.miracleart.cn/zh-tw/ai" title="AI工具" class="head_nava head_nava-template1_3">AI工具</a>
                </div>

                <div   id="377j5v51b"   class="head_navs">
                    <a href="javascript:;" title="休閒" class="head_nava head_nava-template1_3">休閒</a>
                    <div   class="377j5v51b"   id="dropdown-template1_3" style="display: none;">
                        <div   id="377j5v51b"   class="languagechoose">
                            <a href="http://www.miracleart.cn/zh-tw/game" title="遊戲下載" class="languagechoosea on">遊戲下載</a>
                            <a href="http://www.miracleart.cn/zh-tw/mobile-game-tutorial/" title="遊戲教程" class="languagechoosea">遊戲教程</a>

                        </div>
                    </div>
                </div>
            </div>
        </div>
                    <div   id="377j5v51b"   class="head_search">
                <input id="key_words"  onkeydown="if (event.keyCode == 13) searchs('zh-tw')" class="search-input" type="text" autocomplete="off" name="keywords" required="required" placeholder="Block,address,transaction,news" value="">
                <a href="javascript:;" title="搜尋"  onclick="searchs('zh-tw')"><img src="/static/imghw/find.png" alt="搜尋"></a>
            </div>
                <div   id="377j5v51b"   class="head_right">
            <div   id="377j5v51b"   class="haed_language">
                <a href="javascript:;" class="layui-btn haed_language_btn">繁體中文<i class="layui-icon layui-icon-triangle-d"></i></a>
                <div   class="377j5v51b"   id="dropdown-template" style="display: none;">
                    <div   id="377j5v51b"   class="languagechoose">
                                                <a href="javascript:setlang('zh-cn');" title="簡體中文" class="languagechoosea">簡體中文</a>
                                                <a href="javascript:setlang('en');" title="English" class="languagechoosea">English</a>
                                                <a href="javascript:;" title="繁體中文" class="languagechoosea">繁體中文</a>
                                                <a href="javascript:setlang('ja');" title="日本語" class="languagechoosea">日本語</a>
                                                <a href="javascript:setlang('ko');" title="???" class="languagechoosea">???</a>
                                                <a href="javascript:setlang('ms');" title="Melayu" class="languagechoosea">Melayu</a>
                                                <a href="javascript:setlang('fr');" title="Fran?ais" class="languagechoosea">Fran?ais</a>
                                                <a href="javascript:setlang('de');" title="Deutsch" class="languagechoosea">Deutsch</a>
                                            </div>
                </div>
            </div>
            <span id="377j5v51b"    class="head_right_line"></span>
                            <div style="display: block;" id="login" class="haed_login ">
                    <a href="javascript:;"  title="Login" class="haed_logina ">Login</a>
                </div>
                <div style="display: block;" id="reg" class="head_signup login">
                    <a href="javascript:;"  title="singup" class="head_signupa">singup</a>
                </div>
            
        </div>
    </div>
</header>

	
	<main>
		<div   id="377j5v51b"   class="Article_Details_main">
			<div   id="377j5v51b"   class="Article_Details_main1">
							<div   id="377j5v51b"   class="Article_Details_main1L">
					<div   id="377j5v51b"   class="Article_Details_main1Lmain" id="Article_Details_main1Lmain">
						<div   id="377j5v51b"   class="Article_Details_main1L1">目錄</div>
						<div   id="377j5v51b"   class="Article_Details_main1L2" id="Article_Details_main1L2">
							<!-- 左側(cè)懸浮,文章定位標(biāo)題1 id="Article_Details_main1L2s_1"-->
															<div   id="377j5v51b"   class="Article_Details_main1L2s ">
									<a href="#如何自定義Google自定義搜索引擎的外觀" title="如何自定義Google自定義搜索引擎的外觀? " >如何自定義Google自定義搜索引擎的外觀? </a>
								</div>
																<div   id="377j5v51b"   class="Article_Details_main1L2s ">
									<a href="#我可以將Google自定義搜索添加到我的網(wǎng)站嗎" title="我可以將Google自定義搜索添加到我的網(wǎng)站嗎? " >我可以將Google自定義搜索添加到我的網(wǎng)站嗎? </a>
								</div>
																<div   id="377j5v51b"   class="Article_Details_main1L2s ">
									<a href="#如何使用Google自定義搜索實(shí)現(xiàn)搜索框" title="如何使用Google自定義搜索實(shí)現(xiàn)搜索框? " >如何使用Google自定義搜索實(shí)現(xiàn)搜索框? </a>
								</div>
																<div   id="377j5v51b"   class="Article_Details_main1L2s ">
									<a href="#什麼是可編程搜索元素控制API" title="什麼是可編程搜索元素控制API? " >什麼是可編程搜索元素控制API? </a>
								</div>
																<div   id="377j5v51b"   class="Article_Details_main1L2s ">
									<a href="#如何控制Google自定義搜索中的搜索結(jié)果" title="如何控制Google自定義搜索中的搜索結(jié)果? " >如何控制Google自定義搜索中的搜索結(jié)果? </a>
								</div>
																<div   id="377j5v51b"   class="Article_Details_main1L2s ">
									<a href="#我可以將Google自定義搜索用於商業(yè)用途嗎" title="我可以將Google自定義搜索用於商業(yè)用途嗎? " >我可以將Google自定義搜索用於商業(yè)用途嗎? </a>
								</div>
																<div   id="377j5v51b"   class="Article_Details_main1L2s ">
									<a href="#如何更改Google自定義搜索中搜索結(jié)果的顏色" title="如何更改Google自定義搜索中搜索結(jié)果的顏色? " >如何更改Google自定義搜索中搜索結(jié)果的顏色? </a>
								</div>
																<div   id="377j5v51b"   class="Article_Details_main1L2s ">
									<a href="#我可以在移動(dòng)設(shè)備上使用Google自定義搜索嗎" title="我可以在移動(dòng)設(shè)備上使用Google自定義搜索嗎? " >我可以在移動(dòng)設(shè)備上使用Google自定義搜索嗎? </a>
								</div>
																<div   id="377j5v51b"   class="Article_Details_main1L2s ">
									<a href="#如何在我的Google自定義搜索引擎中添加徽標(biāo)" title="如何在我的Google自定義搜索引擎中添加徽標(biāo)? " >如何在我的Google自定義搜索引擎中添加徽標(biāo)? </a>
								</div>
																<div   id="377j5v51b"   class="Article_Details_main1L2s ">
									<a href="#我可以在沒有編碼知識(shí)的情況下使用Google自定義搜索嗎" title="我可以在沒有編碼知識(shí)的情況下使用Google自定義搜索嗎? " >我可以在沒有編碼知識(shí)的情況下使用Google自定義搜索嗎? </a>
								</div>
														</div>
					</div>
				</div>
							<div   id="377j5v51b"   class="Article_Details_main1M">
					<div   id="377j5v51b"   class="phpgenera_Details_mainL1">
						<a href="http://www.miracleart.cn/zh-tw/" title="首頁"
							class="phpgenera_Details_mainL1a">首頁</a>
						<img src="/static/imghw/top_right.png" alt="" />
												<a href="http://www.miracleart.cn/zh-tw/web-designer.html"
							class="phpgenera_Details_mainL1a">web前端</a>
						<img src="/static/imghw/top_right.png" alt="" />
												<a href="http://www.miracleart.cn/zh-tw/js-tutorial.html"
							class="phpgenera_Details_mainL1a">js教程</a>
						<img src="/static/imghw/top_right.png" alt="" />
						<span>快速提示:如何手動(dòng)設(shè)計(jì)Google自定義搜索</span>
					</div>
					
					<div   id="377j5v51b"   class="Articlelist_txts">
						<div   id="377j5v51b"   class="Articlelist_txts_info">
							<h1 class="Articlelist_txts_title">快速提示:如何手動(dòng)設(shè)計(jì)Google自定義搜索</h1>
							<div   id="377j5v51b"   class="Articlelist_txts_info_head">
								<div   id="377j5v51b"   class="author_info">
									<a href="http://www.miracleart.cn/zh-tw/member/1468494.html"  class="author_avatar">
									<img class="lazy"  data-src="https://img.php.cn/upload/avatar/000/000/001/66ea812815a39919.png" src="/static/imghw/default1.png" alt="Jennifer Aniston">
									</a>
									<div   id="377j5v51b"   class="author_detail">
																			<a href="http://www.miracleart.cn/zh-tw/member/1468494.html" class="author_name">Jennifer Aniston</a>
                                										</div>
								</div>
                			</div>
							<span id="377j5v51b"    class="Articlelist_txts_time">Feb 17, 2025 am	 09:42 AM</span>
														
						</div>
					</div>
					<hr />
					<div   id="377j5v51b"   class="article_main php-article">
						<div   id="377j5v51b"   class="article-list-left detail-content-wrap content">
						<ins class="adsbygoogle"
							style="display:block; text-align:center;"
							data-ad-layout="in-article"
							data-ad-format="fluid"
							data-ad-client="ca-pub-5902227090019525"
							data-ad-slot="3461856641">
						</ins>
						

					<p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173975653790720.jpg" class="lazy" alt="Quick Tip: How to Style Google Custom Search Manually "></p>
<p><strong>核心要點(diǎn)</strong></p>
<ul>
<li>通過手動(dòng)渲染搜索表單(無需使用特殊的GCSE標(biāo)籤),可以手動(dòng)設(shè)置Google自定義搜索引擎(GCSE)的樣式,從而更好地控制搜索輸入字段並使其外觀更簡潔。 </li>
<li>GCSE回調(diào)函數(shù)可以確保在更改輸入屬性之前已加載輸入。此方法比使用<code>setTimeout</code>方法更可靠。 </li>
<li>Google搜索API可用於創(chuàng)建搜索框和結(jié)果框。如果存在活動(dòng)查詢,則還會(huì)創(chuàng)建結(jié)果框。通過查閱文檔可以實(shí)現(xiàn)其他自定義。 </li>
<li>可以向搜索div添加自定義樣式函數(shù)以進(jìn)行進(jìn)一步自定義。此函數(shù)可用於更改佔(zhàn)位符、刪除背景以及添加在失焦時(shí)刪除背景的事件。 </li>
</ul>
<p>本文由Mark Brown審核。感謝所有SitePoint的同行評(píng)審員,他們使SitePoint的內(nèi)容達(dá)到最佳狀態(tài)! </p>
<p>網(wǎng)站所有者經(jīng)常選擇使用Google自定義搜索引擎(GCSE)來搜索其內(nèi)容,而不是使用內(nèi)置和/或自定義搜索功能。原因很簡單——工作量少得多,而且大多數(shù)情況下都能達(dá)到目的。如果您不需要高級(jí)篩選器或自定義搜索參數(shù),那麼GCSE適合您。 </p>
<p>在本快速提示中,我將向您展示如何<em>手動(dòng)</em>渲染搜索表單(無需使用特殊的GCSE標(biāo)籤)和結(jié)果框,這允許更精細(xì)的控制和更簡潔的搜索輸入字段樣式設(shè)置方法。 </p>
<p><strong>問題</strong></p>
<p>通常,將GCSE添加到您的網(wǎng)站就像將腳本和自定義HTML標(biāo)籤複製粘貼到您的網(wǎng)站一樣簡單。在您放置特殊GCSE標(biāo)籤的位置,將呈現(xiàn)一個(gè)輸入搜索字段。從此字段鍵入並啟動(dòng)搜索將根據(jù)先前配置的參數(shù)執(zhí)行Google搜索(例如,僅搜索sitepoint.com)。 </p>
<p>經(jīng)常出現(xiàn)的一個(gè)問題是“如何更改GCSE輸入字段的佔(zhàn)位符?”。不幸的是,建議的答案通常是錯(cuò)誤的,因?yàn)樗褂貌豢煽康?code>setTimeout</code>方法來等待GCSE的Ajax調(diào)用完成(確保輸入已附加到DOM),然後通過JavaScript更改屬性。 </p>
<p>我們也將查詢?cè)貋K使用JS更改屬性,但我們將使用GCSE提供的回調(diào)函數(shù),而不是盲目地使用<code>setTimeout()</code>,這將保證輸入已加載。 </p>
<p><strong>創(chuàng)建GCSE帳戶</strong></p>
<p>搜索引擎完全在線配置。第一步是轉(zhuǎn)到GCSE網(wǎng)站並單擊“添加”。按照嚮導(dǎo)操作,填寫您要搜索的域名(通常是您的網(wǎng)站URL)。現(xiàn)在您可以忽略任何高級(jí)設(shè)置。 </p>
<p>單擊“完成”後,您將看到三個(gè)選項(xiàng):</p>
<ol>
<li>“獲取代碼”,這將指導(dǎo)您完成必須複製的內(nèi)容以及放置位置,以便搜索顯示在您的網(wǎng)站上</li>
<li>“公共URL”將向您顯示已設(shè)置搜索的工作預(yù)覽</li>
<li>“控制面板”用於自定義搜索</li>
</ol>
<p>轉(zhuǎn)到“控制面板”,單擊“搜索引擎ID”,並記下此值以備後用。 </p>
<p><strong>HTML設(shè)置</strong></p>
<p>為了嘗試一下,我們將創(chuàng)建一個(gè)基本的index.html,其中包含所需的HTML,以及一個(gè)包含渲染和自定義搜索所需函數(shù)的app.js文件。 </p>
<p>繼續(xù)創(chuàng)建一個(gè)包含以下內(nèi)容的基本HTML文件:</p>
<pre class='brush:php;toolbar:false;'><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>GCSE test</title>
</head>
<body>

    <h1>GCSE test</h1>
    <div id="searchForm" class="gcse-search-wrapper"></div>
    <div id="searchResults" class="gcse-results-wrapper"></div>
    <??>

</body>
</html></pre>
<p>我們添加了兩個(gè)<code><div></code>,並使用特殊的類來識(shí)別應(yīng)在其中呈現(xiàn)搜索表單和結(jié)果的元素。 </p>
<p><strong>手動(dòng)渲染函數(shù)</strong></p>
<p>現(xiàn)在進(jìn)入您的app.js文件並添加以下內(nèi)容:</p>
<pre class='brush:php;toolbar:false;'>var config = {
  gcseId: '006267341911716099344:r_iziouh0nw', // 替換為您的搜索引擎ID
  resultsUrl: 'http://localhost:8080', // 替換為您的本地服務(wù)器地址
  searchWrapperClass: 'gcse-search-wrapper',
  resultsWrapperClass: 'gcse-results-wrapper'
};

var renderSearchForms = function () {
  if (document.readyState == 'complete') {
    queryAndRender();
  } else {
    google.setOnLoadCallback(function () {
      queryAndRender();
    }, true);
  }
};

var queryAndRender = function() {
  var gsceSearchForms = document.querySelectorAll('.' + config.searchWrapperClass);
  var gsceResults = document.querySelectorAll('.' + config.resultsWrapperClass);

  if (gsceSearchForms.length > 0) {
    renderSearch(gsceSearchForms[0]);
  }
  if (gsceResults.length > 0) {
    renderResults(gsceResults[0]);
  }
};

var renderSearch = function (div) {
    google.search.cse.element.render(
      {
        div: div.id,
        tag: 'searchbox-only',
        attributes: {
          resultsUrl: config.resultsUrl
        }
      }
    );
    if (div.dataset &&
        div.dataset.stylingFunction &&
        window[div.dataset.stylingFunction] &&
        typeof window[div.dataset.stylingFunction] === 'function') {
      window[div.dataset.stylingFunction](div); // 傳遞div而不是form
    }
};

var renderResults = function(div) {
  google.search.cse.element.render(
    {
      div: div.id,
      tag: 'searchresults-only'
    });
};

window.__gcse = {
  parsetags: 'explicit',
  callback: renderSearchForms
};

(function () {
  var cx = config.gcseId;
  var gcse = document.createElement('script');
  gcse.type = 'text/javascript';
  gcse.async = true;
  gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
    '//cse.google.com/cse.js?cx=' + cx;
  var s = document.getElementsByTagName('script')[0];
  s.parentNode.insertBefore(gcse, s);
})();
</pre>
<p>首先,我們聲明一些用於配置的變量。將您之前記下的ID放入config的<code>gcseId</code>字段中。將本地index.html文件的URL放入<code>resultsUrl</code>字段中。這是用戶提交查詢後搜索將重定向到的位置。此外,GCSE將期望在提供的URL上呈現(xiàn)結(jié)果字段。 </p>
<p><code>renderSearchForms</code>函數(shù)檢查頁面是否已加載,如果已加載,則調(diào)用將負(fù)責(zé)渲染<code>queryAndRender()</code>的函數(shù);或者,如果文檔尚未加載,則設(shè)置回調(diào)函數(shù),以便稍後在文檔加載完成後返回此處。 </p>
<p><code>queryAndRender</code>函數(shù)查詢具有在config中提供的類的元素的DOM。如果找到包裝器div,則分別調(diào)用<code>renderSearch()</code>和<code>renderResults()</code>來呈現(xiàn)搜索和結(jié)果字段。 </p>
<p><code>renderSearch</code>函數(shù)是實(shí)際的魔法發(fā)生的地方。 </p>
<p>我們使用Google搜索API(此處有關(guān)如何使用<code>google.search.cse.element</code>對(duì)象的更多文檔)來創(chuàng)建搜索框,如果存在活動(dòng)查詢(結(jié)果),則創(chuàng)建結(jié)果框。 </p>
<p>render函數(shù)接受比此示例中提供的更多參數(shù),因此如果需要進(jìn)一步自定義,請(qǐng)務(wù)必檢查文檔。 <code>div</code>參數(shù)實(shí)際上接受我們要渲染搜索的div的ID,<code>tag</code>參數(shù)表示我們究竟要渲染什麼(<em>results</em>或<em>search</em>或兩者)。 </p>
<p>此外,<code>renderSearch()</code>查找包裝器元素的數(shù)據(jù)屬性,如果給出了<em>styling-function</em>屬性,它將查找作用域中的函數(shù)名稱並將其應(yīng)用於元素。這是我們可以設(shè)置元素樣式的機(jī)會(huì)。 </p>
<pre class='brush:php;toolbar:false;'>window.__gcse = {
  parsetags: 'explicit',
  callback: renderSearchForms
};</pre>
<p>在此代碼片段中,我們?cè)谌肿饔糜蛑性O(shè)置了一個(gè)回調(diào)變量,以便GCSE在內(nèi)部使用此變量並在加載完成後執(zhí)行回調(diào)函數(shù)。這使得此方法比使用<code>setTimeout()</code>解決方案來編輯輸入字段的佔(zhàn)位符(或任何其他內(nèi)容)好得多。 </p>
<p><strong>測(cè)試運(yùn)行</strong></p><p>到目前為止,我們已經(jīng)包含了渲染搜索框和結(jié)果所需的一切。如果您已安裝node.js,請(qǐng)進(jìn)入放置index.html和app.js文件的文件夾,然後運(yùn)行<code>http-server</code>命令。默認(rèn)情況下,這將在localhost上的端口8080上提供文件夾中的內(nèi)容。 </p>
<p><img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/173975654027633.jpg"  class="lazy" alt="Quick Tip: How to Style Google Custom Search Manually " /></p>
<p><strong>樣式函數(shù)</strong></p>
<p>現(xiàn)在我們準(zhǔn)備向搜索div添加自定義樣式函數(shù)。返回index.html,並在<code>#searchForm</code> div上添加一個(gè)<code>styling-function</code>屬性:</p>
<pre class='brush:php;toolbar:false;'><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>GCSE test</title>
</head>
<body>

    <h1>GCSE test</h1>
    <div id="searchForm" class="gcse-search-wrapper"></div>
    <div id="searchResults" class="gcse-results-wrapper"></div>
    <??>

</body>
</html></pre>
<p>現(xiàn)在進(jìn)入app.js,在文件的頂部,在config變量聲明下,添加一個(gè)新函數(shù):</p>
<pre class='brush:php;toolbar:false;'>var config = {
  gcseId: '006267341911716099344:r_iziouh0nw', // 替換為您的搜索引擎ID
  resultsUrl: 'http://localhost:8080', // 替換為您的本地服務(wù)器地址
  searchWrapperClass: 'gcse-search-wrapper',
  resultsWrapperClass: 'gcse-results-wrapper'
};

var renderSearchForms = function () {
  if (document.readyState == 'complete') {
    queryAndRender();
  } else {
    google.setOnLoadCallback(function () {
      queryAndRender();
    }, true);
  }
};

var queryAndRender = function() {
  var gsceSearchForms = document.querySelectorAll('.' + config.searchWrapperClass);
  var gsceResults = document.querySelectorAll('.' + config.resultsWrapperClass);

  if (gsceSearchForms.length > 0) {
    renderSearch(gsceSearchForms[0]);
  }
  if (gsceResults.length > 0) {
    renderResults(gsceResults[0]);
  }
};

var renderSearch = function (div) {
    google.search.cse.element.render(
      {
        div: div.id,
        tag: 'searchbox-only',
        attributes: {
          resultsUrl: config.resultsUrl
        }
      }
    );
    if (div.dataset &&
        div.dataset.stylingFunction &&
        window[div.dataset.stylingFunction] &&
        typeof window[div.dataset.stylingFunction] === 'function') {
      window[div.dataset.stylingFunction](div); // 傳遞div而不是form
    }
};

var renderResults = function(div) {
  google.search.cse.element.render(
    {
      div: div.id,
      tag: 'searchresults-only'
    });
};

window.__gcse = {
  parsetags: 'explicit',
  callback: renderSearchForms
};

(function () {
  var cx = config.gcseId;
  var gcse = document.createElement('script');
  gcse.type = 'text/javascript';
  gcse.async = true;
  gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
    '//cse.google.com/cse.js?cx=' + cx;
  var s = document.getElementsByTagName('script')[0];
  s.parentNode.insertBefore(gcse, s);
})();
</pre>
<p>現(xiàn)在嘗試再次加載測(cè)試頁面,您將看到正確的佔(zhàn)位符。 </p>
<p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173975654190702.jpg" class="lazy" alt="Quick Tip: How to Style Google Custom Search Manually "></p>
<p><strong>結(jié)論</strong></p>
<p>對(duì)於快速設(shè)置簡單的搜索,尤其是在網(wǎng)站只是靜態(tài)HTML的情況下,Google自定義搜索引擎非常有效。只需少量JavaScript代碼,就可以自定義搜索表單和結(jié)果頁面,為用戶提供更無縫的體驗(yàn)。 </p>
<p>您是否正在使用GCSE,或者您是否找到了更好的解決方案?請(qǐng)?jiān)谙路皆u(píng)論! </p>
<p><strong>關(guān)於設(shè)置Google自定義搜索樣式的常見問題解答(FAQ)</strong></p>
<h3 id="如何自定義Google自定義搜索引擎的外觀">如何自定義Google自定義搜索引擎的外觀? </h3>
<p>自定義Google自定義搜索引擎的外觀涉及使用CSS(層疊樣式表)。 CSS是一種樣式表語言,用於描述以HTML編寫的文檔的外觀和格式。您可以更改搜索引擎的顏色、字體、大小和其他元素。為此,您需要訪問可編程搜索元素控制API,該API允許您自定義搜索元素。然後,您可以將CSS添加到正確的部分以更改搜索引擎的外觀。 </p>
<h3 id="我可以將Google自定義搜索添加到我的網(wǎng)站嗎">我可以將Google自定義搜索添加到我的網(wǎng)站嗎? </h3>
<p>是的,您可以將Google自定義搜索添加到您的網(wǎng)站。 Google提供了一個(gè)自定義搜索JSON API,您可以使用它來發(fā)送GET請(qǐng)求。此API以JSON格式返回搜索結(jié)果。然後,您可以使用這些結(jié)果在您的網(wǎng)站上創(chuàng)建自定義搜索引擎。這允許您的用戶搜索您的網(wǎng)站或您指定的其他網(wǎng)站。 </p>
<h3 id="如何使用Google自定義搜索實(shí)現(xiàn)搜索框">如何使用Google自定義搜索實(shí)現(xiàn)搜索框? </h3>
<p>使用Google自定義搜索實(shí)現(xiàn)搜索框涉及創(chuàng)建搜索引擎ID,您可以在可編程搜索引擎網(wǎng)站上執(zhí)行此操作。獲得ID後,您可以使用自定義搜索元素控制API來創(chuàng)建搜索框。然後,您可以使用CSS自定義此搜索框。 </p>
<h3 id="什麼是可編程搜索元素控制API">什麼是可編程搜索元素控制API? </h3>
<p>可編程搜索元素控制API是由Google提供的一組函數(shù),允許您自定義可編程搜索引擎。這包括創(chuàng)建搜索框、自定義搜索引擎的外觀以及控制搜索結(jié)果。 </p>
<h3 id="如何控制Google自定義搜索中的搜索結(jié)果">如何控制Google自定義搜索中的搜索結(jié)果? </h3>
<p>您可以使用可編程搜索元素控制API控制Google自定義搜索中的搜索結(jié)果。此API提供允許您指定搜索的網(wǎng)站、返回的結(jié)果數(shù)量以及顯示結(jié)果的順序的函數(shù)。 </p>
<h3 id="我可以將Google自定義搜索用於商業(yè)用途嗎">我可以將Google自定義搜索用於商業(yè)用途嗎? </h3>
<p>是的,您可以將Google自定義搜索用於商業(yè)用途。但是,您需要了解服務(wù)條款。例如,您不能使用搜索引擎來顯示成人內(nèi)容或宣傳非法活動(dòng)。 </p>
<h3 id="如何更改Google自定義搜索中搜索結(jié)果的顏色">如何更改Google自定義搜索中搜索結(jié)果的顏色? </h3>
<p>您可以使用CSS更改Google自定義搜索中搜索結(jié)果的顏色。您需要訪問可編程搜索元素控制API並將CSS添加到正確的部分。您可以更改文本、背景和其他搜索結(jié)果元素的顏色。 </p>
<h3 id="我可以在移動(dòng)設(shè)備上使用Google自定義搜索嗎">我可以在移動(dòng)設(shè)備上使用Google自定義搜索嗎? </h3>
<p>是的,您可以在移動(dòng)設(shè)備上使用Google自定義搜索??删幊趟阉饕嬖O(shè)計(jì)為響應(yīng)式,這意味著它將調(diào)整以適應(yīng)其正在查看的設(shè)備的屏幕尺寸。您還可以使用CSS自定義搜索引擎的外觀,使其更適合移動(dòng)設(shè)備。 </p>
<h3 id="如何在我的Google自定義搜索引擎中添加徽標(biāo)">如何在我的Google自定義搜索引擎中添加徽標(biāo)? </h3>
<p>您可以使用CSS在我的Google自定義搜索引擎中添加徽標(biāo)。您需要訪問可編程搜索元素控制API並將CSS添加到正確的部分。然後,您可以添加一個(gè)圖像URL以顯示為您的徽標(biāo)。 </p>
<h3 id="我可以在沒有編碼知識(shí)的情況下使用Google自定義搜索嗎">我可以在沒有編碼知識(shí)的情況下使用Google自定義搜索嗎? </h3>
<p>雖然可以在沒有編碼知識(shí)的情況下使用Google自定義搜索,但建議您對(duì)HTML和CSS有一定的了解,以便充分自定義搜索引擎。但是,Google提供了詳細(xì)的文檔和教程來幫助您入門。 </p><p>以上是快速提示:如何手動(dòng)設(shè)計(jì)Google自定義搜索的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章!</p>


						</div>
					</div>
					<div   id="377j5v51b"   class="wzconShengming_sp">
						<div   id="377j5v51b"   class="bzsmdiv_sp">本網(wǎng)站聲明</div>
						<div>本文內(nèi)容由網(wǎng)友自願(yuàn)投稿,版權(quán)歸原作者所有。本站不承擔(dān)相應(yīng)的法律責(zé)任。如發(fā)現(xiàn)涉嫌抄襲或侵權(quán)的內(nèi)容,請(qǐng)聯(lián)絡(luò)admin@php.cn</div>
					</div>
				</div>

				<ins class="adsbygoogle"
     style="display:block"
     data-ad-format="autorelaxed"
     data-ad-client="ca-pub-5902227090019525"
     data-ad-slot="2507867629"></ins>



				<div   id="377j5v51b"   class="AI_ToolDetails_main4sR">


				<ins class="adsbygoogle"
        style="display:block"
        data-ad-client="ca-pub-5902227090019525"
        data-ad-slot="3653428331"
        data-ad-format="auto"
        data-full-width-responsive="true"></ins>
    


					<!-- <div   id="377j5v51b"   class="phpgenera_Details_mainR4">
						<div   id="377j5v51b"   class="phpmain1_4R_readrank">
							<div   id="377j5v51b"   class="phpmain1_4R_readrank_top">
								<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
									onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
									src="/static/imghw/hotarticle2.png" alt="" />
								<h2>熱門文章</h2>
							</div>
							<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottom">
															<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms">
									<a href="http://www.miracleart.cn/zh-tw/faq/1796821119.html" title="指南:恆星刀片保存文件位置/保存文件丟失/不保存" class="phpgenera_Details_mainR4_bottom_title">指南:恆星刀片保存文件位置/保存文件丟失/不保存</a>
									<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms_info">
										<span>4 週前</span>
										<span>By DDD</span>
									</div>
								</div>
															<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms">
									<a href="http://www.miracleart.cn/zh-tw/faq/1796827210.html" title="Oguri Cap Build Guide |漂亮的德比志" class="phpgenera_Details_mainR4_bottom_title">Oguri Cap Build Guide |漂亮的德比志</a>
									<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms_info">
										<span>2 週前</span>
										<span>By Jack chen</span>
									</div>
								</div>
															<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms">
									<a href="http://www.miracleart.cn/zh-tw/faq/1796828723.html" title="Agnes Tachyon Build Guide |漂亮的德比志" class="phpgenera_Details_mainR4_bottom_title">Agnes Tachyon Build Guide |漂亮的德比志</a>
									<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms_info">
										<span>1 週前</span>
										<span>By Jack chen</span>
									</div>
								</div>
															<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms">
									<a href="http://www.miracleart.cn/zh-tw/faq/1796821436.html" title="沙丘:覺醒 - 高級(jí)行星學(xué)家Quest演練" class="phpgenera_Details_mainR4_bottom_title">沙丘:覺醒 - 高級(jí)行星學(xué)家Quest演練</a>
									<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms_info">
										<span>3 週前</span>
										<span>By Jack chen</span>
									</div>
								</div>
															<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms">
									<a href="http://www.miracleart.cn/zh-tw/faq/1796821278.html" title="約會(huì)一切:德克和哈珀關(guān)係指南" class="phpgenera_Details_mainR4_bottom_title">約會(huì)一切:德克和哈珀關(guān)係指南</a>
									<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms_info">
										<span>4 週前</span>
										<span>By Jack chen</span>
									</div>
								</div>
														</div>
							<div   id="377j5v51b"   class="phpgenera_Details_mainR3_more">
								<a href="http://www.miracleart.cn/zh-tw/article.html">顯示更多</a>
							</div>
						</div>
					</div> -->


											<div   id="377j5v51b"   class="phpgenera_Details_mainR3">
							<div   id="377j5v51b"   class="phpmain1_4R_readrank">
								<div   id="377j5v51b"   class="phpmain1_4R_readrank_top">
									<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
										onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
										src="/static/imghw/hottools2.png" alt="" />
									<h2>熱AI工具</h2>
								</div>
								<div   id="377j5v51b"   class="phpgenera_Details_mainR3_bottom">
																		<div   id="377j5v51b"   class="phpmain_tab2_mids_top">
											<a href="http://www.miracleart.cn/zh-tw/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_top_img">
												<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													class="lazy"  data-src="https://img.php.cn/upload/ai_manual/001/246/273/173410641626608.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undress AI Tool" />
											</a>
											<div   id="377j5v51b"   class="phpmain_tab2_mids_info">
												<a href="http://www.miracleart.cn/zh-tw/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_title">
													<h3>Undress AI Tool</h3>
												</a>
												<p>免費(fèi)脫衣圖片</p>
											</div>
										</div>
																		<div   id="377j5v51b"   class="phpmain_tab2_mids_top">
											<a href="http://www.miracleart.cn/zh-tw/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_top_img">
												<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													class="lazy"  data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411540686492.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undresser.AI Undress" />
											</a>
											<div   id="377j5v51b"   class="phpmain_tab2_mids_info">
												<a href="http://www.miracleart.cn/zh-tw/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_title">
													<h3>Undresser.AI Undress</h3>
												</a>
												<p>人工智慧驅(qū)動(dòng)的應(yīng)用程序,用於創(chuàng)建逼真的裸體照片</p>
											</div>
										</div>
																		<div   id="377j5v51b"   class="phpmain_tab2_mids_top">
											<a href="http://www.miracleart.cn/zh-tw/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_top_img">
												<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													class="lazy"  data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411552797167.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="AI Clothes Remover" />
											</a>
											<div   id="377j5v51b"   class="phpmain_tab2_mids_info">
												<a href="http://www.miracleart.cn/zh-tw/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_title">
													<h3>AI Clothes Remover</h3>
												</a>
												<p>用於從照片中去除衣服的線上人工智慧工具。</p>
											</div>
										</div>
																		<div   id="377j5v51b"   class="phpmain_tab2_mids_top">
											<a href="http://www.miracleart.cn/zh-tw/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_top_img">
												<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													class="lazy"  data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411529149311.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Clothoff.io" />
											</a>
											<div   id="377j5v51b"   class="phpmain_tab2_mids_info">
												<a href="http://www.miracleart.cn/zh-tw/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_title">
													<h3>Clothoff.io</h3>
												</a>
												<p>AI脫衣器</p>
											</div>
										</div>
																		<div   id="377j5v51b"   class="phpmain_tab2_mids_top">
											<a href="http://www.miracleart.cn/zh-tw/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_top_img">
												<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													class="lazy"  data-src="https://img.php.cn/upload/ai_manual/001/246/273/173414504068133.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Video Face Swap" />
											</a>
											<div   id="377j5v51b"   class="phpmain_tab2_mids_info">
												<a href="http://www.miracleart.cn/zh-tw/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_title">
													<h3>Video Face Swap</h3>
												</a>
												<p>使用我們完全免費(fèi)的人工智慧換臉工具,輕鬆在任何影片中換臉!</p>
											</div>
										</div>
																</div>
								<div   id="377j5v51b"   class="phpgenera_Details_mainR3_more">
									<a href="http://www.miracleart.cn/zh-tw/ai">顯示更多</a>
								</div>
							</div>
						</div>
					


					<div   id="377j5v51b"   class="phpgenera_Details_mainR4">
						<div   id="377j5v51b"   class="phpmain1_4R_readrank">
							<div   id="377j5v51b"   class="phpmain1_4R_readrank_top">
								<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
									onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
									src="/static/imghw/hotarticle2.png" alt="" />
								<h2>熱門文章</h2>
							</div>
							<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottom">
															<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms">
									<a href="http://www.miracleart.cn/zh-tw/faq/1796821119.html" title="指南:恆星刀片保存文件位置/保存文件丟失/不保存" class="phpgenera_Details_mainR4_bottom_title">指南:恆星刀片保存文件位置/保存文件丟失/不保存</a>
									<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms_info">
										<span>4 週前</span>
										<span>By DDD</span>
									</div>
								</div>
															<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms">
									<a href="http://www.miracleart.cn/zh-tw/faq/1796827210.html" title="Oguri Cap Build Guide |漂亮的德比志" class="phpgenera_Details_mainR4_bottom_title">Oguri Cap Build Guide |漂亮的德比志</a>
									<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms_info">
										<span>2 週前</span>
										<span>By Jack chen</span>
									</div>
								</div>
															<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms">
									<a href="http://www.miracleart.cn/zh-tw/faq/1796828723.html" title="Agnes Tachyon Build Guide |漂亮的德比志" class="phpgenera_Details_mainR4_bottom_title">Agnes Tachyon Build Guide |漂亮的德比志</a>
									<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms_info">
										<span>1 週前</span>
										<span>By Jack chen</span>
									</div>
								</div>
															<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms">
									<a href="http://www.miracleart.cn/zh-tw/faq/1796821436.html" title="沙丘:覺醒 - 高級(jí)行星學(xué)家Quest演練" class="phpgenera_Details_mainR4_bottom_title">沙丘:覺醒 - 高級(jí)行星學(xué)家Quest演練</a>
									<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms_info">
										<span>3 週前</span>
										<span>By Jack chen</span>
									</div>
								</div>
															<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms">
									<a href="http://www.miracleart.cn/zh-tw/faq/1796821278.html" title="約會(huì)一切:德克和哈珀關(guān)係指南" class="phpgenera_Details_mainR4_bottom_title">約會(huì)一切:德克和哈珀關(guān)係指南</a>
									<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms_info">
										<span>4 週前</span>
										<span>By Jack chen</span>
									</div>
								</div>
														</div>
							<div   id="377j5v51b"   class="phpgenera_Details_mainR3_more">
								<a href="http://www.miracleart.cn/zh-tw/article.html">顯示更多</a>
							</div>
						</div>
					</div>


											<div   id="377j5v51b"   class="phpgenera_Details_mainR3">
							<div   id="377j5v51b"   class="phpmain1_4R_readrank">
								<div   id="377j5v51b"   class="phpmain1_4R_readrank_top">
									<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
										onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
										src="/static/imghw/hottools2.png" alt="" />
									<h2>熱工具</h2>
								</div>
								<div   id="377j5v51b"   class="phpgenera_Details_mainR3_bottom">
																		<div   id="377j5v51b"   class="phpmain_tab2_mids_top">
											<a href="http://www.miracleart.cn/zh-tw/toolset/development-tools/92" title="記事本++7.3.1" class="phpmain_tab2_mids_top_img">
												<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													class="lazy"  data-src="https://img.php.cn/upload/manual/000/000/001/58ab96f0f39f7357.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="記事本++7.3.1" />
											</a>
											<div   id="377j5v51b"   class="phpmain_tab2_mids_info">
												<a href="http://www.miracleart.cn/zh-tw/toolset/development-tools/92" title="記事本++7.3.1" class="phpmain_tab2_mids_title">
													<h3>記事本++7.3.1</h3>
												</a>
												<p>好用且免費(fèi)的程式碼編輯器</p>
											</div>
										</div>
																			<div   id="377j5v51b"   class="phpmain_tab2_mids_top">
											<a href="http://www.miracleart.cn/zh-tw/toolset/development-tools/93" title="SublimeText3漢化版" class="phpmain_tab2_mids_top_img">
												<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													class="lazy"  data-src="https://img.php.cn/upload/manual/000/000/001/58ab97a3baad9677.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3漢化版" />
											</a>
											<div   id="377j5v51b"   class="phpmain_tab2_mids_info">
												<a href="http://www.miracleart.cn/zh-tw/toolset/development-tools/93" title="SublimeText3漢化版" class="phpmain_tab2_mids_title">
													<h3>SublimeText3漢化版</h3>
												</a>
												<p>中文版,非常好用</p>
											</div>
										</div>
																			<div   id="377j5v51b"   class="phpmain_tab2_mids_top">
											<a href="http://www.miracleart.cn/zh-tw/toolset/development-tools/121" title="禪工作室 13.0.1" class="phpmain_tab2_mids_top_img">
												<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													class="lazy"  data-src="https://img.php.cn/upload/manual/000/000/001/58ab97ecd1ab2670.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="禪工作室 13.0.1" />
											</a>
											<div   id="377j5v51b"   class="phpmain_tab2_mids_info">
												<a href="http://www.miracleart.cn/zh-tw/toolset/development-tools/121" title="禪工作室 13.0.1" class="phpmain_tab2_mids_title">
													<h3>禪工作室 13.0.1</h3>
												</a>
												<p>強(qiáng)大的PHP整合開發(fā)環(huán)境</p>
											</div>
										</div>
																			<div   id="377j5v51b"   class="phpmain_tab2_mids_top">
											<a href="http://www.miracleart.cn/zh-tw/toolset/development-tools/469" title="Dreamweaver CS6" class="phpmain_tab2_mids_top_img">
												<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													class="lazy"  data-src="https://img.php.cn/upload/manual/000/000/001/58d0e0fc74683535.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="Dreamweaver CS6" />
											</a>
											<div   id="377j5v51b"   class="phpmain_tab2_mids_info">
												<a href="http://www.miracleart.cn/zh-tw/toolset/development-tools/469" title="Dreamweaver CS6" class="phpmain_tab2_mids_title">
													<h3>Dreamweaver CS6</h3>
												</a>
												<p>視覺化網(wǎng)頁開發(fā)工具</p>
											</div>
										</div>
																			<div   id="377j5v51b"   class="phpmain_tab2_mids_top">
											<a href="http://www.miracleart.cn/zh-tw/toolset/development-tools/500" title="SublimeText3 Mac版" class="phpmain_tab2_mids_top_img">
												<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													class="lazy"  data-src="https://img.php.cn/upload/manual/000/000/001/58d34035e2757995.png?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3 Mac版" />
											</a>
											<div   id="377j5v51b"   class="phpmain_tab2_mids_info">
												<a href="http://www.miracleart.cn/zh-tw/toolset/development-tools/500" title="SublimeText3 Mac版" class="phpmain_tab2_mids_title">
													<h3>SublimeText3 Mac版</h3>
												</a>
												<p>神級(jí)程式碼編輯軟體(SublimeText3)</p>
											</div>
										</div>
																	</div>
								<div   id="377j5v51b"   class="phpgenera_Details_mainR3_more">
									<a href="http://www.miracleart.cn/zh-tw/ai">顯示更多</a>
								</div>
							</div>
						</div>
										

					
					<div   id="377j5v51b"   class="phpgenera_Details_mainR4">
						<div   id="377j5v51b"   class="phpmain1_4R_readrank">
							<div   id="377j5v51b"   class="phpmain1_4R_readrank_top">
								<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
									onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
									src="/static/imghw/hotarticle2.png" alt="" />
								<h2>熱門話題</h2>
							</div>
							<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottom">
															<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms">
									<a href="http://www.miracleart.cn/zh-tw/faq/gmailyxdlrkzn" title="gmail信箱登陸入口在哪裡" class="phpgenera_Details_mainR4_bottom_title">gmail信箱登陸入口在哪裡</a>
									<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms_info">
										<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms_infos">
											<img src="/static/imghw/eyess.png" alt="" />
											<span>8636</span>
										</div>
										<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms_infos">
											<img src="/static/imghw/tiezi.png" alt="" />
											<span>17</span>
										</div>
									</div>
								</div>
															<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms">
									<a href="http://www.miracleart.cn/zh-tw/faq/java-tutorial" title="Java教學(xué)" class="phpgenera_Details_mainR4_bottom_title">Java教學(xué)</a>
									<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms_info">
										<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms_infos">
											<img src="/static/imghw/eyess.png" alt="" />
											<span>1783</span>
										</div>
										<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms_infos">
											<img src="/static/imghw/tiezi.png" alt="" />
											<span>16</span>
										</div>
									</div>
								</div>
															<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms">
									<a href="http://www.miracleart.cn/zh-tw/faq/cakephp-tutor" title="CakePHP 教程" class="phpgenera_Details_mainR4_bottom_title">CakePHP 教程</a>
									<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms_info">
										<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms_infos">
											<img src="/static/imghw/eyess.png" alt="" />
											<span>1725</span>
										</div>
										<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms_infos">
											<img src="/static/imghw/tiezi.png" alt="" />
											<span>56</span>
										</div>
									</div>
								</div>
															<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms">
									<a href="http://www.miracleart.cn/zh-tw/faq/laravel-tutori" title="Laravel 教程" class="phpgenera_Details_mainR4_bottom_title">Laravel 教程</a>
									<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms_info">
										<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms_infos">
											<img src="/static/imghw/eyess.png" alt="" />
											<span>1577</span>
										</div>
										<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms_infos">
											<img src="/static/imghw/tiezi.png" alt="" />
											<span>28</span>
										</div>
									</div>
								</div>
															<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms">
									<a href="http://www.miracleart.cn/zh-tw/faq/php-tutorial" title="PHP教程" class="phpgenera_Details_mainR4_bottom_title">PHP教程</a>
									<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms_info">
										<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms_infos">
											<img src="/static/imghw/eyess.png" alt="" />
											<span>1441</span>
										</div>
										<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms_infos">
											<img src="/static/imghw/tiezi.png" alt="" />
											<span>31</span>
										</div>
									</div>
								</div>
														</div>
							<div   id="377j5v51b"   class="phpgenera_Details_mainR3_more">
								<a href="http://www.miracleart.cn/zh-tw/faq/zt">顯示更多</a>
							</div>
						</div>
					</div>
				</div>
			</div>
							<div   id="377j5v51b"   class="Article_Details_main2">
					<div   id="377j5v51b"   class="phpgenera_Details_mainL4">
						<div   id="377j5v51b"   class="phpmain1_2_top">
							<a href="javascript:void(0);" class="phpmain1_2_top_title">Related knowledge<img
									src="/static/imghw/index2_title2.png" alt="" /></a>
						</div>
						<div   id="377j5v51b"   class="phpgenera_Details_mainL4_info">

													<div   id="377j5v51b"   class="phphistorical_Version2_mids">
								<a href="http://www.miracleart.cn/zh-tw/faq/1796822063.html" title="Java vs. JavaScript:清除混亂" class="phphistorical_Version2_mids_img">
									<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
										src="/static/imghw/default1.png" class="lazy"  data-src="https://img.php.cn/upload/article/001/253/068/175035046165294.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Java vs. JavaScript:清除混亂" />
								</a>
								<a href="http://www.miracleart.cn/zh-tw/faq/1796822063.html" title="Java vs. JavaScript:清除混亂" class="phphistorical_Version2_mids_title">Java vs. JavaScript:清除混亂</a>
								<span id="377j5v51b"    class="Articlelist_txts_time">Jun 20, 2025 am	 12:27 AM</span>
								<p class="Articlelist_txts_p">Java和JavaScript是不同的編程語言,各自適用於不同的應(yīng)用場(chǎng)景。 Java用於大型企業(yè)和移動(dòng)應(yīng)用開發(fā),而JavaScript主要用於網(wǎng)頁開發(fā)。</p>
							</div>
														<div   id="377j5v51b"   class="phphistorical_Version2_mids">
								<a href="http://www.miracleart.cn/zh-tw/faq/1796821632.html" title="JavaScript評(píng)論:簡短說明" class="phphistorical_Version2_mids_img">
									<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
										src="/static/imghw/default1.png" class="lazy"  data-src="https://img.php.cn/upload/article/001/253/068/175026483186295.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="JavaScript評(píng)論:簡短說明" />
								</a>
								<a href="http://www.miracleart.cn/zh-tw/faq/1796821632.html" title="JavaScript評(píng)論:簡短說明" class="phphistorical_Version2_mids_title">JavaScript評(píng)論:簡短說明</a>
								<span id="377j5v51b"    class="Articlelist_txts_time">Jun 19, 2025 am	 12:40 AM</span>
								<p class="Articlelist_txts_p">JavascriptconcommentsenceenceEncorenceEnterential gransimenting,reading and guidingCodeeXecution.1)單inecommentsareusedforquickexplanations.2)多l(xiāng)inecommentsexplaincomplexlogicorprovideDocumentation.3)</p>
							</div>
														<div   id="377j5v51b"   class="phphistorical_Version2_mids">
								<a href="http://www.miracleart.cn/zh-tw/faq/1796827639.html" title="如何在JS中與日期和時(shí)間合作?" class="phphistorical_Version2_mids_img">
									<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
										src="/static/imghw/default1.png" class="lazy"  data-src="https://img.php.cn/upload/article/001/431/639/175130445135407.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="如何在JS中與日期和時(shí)間合作?" />
								</a>
								<a href="http://www.miracleart.cn/zh-tw/faq/1796827639.html" title="如何在JS中與日期和時(shí)間合作?" class="phphistorical_Version2_mids_title">如何在JS中與日期和時(shí)間合作?</a>
								<span id="377j5v51b"    class="Articlelist_txts_time">Jul 01, 2025 am	 01:27 AM</span>
								<p class="Articlelist_txts_p">JavaScript中的日期和時(shí)間處理需注意以下幾點(diǎn):1.創(chuàng)建Date對(duì)像有多種方式,推薦使用ISO格式字符串以保證兼容性;2.獲取和設(shè)置時(shí)間信息可用get和set方法,注意月份從0開始;3.手動(dòng)格式化日期需拼接字符串,也可使用第三方庫;4.處理時(shí)區(qū)問題建議使用支持時(shí)區(qū)的庫,如Luxon。掌握這些要點(diǎn)能有效避免常見錯(cuò)誤。</p>
							</div>
														<div   id="377j5v51b"   class="phphistorical_Version2_mids">
								<a href="http://www.miracleart.cn/zh-tw/faq/1796822037.html" title="JavaScript與Java:開發(fā)人員的全面比較" class="phphistorical_Version2_mids_img">
									<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
										src="/static/imghw/default1.png" class="lazy"  data-src="https://img.php.cn/upload/article/001/253/068/175035006093854.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="JavaScript與Java:開發(fā)人員的全面比較" />
								</a>
								<a href="http://www.miracleart.cn/zh-tw/faq/1796822037.html" title="JavaScript與Java:開發(fā)人員的全面比較" class="phphistorical_Version2_mids_title">JavaScript與Java:開發(fā)人員的全面比較</a>
								<span id="377j5v51b"    class="Articlelist_txts_time">Jun 20, 2025 am	 12:21 AM</span>
								<p class="Articlelist_txts_p">JavaScriptIspreferredforredforwebdevelverment,而Javaisbetterforlarge-ScalebackendsystystemsandSandAndRoidApps.1)JavascriptexcelcelsincreatingInteractiveWebexperienceswebexperienceswithitswithitsdynamicnnamicnnamicnnamicnnamicnemicnemicnemicnemicnemicnemicnemicnemicnddommanipulation.2)</p>
							</div>
														<div   id="377j5v51b"   class="phphistorical_Version2_mids">
								<a href="http://www.miracleart.cn/zh-tw/faq/1796828200.html" title="為什麼要將標(biāo)籤放在的底部?" class="phphistorical_Version2_mids_img">
									<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
										src="/static/imghw/default1.png" class="lazy"  data-src="https://img.php.cn/upload/article/001/253/068/175139053194540.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="為什麼要將標(biāo)籤放在的底部?" />
								</a>
								<a href="http://www.miracleart.cn/zh-tw/faq/1796828200.html" title="為什麼要將標(biāo)籤放在的底部?" class="phphistorical_Version2_mids_title">為什麼要將標(biāo)籤放在的底部?</a>
								<span id="377j5v51b"    class="Articlelist_txts_time">Jul 02, 2025 am	 01:22 AM</span>
								<p class="Articlelist_txts_p">PlacingtagsatthebottomofablogpostorwebpageservespracticalpurposesforSEO,userexperience,anddesign.1.IthelpswithSEObyallowingsearchenginestoaccesskeyword-relevanttagswithoutclutteringthemaincontent.2.Itimprovesuserexperiencebykeepingthefocusonthearticl</p>
							</div>
														<div   id="377j5v51b"   class="phphistorical_Version2_mids">
								<a href="http://www.miracleart.cn/zh-tw/faq/1796822137.html" title="JavaScript:探索用於高效編碼的數(shù)據(jù)類型" class="phphistorical_Version2_mids_img">
									<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
										src="/static/imghw/default1.png" class="lazy"  data-src="https://img.php.cn/upload/article/001/253/068/175035157160537.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="JavaScript:探索用於高效編碼的數(shù)據(jù)類型" />
								</a>
								<a href="http://www.miracleart.cn/zh-tw/faq/1796822137.html" title="JavaScript:探索用於高效編碼的數(shù)據(jù)類型" class="phphistorical_Version2_mids_title">JavaScript:探索用於高效編碼的數(shù)據(jù)類型</a>
								<span id="377j5v51b"    class="Articlelist_txts_time">Jun 20, 2025 am	 12:46 AM</span>
								<p class="Articlelist_txts_p">javascripthassevenfundaMentalDatatypes:數(shù)字,弦,布爾值,未定義,null,object和symbol.1)numberSeadUble-eaduble-ecisionFormat,forwidevaluerangesbutbecautious.2)</p>
							</div>
														<div   id="377j5v51b"   class="phphistorical_Version2_mids">
								<a href="http://www.miracleart.cn/zh-tw/faq/1796828191.html" title="什麼是在DOM中冒泡和捕獲的事件?" class="phphistorical_Version2_mids_img">
									<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
										src="/static/imghw/default1.png" class="lazy"  data-src="https://img.php.cn/upload/article/001/253/068/175139034116786.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="什麼是在DOM中冒泡和捕獲的事件?" />
								</a>
								<a href="http://www.miracleart.cn/zh-tw/faq/1796828191.html" title="什麼是在DOM中冒泡和捕獲的事件?" class="phphistorical_Version2_mids_title">什麼是在DOM中冒泡和捕獲的事件?</a>
								<span id="377j5v51b"    class="Articlelist_txts_time">Jul 02, 2025 am	 01:19 AM</span>
								<p class="Articlelist_txts_p">事件捕獲和冒泡是DOM中事件傳播的兩個(gè)階段,捕獲是從頂層向下到目標(biāo)元素,冒泡是從目標(biāo)元素向上傳播到頂層。 1.事件捕獲通過addEventListener的useCapture參數(shù)設(shè)為true實(shí)現(xiàn);2.事件冒泡是默認(rèn)行為,useCapture設(shè)為false或省略;3.可使用event.stopPropagation()阻止事件傳播;4.冒泡支持事件委託,提高動(dòng)態(tài)內(nèi)容處理效率;5.捕獲可用於提前攔截事件,如日誌記錄或錯(cuò)誤處理。了解這兩個(gè)階段有助於精確控制JavaScript響應(yīng)用戶操作的時(shí)機(jī)和方式。</p>
							</div>
														<div   id="377j5v51b"   class="phphistorical_Version2_mids">
								<a href="http://www.miracleart.cn/zh-tw/faq/1796820615.html" title="Java和JavaScript有什麼區(qū)別?" class="phphistorical_Version2_mids_img">
									<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
										src="/static/imghw/default1.png" class="lazy"  data-src="https://img.php.cn/upload/article/001/253/068/175012302052703.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Java和JavaScript有什麼區(qū)別?" />
								</a>
								<a href="http://www.miracleart.cn/zh-tw/faq/1796820615.html" title="Java和JavaScript有什麼區(qū)別?" class="phphistorical_Version2_mids_title">Java和JavaScript有什麼區(qū)別?</a>
								<span id="377j5v51b"    class="Articlelist_txts_time">Jun 17, 2025 am	 09:17 AM</span>
								<p class="Articlelist_txts_p">Java和JavaScript是不同的編程語言。 1.Java是靜態(tài)類型、編譯型語言,適用於企業(yè)應(yīng)用和大型系統(tǒng)。 2.JavaScript是動(dòng)態(tài)類型、解釋型語言,主要用於網(wǎng)頁交互和前端開發(fā)。</p>
							</div>
													</div>

													<a href="http://www.miracleart.cn/zh-tw/web-designer.html" class="phpgenera_Details_mainL4_botton">
								<span>See all articles</span>
								<img src="/static/imghw/down_right.png" alt="" />
							</a>
											</div>
				</div>
					</div>
	</main>
	<footer>
    <div   id="377j5v51b"   class="footer">
        <div   id="377j5v51b"   class="footertop">
            <img src="/static/imghw/logo.png" alt="">
            <p>公益線上PHP培訓(xùn),幫助PHP學(xué)習(xí)者快速成長!</p>
        </div>
        <div   id="377j5v51b"   class="footermid">
            <a href="http://www.miracleart.cn/zh-tw/about/us.html">關(guān)於我們</a>
            <a href="http://www.miracleart.cn/zh-tw/about/disclaimer.html">免責(zé)聲明</a>
            <a href="http://www.miracleart.cn/zh-tw/update/article_0_1.html">Sitemap</a>
        </div>
        <div   id="377j5v51b"   class="footerbottom">
            <p>
                ? php.cn All rights reserved
            </p>
        </div>
    </div>
</footer>

<input type="hidden" id="verifycode" value="/captcha.html">




		<link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css?2' type='text/css' media='all' />
	
	
	
	
	

	
	






<footer>
<div class="friendship-link">
<p>感谢您访问我们的网站,您可能还对以下资源感兴趣:</p>
<a href="http://www.miracleart.cn/" title="国产av日韩一区二区三区精品">国产av日韩一区二区三区精品</a>

<div class="friend-links">


</div>
</div>

</footer>


<script>
(function(){
    var bp = document.createElement('script');
    var curProtocol = window.location.protocol.split(':')[0];
    if (curProtocol === 'https') {
        bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
    }
    else {
        bp.src = 'http://push.zhanzhang.baidu.com/push.js';
    }
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(bp, s);
})();
</script>
</body><div id="ploc4" class="pl_css_ganrao" style="display: none;"><acronym id="ploc4"></acronym><big id="ploc4"><samp id="ploc4"><em id="ploc4"></em></samp></big><thead id="ploc4"><mark id="ploc4"><ins id="ploc4"></ins></mark></thead><del id="ploc4"></del><optgroup id="ploc4"></optgroup><ruby id="ploc4"><li id="ploc4"></li></ruby><tr id="ploc4"><menuitem id="ploc4"><acronym id="ploc4"><del id="ploc4"></del></acronym></menuitem></tr><big id="ploc4"><form id="ploc4"></form></big><big id="ploc4"></big><style id="ploc4"></style><strong id="ploc4"><i id="ploc4"><legend id="ploc4"></legend></i></strong><pre id="ploc4"></pre><ruby id="ploc4"></ruby><meter id="ploc4"></meter><video id="ploc4"></video><samp id="ploc4"></samp><tr id="ploc4"><xmp id="ploc4"><mark id="ploc4"><font id="ploc4"></font></mark></xmp></tr><samp id="ploc4"></samp><i id="ploc4"></i><tbody id="ploc4"></tbody><center id="ploc4"><dd id="ploc4"><font id="ploc4"><ul id="ploc4"></ul></font></dd></center><listing id="ploc4"></listing><wbr id="ploc4"><ol id="ploc4"><form id="ploc4"></form></ol></wbr><fieldset id="ploc4"><i id="ploc4"><s id="ploc4"></s></i></fieldset><sub id="ploc4"><center id="ploc4"><meter id="ploc4"></meter></center></sub><button id="ploc4"><option id="ploc4"></option></button><acronym id="ploc4"></acronym><ul id="ploc4"><u id="ploc4"><table id="ploc4"><optgroup id="ploc4"></optgroup></table></u></ul><noframes id="ploc4"><li id="ploc4"></li></noframes><blockquote id="ploc4"></blockquote><noframes id="ploc4"><dfn id="ploc4"></dfn></noframes><label id="ploc4"><pre id="ploc4"></pre></label><fieldset id="ploc4"><dl id="ploc4"></dl></fieldset><style id="ploc4"><strong id="ploc4"><acronym id="ploc4"></acronym></strong></style><th id="ploc4"><p id="ploc4"></p></th><font id="ploc4"></font><bdo id="ploc4"></bdo><form id="ploc4"><optgroup id="ploc4"></optgroup></form><abbr id="ploc4"><form id="ploc4"><optgroup id="ploc4"></optgroup></form></abbr><big id="ploc4"></big><small id="ploc4"><ruby id="ploc4"><abbr id="ploc4"></abbr></ruby></small><listing id="ploc4"><strong id="ploc4"><label id="ploc4"><input id="ploc4"></input></label></strong></listing><var id="ploc4"></var><form id="ploc4"></form><pre id="ploc4"></pre><sup id="ploc4"></sup><dl id="ploc4"></dl><mark id="ploc4"><kbd id="ploc4"><tr id="ploc4"><u id="ploc4"></u></tr></kbd></mark><blockquote id="ploc4"><samp id="ploc4"><b id="ploc4"><small id="ploc4"></small></b></samp></blockquote><object id="ploc4"></object><thead id="ploc4"><td id="ploc4"></td></thead><dl id="ploc4"><thead id="ploc4"></thead></dl><div id="ploc4"><blockquote id="ploc4"></blockquote></div><progress id="ploc4"><blockquote id="ploc4"></blockquote></progress><s id="ploc4"><strong id="ploc4"><dl id="ploc4"></dl></strong></s><rp id="ploc4"><abbr id="ploc4"><dfn id="ploc4"><abbr id="ploc4"></abbr></dfn></abbr></rp><pre id="ploc4"></pre><mark id="ploc4"><video id="ploc4"><dfn id="ploc4"><u id="ploc4"></u></dfn></video></mark><center id="ploc4"><em id="ploc4"><noframes id="ploc4"><li id="ploc4"></li></noframes></em></center><mark id="ploc4"><kbd id="ploc4"><pre id="ploc4"></pre></kbd></mark><dfn id="ploc4"></dfn><dl id="ploc4"><legend id="ploc4"></legend></dl><fieldset id="ploc4"></fieldset><var id="ploc4"></var><var id="ploc4"><strong id="ploc4"><pre id="ploc4"><style id="ploc4"></style></pre></strong></var><abbr id="ploc4"></abbr><font id="ploc4"><pre id="ploc4"><track id="ploc4"><th id="ploc4"></th></track></pre></font><fieldset id="ploc4"></fieldset><rp id="ploc4"><abbr id="ploc4"><li id="ploc4"><label id="ploc4"></label></li></abbr></rp><tfoot id="ploc4"></tfoot><acronym id="ploc4"><pre id="ploc4"><dfn id="ploc4"><pre id="ploc4"></pre></dfn></pre></acronym><em id="ploc4"></em><pre id="ploc4"></pre><address id="ploc4"><meter id="ploc4"><center id="ploc4"></center></meter></address><wbr id="ploc4"><strike id="ploc4"><form id="ploc4"></form></strike></wbr><samp id="ploc4"></samp><pre id="ploc4"><div id="ploc4"><big id="ploc4"></big></div></pre><b id="ploc4"><em id="ploc4"><video id="ploc4"></video></em></b><strong id="ploc4"><code id="ploc4"><legend id="ploc4"></legend></code></strong><strong id="ploc4"><pre id="ploc4"><nav id="ploc4"></nav></pre></strong><label id="ploc4"></label><nobr id="ploc4"><optgroup id="ploc4"><noframes id="ploc4"></noframes></optgroup></nobr><ruby id="ploc4"><rp id="ploc4"></rp></ruby><s id="ploc4"></s><progress id="ploc4"></progress><li id="ploc4"></li><wbr id="ploc4"></wbr><pre id="ploc4"></pre><table id="ploc4"><optgroup id="ploc4"></optgroup></table><var id="ploc4"><object id="ploc4"><cite id="ploc4"><tfoot id="ploc4"></tfoot></cite></object></var><menu id="ploc4"><legend id="ploc4"><wbr id="ploc4"><ol id="ploc4"></ol></wbr></legend></menu><i id="ploc4"><s id="ploc4"><rt id="ploc4"><span id="ploc4"></span></rt></s></i><optgroup id="ploc4"><nav id="ploc4"><sup id="ploc4"></sup></nav></optgroup><strong id="ploc4"></strong><optgroup id="ploc4"><nav id="ploc4"></nav></optgroup><optgroup id="ploc4"><nav id="ploc4"></nav></optgroup><em id="ploc4"><button id="ploc4"></button></em><progress id="ploc4"></progress><dl id="ploc4"></dl><var id="ploc4"></var><small id="ploc4"><video id="ploc4"></video></small><small id="ploc4"></small><tbody id="ploc4"></tbody><center id="ploc4"><acronym id="ploc4"></acronym></center><li id="ploc4"></li><acronym id="ploc4"><fieldset id="ploc4"></fieldset></acronym><style id="ploc4"><rt id="ploc4"><source id="ploc4"></source></rt></style><abbr id="ploc4"><bdo id="ploc4"><menu id="ploc4"><input id="ploc4"></input></menu></bdo></abbr><label id="ploc4"><input id="ploc4"><object id="ploc4"><cite id="ploc4"></cite></object></input></label><video id="ploc4"></video><thead id="ploc4"></thead><tr id="ploc4"></tr><i id="ploc4"><source id="ploc4"></source></i><fieldset id="ploc4"><dl id="ploc4"></dl></fieldset><noframes id="ploc4"><dfn id="ploc4"><code id="ploc4"></code></dfn></noframes><abbr id="ploc4"><var id="ploc4"><tbody id="ploc4"><pre id="ploc4"></pre></tbody></var></abbr><div id="ploc4"><big id="ploc4"><form id="ploc4"><pre id="ploc4"></pre></form></big></div><object id="ploc4"></object><s id="ploc4"></s><listing id="ploc4"></listing><div id="ploc4"></div><dd id="ploc4"><xmp id="ploc4"><ul id="ploc4"></ul></xmp></dd><pre id="ploc4"><object id="ploc4"></object></pre><del id="ploc4"></del><tr id="ploc4"></tr><p id="ploc4"></p><pre id="ploc4"><sup id="ploc4"><samp id="ploc4"></samp></sup></pre><kbd id="ploc4"></kbd><nav id="ploc4"><strong id="ploc4"></strong></nav><em id="ploc4"></em><pre id="ploc4"></pre><strong id="ploc4"><label id="ploc4"></label></strong><code id="ploc4"><strong id="ploc4"></strong></code><strike id="ploc4"></strike><nav id="ploc4"><menu id="ploc4"><ol id="ploc4"><dl id="ploc4"></dl></ol></menu></nav><label id="ploc4"><input id="ploc4"><object id="ploc4"><cite id="ploc4"></cite></object></input></label><table id="ploc4"></table><center id="ploc4"><delect id="ploc4"></delect></center><samp id="ploc4"></samp><strong id="ploc4"><dfn id="ploc4"><var id="ploc4"></var></dfn></strong><dl id="ploc4"><legend id="ploc4"><div id="ploc4"><dd id="ploc4"></dd></div></legend></dl><source id="ploc4"></source><tr id="ploc4"></tr><table id="ploc4"></table><center id="ploc4"></center><ol id="ploc4"></ol><option id="ploc4"></option></div>

</html>