---
title: "ウェブページに累計稼働時間を表示するJavaScriptコード - 憂いを忘れる一枚"
description: 当サイトを開設してから、およそ20日が経ちました。まだそれほど長い時間ではなく、始まったばかりではありますが、そこでサイトの稼働時間を記録するオンラインタイマーを書いてみようと思いました。前置きはこれくらいにして、さっそく始めましょう。
canonical_url: "https://www.ikxin.com/ja/article/javascript-uptime-timer"
last_updated: "2026-09-16T09:59:27.259Z"
locale: ja
meta:
  "og:description": 当サイトを開設してから、およそ20日が経ちました。まだそれほど長い時間ではなく、始まったばかりではありますが、そこでサイトの稼働時間を記録するオンラインタイマーを書いてみようと思いました。前置きはこれくらいにして、さっそく始めましょう。
  "og:image": "https://www.ikxin.com/_og/d/h_630%2Ca_~44Km44Kn44OW44Oa44O844K444Gr57Sv6KiI56i85YON5pmC6ZaT44KS6KGo56S644GZ44KLSmF2YVNjcmlwdOOCs-ODvOODiSAtIOaGguOBhOOCkuW~mOOCjOOCi-S4gOaemg%2Cc_Article%2Ctitle_~44Km44Kn44OW44Oa44O844K444Gr57Sv6KiI56i85YON5pmC6ZaT44KS6KGo56S644GZ44KLSmF2YVNjcmlwdOOCs-ODvOODiQ%2Cdescription_~5b2T44K144Kk44OI44KS6ZaL6Kit44GX44Gm44GL44KJ44CB44GK44KI44GdMjDml6XjgYzntYzjgaHjgb7jgZfjgZ~jgILjgb7jgaDjgZ3jgozjgbvjganplbfjgYTmmYLplpPjgafjga~jgarjgY~jgIHlp4vjgb7jgaPjgZ~jgbDjgYvjgorjgafjga~jgYLjgorjgb7jgZnjgYzjgIHjgZ3jgZPjgafjgrXjgqTjg4jjga7nqLzlg43mmYLplpPjgpLoqJjpjLLjgZnjgovjgqrjg7Pjg6njgqTjg7Pjgr~jgqTjg57jg7zjgpLmm7jjgYTjgabjgb~jgojjgYbjgajmgJ3jgYTjgb7jgZfjgZ~jgILliY3nva7jgY3jga~jgZPjgozjgY~jgonjgYTjgavjgZfjgabjgIHjgZXjgaPjgZ3jgY~lp4vjgoHjgb7jgZfjgofjgYbjgII%2CsiteName_~5oaC44GE44KS5b-Y44KM44KL5LiA5p6a%2CsiteHost_www.ikxin.com%2Cp_Ii9qYS9hcnRpY2xlL2phdmFzY3JpcHQtdXB0aW1lLXRpbWVyIg%2Cs_aMNio05G-ViIKLlJ.png"
  "og:image:alt": "ウェブページに累計稼働時間を表示するJavaScriptコード - 憂いを忘れる一枚"
  "og:image:height": "630"
  "og:image:type": image/png
  "og:image:width": "1200"
  "og:title": ウェブページに累計稼働時間を表示するJavaScriptコード
  "twitter:image": "https://www.ikxin.com/_og/d/h_630%2Ca_~44Km44Kn44OW44Oa44O844K444Gr57Sv6KiI56i85YON5pmC6ZaT44KS6KGo56S644GZ44KLSmF2YVNjcmlwdOOCs-ODvOODiSAtIOaGguOBhOOCkuW~mOOCjOOCi-S4gOaemg%2Cc_Article%2Ctitle_~44Km44Kn44OW44Oa44O844K444Gr57Sv6KiI56i85YON5pmC6ZaT44KS6KGo56S644GZ44KLSmF2YVNjcmlwdOOCs-ODvOODiQ%2Cdescription_~5b2T44K144Kk44OI44KS6ZaL6Kit44GX44Gm44GL44KJ44CB44GK44KI44GdMjDml6XjgYzntYzjgaHjgb7jgZfjgZ~jgILjgb7jgaDjgZ3jgozjgbvjganplbfjgYTmmYLplpPjgafjga~jgarjgY~jgIHlp4vjgb7jgaPjgZ~jgbDjgYvjgorjgafjga~jgYLjgorjgb7jgZnjgYzjgIHjgZ3jgZPjgafjgrXjgqTjg4jjga7nqLzlg43mmYLplpPjgpLoqJjpjLLjgZnjgovjgqrjg7Pjg6njgqTjg7Pjgr~jgqTjg57jg7zjgpLmm7jjgYTjgabjgb~jgojjgYbjgajmgJ3jgYTjgb7jgZfjgZ~jgILliY3nva7jgY3jga~jgZPjgozjgY~jgonjgYTjgavjgZfjgabjgIHjgZXjgaPjgZ3jgY~lp4vjgoHjgb7jgZfjgofjgYbjgII%2CsiteName_~5oaC44GE44KS5b-Y44KM44KL5LiA5p6a%2CsiteHost_www.ikxin.com%2Cp_Ii9qYS9hcnRpY2xlL2phdmFzY3JpcHQtdXB0aW1lLXRpbWVyIg%2Cs_aMNio05G-ViIKLlJ.png"
  "twitter:image:alt": "ウェブページに累計稼働時間を表示するJavaScriptコード - 憂いを忘れる一枚"
