간단히 아이디어를 설명하세요. 이것은 카운트다운 로딩 사진입니다 의 작은 데모에서 구현 아이디어는 매우 간단합니다. 즉, 먼저
및
라는 두 개의 컨트롤을 만들고 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('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는 ( super) 약한 유형의 언어. oc는 훨씬 더 약합니다. var는 유형 파생과 동일하게 모든 유형의 변수를 받을 수 있습니다. 이는 단순히 너무 약하고 자체 위치가 전혀 없습니다. 하하. 우리에게 많은 것을 절약해줍니다. 여기서 전문가의 조언을 환영합니다. 마음에 드시면 팔로우 부탁드립니다. [관련 추천]1. 온라인 동영상 튜토리얼HTML5 정식 버전 매뉴얼 php.cn 원본 html5 동영상 튜토리얼
위 내용은 H5를 사용하여 카운트다운 데모를 만드는 예제 튜토리얼의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!