{"id":9662,"date":"2024-03-14T09:59:36","date_gmt":"2024-03-14T09:59:36","guid":{"rendered":"https:\/\/www.silicloud.com\/blog\/how-to-implement-displaying-different-ads-at-different-times-of-the-day-in-javascript\/"},"modified":"2024-03-20T16:02:24","modified_gmt":"2024-03-20T16:02:24","slug":"how-to-implement-displaying-different-ads-at-different-times-of-the-day-in-javascript","status":"publish","type":"post","link":"https:\/\/www.silicloud.com\/blog\/how-to-implement-displaying-different-ads-at-different-times-of-the-day-in-javascript\/","title":{"rendered":"How to implement displaying different ads at different times of the day in JavaScript?"},"content":{"rendered":"<p>You can dynamically determine which ads to display by getting the current time. Here is a simple example code:<\/p>\n<pre class=\"post-pre\"><code><span class=\"hljs-comment\">\/\/ \u83b7\u53d6\u5f53\u524d\u65f6\u95f4<\/span>\r\n<span class=\"hljs-keyword\">var<\/span> currentTime = <span class=\"hljs-keyword\">new<\/span> <span class=\"hljs-title class_\">Date<\/span>();\r\n<span class=\"hljs-keyword\">var<\/span> currentHour = currentTime.<span class=\"hljs-title function_\">getHours<\/span>();\r\n\r\n<span class=\"hljs-comment\">\/\/ \u6839\u636e\u65f6\u95f4\u6761\u4ef6\u5c55\u793a\u4e0d\u540c\u7684\u5e7f\u544a<\/span>\r\n<span class=\"hljs-keyword\">if<\/span> (currentHour &lt; <span class=\"hljs-number\">12<\/span>) {\r\n    <span class=\"hljs-comment\">\/\/ \u4e0a\u5348\u5c55\u793a\u5e7f\u544a1<\/span>\r\n    <span class=\"hljs-variable language_\">document<\/span>.<span class=\"hljs-title function_\">getElementById<\/span>(<span class=\"hljs-string\">\"ad\"<\/span>).<span class=\"hljs-property\">innerHTML<\/span> = <span class=\"hljs-string\">\"&lt;img src='ad1.jpg'&gt;\"<\/span>;\r\n} <span class=\"hljs-keyword\">else<\/span> <span class=\"hljs-keyword\">if<\/span> (currentHour &lt; <span class=\"hljs-number\">18<\/span>) {\r\n    <span class=\"hljs-comment\">\/\/ \u4e0b\u5348\u5c55\u793a\u5e7f\u544a2<\/span>\r\n    <span class=\"hljs-variable language_\">document<\/span>.<span class=\"hljs-title function_\">getElementById<\/span>(<span class=\"hljs-string\">\"ad\"<\/span>).<span class=\"hljs-property\">innerHTML<\/span> = <span class=\"hljs-string\">\"&lt;img src='ad2.jpg'&gt;\"<\/span>;\r\n} <span class=\"hljs-keyword\">else<\/span> {\r\n    <span class=\"hljs-comment\">\/\/ \u665a\u4e0a\u5c55\u793a\u5e7f\u544a3<\/span>\r\n    <span class=\"hljs-variable language_\">document<\/span>.<span class=\"hljs-title function_\">getElementById<\/span>(<span class=\"hljs-string\">\"ad\"<\/span>).<span class=\"hljs-property\">innerHTML<\/span> = <span class=\"hljs-string\">\"&lt;img src='ad3.jpg'&gt;\"<\/span>;\r\n}\r\n<\/code><\/pre>\n<p>Add an element to the page with the ID &#8220;ad&#8221; to display different advertisement images. Use the code above to show different ads based on the current time. Visitors to the page will see the corresponding ad image based on the current time.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>You can dynamically determine which ads to display by getting the current time. Here is a simple example code: \/\/ \u83b7\u53d6\u5f53\u524d\u65f6\u95f4 var currentTime = new Date(); var currentHour = currentTime.getHours(); \/\/ \u6839\u636e\u65f6\u95f4\u6761\u4ef6\u5c55\u793a\u4e0d\u540c\u7684\u5e7f\u544a if (currentHour &lt; 12) { \/\/ \u4e0a\u5348\u5c55\u793a\u5e7f\u544a1 document.getElementById(&#8220;ad&#8221;).innerHTML = &#8220;&lt;img src=&#8217;ad1.jpg&#8217;&gt;&#8221;; } else if (currentHour &lt; 18) { \/\/ \u4e0b\u5348\u5c55\u793a\u5e7f\u544a2 document.getElementById(&#8220;ad&#8221;).innerHTML = &#8220;&lt;img [&hellip;]<\/p>\n","protected":false},"author":7,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_import_markdown_pro_load_document_selector":0,"_import_markdown_pro_submit_text_textarea":"","footnotes":""},"categories":[1],"tags":[],"class_list":["post-9662","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v21.5 (Yoast SEO v21.5) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to implement displaying different ads at different times of the day in JavaScript? - Blog - Silicon Cloud<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.silicloud.com\/blog\/how-to-implement-displaying-different-ads-at-different-times-of-the-day-in-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to implement displaying different ads at different times of the day in JavaScript?\" \/>\n<meta property=\"og:description\" content=\"You can dynamically determine which ads to display by getting the current time. Here is a simple example code: \/\/ \u83b7\u53d6\u5f53\u524d\u65f6\u95f4 var currentTime = new Date(); var currentHour = currentTime.getHours(); \/\/ \u6839\u636e\u65f6\u95f4\u6761\u4ef6\u5c55\u793a\u4e0d\u540c\u7684\u5e7f\u544a if (currentHour &lt; 12) { \/\/ \u4e0a\u5348\u5c55\u793a\u5e7f\u544a1 document.getElementById(&quot;ad&quot;).innerHTML = &quot;&lt;img src=&#039;ad1.jpg&#039;&gt;&quot;; } else if (currentHour &lt; 18) { \/\/ \u4e0b\u5348\u5c55\u793a\u5e7f\u544a2 document.getElementById(&quot;ad&quot;).innerHTML = &quot;&lt;img [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.silicloud.com\/blog\/how-to-implement-displaying-different-ads-at-different-times-of-the-day-in-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog - Silicon Cloud\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/SiliCloudGlobal\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-03-14T09:59:36+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-03-20T16:02:24+00:00\" \/>\n<meta name=\"author\" content=\"Sophia Anderson\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@SiliCloudGlobal\" \/>\n<meta name=\"twitter:site\" content=\"@SiliCloudGlobal\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Sophia Anderson\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-implement-displaying-different-ads-at-different-times-of-the-day-in-javascript\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-implement-displaying-different-ads-at-different-times-of-the-day-in-javascript\/\"},\"author\":{\"name\":\"Sophia Anderson\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/19a24313de9c988db3d69226b4a40a30\"},\"headline\":\"How to implement displaying different ads at different times of the day in JavaScript?\",\"datePublished\":\"2024-03-14T09:59:36+00:00\",\"dateModified\":\"2024-03-20T16:02:24+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-implement-displaying-different-ads-at-different-times-of-the-day-in-javascript\/\"},\"wordCount\":76,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\"},\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-implement-displaying-different-ads-at-different-times-of-the-day-in-javascript\/\",\"url\":\"https:\/\/www.silicloud.com\/blog\/how-to-implement-displaying-different-ads-at-different-times-of-the-day-in-javascript\/\",\"name\":\"How to implement displaying different ads at different times of the day in JavaScript? - Blog - Silicon Cloud\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#website\"},\"datePublished\":\"2024-03-14T09:59:36+00:00\",\"dateModified\":\"2024-03-20T16:02:24+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-implement-displaying-different-ads-at-different-times-of-the-day-in-javascript\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.silicloud.com\/blog\/how-to-implement-displaying-different-ads-at-different-times-of-the-day-in-javascript\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-implement-displaying-different-ads-at-different-times-of-the-day-in-javascript\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.silicloud.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to implement displaying different ads at different times of the day in JavaScript?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#website\",\"url\":\"https:\/\/www.silicloud.com\/blog\/\",\"name\":\"Silicon Cloud Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\"},\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\",\"name\":\"Silicon Cloud Blog\",\"url\":\"https:\/\/www.silicloud.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png\",\"contentUrl\":\"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png\",\"width\":1024,\"height\":1024,\"caption\":\"Silicon Cloud Blog\"},\"image\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/SiliCloudGlobal\/\",\"https:\/\/twitter.com\/SiliCloudGlobal\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/19a24313de9c988db3d69226b4a40a30\",\"name\":\"Sophia Anderson\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/c726c09aa40e37115fb5c62d0c3ed62c16ca255d3763e2e3ae83a70ddf8c2175?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/c726c09aa40e37115fb5c62d0c3ed62c16ca255d3763e2e3ae83a70ddf8c2175?s=96&d=mm&r=g\",\"caption\":\"Sophia Anderson\"},\"url\":\"https:\/\/www.silicloud.com\/blog\/author\/sophiaanderson\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to implement displaying different ads at different times of the day in JavaScript? - Blog - Silicon Cloud","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.silicloud.com\/blog\/how-to-implement-displaying-different-ads-at-different-times-of-the-day-in-javascript\/","og_locale":"en_US","og_type":"article","og_title":"How to implement displaying different ads at different times of the day in JavaScript?","og_description":"You can dynamically determine which ads to display by getting the current time. Here is a simple example code: \/\/ \u83b7\u53d6\u5f53\u524d\u65f6\u95f4 var currentTime = new Date(); var currentHour = currentTime.getHours(); \/\/ \u6839\u636e\u65f6\u95f4\u6761\u4ef6\u5c55\u793a\u4e0d\u540c\u7684\u5e7f\u544a if (currentHour &lt; 12) { \/\/ \u4e0a\u5348\u5c55\u793a\u5e7f\u544a1 document.getElementById(\"ad\").innerHTML = \"&lt;img src='ad1.jpg'&gt;\"; } else if (currentHour &lt; 18) { \/\/ \u4e0b\u5348\u5c55\u793a\u5e7f\u544a2 document.getElementById(\"ad\").innerHTML = \"&lt;img [&hellip;]","og_url":"https:\/\/www.silicloud.com\/blog\/how-to-implement-displaying-different-ads-at-different-times-of-the-day-in-javascript\/","og_site_name":"Blog - Silicon Cloud","article_publisher":"https:\/\/www.facebook.com\/SiliCloudGlobal\/","article_published_time":"2024-03-14T09:59:36+00:00","article_modified_time":"2024-03-20T16:02:24+00:00","author":"Sophia Anderson","twitter_card":"summary_large_image","twitter_creator":"@SiliCloudGlobal","twitter_site":"@SiliCloudGlobal","twitter_misc":{"Written by":"Sophia Anderson","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.silicloud.com\/blog\/how-to-implement-displaying-different-ads-at-different-times-of-the-day-in-javascript\/#article","isPartOf":{"@id":"https:\/\/www.silicloud.com\/blog\/how-to-implement-displaying-different-ads-at-different-times-of-the-day-in-javascript\/"},"author":{"name":"Sophia Anderson","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/19a24313de9c988db3d69226b4a40a30"},"headline":"How to implement displaying different ads at different times of the day in JavaScript?","datePublished":"2024-03-14T09:59:36+00:00","dateModified":"2024-03-20T16:02:24+00:00","mainEntityOfPage":{"@id":"https:\/\/www.silicloud.com\/blog\/how-to-implement-displaying-different-ads-at-different-times-of-the-day-in-javascript\/"},"wordCount":76,"commentCount":0,"publisher":{"@id":"https:\/\/www.silicloud.com\/blog\/#organization"},"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.silicloud.com\/blog\/how-to-implement-displaying-different-ads-at-different-times-of-the-day-in-javascript\/","url":"https:\/\/www.silicloud.com\/blog\/how-to-implement-displaying-different-ads-at-different-times-of-the-day-in-javascript\/","name":"How to implement displaying different ads at different times of the day in JavaScript? - Blog - Silicon Cloud","isPartOf":{"@id":"https:\/\/www.silicloud.com\/blog\/#website"},"datePublished":"2024-03-14T09:59:36+00:00","dateModified":"2024-03-20T16:02:24+00:00","breadcrumb":{"@id":"https:\/\/www.silicloud.com\/blog\/how-to-implement-displaying-different-ads-at-different-times-of-the-day-in-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.silicloud.com\/blog\/how-to-implement-displaying-different-ads-at-different-times-of-the-day-in-javascript\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.silicloud.com\/blog\/how-to-implement-displaying-different-ads-at-different-times-of-the-day-in-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.silicloud.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to implement displaying different ads at different times of the day in JavaScript?"}]},{"@type":"WebSite","@id":"https:\/\/www.silicloud.com\/blog\/#website","url":"https:\/\/www.silicloud.com\/blog\/","name":"Silicon Cloud Blog","description":"","publisher":{"@id":"https:\/\/www.silicloud.com\/blog\/#organization"},"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.silicloud.com\/blog\/#organization","name":"Silicon Cloud Blog","url":"https:\/\/www.silicloud.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png","contentUrl":"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png","width":1024,"height":1024,"caption":"Silicon Cloud Blog"},"image":{"@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/SiliCloudGlobal\/","https:\/\/twitter.com\/SiliCloudGlobal"]},{"@type":"Person","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/19a24313de9c988db3d69226b4a40a30","name":"Sophia Anderson","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/c726c09aa40e37115fb5c62d0c3ed62c16ca255d3763e2e3ae83a70ddf8c2175?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c726c09aa40e37115fb5c62d0c3ed62c16ca255d3763e2e3ae83a70ddf8c2175?s=96&d=mm&r=g","caption":"Sophia Anderson"},"url":"https:\/\/www.silicloud.com\/blog\/author\/sophiaanderson\/"}]}},"_links":{"self":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/9662","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/comments?post=9662"}],"version-history":[{"count":1,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/9662\/revisions"}],"predecessor-version":[{"id":42851,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/9662\/revisions\/42851"}],"wp:attachment":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/media?parent=9662"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/categories?post=9662"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/tags?post=9662"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}