H5 を使用してカウントダウンデモを作成するチュートリアルの例-H5 チュートリアル-php.cn

H5 を使用してカウントダウンデモを作成するチュートリアルの例

零下一度

リリース： 2017-05-05 15:44:54

オリジナル

3884 人が閲覧しました

最近何もすることがなかったので、h5 フロントエンドを勉強しました。

h5 はラベル言語であり、その中のさまざまなラベルは ios のさまざまなコントロールと同じように作成され、レイアウトされます。早速、デモを紹介します:

H5 を使用してカウントダウンデモを作成するチュートリアルの例

Countdown.gif

アイデアについて簡単に説明しましょう: これは、画像をロードするためにカウントダウンする小さなデモです。実装のアイデアは非常にシンプルです。つまり、最初に 2 つのコントロール

と

を作成し、CSS でレイアウトを記述し、次に javascript でこれら 2 つのタグを取得します。ここでは document について説明します。ドキュメントはタグ名、クラス名などに基づいて任意のタグを取得できます。これはグローバル変数になるのと同じです。
コードは以下に直接ダンプされます:

<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.image{
margin: 10px;
width: 200px;
height: 200px;
display: none;
}
.time{
margin: 10px;
    font-size: 200px;
color: red;
}
</style>
</head>
<body>
![](http://upload-images.jianshu.io/upload_images/2011313-6952b2e445095ac6.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
    <p class="time">10</p>
    <script>
    //根据类名取到对应的标签
    var image = document.getElementsByClassName(&#39;image&#39;)[0];
    var time = document.getElementsByClassName(&#39;time&#39;)[0];

    var timer= setInterval(function(){
    time.innerHTML = time.innerHTML - 1;
    if(time.innerHTML == 0){
        clearInterval(timer);
        time.style.display = &#39;none&#39;
        image.style.display = &#39;inline-block&#39;;
    }
},1000)
    </script>
    </body>
    </html>

ログイン後にコピー

js は (超) 弱い型付け言語だと感じます。 oc や var よりもさらに弱く、型の派生に相当する任意の型の変数を受け取ることができます。swift と比較すると、単純に弱すぎてまったく役に立ちません。笑、冗談ですが、これにより多くのことが節約されます。。

ここでアドバイスをくれる専門家を歓迎します。気に入った人はフォローしてください、ありがとうございます

1. 無料のh5オンラインビデオチュートリアル

2. HTML5フルバージョンマニュアル

3. php.cn オリジナルの HTML5 ビデオチュートリアル

以上がH5 を使用してカウントダウンデモを作成するチュートリアルの例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。