JS を使用して単純なデジタル時計を実装する方法-jsチュートリアル-php.cn

JS を使用して単純なデジタル時計を実装する方法

不言

リリース： 2018-07-11 17:29:50

オリジナル

4313 人が閲覧しました

この記事では、JS を使用して簡単なデジタル時計を実装する方法を主に紹介します。これを必要とする友人に共有します。

デジタル時計は画像で表示されます。現在時刻では、表示される画像のURLが時刻に応じて変化します。

a. 現在時刻 Date() を取得し、現在の時刻情報を 6 桁の文字列に変換します。置換表示 Picture;

HTMLベースを構築し、スタイルを追加します。

<div id="div1">
    <img src=&#39;./数字时钟（1）_files/0.jpg&#39;>
    <img src=&#39;./数字时钟（1）_files/0.jpg&#39;>
    :
    <img src=&#39;./数字时钟（1）_files/0.jpg&#39;>
    <img src=&#39;./数字时钟（1）_files/0.jpg&#39;>
    :
   <img src=&#39;./数字时钟（1）_files/0.jpg&#39;>
   <img src=&#39;./数字时钟（1）_files/0.jpg&#39;>
</div>

ログイン後にコピー

style style

#p1{
    width:50%;
    margin:300px auto;
    background:black;
    }

ログイン後にコピー

画像要素と現在時刻を取得します:

    var op=document.getElementById(&#39;p1&#39;);    
    var aImg=op.getElementsByTagName(&#39;img&#39;);    
    var oDate=new Date();    
    var str=oDate.getHours()+oDate.getMinutes()+oDate.getSeconds();

ログイン後にコピー

ここには 2 つの問題があります

1. oDate.getHours() はすべての数値を返すため、数値の加算ではなく数値の加算として記述されます。文字列の追加は追加します。

2. 取得した値が1桁の場合、文字列の数が6未満となり、当初の設計要件を満たしません。

上記の 2 つの問題を解決するコード解決策:

　　var op=document.getElementById(&#39;p1&#39;);

　　var aImg=op.getElementsByTagName(&#39;img&#39;);

　　var oDate=new Date();

　　function twoDigitsStr()

　　{

　　if(n<10)

　　{return &#39;0&#39;+n;}

　　else　　{return &#39;&#39;+n;}

　　}

　　var str=twoDigitsStr(oDate.getHours())+twoDigitsStr(oDate.getMinutes())+twoDigitsStr(oDate.getSeconds());

ログイン後にコピー

すべてのピクチャの src 値を設定する:

for(var i=0;i<aImg.length;i++)
    {
        aImg[i].src="./数字时钟（1）_files/"+str.charAt(i)+".jpg";
    }

ログイン後にコピー

setInterval() を使用して、現在の時刻とピクチャの src 値を 1 秒ごとに再取得します:

    var op=document.getElementById(&#39;p1&#39;);    var aImg=op.getElementsByTagName(&#39;img&#39;);
    
    setInterval(function tick()
    {        var oDate=new Date();        var str=twoDigitsStr(oDate.getHours())+twoDigitsStr(oDate.getMinutes())+twoDigitsStr(oDate.getSeconds());        for(var i=0;i<aImg.length;i++)
        {
            aImg[i].src="./数字时钟（1）_files/"+str.charAt(i)+".jpg";
        }
    }
    
    ,1000);

ログイン後にコピー

But Still There問題は、Web ページを開くと、表示時間が 00:00:00 になることです。これは、タイマーの特性により、タイマーを開いたときに内部の関数がすぐに実行されないためです。 1秒後に実行します。解決策コード:

var op=document.getElementById(&#39;p1&#39;);
var aImg=op.getElementsByTagName(&#39;img&#39;);
function tick()
{
var oDate=new Date();        
var str=twoDigitsStr(oDate.getHours())+twoDigitsStr(oDate.getMinutes())+twoDigitsStr(oDate.getSeconds());        
for(var i=0;i<aImg.length;i++)
        {
            aImg[i].src="./数字时钟（1）_files/"+str.charAt(i)+".jpg";
        }
    }
        
    setInterval(tick,1000);
    tick();

ログイン後にコピー

質問: コード setInterval(tick,1000); の関数 check には括弧がありません。JS で括弧のある関数と括弧のない関数の違いは何ですか?

完全なデジタル時計制作 JS コードは次のとおりです:

    function twoDigitsStr(n)
    {        if(n<10)
        {return &#39;0&#39;+n;}        else
        {return &#39;&#39;+n;}
    }
window.onload=function()
{    var op=document.getElementById(&#39;p1&#39;);   
var aImg=op.getElementsByTagName(&#39;img&#39;);    
function tick()
    {var oDate=new Date();        
    var str=twoDigitsStr(oDate.getHours())+twoDigitsStr(oDate.getMinutes())+twoDigitsStr(oDate.getSeconds());        for(var i=0;i<aImg.length;i++)
        {
            aImg[i].src="./数字时钟（1）_files/"+str.charAt(i)+".jpg";
        }
    }
        
    setInterval(tick,1000);
    tick(); 
}

ログイン後にコピー

もちろん、優れたクリエイティブな写真がある場合は、上記のデジタル写真を置き換えて、さまざまなまばゆいばかりのデジタル時計効果を生成できます。例:

上記がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。