목차
요즘에는 할 일이 없어서 h5 프론트엔드를 공부하게 되었어요.
h5는 태그 언어입니다. 그 안에 포함된 다양한 태그는 실제로 iOS의 다양한 컨트롤과 동일합니다. 컨트롤이 생성되고 배치됩니다. 더 이상 고민하지 말고 다음 데모를 살펴보세요.
웹 프론트엔드 H5 튜토리얼 H5를 사용하여 카운트다운 데모를 만드는 예제 튜토리얼

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

May 05, 2017 pm 03:44 PM

요즘에는 할 일이 없어서 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. 온라인 동영상 튜토리얼

2.

HTML5 정식 버전 매뉴얼

3.

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

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

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

Video Face Swap

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

데모는 무슨 뜻인가요? 데모는 무슨 뜻인가요? Feb 12, 2024 pm 09:12 PM

노래를 좋아하는 친구들에게는 데모라는 단어가 더 이상 낯설지 않지만, 한번도 접해보지 못한 많은 유저들은 데모가 무슨 뜻인지 궁금해합니다. 이제 편집자가 가져온 데모의 의미를 살펴보겠습니다. 데모는 무엇을 의미합니까? 답변: 데모 테이프. 1. Demo의 발음은 영어에서는 ['deməʊ], 미국에서는 ['demoʊ]입니다. 2. Demo는 "demonstration"의 약어로, 일반적으로 노래가 공식적으로 녹음되기 전에 듣는 사전 효과를 나타냅니다. 3. Demo는 샘플 테이프 및 샘플 레코드를 지칭하는 명사로 사용됩니다. 동사의 의미는 재판(특히 소프트웨어), 데모 및 시연입니다.

Python의 SVM 예제 Python의 SVM 예제 Jun 11, 2023 pm 08:42 PM

Python의 SVM(Support Vector Machine)은 분류 및 회귀 문제를 해결하는 데 사용할 수 있는 강력한 지도 학습 알고리즘입니다. SVM은 고차원 데이터와 비선형 문제를 처리할 때 탁월한 성능을 발휘하며 데이터 마이닝, 이미지 분류, 텍스트 분류, 생물정보학 및 기타 분야에서 널리 사용됩니다. 이번 글에서는 Python에서 분류를 위해 SVM을 사용하는 예를 소개하겠습니다. scikit-learn 라이브러리의 SVM 모델을 사용하겠습니다.

h5은 무슨 뜻인가요? h5은 무슨 뜻인가요? Aug 02, 2023 pm 01:52 PM

H5는 HTML의 최신 버전인 HTML5를 말하며, H5 기술과 마찬가지로 개발자에게 더 많은 선택권과 창의적인 공간을 제공하는 강력한 마크업 언어입니다. 점차 성숙해지고 대중화되면서 인터넷 세계에서 점점 더 중요한 역할을 담당하게 될 것이라고 믿습니다.

H5, WEB 프론트엔드, 빅 프론트엔드, WEB 풀스택을 어떻게 구별하나요? H5, WEB 프론트엔드, 빅 프론트엔드, WEB 풀스택을 어떻게 구별하나요? Aug 03, 2022 pm 04:00 PM

이 글은 H5, WEB 프론트엔드, 대형 프론트엔드, WEB 풀스택을 빠르게 구별하는 데 도움이 될 것입니다. 도움이 필요한 친구들에게 도움이 되길 바랍니다!

Python 랜덤 라이브러리 데모를 사용하는 방법 Python 랜덤 라이브러리 데모를 사용하는 방법 May 05, 2023 pm 08:13 PM

pythonrandom 라이브러리 데모의 간단한 사용 난수를 생성하거나 시퀀스에서 요소를 무작위로 선택해야 할 때 Python에 내장된 무작위 라이브러리를 사용할 수 있습니다. 다음은 무작위 라이브러리를 사용하는 방법을 보여주는 주석이 달린 예입니다. #Import random library importrandom #0과 1 사이의 무작위 십진수 생성 random_float=random.random()print(random_float)#지정된 범위 내에서 난수 십진수 생성 Random 정수(끝점 포함) random_int=random.randint(1,10)print(random_int)#

Golang의 포인터 변환 모범 사례를 알아보세요. Golang의 포인터 변환 모범 사례를 알아보세요. Feb 24, 2024 pm 03:51 PM

Golang은 다양한 애플리케이션과 서비스를 개발하는 데 사용할 수 있는 강력하고 효율적인 프로그래밍 언어입니다. Golang에서 포인터는 데이터를 보다 유연하고 효율적으로 운영하는 데 도움이 되는 매우 중요한 개념입니다. 포인터 변환은 다양한 유형 간의 포인터 작업 프로세스를 나타냅니다. 이 기사에서는 특정 예제를 사용하여 Golang의 포인터 변환 모범 사례를 학습합니다. 1. 기본 개념 Golang에서 각 변수에는 주소가 있으며, 주소는 메모리에서 변수의 위치입니다.

VUE3 시작하기 예: 간단한 비디오 플레이어 만들기 VUE3 시작하기 예: 간단한 비디오 플레이어 만들기 Jun 15, 2023 pm 09:42 PM

새로운 세대의 프런트엔드 프레임워크가 계속 등장함에 따라 VUE3는 빠르고 유연하며 사용하기 쉬운 프런트엔드 프레임워크로 사랑받고 있습니다. 다음으로 VUE3의 기본을 배우고 간단한 동영상 플레이어를 만들어 보겠습니다. 1. VUE3 설치 먼저 VUE3를 로컬에 설치해야 합니다. 명령줄 도구를 열고 다음 명령을 실행합니다. npminstallvue@next 그런 다음 새 HTML 파일을 만들고 VUE3을 도입합니다. &lt;!doctypehtml&gt;

Python의 VAE 알고리즘 예 Python의 VAE 알고리즘 예 Jun 11, 2023 pm 07:58 PM

VAE는 생성 모델이며 전체 이름은 VariationalAutoencoder이며 중국어로 Variational Autoencoder로 번역됩니다. 이미지, 오디오, 텍스트 등과 같은 새로운 데이터를 생성하는 데 사용할 수 있는 비지도 학습 알고리즘입니다. 일반 자동 인코더에 비해 VAE는 더 유연하고 강력하며 더 복잡하고 현실적인 데이터를 생성할 수 있습니다. Python은 가장 널리 사용되는 프로그래밍 언어 중 하나이며 딥 러닝을 위한 주요 도구 중 하나입니다. Python에는 우수한 기계 학습과 심층적인 기능이 많이 있습니다.

See all articles