Фестиваль покупок Double Eleven прошел. Вы должны были видеть эффект цифровых провалов на многих веб-страницах, таких как обратный отсчет, цифровой рост и т. д. Я полагаю, что многие люди уже внедрили его самостоятельно.Я также смотрел несколько демонстраций в Интернете и обнаружил, что структура HTML в основном сложна, используя 4 параллельных тега для размещения двух «карточек» до и после. В этой статье объясняется, как еще больше упростить HTML, упростить структуру и сделать методы JS инкапсулированными и простыми в использовании. Давайте посмотрим на окончательный эффект:
HTML-структура каждого флопа (сокращена до 2-х параллельных тегов):
<div class="flip down">
<div class="digital front number0"></div>
<div class="digital back number1"></div>
</div>
Этот обмен содержит множество советов, которые можно гибко использовать для повышения технического уровня и эффективности работы, включая следующие точки знаний:
Пункт знаний 1::before :afterИспользование псевдоэлементов
Точка знаний 2: Магия высоты строки: 0
Точка знаний 3: трансформация происхождения и перспектива
Пункт знаний 4: обратная видимость
База знаний 5: Реализация функции форматирования времени
Let's do it!
1 Построение флопа
1.1 Базовая структура
Сначала объясните структуру HTML:
<!-- 翻牌的外框 -->
<div class="flip down">
<!-- 位于前面的纸牌 -->
<div class="digital front number0"></div>
<!-- 位于后面的纸牌 -->
<div class="digital back number1"></div>
</div>
【иллюстрировать】
флип: рамка карты
down: указывает на динамический эффект падающего флопа, а также вверх. В последующих главах будет подробно рассказано.
спереди: указывает на карту спереди
На обороте: указывает на карту на обороте.
номер*: представляет номер на карте
Код CSS для флипа выглядит следующим образом:
.flip {
display: inline-block;
position: relative;
width: 60px;
height: 100px;
line-height: 100px;
border: solid 1px #000;
border-radius: 10px;
background: #fff;
font-size: 66px;
color: #fff;
box-shadow: 0 0 6px rgba(0, 0, 0, .5);
text-align: center;
font-family: "Helvetica Neue"
}
Этот код очень простой и не будет подробно объясняться. Внимательные студенты, возможно, уже поняли, зачем устанавливать фон #fff (белый)?Конечный эффект, очевидно, черный. Оставьте вопрос, в следующем разделе разберутся.
Эффект базовой структуры таков:
1.2 Соберите карту и разделите верхнюю и нижнюю части псевдоэлементами
Поскольку каждая карта сложена и перевернута вверх ногами, каждая карта должна быть разделена на две части. Но для каждой карты в HTML только один тег, как разбить его на два? Здесь используются псевдоэлементы «до» и «после».
База знаний 1: Использование псевдоэлементов
Сначала посмотрите на код:
.flip .digital:before,
.flip .digital:after {
content: "";
position: absolute;
left: 0;
right: 0;
background: #000;
overflow: hidden;
}
.flip .digital:before {
top: 0;
bottom: 50%;
border-radius: 10px 10px 0 0;
}
.flip .digital:after {
top: 50%;
bottom: 0;
border-radius: 0 0 10px 10px;
}
:before и :after генерируют два псевдоэлемента внутри digital, где before используется для создания «верхней половины» карты, а after используется для создания «нижней половины» карты.
Поэтому перед "верхней половиной" стоит "верхняя(top: 0)" до "половины дна (bottom: 50%)" с закругленными углами с обеих сторон.
Точно так же после «нижней половины» стоит «половина сверху (top: 50%)» на «Нижний (bottom: 0)», со скругленными углами по обеим сторонам дна.
Примечание в кодеcontent: ""Его нельзя опускать, иначе псевдоэлемент не будет отображаться.
Эффект следующий:
Чтобы ответить на вопрос из предыдущей главы, почему нижний слой устанавливает фон белым?
Ответ очень прост: между углами бумаги внутри элемента и углами внешнего слоя будет небольшой зазор, который обнажит белый цвет внизу, который более трехмерен из-за визуального эффекта.
Затем добавьте горизонтальную полилинию между верхней и нижней секциями.
.flip .digital:before,
.flip .digital:after {
content: "";
position: absolute;
left: 0;
right: 0;
background: #000;
overflow: hidden;
+ box-sizing: border-box;
}
...(略)
.flip .digital:before {
top: 0;
bottom: 50%;
border-radius: 10px 10px 0 0;
+ border-bottom: solid 1px #666;
}
добавлен внешний флипbox-sizing: border-boxГарантируется, что нижняя граница не повлияет на исходную высоту элемента.
Эффект следующий:
На данный момент мы можем думать об этом как о 4 маленьких листочках бумаги, а именно:
- Спереди: .digital.спереди: до
- Спереди и снизу: .digital.front:after
- Назад: .digital.back:before
- Назад вниз: .digital.back:после
Из-за перекрытия видна только одна карта. И карта, которую вы видите, является задней картой, почему? Потому что HTML задней части пишется после передней. Но это не беда, позже мы подкорректируем порядок укладки через z-index, не волнуйтесь.
1.3 Добавление текста на карточки
Я только что вспомнилcontent: ""? Это используется в текстовом отображении карт.
Сначала определите числа от 0 до 9 через CSS:
.flip .number0:before,
.flip .number0:after {
content: "0";
}
.flip .number1:before,
.flip .number1:after {
content: "1";
}
.flip .number2:before,
.flip .number2:after {
content: "2";
}
...(略)
.flip .number9:before,
.flip .number9:after {
content: "9";
}
Сейчас эффект такой:
Отчетливо видны две проблемы:
- Задняя карточка, которая должна быть сзади, переместилась вперед (проблема с z-индексом).
- Текст в нижней половине карточек должен показывать только нижнюю половину.
Давайте сначала решим задачу 2, а вот и вторая точка знаний.
Точка знаний 2: Магия высоты строки: 0
Когда дело доходит до отображения текста, вы обязательно подумаете о базовой линии и, возможно, видели эту картинку:
По поводу расчета базовой линии (базовой линии), то это действительно хлопотно, а я тут уже давно блуждаю. На самом деле понимание line-height:0 может быть изменено под другим углом, что будет легче для понимания.Пожалуйста, посмотрите на следующий рисунок:
Когда высота строки равна 200 пикселей, высота каждой строки текста составляет 200 пикселей, а текст центрируется по вертикали в межстрочной области с высотой 200 пикселей;
Когда высота строки равна 100 пикселей, высота каждой строки текста составляет 100 пикселей, а текст центрируется по вертикали в межстрочной области высотой 100 пикселей;
Когда высота строки равна 0, межстрочный интервал равен 0, а положение центральной строки также равно 0, поэтому в контейнере остается только нижняя половина текста.
Используя свойство line-height: 0, легко понять, что карточка «нижняя половина» отображает только нижнюю половину текста, и она хорошо связана с карточкой «верхняя половина».
Установите для высоты строки значение 0 в коде:
.flip .digital:after {
top: 50%;
bottom: 0;
border-radius: 0 0 10px 10px;
+ line-height: 0;
}
Эффект следующий:
1.4 Установите отношение стопки карт
Для начала посмотрите видео-демонстрацию «Flip Down», чтобы интуитивно почувствовать иерархическую взаимосвязь каждой бумажки:
По физической карте можно определить z-индекс каждой бумажки:
Добавьте следующий код CSS:
/*向下翻*/
.flip.down .front:before {
z-index: 3;
}
.flip.down .back:after {
z-index: 2;
}
.flip.down .front:after,
.flip.down .back:before {
z-index: 1;
}
Сейчас эффект такой:
Хм? Почему бы нет? Не волнуйтесь, это потому, что мы только установили уровень, но не перевернули нижнюю половину обратной карты.
Добавьте флип-код:
.flip.down .back:after {
z-index: 2;
+ transform-origin: 50% 0%;
+ transform: perspective(160px) rotateX(180deg);
}
Здесь задействована точка знания 3.
Точка знаний 3: трансформация происхождения и перспектива
transform-originявляется базовой точкой вращения элемента.
transform-origin: 50% 0%;Указывает, что базовая точка вращения установлена в середине горизонтальной оси и в положении вершины вертикальной оси, как показано на следующем рисунке:
perspective(160px)Его можно понимать как глубину резкости стереоскопического вида в перспективе. В результате этого обмена наша перспектива обращена к лицевой стороне карты, а карта находится в середине перспективы. Таким образом, первое значение transform-origin (позиция X) равно 50%.
rotateX(180deg)Это означает перелистывание по оси X, что здесь соответствует переворачиванию вверх и вниз. Здесь ось X была помещена поверх элемента с помощью второго параметра transform-origin (положение оси Y: 0%).
Основываясь на вышеуказанных настройках, он может отображаться нормально, как показано ниже:
Точно так же необходимо настроить «перевернуть вверх». Вы можете сами сложить два листа бумаги, обратившись к вышеописанному способу, этого должно быть легко добиться. Я не буду повторять здесь объяснение, просто приведу код напрямую, и вы сможете сравнить разницу:
/*向上翻*/
.flip.up .front:after {
z-index: 3;
}
.flip.up .back:before {
z-index: 2;
transform-origin: 50% 100%;
transform: perspective(160px) rotateX(-180deg);
}
.flip.up .front:before,
.flip.up .back:after {
z-index: 1;
}
2 Реализация анимации флопа
Теперь, когда все листы бумаги готовы, осталось реализовать анимацию CSS3 и интерактивные элементы управления JS.
2.1 CSS3 флоп-анимация
Давайте возьмем в качестве примера «перевернуть вниз», а затем посмотрим на предыдущее видео физического переворота:
Как видите, «перевернуть вниз» в основном включает в себя анимацию двух элементов:
- Верхняя половина лицевой карты перевернута на 180 градусов.
- Нижняя половина задней карты (в настоящее время перевернутая вверх) переворачивается на 180 градусов, чтобы вернуться в исходное состояние.
Перейдите непосредственно к коду:
.flip.down.go .front:before {
transform-origin: 50% 100%;
animation: frontFlipDown 0.6s ease-in-out both;
box-shadow: 0 -2px 6px rgba(255, 255, 255, 0.3);
}
.flip.down.go .back:after {
animation: backFlipDown 0.6s ease-in-out both;
}
@keyframes frontFlipDown {
0% {
transform: perspective(160px) rotateX(0deg);
}
100% {
transform: perspective(160px) rotateX(-180deg);
}
}
@keyframes backFlipDown {
0% {
transform: perspective(160px) rotateX(180deg);
}
100% {
transform: perspective(160px) rotateX(0deg);
}
}
Элементы знаний и принципы, задействованные в приведенном выше коде, не являются чем-то новым, они уже были объяснены, поэтому я не буду вдаваться в подробности. Box-shadow добавляет немного белого света к верхнему краю бумаги, и визуальный эффект становится лучше. В противном случае, когда он переворачивается, все элементы позади него становятся черными и сливаются вместе. Взгляните на текущий эффект:
Дисплей не нормальный! Почему? Поскольку верхняя половина переднего ряда имеет самый высокий z-индекс, она по-прежнему блокирует другие листы при переворачивании на нижнюю половину. Как решить элегантно? Супер просто, давайте взглянем на четвертую точку знаний:
Пункт знаний 4: обратная видимость
backface-visibility указывает, видна ли обратная сторона элемента, по умолчанию — visible (видимая).
Требование здесь состоит в том, чтобы войти в невидимое состояние, когда передняя половина бумаги перевернута наполовину (90 градусов). И после того, как карта перевернута на 90 градусов, это только начало раскрытия обратной стороны элемента, поэтому установка скрытой обратной стороны может быть идеальным решением!
Измените код следующим образом:
.flip.down.go .front:before {
transform-origin: 50% 100%;
animation: frontFlipDown 0.6s ease-in-out both;
box-shadow: 0 -2px 6px rgba(255, 255, 255, 0.3);
+ backface-visibility: hidden;
}
Теперь он работает отлично!
Каждый может попытаться добиться эффекта переворота вверх, и код выпускается напрямую:
.flip.up.go .front:after {
transform-origin: 50% 0;
animation: frontFlipUp 0.6s ease-in-out both;
box-shadow: 0 2px 6px rgba(255, 255, 255, 0.3);
backface-visibility: hidden;
}
.flip.up.go .back:before {
animation: backFlipUp 0.6s ease-in-out both;
}
@keyframes frontFlipUp {
0% {
transform: perspective(160px) rotateX(0deg);
}
100% {
transform: perspective(160px) rotateX(180deg);
}
}
@keyframes backFlipUp {
0% {
transform: perspective(160px) rotateX(-180deg);
}
100% {
transform: perspective(160px) rotateX(0deg);
}
}
2.2 JS реализует взаимодействие с флопом
Теперь давайте реализуем простое взаимодействие. Требования:
- Нажмите «+», листайте вниз, цифра +1
- Нажми "-", плюхнись, цифра -1
Сначала измените HTML:
+ <div class="single-demo">
M <div class="flip down" id="flip">
<div class="digital front number0"></div>
<div class="digital back number1"></div>
</div>
+ </div>
+ <div class="btn-con">
+ <button id="btn1">向下翻+1</button>
+ <button id="btn2">向上翻-1</button>
+ </div>
Вспомогательный CSS выглядит следующим образом, он предназначен только для внешнего вида демо и не имеет практического эффекта:
.single-demo {
margin: 50px auto;
padding: 30px;
width: 600px;
text-align: center;
border: solid 1px #999;
}
Код Javascript выглядит следующим образом:
var flip = document.getElementById('flip')
var backNode = document.querySelector('.back')
var frontNode = document.querySelector('.front')
var btn1 = document.getElementById('btn1')
var btn2 = document.getElementById('btn2')
btn1.addEventListener('click', function() {
flipDown();
})
btn2.addEventListener('click', function() {
flipUp();
})
// 当前数字
var count = 0
// 是否正在翻转（防止翻转未结束就进行下一次翻转）
var isFlipping = false
// 向下翻转+1
function flipDown() {
// 如果处于翻转中，则不执行
if (isFlipping) {
return false
}
// 设置前牌的文字
frontNode.setAttribute('class', 'digital front number' + count)
// 计算后牌文字（越界判断）
var nextCount = count >= 9 ? 0 : (count + 1)
// 设置后牌的文字
backNode.setAttribute('class', 'digital back number' + nextCount)
// 添加go，执行翻转动画
flip.setAttribute('class', 'flip down go')
// 将翻转态设置为true
isFlipping = true
// 翻转结束后，恢复状态
setTimeout(function() {
// 去掉go
flip.setAttribute('class', 'flip down')
// 将翻转态设置为false
isFlipping = false
// 设置前牌文字为+1后的数字
frontNode.setAttribute('class', 'digital front number' + nextCount)
// 更新当前文字
count = nextCount
}, 1000)
}
// 向上翻转-1（同理，注释略）
function flipUp() {
if (isFlipping) {
return false
}
frontNode.setAttribute('class', 'digital front number' + count)
var nextCount = count <= 0 ? 9 : (count - 1)
backNode.setAttribute('class', 'digital back number' + nextCount)
flip.setAttribute('class', 'flip up go')
isFlipping = true
setTimeout(function() {
flip.setAttribute('class', 'flip up')
isFlipping = false
frontNode.setAttribute('class', 'digital front number' + nextCount)
count = nextCount
}, 1000)
}
Сначала посмотрите на эффект взаимодействия:
Этот код Javascript является избыточным, с большим количеством повторяющегося кода. В реальных продуктах есть несколько цифровых карт, с которыми, очевидно, нельзя работать таким образом. В следующей главе поговорим о том, как элегантно инкапсулировать, чтобы его можно было изменить.
3 Реализация флоп часов
Давайте посмотрим на окончательный эффект:
3.1 HTML-конструкция
HTML-код выглядит следующим образом:
<div class="clock" id="clock">
<div class="flip down">
<div class="digital front number0"></div>
<div class="digital back number1"></div>
</div>
<div class="flip down">
<div class="digital front number0"></div>
<div class="digital back number1"></div>
</div>
<em>:</em>
<div class="flip down">
<div class="digital front number0"></div>
<div class="digital back number1"></div>
</div>
<div class="flip down">
<div class="digital front number0"></div>
<div class="digital back number1"></div>
</div>
<em>:</em>
<div class="flip down">
<div class="digital front number0"></div>
<div class="digital back number1"></div>
</div>
<div class="flip down">
<div class="digital front number0"></div>
<div class="digital back number1"></div>
</div>
</div>
Код CSS выглядит следующим образом (сохраните код CSS из предыдущей главы):
.clock {
text-align: center;
}
.clock em {
display: inline-block;
line-height: 102px;
font-size: 66px;
font-style: normal;
vertical-align: top;
}
Эффект следующий, а остальное — часть JS.
3.2 Создание класса Flipper
Инкапсулируйте каждый флоп в класс, чтобы при работе с несколькими флопами вы могли легко управлять каждым объектом флопа независимо друг от друга с помощью new Flipper().
Код реализации класса выглядит следующим образом:
function Flipper(config) {
// 默认配置
this.config = {
// 时钟模块的节点
node: null,
// 初始前牌文字
frontText: 'number0',
// 初始后牌文字
backText: 'number1',
// 翻转动画时间（毫秒，与翻转动画CSS 设置的animation-duration时间要一致）
duration: 600,
}
// 节点的原本class，与html对应，方便后面添加/删除新的class
this.nodeClass = {
flip: 'flip',
front: 'digital front',
back: 'digital back'
}
// 覆盖默认配置
Object.assign(this.config, config)
// 定位前后两个牌的DOM节点
this.frontNode = this.config.node.querySelector('.front')
this.backNode = this.config.node.querySelector('.back')
// 是否处于翻牌动画过程中（防止动画未完成就进入下一次翻牌）
this.isFlipping = false
// 初始化
this._init()
}
Flipper.prototype = {
constructor: Flipper,
// 初始化
_init: function() {
// 设置初始牌面字符
this._setFront(this.config.frontText)
this._setBack(this.config.backText)
},
// 设置前牌文字
_setFront: function(className) {
this.frontNode.setAttribute('class', this.nodeClass.front + ' ' + className)
},
// 设置后牌文字
_setBack: function(className) {
this.backNode.setAttribute('class', this.nodeClass.back + ' ' + className)
},
_flip: function(type, front, back) {
// 如果处于翻转中，则不执行
if (this.isFlipping) {
return false
}
// 设置翻转状态为true
this.isFlipping = true
// 设置前牌文字
this._setFront(front)
// 设置后牌文字
this._setBack(back)
// 根据传递过来的type设置翻转方向
let flipClass = this.nodeClass.flip;
if (type === 'down') {
flipClass += ' down'
} else {
flipClass += ' up'
}
// 添加翻转方向和执行动画的class，执行翻转动画
this.config.node.setAttribute('class', flipClass + ' go')
// 根据设置的动画时间，在动画结束后，还原class并更新前牌文字
setTimeout(() => {
// 还原class
this.config.node.setAttribute('class', flipClass)
// 设置翻转状态为false
this.isFlipping = false
// 将前牌文字设置为当前新的数字，后牌因为被前牌挡住了，就不用设置了。
this._setFront(back)
}, this.config.duration)
},
// 下翻牌
flipDown: function(front, back) {
this._flip('down', front, back)
},
// 上翻牌
flipUp: function(front, back) {
this._flip('up', front, back)
}
}
Можно заметить, что передача параметров Flipper принимает конфигурацию параметра только в виде объекта.Есть много преимуществ использования объекта для передачи параметров в функцию:
- Семантические параметры для легкого понимания
- Не заботиться о порядке параметров
- Добавление, удаление и корректировка порядка параметров не повлияют на использование бизнес-кодов.
Используйте метод Object.assign, чтобы переопределить параметры по умолчанию переданными параметрами конфигурации. Для свойств, которых нет в переданной конфигурации, используется конфигурация по умолчанию. Конечно, этот подход работает только для неглубоких копий.
О прототипе и о том, зачем настраивать конструктор, читайте в главе 4.1 другой моей статьи «Скретч-карта на самом деле содержит так много точек знаний о внешнем интерфейсе», в которой было подробно объяснено.
Пожалуйста, прочитайте комментарии для логики кода.
3.3 Реализация бизнес-логики часов
Следующая задача — привязать js к dom.
Пожалуйста, смотрите код:
Этот код должен быть размещен ниже кода класса Flipper, Flipper.prototype должен выполняться перед кодом бизнес-логики, иначе будет сообщено об ошибке и внутренний метод Flipper не будет найден.
// 定位时钟模块
let clock = document.getElementById('clock')
// 定位6个翻板
let flips = clock.querySelectorAll('.flip')
// 获取当前时间
let now = new Date()
// 格式化当前时间，例如现在是20:30:10，则输出"203010"字符串
let nowTimeStr = formatDate(now, 'hhiiss')
// 格式化下一秒的时间
let nextTimeStr = formatDate(new Date(now.getTime() + 1000), 'hhiiss')
// 定义牌板数组，用来存储6个Flipper翻板对象
let flipObjs = []
for (let i = 0; i < flips.length; i++) {
// 创建6个Flipper实例，初始化并存入flipObjs
flipObjs.push(new Flipper({
// 每个Flipper实例按数组顺序与翻板DOM的顺序一一对应
node: flips[i],
// 按数组顺序取时间字符串对应位置的数字
frontText: 'number' + nowTimeStr[i],
backText: 'number' + nextTimeStr[i]
}))
}
Логика кода не сложная, читайте комментарии. Стоит поделиться функцией форматирования времени formatDate.
База знаний 5: Реализация функции форматирования времени
Чтобы облегчить использование в бизнесе, внедрите метод форматирования времени, который используется во многих других бизнесах и имеет очень общее практическое значение.
Требуется вывести соответствующую строку, введя требования к формату даты и времени.
Например:
yyyy-mm-dd hh:ii:ssвыход:2019-06-02 08:30:37
yy-m-d h:i:sвыход:19-6-2 8:30:37
Сначала посмотрите на код:
//正则格式化日期
function formatDate(date, dateFormat) {
/* 单独格式化年份，根据y的字符数量输出年份
* 例如：yyyy => 2019
yy => 19
y => 9
*/
if (/(y+)/.test(dateFormat)) {
dateFormat = dateFormat.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
}
// 格式化月、日、时、分、秒
let o = {
'm+': date.getMonth() + 1,
'd+': date.getDate(),
'h+': date.getHours(),
'i+': date.getMinutes(),
's+': date.getSeconds()
};
for (let k in o) {
if (new RegExp(`(${k})`).test(dateFormat)) {
// 取出对应的值
let str = o[k] + '';
/* 根据设置的格式，输出对应的字符
* 例如: 早上8时，hh => 08，h => 8
* 但是，当数字>=10时，无论格式为一位还是多位，不做截取，这是与年份格式化不一致的地方
* 例如: 下午15时，hh => 15, h => 15
*/
dateFormat = dateFormat.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str));
}
}
return dateFormat;
};
//日期时间补零
function padLeftZero(str) {
return ('00' + str).substr(str.length);
}
Прочтите комментарии к логике кода и добавьте сюда описание функции «дата и время padLeftZero». Поскольку месяц, день, час, минута и секунда представляют собой не более двух цифр, здесь рассматривается не более одного 0.
Принцип таков: независимо от того, сколько цифр в числе, сначала добавьте два 0 впереди, а затем усеките в соответствии с количеством цифр исходного числа, и окончательный вывод фиксируется как двузначное число, заполненное нулями.
Например: число "16" является двузначным числом, сначала добавьте два 0, чтобы получить "0016", а затем начните перехватывать с индекса [2] строки (2 = количество цифр исходного числа ), поскольку индекс строки начинается с [ 0], поэтому [2] соответствует 3-му биту строки, а выходной результат по-прежнему равен «16.
Точно так же число «8» является 1-значным числом, сначала добавьте два 0, чтобы получить «008», а затем начните перехватывать с индекса [1] строки (1 = количество цифр исходного числа) , то есть со второй цифры Начать перехват и вывести «08».
Таким образом реализуется функция заполнения нулями.
Теперь посмотрите на эффект, текущее время может отображаться правильно.
3.4 Часы работы
Все готово, просто добавьте таймер, чтобы включить часы.
setInterval(function() {
// 获取当前时间
let now = new Date()
// 格式化当前时间
let nowTimeStr = formatDate(new Date(now.getTime() - 1000), 'hhiiss')
// 格式化下一秒时间
let nextTimeStr = formatDate(now, 'hhiiss')
// 将当前时间和下一秒时间逐位对比
for (let i = 0; i < flipObjs.length; i++) {
// 如果前后数字没有变化，则直接跳过，不翻牌
if (nowTimeStr[i] === nextTimeStr[i]) {
continue
}
// 传递前后牌的数字，进行向下翻牌动画
flipObjs[i].flipDown('number' + nowTimeStr[i], 'number' + nextTimeStr[i])
}
}, 1000)
Логика этого кода очень проста, главное сравнить временные строки до и после, а затем выставить карты и перевернуть их. окончательный эффект:
4 Упаковка Vue & React
Из-за ограниченного места здесь подробно описывать не будем, принцип тот же, но для инкапсуляции используется API и синтаксис Vue и React.
Демонстрационный исходный код трех версий собственного JavaScript, Vue и React, пожалуйста, загрузите с моего github:
GitHub.com/YUEword32/Преимущества…
Этот раздел объясняет, как элегантно реализовать флоп-часы с простой структурой, а также научно и эффективно инкапсулирует JS. Это также требует некоторых знаний и навыков CSS3. Надеюсь, это может быть полезно для работы каждого.
Добро пожаловать в мой личный общедоступный аккаунт WeChat, чтобы получать последние статьи в любое время ^_^