{"id":1850,"date":"2023-03-10T10:12:13","date_gmt":"2023-03-10T01:12:13","guid":{"rendered":"https:\/\/www.earce.biz\/?page_id=1850"},"modified":"2023-03-20T23:44:24","modified_gmt":"2023-03-20T14:44:24","slug":"tool-count-down-timer","status":"publish","type":"page","link":"https:\/\/www.earce.biz\/?page_id=1850","title":{"rendered":"[Tool] Count Down Timer"},"content":{"rendered":"\n<style>\n  @import url('https:\/\/fonts.googleapis.com\/css?family=Source+Code+Pro');\n\n  #textIn{\n    font-family: 'Source Code Pro', monospace;\n  }\n\n  .textOut {\n    font-family: 'Source Code Pro', monospace !important;\n    text-align: right;\n    border: none !important;\n    background-color: transparent !important;\n  }\n<\/style>\n\n\n\n<script type=\"text\/javascript\">\nconst convertText = (val, len) => {\n  return ('          ' + val).slice(0 - len);\n};\n\n\nvar targetDateString = \"unset\";\njQuery().ready(function($){\n\nlet setTargetString= location.hash.replace('#', ' ').trim();\nif (setTargetString.trim()!='') {\n  setTarget = new Date(setTargetString);\n  if (isNaN(setTarget.getTime())==false) {\n    targetDateString = setTarget.toLocaleString();\n    let dateOpt = { year : 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', hour12:false, minute:'2-digit', timeZone: 'Asia\/Tokyo' };\n    let dateStr = new Intl.DateTimeFormat('iso', dateOpt).format(setTarget);\n    dateStr = dateStr.replaceAll('\/','-');\n    $(\"#textIn\").val(dateStr);\n  }\n}\n\n\n$(function(){\n\tsessionStorage.clear();\n\tvar timer = setInterval(\n\t\tfunction(){\n\t\t\tvar targetDate = new Date(targetDateString);\n\t\t\tif (isNaN(targetDate.getTime())) {\n\t\t\t\t$(\"#textOut1\").val(\"\");\n\t\t\t\t$(\"#textOut2\").val(\"\");\n\t\t\t\t$(\"#textOut3\").val(\"\");\n\t\t\t\t$(\"#textOut4\").val(\"\");\n\t\t\t\t$(\"#textOut5\").val(\"\");\n\t\t\t} else {\n\t\t\t\tlet betweenTimestamp = targetDate.getTime() - new Date().getTime();\n\t\t\t\tif (betweenTimestamp > 0) {\n\t\t\t\tlet betweenTime = new Date(betweenTimestamp);\n\nlet day = Math.floor(betweenTimestamp \/ (24 * 60 * 60 * 1000));\nlet text1 = day.toLocaleString() + (day>1?' days':' day');\ntext1 += ' ' + convertText(betweenTime.getUTCHours(), 2)   + (betweenTime.getUTCHours()>1?' hours':' hour');\ntext1 += ' ' + convertText(betweenTime.getUTCMinutes(), 2) + (betweenTime.getUTCMinutes()>1?' minites':' minite');\ntext1 += ' ' + convertText(betweenTime.getUTCSeconds(), 2) + (betweenTime.getUTCSeconds()>1?' seconds':' second');\ntext1 += ' ' + convertText(betweenTime.getUTCMilliseconds(), 3) + \" msec\";\n$(\"#textOut1\").val(text1);\n\nlet hour = Math.floor(betweenTimestamp \/ (60 * 60 * 1000));\nlet text2 = hour.toLocaleString() + (hour>1?' hours':' hour');\ntext2 += ' ' + convertText(betweenTime.getUTCMinutes(), 2) + (betweenTime.getUTCMinutes()>1?' minites':' minite');\ntext2 += ' ' + convertText(betweenTime.getUTCSeconds(), 2) + (betweenTime.getUTCSeconds()>1?' seconds':' second');\ntext2 += ' ' + convertText(betweenTime.getUTCMilliseconds(), 3) + \" msec\";\n$(\"#textOut2\").val(text2);\n\nlet minite = Math.floor(betweenTimestamp \/ (60 * 1000));\nlet text3 = minite.toLocaleString() + (minite>1?' minites':' minite');\ntext3 += ' ' + convertText(betweenTime.getUTCSeconds(), 2) + (betweenTime.getUTCSeconds()>1?' seconds':' second');\ntext3 += ' ' + convertText(betweenTime.getUTCMilliseconds(), 3) + \" msec\";\n$(\"#textOut3\").val(text3);\n\nlet second = Math.floor(betweenTimestamp \/ (1000));\nlet text4 = second.toLocaleString() + (second>1?' seconds':' second');\ntext4 += ' ' + convertText(betweenTime.getUTCMilliseconds(), 3) + \" msec\";\n$(\"#textOut4\").val(text4);\n\n$(\"#textOut5\").val(betweenTimestamp.toLocaleString() + \" msec\");\n\t\t\t\t} else {\n$(\"#textOut1\").val(\"being out of time.\");\n$(\"#textOut2\").val(\"being out of time.\");\n$(\"#textOut3\").val(\"being out of time.\");\n$(\"#textOut4\").val(\"being out of time.\");\n$(\"#textOut5\").val(\"being out of time.\");\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\t,55\n\t);\n\n\t\n\t$(\"#textIn\").change( function(e){\n\t\ttargetDateString = $(\"#textIn\").val();\n\t\t$(\"#shortcut_link\").empty();\n\t\tlet link_addr = '#' + $(\"#textIn\").val();\n\t\t$(\"#shortcut_link\").append(\"&nbsp;<a href='\/pub\/toolkit\/CountDownTimer.html\" + link_addr + \"'>Mini Display (24x7)<\/a>\");\n\t\t$(\"#shortcut_link\").append(\"&nbsp;<a href='\/pub\/toolkit\/CountDownTimer8x5.html\" + link_addr + \"'>Mini Display (8x5)<\/a>\");\n\t\t$(\"#shortcut_link\").append(\"&nbsp;<a href='\" + link_addr + \"'>Short Cut<\/a>\");\n\t});\n});\n\n});\n<\/script>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\"><strong>Target DateTime<\/strong><\/p>\n\n\n\n<input type=\"datetime-local\" id=\"textIn\" placeholder=\"\">\n\n\n\n<div id=\"shortcut_link\" style=\"text-align:right;\"><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\"><strong>Result<\/strong><\/p>\n\n\n\n<input type=\"text\" id=\"textOut1\" class=\"textOut\" readonly=\"readonly\">\n\n\n\n<input type=\"text\" id=\"textOut2\" class=\"textOut\" readonly=\"readonly\">\n\n\n\n<input type=\"text\" id=\"textOut3\" class=\"textOut\" readonly=\"readonly\">\n\n\n\n<input type=\"text\" id=\"textOut4\" class=\"textOut\" readonly=\"readonly\">\n\n\n\n<input type=\"text\" id=\"textOut5\" class=\"textOut\" readonly=\"readonly\">\n","protected":false},"excerpt":{"rendered":"<p>Target DateTime Result<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":35,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1850","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.earce.biz\/index.php?rest_route=\/wp\/v2\/pages\/1850","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.earce.biz\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.earce.biz\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.earce.biz\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.earce.biz\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1850"}],"version-history":[{"count":159,"href":"https:\/\/www.earce.biz\/index.php?rest_route=\/wp\/v2\/pages\/1850\/revisions"}],"predecessor-version":[{"id":2016,"href":"https:\/\/www.earce.biz\/index.php?rest_route=\/wp\/v2\/pages\/1850\/revisions\/2016"}],"up":[{"embeddable":true,"href":"https:\/\/www.earce.biz\/index.php?rest_route=\/wp\/v2\/pages\/35"}],"wp:attachment":[{"href":"https:\/\/www.earce.biz\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1850"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}