ホームページ > 記事 > ウェブフロントエンド > H5 を使用してカウントダウン デモを作成するチュートリアルの例
H5 を使用してカウントダウン デモを作成するチュートリアルの例
- 零下一度オリジナル
- 2017-05-05 15:44:543801ブラウズ
最近何もすることがなかったので、h5 フロントエンドを勉強しました。
h5 はラベル言語であり、その中のさまざまなラベルは ios のさまざまなコントロールと同じように作成され、レイアウトされます。早速、デモを紹介します:
Countdown.gif
アイデアについて簡単に説明しましょう: これは、画像をロードするためにカウントダウンする小さなデモです。実装のアイデアは非常にシンプルです。つまり、最初に 2 つのコントロール
と e388a4556c0f65e1904146cc1a846bee を作成し、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>
<p class="time">10</p>
<script>
//根据类名取到对应的标签
var image = document.getElementsByClassName('image')[0];
var time = document.getElementsByClassName('time')[0];
var timer= setInterval(function(){
time.innerHTML = time.innerHTML - 1;
if(time.innerHTML == 0){
clearInterval(timer);
time.style.display = 'none'
image.style.display = 'inline-block';
}
},1000)
</script>
</body>
</html>js は (超) 弱い型付け言語だと感じます。 oc や var よりもさらに弱く、型の派生に相当する任意の型の変数を受け取ることができます。swift と比較すると、単純に弱すぎてまったく役に立ちません。笑、冗談ですが、これにより多くのことが節約されます。 。
ここでアドバイスをくれる専門家を歓迎します。気に入った人はフォローしてください、ありがとうございます
1. 無料のh5オンラインビデオチュートリアル
2. HTML5フルバージョンマニュアル
3. php.cn オリジナルの HTML5 ビデオチュートリアル
以上がH5 を使用してカウントダウン デモを作成するチュートリアルの例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。