H5를 사용하여 카운트다운 데모를 만드는 예제 튜토리얼-H5 튜토리얼-php.cn

H5를 사용하여 카운트다운 데모를 만드는 예제 튜토리얼

零下一度

풀어 주다： 2017-05-05 15:44:54

원래의

3884명이 탐색했습니다.

요즘에는 할 일이 없어서 h5 프론트엔드를 공부하게 되었어요.

h5는 태그 언어입니다. 그 안에 포함된 다양한 태그는 실제로 iOS의 다양한 컨트롤과 동일합니다. 컨트롤이 생성되고 배치됩니다. 더 이상 고민하지 말고 다음 데모를 살펴보세요.

H5를 사용하여 카운트다운 데모를 만드는 예제 튜토리얼

Countdown.gif

간단히 아이디어를 설명하세요. 이것은 카운트다운 로딩 사진입니다 의 작은 데모에서 구현 아이디어는 매우 간단합니다. 즉, 먼저

및

라는 두 개의 컨트롤을 만들고 CSS에 레이아웃을 작성한 다음 javascript 이 두 개의 태그를 받고 여기서 문서에 대한 이야기를 나눠보세요. 문서는 태그 이름, 클래스 이름 등을 기반으로 모든 태그를 얻을 수 있으며 이는 전역 변수가 되는 것과 같습니다. 코드는 아래에 직접 덤프됩니다.

<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는 ( super) 약한 유형의 언어. oc는 훨씬 더 약합니다. var는 유형 파생과 동일하게 모든 유형의 변수를 받을 수 있습니다. 이는 단순히 너무 약하고 자체 위치가 전혀 없습니다. 하하. 우리에게 많은 것을 절약해줍니다.

여기서 전문가의 조언을 환영합니다. 마음에 드시면 팔로우 부탁드립니다.

[관련 추천]

1. 온라인 동영상 튜토리얼

HTML5 정식 버전 매뉴얼

php.cn 원본 html5 동영상 튜토리얼

위 내용은 H5를 사용하여 카운트다운 데모를 만드는 예제 튜토리얼의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!