Код реализации для динамического эффекта умножения 9*9

Недавно я увидел тему в группе, вытащил ее и написал.

Требовать:

Используйте HTML, CSS и Native JS, чтобы достичь эффекта, как показано на рисунке, сначала выводит вперед, затем отступите назад и, наконец, оставайтесь на полной картине.

первый:

HTML Code:

<div id = "result"> </div>

Это просто так просто.

CSS -код:

 #result {ширина: 550px; Маржа: 30px Auto; размер шрифта: 0; Фондовая семья: Консолас, «Освободительный моно», Menlo, Courier, Monospace;}#Результат Span {Display: Inline Block; Ширина: 60px; Высота: 25px; высота линии: 25px; размер шрифта: 12px; Текст-альбом: Центр; Граница: 1PX SOLID #EEE; Полевая: -1px 0 0 -1px;}

Код CSS также очень прост. Маржа в промежутке в основном для устранения проблемы двойных границ.

Следующий ключевой момент

код JavaScript:

Сначала создайте функцию с таблицей умножения 9*9

 function create () {var html = []; for (var i = 1; i <= 9; i ++) {for (var j = 1; j <= i; j ++) {html.push ('<pan>'+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 ('<pan>'+j+'*'+i+'='+(j*i)+'</span>');

4. Обратите внимание, что для реализации лестницы добавьте символ Newline после завершения цикла J:

 html.push ('<br/>');

5. Наконец, не забудьте вернуть массив только сейчас:

 вернуть HTML;

Функция, которая создает таблицу умножения 9*9, завершена.

Далее отображается на странице:

 function inhtml () {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 ++]; tmp.join ('');

Мы все еще создаем новую функцию: inhtml ()

1. Сначала объявите некоторые переменные инициализации

 var html = create (), // вызов функции 9*9 I = 0, // инициализировать переменную i tmp = create (), timer = null, // инициализировать result = document.getElementById ('result'); // Получить идентификатор

2. Затем мы создаем таймер для отображения данных по очереди:

 timer = setInterval (function () {// content}, 100)

Пусть этот таймер будет выполнен один раз в 100 миллисекундах

3. Затем напишите содержимое в таймере:

 if (i> html.length) {// судить, больше ли я, чем html.length. Если он больше, отображать html.splice (html.length-1,1) result.innerhtml = html.join ('' ');} else {// Если это меньше, DISTER RESSUT.INNERHTML+= html [i ++];} if (! Html.length) {// html. result.innerhtml = tmp.join (''); ClearInterval (таймер); // Clear Timer}

Функция inhtml () также была написана, поэтому единственное, что осталось, - это назвать это

 inhtml ();

Заканчивать.

Вы можете попробовать сами. Если у вас есть лучшие идеи, пожалуйста, оставьте мне сообщение.

Приведенный выше динамический код реализации эффекта таблицы умножения 9*9 - это все контент, который я поделился с вами. Я надеюсь, что вы можете дать вам ссылку, и я надеюсь, что вы сможете поддержать Wulin.com больше.