コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > 純粋な JavaScript を使用したシステム時間のリアルタイム フィードバック

純粋な JavaScript を使用したシステム時間のリアルタイム フィードバック

小云云
リリース： 2017-12-09 14:18:01
オリジナル
1605 人が閲覧しました

JavaScript は非常に便利な言語です。この記事では、純粋な JavaScript でリアルタイム フィードバック システム時間を実現するための関連情報を主に紹介します。

JavaScript を使用してシステム時間をフィードバックする

知識を活用する

JavaScript HTML DOM

HTML DOM の setInterval() メソッドは、clearInterval() が呼び出されるかウィンドウが閉じるまで関数を呼び出し続けます。 setInterval() によって返される ID 値は、clearInterval() メソッドの引数として使用できます。

構文 setInterval(code,milliseconds) setInterval(code,milliseconds)

code——代码（可以为函数）

milliseconds——在此调用的时间（毫秒）

因此，我们想让反馈的系统时间动起来，只需要让方法没隔1000毫秒调用一次就可以使显示的时间像闹钟一样动起来。

setInterval(function(){myTimer()},1000)

code - コード (関数にすることもできます)

milli Seconds - この呼び出しの時間 (ミリ秒)

したがって、フィードバック システムを作成したいと思います。時間を動かすには、1000 ミリ秒ごとにメソッドを呼び出して、表示される時間を目覚まし時計のように動かすだけです。

setInterval(function(){myTimer()},1000)

new Date()//获得当前时间
.toLocaleTimeString()//根据本地时间把Date对象的时间部分转换为字符串
.getElementById("clock")//返回带有指定 ID 的元素
.innerHTML=c; //将c返回给指定元素
ログイン後にコピー


コード部分

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <p id="clock"></p>
</body>
<script>
  var a = setInterval(function(){myTimer()},1000);
  function myTimer(){
    var b = new Date();
    var c = b.toLocaleTimeString();
    document.getElementById("clock").innerHTML=c;
  }
</script>
</html>
ログイン後にコピー

関連推奨事項:

js、html取得システム現在時刻メソッド

🎜 Jquery🎜、🎜🎜🎜JS で時間を取得するメソッドによって実装されたいくつかの美しいタイムラインチュートリアル🎜🎜

以上が純粋な JavaScript を使用したシステム時間のリアルタイム フィードバックの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
javascript js システム
ソース：php.cn
前の記事：jQueryポップアップウィンドウメソッドのシンプルな実装 次の記事：オブジェクトの長さを計算する JavaScript メソッド
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
JavaScript を使用せずにクリック時に画像ソースを動的に変更する CSS のみのメソッド img:active{} のような CSS のみを使用して、マウスクリック時に画像の src を変更する必要があります
から 2024-04-06 19:25:49
0
1
505
d3.js でズームインすると散布図のポイントの値が維持されない d3.js を使用するのは初めてなので、ご容赦ください。 vue.js ファイルに純粋な JavaScript として実装しました。ズーム機能を使用して散布図を作成しようとしていま...
から 2024-04-06 18:16:26
0
1
403
ベンダー固有の疑似要素上の JavaScript ホバー イベント 次の htmlinput タグがあります。 $("input[type='range']::-webkit-slider-thumb").on('hover',...
から 2024-04-06 15:35:24
0
1
274
Javascript/Jqueryを使用してボタンなしでフォームを送信する JavaScript 関数を呼び出し、JQUERY/PHP を使用してフォームを実行することにより、ボタンのないフォームを送信しようとしています。ページを再読み込みせずに、バックエ...
から 2024-04-06 14:54:03
0
2
421
CollapseDisplay クラスを使用してブートストラップ アコーディオン ヘッダーの外観をカスタマイズする class Collapseshow を使用してパネルのカード タイトルのスタイルを設定したいと考えています。この例では、最初のパネルです。 CSS を使用して .accordio...
から 2024-04-06 12:53:11
0
1
376
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート