Форум программистов, компьютерный форум, киберфорум
React/ReactJS
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.60/5: Рейтинг темы: голосов - 5, средняя оценка - 4.60
0 / 0 / 0
Регистрация: 14.04.2020
Сообщений: 1

Как убрать из этого кода отображение секундных стрелок?

14.04.2020, 14:32. Показов 1032. Ответов 1

Студворк — интернет-сервис помощи студентам
Всем привет,

Хочу добавить на сайт флип часы найденные в сети, но нужно убрать отображение секундных стрелок. Я пробовал вырезать блоки create seconds, но в результате у меня то полностью не отображаются часы или не отображаются минутные знаки. Что делать сам не знаю там похоже есть какое-то условие, которое я вообще не понимаю. Сам код видел, языком не владею, только на уровне опознания общеизвестных кодов html и азы turbo pascal. Всем отозвавшимся большая благодарность, заранее спасибо.

Сайт с кодом: React Flip Clock — перекидные часы с перелистывающимся табло для сайта (можно найти в поисковике по фразе), а вот ссылка: https://nisnom.com/veb-razrabo... #more-1044

Вот код скрипта:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
'use strict';
 
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
 
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
 
var AnimatedCard = function (_React$Component) {
    _inherits(AnimatedCard, _React$Component);
 
    function AnimatedCard() {
        _classCallCheck(this, AnimatedCard);
 
        return _possibleConstructorReturn(this, _React$Component.apply(this, arguments));
    }
 
    AnimatedCard.prototype.render = function render() {
        var _props = this.props;
        var position = _props.position;
        var digit = _props.digit;
        var animation = _props.animation;
 
        return React.createElement(
            'div',
            { className: 'flipCard ' + position + ' ' + animation },
            React.createElement(
                'span',
                null,
                digit
            )
        );
    };
 
    return AnimatedCard;
}(React.Component);
 
var StaticCard = function (_React$Component2) {
    _inherits(StaticCard, _React$Component2);
 
    function StaticCard() {
        _classCallCheck(this, StaticCard);
 
        return _possibleConstructorReturn(this, _React$Component2.apply(this, arguments));
    }
 
    StaticCard.prototype.render = function render() {
        var _props2 = this.props;
        var position = _props2.position;
        var digit = _props2.digit;
 
        return React.createElement(
            'div',
            { className: position },
            React.createElement(
                'span',
                null,
                digit
            )
        );
    };
 
    return StaticCard;
}(React.Component);
 
var FlipUnitContainer = function (_React$Component3) {
    _inherits(FlipUnitContainer, _React$Component3);
 
    function FlipUnitContainer() {
        _classCallCheck(this, FlipUnitContainer);
 
        return _possibleConstructorReturn(this, _React$Component3.apply(this, arguments));
    }
 
    FlipUnitContainer.prototype.render = function render() {
        var _props3 = this.props;
        var digit = _props3.digit;
        var shuffle = _props3.shuffle;
        var unit = _props3.unit;
 
        var now = digit;
        var before = digit - 1;
 
        // to prevent a negative value
        if (unit !== 'hours') {
            before = before === -1 ? 59 : before;
        } else {
            before = before === -1 ? 23 : before;
        }
 
        // add zero
        if (now < 10) now = '0' + now;
        if (before < 10) before = '0' + before;
 
        // shuffle digits
        var digit1 = shuffle ? before : now;
        var digit2 = !shuffle ? before : now;
 
        // shuffle animations
        var animation1 = shuffle ? 'fold' : 'unfold';
        var animation2 = !shuffle ? 'fold' : 'unfold';
 
        return React.createElement(
            'div',
            { className: 'flipUnitContainer' },
            React.createElement(StaticCard, {
                position: 'upperCard',
                digit: now
            }),
            React.createElement(StaticCard, {
                position: 'lowerCard',
                digit: before
            }),
            React.createElement(AnimatedCard, {
                position: 'first',
                digit: digit1,
                animation: animation1
            }),
            React.createElement(AnimatedCard, {
                position: 'second',
                digit: digit2,
                animation: animation2
            })
        );
    };
 
    return FlipUnitContainer;
}(React.Component);
 
var FlipClock = function (_React$Component4) {
    _inherits(FlipClock, _React$Component4);
 
    function FlipClock(props) {
        _classCallCheck(this, FlipClock);
 
        var _this4 = _possibleConstructorReturn(this, _React$Component4.call(this, props));
 
        _this4.state = {
            hours: 0,
            hoursShuffle: true,
            minutes: 0,
            minutesShuffle: true,
            seconds: 0,
            secondsShuffle: true
        };
        return _this4;
    }
 
    FlipClock.prototype.componentDidMount = function componentDidMount() {
        var _this5 = this;
 
        this.timerID = setInterval(function () {
            return _this5.updateTime();
        }, 50);
    };
 
    FlipClock.prototype.componentWillUnmount = function componentWillUnmount() {
        clearInterval(this.timerID);
    };
 
    FlipClock.prototype.updateTime = function updateTime() {
        // get new date
        var time = new Date();
        // set time units
        var hours = time.getHours();
        var minutes = time.getMinutes();
        var seconds = time.getSeconds();
        // on hour chanage, update hours and shuffle state
        if (hours !== this.state.hours) {
            var hoursShuffle = !this.state.hoursShuffle;
            this.setState({
                hours: hours,
                hoursShuffle: hoursShuffle
            });
        }
        // on minute chanage, update minutes and shuffle state
        if (minutes !== this.state.minutes) {
            var minutesShuffle = !this.state.minutesShuffle;
            this.setState({
                minutes: minutes,
                minutesShuffle: minutesShuffle
            });
        }
        // on second chanage, update seconds and shuffle state
        if (seconds !== this.state.seconds) {
            var secondsShuffle = !this.state.secondsShuffle;
            this.setState({
                seconds: seconds,
                secondsShuffle: secondsShuffle
            });
        }
    };
 
    FlipClock.prototype.render = function render() {
        var _state = this.state;
        var hours = _state.hours;
        var minutes = _state.minutes;
        var seconds = _state.seconds;
        var hoursShuffle = _state.hoursShuffle;
        var minutesShuffle = _state.minutesShuffle;
        var secondsShuffle = _state.secondsShuffle;
 
        return React.createElement(
            'div',
            { className: 'flipClock' },
            React.createElement(FlipUnitContainer, {
                unit: 'hours',
                digit: hours,
                shuffle: hoursShuffle
            }),
            React.createElement(FlipUnitContainer, {
                unit: 'minutes',
                digit: minutes,
                shuffle: minutesShuffle
            }),
            React.createElement(FlipUnitContainer, {
                unit: 'seconds',
                digit: seconds,
                shuffle: secondsShuffle
            })
        );
    };
 
    return FlipClock;
}(React.Component);
 
