최근에 나는 그룹에서 주제를보고 그것을 꺼내서 썼다.
필요하다:
HTML, CSS 및 Native JS를 사용하여 그림에 표시된대로 효과를 달성하고, 먼저 출력 한 다음 뒤로 뒤로 뒤로, 마지막으로 전체 그림을 유지하십시오.
첫 번째:
HTML 부품 코드 :
<div id = "result"> </div>
그것은 단순히 간단합니다.
CSS 코드 :
#Result {너비 : 550px; 마진 : 30px 자동; 글꼴 크기 : 0; Font-Family : Consolas, "Liberation Mono", Menlo, Courier, Monospace;}#결과 Span {display : Inline-Block; 너비 : 60px; 높이 : 25px; 라인 높이 : 25px; 글꼴 크기 : 12px; 텍스트 정렬 : 센터; 국경 : 1px Solid #eee; 여백 : -1px 0 0-1px;}CSS 코드도 매우 간단합니다. 스팬의 마진은 주로 이중 경계의 문제를 제거하는 것입니다.
다음 핵심 요점은입니다
자바 스크립트 코드 :
먼저 9*9 곱셈 테이블로 기능을 만듭니다
함수 create () {var html = []; for (var i = 1; i <= 9; i ++) {for (var j = 1; j <= i; j ++) {html.push ( '<span>'+j+'*'+i+'='+(j*i)+'</span>'); } html.push ( '<br/>'); } return html;}1. HTML 코드 스 니펫을 넣을 새 빈 배열을 만듭니다.
var html = [];
2. 루프를 사용하여 9*9 곱셈 테이블을 가로 지르십시오.
for (var i = 1; i <= 9; i ++) {for (var j = 1; j <= i; j ++) {// content}}3. 루프 내용을 새로 생성 된 빈 배열로 밀어 넣으십시오.
html.push ( '<span>'+j+'*'+i+'='+(j*i)+'</span>');
4. 사다리를 구현하려면 J 루프가 완료된 후 Newline 문자를 추가하십시오.
html.push ( '<br/>');
5. 마지막으로 지금 배열을 반환해야합니다.
반환 html;
9*9 곱셈 테이블을 생성하는 함수가 완료됩니다.
다음은 페이지에 표시됩니다.
function innsml () {var html = create (), i = 0, tmp = create (), timer = null, result = document.getElementById ( 'result'); timer = setInterVal (function () {if (i> html.length) {html.splice (html.length-1,1) result.innerhtml = html.join ( '');} else {result.innerhtml+= html [i ++];} if (! tmp.join ( '');우리는 여전히 새로운 기능을 만들고 있습니다 : inhtml ()
1. 먼저 일부 초기화 변수를 선언합니다
var html = create (), // 9*9 함수 i = 0, // 변수 초기화 i tmp = create (), timer = null, // 초기화 결과 = document.getElementById ( 'result'); // id get id
2. 그런 다음 데이터를 차례로 표시 할 타이머를 만듭니다.
TIMER = setInterVal (function () {// content}, 100)이 타이머를 100 밀리 초 안에 한 번 실행하도록하십시오
3. 그런 다음 타이머에 내용을 작성하십시오.
if (i> html.length) {// i가 html.length보다 큰지 판단합니다. 그것이 더 큰 경우, display html.splice (html.length-1,1) result.innerhtml = html.join ( '');} else {// display result.innerhtml+= html [i ++];} if (! html.length) {// html. result.innerhtml = tmp.join ( ''); ClearInterval (타이머); // 클리어 타이머}inongml () 함수도 작성되었으므로 남은 유일한 것은 그것을 호출하는 것입니다.
inhtml ();
마치다.
직접 시도해 볼 수 있습니다. 더 나은 아이디어가 있으면 메시지를 남겨주세요.
9*9 곱셈 테이블 효과의 위의 동적 구현 코드는 내가 공유 한 모든 컨텐츠입니다. 나는 당신이 당신에게 참조를 줄 수 있기를 바랍니다. 그리고 당신이 wulin.com을 더 지원할 수 있기를 바랍니다.