---

> Index of every page on this site: [llms.txt](https://www.ikxin.com/llms.txt)

# **ウェブページに累計稼働時間を表示するJavaScriptコード**

2017.06.07 7,290  0

当サイトを開設してから、およそ20日が経ちました。まだそれほど長い時間ではなく、始まったばかりではありますが、そこでサイトの稼働時間を記録するオンラインタイマーを書いてみようと思いました。前置きはこれくらいにして、さっそく始めましょう。

まず、時間の定義には **JavaScript** を使い、それを **HTML** で出力することを考えました。主に面倒なのは時間の計算です。以下がコードです。

## HTMLコード

当サイトは安定稼働中：`<span id="htmer_time"></span>`

## JavaScriptコード

 JavaScript

```
function secondToDate(second) {
    if (!second) {
        return 0;
    }
    var time = new Array(0, 0, 0, 0, 0);
    if (second >= 365 * 24 * 3600) {
        time[0] = parseInt(second / (365 * 24 * 3600));
        second %= 365 * 24 * 3600;
    }
    if (second >= 24 * 3600) {
        time[1] = parseInt(second / (24 * 3600));
        second %= 24 * 3600;
    }
    if (second >= 3600) {
        time[2] = parseInt(second / 3600);
        second %= 3600;
    }
    if (second >= 60) {
        time[3] = parseInt(second / 60);
        second %= 60;
    }
    if (second > 0) {
        time[4] = second;
    }
    return time;
}

function setTime() {
    var create_time = Math.round(new Date(Date.UTC(2017, 04, 18, 2, 0, 0)).getTime() / 1000);
    var timestamp = Math.round((new Date().getTime() + 8 * 60 * 60 * 1000) / 1000);
    currentTime = secondToDate((timestamp - create_time));
    currentTimeHtml = currentTime[0] + '年 ' + currentTime[1] + '天 ' + currentTime[2] + '时 ' + currentTime[3] + '分 ' + currentTime[4] + '秒 ';
    document.getElementById("htmer_time").innerHTML = currentTimeHtml;
}
setInterval(setTime, 1000);
```

## 使用方法

1. `time.js` ファイルを新規作成し、JavaScriptコードをそのファイルに記述します。
2. その `time.js` ファイルをウェブサイトのルートディレクトリ（またはアクセス可能なディレクトリ。自分で覚えておけば大丈夫です）に置きます。
3. ウェブサイトのヘッダーでこのJavaScriptファイルを読み込みます。
4. 稼働時間を表示したい場所にHTMLコードを記述します。

## **コメント**

(0)

まだコメントはありません

## **コメントを投稿**

```json
{"@context":"https://schema.org","@graph":[{"@id":"https://www.ikxin.com/ja#website","@type":"WebSite","description":"「憂いを忘れる一枚」は、技術探究と日々の暮らしをテーマにした個人サイトです。Web 開発、バックエンド、DevOps の実践を記録し、ソフトウェアツールやデジタル体験、コードの外で得た見聞と思索を共有します。","inLanguage":"ja-JP","name":"憂いを忘れる一枚","url":"https://www.ikxin.com/ja","translationOfWork":{"@id":"https://www.ikxin.com/#website"}},{"@id":"https://www.ikxin.com/ja/article/javascript-uptime-timer#webpage","@type":"WebPage","description":"当サイトを開設してから、およそ20日が経ちました。まだそれほど長い時間ではなく、始まったばかりではありますが、そこでサイトの稼働時間を記録するオンラインタイマーを書いてみようと思いました。前置きはこれくらいにして、さっそく始めましょう。","name":"ウェブページに累計稼働時間を表示するJavaScriptコード","url":"https://www.ikxin.com/ja/article/javascript-uptime-timer","isPartOf":{"@id":"https://www.ikxin.com/ja#website"},"potentialAction":[{"@type":"ReadAction","target":["https://www.ikxin.com/ja/article/javascript-uptime-timer"]}]}]}
```

## Sitemap

See the full [sitemap](https://www.ikxin.com/sitemap.md) for all pages.