var Header = function (_React$Component5) {
    _inherits(Header, _React$Component5);
 
    function Header() {
        _classCallCheck(this, Header);
 
        return _possibleConstructorReturn(this, _React$Component5.apply(this, arguments));
    }
 
    Header.prototype.render = function render() {
        return React.createElement(
            'header',
            null,
            React.createElement(
                'h1',
                null,
                ' React Flip Clock'
            )
        );
    };
 
    return Header;
}(React.Component);
 
var App = function (_React$Component6) {
    _inherits(App, _React$Component6);
 
    function App() {
        _classCallCheck(this, App);
 
        return _possibleConstructorReturn(this, _React$Component6.apply(this, arguments));
    }
 
    App.prototype.render = function render() {
        return React.createElement(
            'div',
            null,
            React.createElement(Header, null),
            React.createElement(FlipClock, null)
        );
    };
 
    return App;
}(React.Component);
 
ReactDOM.render(React.createElement(App, null), document.querySelector('#root'));
 
/////////////////////////////////////////////////////////////
0
IT_Exp
Эксперт
34794 / 4073 / 2104
Регистрация: 17.06.2006
Сообщений: 32,602
Блог
14.04.2020, 14:32
Ответы с готовыми решениями:

При нажатии стрелок фокус передаётся по компонентам на форме. Как этого избежать ?
Приветствую! Мне необходимо сделать так, чтобы при нажатии стрелок фокус не передавался другим компонентам. Как быть ? Пожалуйста,...

Как в C++ Builder из кода сделать "процедуру" для дальнейшего использования этого кода?
Есть код C++ Builder в котором его часть дальше будет неоднократно использоваться. Как правильно нужно преобразовать, чтобы дальше не...

Отображение движения часовой, минутной и секундной стрелок часов
Здравствуйте! В цикле лабораторных работ на C++, одна из наших лабораторных работ, почему-то, идет на билдере. Скажу честно, никогда им не...

1
108 / 76 / 27
Регистрация: 14.11.2016
Сообщений: 260
25.04.2020, 23:22
Со строки 216 вырежите этот кусок, он рендерит секундную стрелку
JavaScript
1
2
3
4
5
React.createElement(FlipUnitContainer, {
                unit: 'seconds',
                digit: seconds,
                shuffle: secondsShuffle
            })
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
BasicMan
Эксперт
29316 / 5623 / 2384
Регистрация: 17.02.2009
Сообщений: 30,364
Блог
25.04.2020, 23:22
Помогаю со студенческими работами здесь

Как убрать отображение #ЗНАЧ!
Чтоб новую тему не постить, добавлюсь сюда... Есть таблица &quot;Заказа товара&quot; В столбце &quot;Сумма&quot; делаю формулу...

Как вытащить ссылку из этого кода?
&lt;a...

Как из этого кода получить кнопку?
Собрал на этом сервисе http://enjoycss.com/dOe#border кнопку, получил код html и css, а вот что с ним делать, как обьединить его чтобы...

Как выделить нужное из этого кода?
.387 .386p .model flat PUBLIC main EXTRN system:BYTE EXTRN printf:BYTE EXTRN scanf:BYTE ...

Как сделать вывод этого кода?
Вот что-то получилось но не пойму как сделать что-бы этот код за работал. Нужно как-то загрузить html файл или перенести его туда короче...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
2
Ответ Создать тему
Новые блоги и статьи
Символьное дифференцирование
igorrr37 13.02.2026
/ * Логарифм записывается как: (x-2)log(x^2+2) - означает логарифм (x^2+2) по основанию (x-2). Унарный минус обозначается как ! */ #include <iostream> #include <stack> #include <cctype>. . .
Камера Toupcam IUA500KMA
Eddy_Em 12.02.2026
Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .
И ясному Солнцу
zbw 12.02.2026
И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.
«Знание-Сила»
zbw 12.02.2026
«Знание-Сила» «Время-Деньги» «Деньги -Пуля»
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров
8Observer8 12.02.2026
Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .
SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image)
8Observer8 11.02.2026
Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .
SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image
8Observer8 10.02.2026
Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .
Установка Qt-версии Lazarus IDE в Debian Trixie Xfce
volvo 10.02.2026
В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru