Nano Hash - криптовалюты, майнинг, программирование

Кнопка Ionic angularjs светится при ng-click

Я разрабатываю ионное приложение, в котором у меня есть следующее требование:

введите здесь описание изображения

При нажатии кнопки Старт кнопки начинают светиться в случайном порядке в течение нескольких заранее определенных миллисекунд, а после того, как они останавливаются, пользователь должен нажимать кнопки, чтобы они мигали в течение следующих 3 секунд. Если он преуспевает, то уровень 1 завершен.

Пока у меня просто есть html-кнопки с css, которые заставляют кнопку светиться, как показано на прикрепленном снимке экрана. Как я могу реализовать какой-то метод в моем контроллере, который будет запускать эффект свечения и обрабатывать все эти временные интервалы? $interval кажется вариантом для более позднего.

Мой css:

.large_button {
  line-height: 10vh !important;
  width: 50%;
  }

.start-button {
  line-height: 5vh !important;
  width: 15%;
  }  

.button {
  background-color: #004A7F;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  border: none;
  color: #FFFFFF;
  cursor: pointer;
  display: inline-block;
  font-family: Arial;
  font-size: 20px;
  padding: 5px 10px;
  text-align: center;
  text-decoration: none;
}
@-webkit-keyframes glowing1 {
  0% { background-color: #B20000; -webkit-box-shadow: 0 0 3px #B20000; }
  50% { background-color: #FF0000; -webkit-box-shadow: 0 0 40px #FF0000; }
  100% { background-color: #B20000; -webkit-box-shadow: 0 0 3px #B20000; }
}

@-webkit-keyframes glowing2 {
  0% { background-color: #228B22; -webkit-box-shadow: 0 0 3px #228B22; }
  50% { background-color: #7CFC00; -webkit-box-shadow: 0 0 40px #7CFC00; }
  100% { background-color: #228B22; -webkit-box-shadow: 0 0 3px #228B22; }
}

@-webkit-keyframes glowing3 {
  0% { background-color: #CCCC00; -webkit-box-shadow: 0 0 3px #CCCC00; }
  50% { background-color: #FFFF00; -webkit-box-shadow: 0 0 40px #FFFF00; }
  100% { background-color: #CCCC00; -webkit-box-shadow: 0 0 3px #CCCC00; }
}

@-webkit-keyframes glowing4 {
  0% { background-color: #0000FF; -webkit-box-shadow: 0 0 3px #0000FF; }
  50% { background-color: #1E90FF; -webkit-box-shadow: 0 0 40px #1E90FF; }
  100% { background-color: #0000FF; -webkit-box-shadow: 0 0 3px #0000FF; }
}

#button1 {
  -webkit-animation: glowing1 1000ms infinite;
}

#button2 {
    color: #000000;
  -webkit-animation: glowing2 1000ms infinite;

}

#button3 {
    color: #B8860B;
  -webkit-animation: glowing3 1000ms infinite;

}

#button4 {
  -webkit-animation: glowing4 1000ms infinite;

}

Мой HTML:

<ion-view view-title="Dashboard">
  <ion-content class="padding">


    <div padding align="center">
      <h2>Please select a button!</h2>
    </div>
    <!-- First row of buttons -->
    <div class="row">

      <!-- First column -->  
      <div class="col col-50 col-offset-10" style="padding-top:1cm;">
        <button type="submit" class="button large_button" id="button1">Click me!</button>
      </div>

      <!-- First column -->
      <div class="col col-50" style="padding-top:1cm;">
        <button type="submit" class="button large_button" id="button2">Click me!</button>
      </div>

    </div>

    <div class="row">

      <!-- First column -->  
      <div class="col col-50 col-offset-10" style="padding-top:1cm;">
        <button type="submit" class="button large_button" id="button3">Click me!</button>
      </div>

      <!-- First column -->
      <div class="col col-50" style="padding-top:1cm;">
        <button type="submit" class="button large_button" id="button4">Click me!</button>
      </div>

    </div>

    <div align="center">
      <button class="button button-bar button-dark start-button" ng-click="startAnimation()">Start</button>
    </div>

    <div align="left" style="padding-left:5cm;padding-top:1cm;">
      <h1>Level 1 
      <i class="icon ion-android-checkbox"></i></h1>
    </div>


  </ion-content>
</ion-view>

Также я могу оптимизировать этот код?

ionic-framework angularjs
30.06.2016

Ответы:


1

Я использовал ng-class для всех кнопок, чтобы применить css при нажатии кнопки Пуск. Я использовал директиву $interval, чтобы активировать свечение на 2 миллисекунды.

Мой HTML

<ion-view view-title="Dashboard">
  <ion-content class="padding">


    <div padding align="center">
      <h2>Please select a button!</h2>
    </div>
    <!-- First row of buttons -->
    <div class="row">

      <!-- First column -->  
      <div class="col col-50 col-offset-10" style="padding-top:1cm;">
        <button type="submit" class="button large_button" ng-class="{'button1': isActive}" id="button1">Click me!</button>
      </div>

      <!-- First column -->
      <div class="col col-50" style="padding-top:1cm;">
        <button type="submit" class="button large_button" ng-class="{'button2': isActive}" id="button2">Click me!</button>
      </div>

    </div>

    <div class="row">

      <!-- First column -->  
      <div class="col col-50 col-offset-10" style="padding-top:1cm;">
        <button type="submit" class="button large_button" ng-class="{'button3': isActive}" id="button3">Click me!</button>
      </div>

      <!-- First column -->
      <div class="col col-50" style="padding-top:1cm;">
        <button type="submit" class="button large_button" ng-class="{'button4': isActive}" id="button4">Click me!</button>
      </div>

    </div>

    <div align="center">
      <button class="button button-bar button-dark start-button" ng-click="start()" >Start</button>
    </div>

    <div align="left" style="padding-left:5cm;padding-top:1cm;">
      <h1>Level 1 
      <i class="icon ion-android-checkbox"></i>
      </h1>
    </div>


  </ion-content>
</ion-view>

Мой CSS

.large_button {
  line-height: 10vh !important;
  width: 50%;
  }

.start-button {
  line-height: 5vh !important;
  width: 15%;
  }  

.button {
  background-color: #004A7F;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  border: none;
  color: #FFFFFF;
  cursor: pointer;
  display: inline-block;
  font-family: Arial;
  font-size: 20px;
  padding: 5px 10px;
  text-align: center;
  text-decoration: none;
}
@-webkit-keyframes glowing1 {
  0% { background-color: #B20000; -webkit-box-shadow: 0 0 3px #B20000; }
  50% { background-color: #FF0000; -webkit-box-shadow: 0 0 40px #FF0000; }
  100% { background-color: #B20000; -webkit-box-shadow: 0 0 3px #B20000; }
}

@-webkit-keyframes glowing2 {
  0% { background-color: #228B22; -webkit-box-shadow: 0 0 3px #228B22; }
  50% { background-color: #7CFC00; -webkit-box-shadow: 0 0 40px #7CFC00; }
  100% { background-color: #228B22; -webkit-box-shadow: 0 0 3px #228B22; }
}

@-webkit-keyframes glowing3 {
  0% { background-color: #CCCC00; -webkit-box-shadow: 0 0 3px #CCCC00; }
  50% { background-color: #FFFF00; -webkit-box-shadow: 0 0 40px #FFFF00; }
  100% { background-color: #CCCC00; -webkit-box-shadow: 0 0 3px #CCCC00; }
}

@-webkit-keyframes glowing4 {
  0% { background-color: #0000FF; -webkit-box-shadow: 0 0 3px #0000FF; }
  50% { background-color: #1E90FF; -webkit-box-shadow: 0 0 40px #1E90FF; }
  100% { background-color: #0000FF; -webkit-box-shadow: 0 0 3px #0000FF; }
}

.button1 {
  -webkit-animation: glowing1 1000ms infinite;
}

.button2 {
    color: #000000;
  -webkit-animation: glowing2 1000ms infinite;

}

.button3 {
    color: #B8860B;
  -webkit-animation: glowing3 1000ms infinite;

}

.button4 {
  -webkit-animation: glowing4 1000ms infinite;

}

Контроллер

.controller('DashCtrl', function($scope, $interval) {

    $scope.Timer = null;

    $scope.start = function(){

      $scope.isActive = !$scope.isActive;

      $scope.Timer = $interval(function(){

        $scope.isActive = !$scope.isActive;
        $interval.cancel($scope.Timer);

      }, 2000);

    }

})
30.06.2016
Новые материалы
Кластеризация: более глубокий взгляд
Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
Как написать эффективное резюме
Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
Частный метод Python: улучшение инкапсуляции и безопасности
Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
Как я автоматизирую тестирование с помощью Jest
Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..