H5를 사용하여 카운트다운 데모를 만드는 예제 튜토리얼
- 零下一度원래의
- 2017-05-05 15:44:543882검색
요즘에는 할 일이 없어서 h5 프론트엔드를 공부하게 되었어요.
h5는 태그 언어입니다. 그 안에 포함된 다양한 태그는 실제로 iOS의 다양한 컨트롤과 동일합니다. 컨트롤이 생성되고 배치됩니다. 더 이상 고민하지 말고 다음 데모를 살펴보세요.
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>
<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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.