2

введите сюда описание изображения Есть рисунок svg -шный , там необходимо чтоб лента (белого цвета) по нажатию мигала зеленым цветом ,а коробок медленно двигался по этой ленте , при повторном нажатии останавливался или же дальше двигалась коробочка по ленте . Как можно это реализовать ?

HTML

    <!DOCTYPE html>
<html lang="en">

<head>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/menu.css">
    <script src="biblioteka/bibl.jquery"></script>
    <script src="js/menu.js" type="text/javascript"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script src="biblioteka/Chart.js"></script>
    <script src="js/script.js" type="text/javascript"></script>
    <script src="js/menu.js" type="text/javascript"></script>
    <meta charset="UTF-8">
    <title>СЕВГОК</title>
</head>

<header id="header-1">    
    <p class="pump1">ЧАО "ЦГОК" ЦПО 1 УЧАСТОК №2<br>
    Гистограммы распределения гранулометрического состава окатышей<br>
    по чашевым окомкователям</p>
</header>
    <div id="clock" style="height:40px">

    <script>
setInterval(function(){
var d = new Date();
document.getElementById('clock').innerHTML = d.toLocaleTimeString();
},1000);
</script>
</div>

<body>
    <script type="text/javascript" src = "javascript.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button  class="but1" >Пуск конвейера</button>
   <div class="container">
      <div id="icon" style= "text-align:center;">

      <!-- КОНВЕЙЕР -->

      <object   id="convier"   type="image/svg+xml"   data="images/CONVIER.svg"   width="1920"   height="600"></object>


      </div>

   </div>
    <div id="mainmenu">
    <ul>
        <li><a href="index.php">График реальный</a></li>
        <li><a href="page2.php">График за час</a></li>
        <li><a href="page3.php">График за смену</a></li>
        <li><a href="page4.php">График за сутки</a></li>
    </ul>
</div>    <!--первый график-->
</body>

</html>

ОБЬЕКТ КОРОБКА

    <g>
    <rect x="-1242" y="1847.9" id="st3" width="616" height="592"/>
    <rect x="-1098" y="2023.9" id="st4" width="344" height="264"/>
    <rect x="-1091" y="2103.9" id="st5" width="336" height="80"/>
    <g>
        <rect x="-952.4" y="1493.1" id="st3" width="30.5" height="164"/>

            <rect x="-1186" y="1555.7" transform="matrix(0.866 -0.5 0.5 0.866 -975.6908 -365.9571)" id="st3" width="30.5" height="164"/>

            <rect x="-1357" y="1726.7" transform="matrix(0.5 -0.866 0.866 0.5 -2237.2253 -257.6283)" id="st3" width="30.5" height="164"/>

            <rect x="-547.8" y="1726.7" transform="matrix(0.5 0.866 -0.866 0.5 1300.0775 1365.5593)" id="st3" width="30.5" height="164"/>
        <rect x="-718.8" y="1555.7" transform="matrix(0.866 0.5 -0.5 0.866 724.5828 571.1907)" id="st3" width="30.5" height="164"/>
    </g>
</g>

ЛЕНТА

 <path id="st1" d="M8440.2,3728.9H-2280.6c-331.4,0-600-268.6-600-600v0c0-331.4,268.6-600,600-600l10720.8,0
    c331.4,0,600,268.6,600,600v0C9040.2,3460.3,8771.6,3728.9,8440.2,3728.9z"/>

СТИЛИ

    <style type="text/css">
    #st0{fill:#FC1717;stroke:#000000;stroke-miterlimit:10;}
    #st1{fill:none;stroke:#FFFFFF;stroke-width:20;stroke-linecap:round;stroke-miterlimit:10;}
    #st2{stroke:#000000;stroke-miterlimit:10;}
    #st3{fill:#FFFFFF;stroke:#000000;stroke-miterlimit:10;}
    #st4{fill:#F48282;stroke:#000000;stroke-miterlimit:10;}
    #st5{fill:#FF0000;stroke:#000000;stroke-miterlimit:10;}
</style>

1 ответ 1

3

Не знаю, как на счёт мигающей зелёной линии на красном фоне... Я это вижу так:

window.onload = function() {
  let oConveyor = document.querySelector('#conveyor');
  let oBeltMove = document.querySelector('#belt_move');
  let oBeltAlarm = document.querySelector('#belt_alarm');
  let oBoxMove = document.querySelector('#box_move');
  let oBoxAlarm = document.querySelector('#box_alarm');
  document.querySelector('.but1').addEventListener('click', function() {
    if (oConveyor.animationsPaused()) {
      oConveyor.unpauseAnimations();
      oBeltMove.style.animationPlayState = 'running';
      oBeltAlarm.classList.remove('belt_alarm');
      oBoxMove.style.animationPlayState = 'running';
      oBoxAlarm.classList.remove('box_alarm');
    } else {
      oConveyor.pauseAnimations();
      oBeltMove.style.animationPlayState = 'paused';
      oBeltAlarm.classList.add('belt_alarm');
      oBoxMove.style.animationPlayState = 'paused';
      oBoxAlarm.classList.add('box_alarm');
    }
  });
  /*
    setInterval(function() {
      var d = new Date();
      document.getElementById('clock').innerHTML = d.toLocaleTimeString('ru-RU');
    }, 1000);
    */
}
#conveyor {
  width: 100%;
}
#belt_move {
  animation: belt_move 1s infinite linear;
}
.belt_alarm {
  animation: belt_alarm 1s infinite linear;
}
#box_move {
  animation: box_move 12.65s infinite linear;
}
.box_alarm {
  animation: box_alarm .5s linear infinite;
}
@keyframes box_move {
  0%, 100% {
    stroke: rgba(0, 0, 0, 0);
    fill: rgba(0, 153, 0, 0);
  }
  10%, 90% {
    stroke: rgba(0, 0, 0, 1);
    fill: rgba(0, 153, 0, 1);
  }
}
@keyframes box_alarm {
  0%, 60% { fill: rgba(255, 0, 0, 1); }
  61%, 100% { fill: rgba(255, 0, 0, 0); }
}
@keyframes belt_move {
  to { stroke-dashoffset: 5; }
}
@keyframes belt_alarm {
  0%, 100% { stroke: rgba(255, 0, 0, 0); }
  50% { stroke: rgba(255, 0, 0, 1); }
}
<body>
  <header id="header-1">
    <p class="pump1">ЧАО "ЦГОК" ЦПО 1 УЧАСТОК №2<br> Гистограммы распределения гранулометрического <br>состава окатышей по чашевым окомкователям</p>
  </header>
  <div id="clock" style="height:40px"></div>
  <button class="but1">Пуск конвейера</button>
  <div class="container">
    <div id="icon" style="text-align:center;">

      <!-- Conveyor -->
      <svg id="conveyor" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 30">
        <defs>
          <!-- Сhain star reference -->
          <circle id="c" cx="20" cy="20" r="4" stroke="#808080" fill="none" stroke-width="4"/>
          <path id="d" stroke="#808080" stroke-width="2" d="M20 13 V16 M27 20 H24 M20 27 V24 M13 20 H16"/>
          <g id="cog">
            <use xlink:href="#c"/>
            <use xlink:href="#d"/>
            <use xlink:href="#d" transform="rotate(45 20 20)"/>
          </g>
          <!-- Box reference -->
          <rect id="box" x="13" y="2" width="10" height="10" stroke-width="1"/>
        </defs>
        <!-- Alarm belt -->
        <path id="belt_alarm" stroke-width="2" stroke="transparent" fill="transparent" d="M21.3 13.5 H20 C11.4 13.5 11.4 26.5 20 26.5 H80 C89 26.5 89 13.5 80.8 13.5z" />
        <!-- Conveyor belt -->
        <path id="belt_move" stroke-width="1" stroke="#000" fill="transparent" stroke-dasharray="2.6 2.45" d="M21.3 13.5 H20 C11.4 13.5 11.4 26.5 20 26.5 H80 C89 26.5 89 13.5 80.8 13.5z" />
        <!-- 1st chain star -->
        <use xlink:href="#cog">
          <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="-337.5 20 20" to="22.5 20 20" dur="8s" repeatCount="indefinite"/>
        </use>
        <g transform="translate(60.45 0)">
          <!-- 2nd chain star -->
          <use xlink:href="#cog">
            <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="-337.5 20 20" to="22.5 20 20" dur="8s" repeatCount="indefinite"/>
          </use>
        </g>
        <!-- Box -->
        <g id="box_move">
          <g id="box_alarm">
            <use xlink:href="#box">
              <animateTransform attributeType="xml" attributeName="transform" type="translate" from="0 0" to="64 0" dur="12.65s" repeatCount="indefinite"/>
            </use>
          </g>
        </g>
      </svg>

    </div>
  </div>
  <div id="mainmenu">
    <ul>
      <li><a href="index.php">График реальный</a></li>
      <li><a href="page2.php">График за час</a></li>
      <li><a href="page3.php">График за смену</a></li>
      <li><a href="page4.php">График за сутки</a></li>
    </ul>
  </div>
  <!--первый график-->
</body>

Источник

8
  • Это именно то что нужно ,спасибо огромное ) Сейчас гляну как скрипт себя ведет в IE11
    – Karter
    24 сен 2018 в 5:25
  • @Karter с IE может быть всё сложно ((... Я пишу под Chome 49 на WinXP, ибо многие конторы консервативны и медленно переходят на новые ОС, а "плюшек" каких-никаких им хочется)). А IE, даже в таких конторах, используют только для пары определённых сайтов.
    – UModeL
    24 сен 2018 в 6:58
  • Честно ,Иешку использую только для того чтоб скачать нормальный браузер но завод для которого я делаю проект спонсируется Microsoft и им нельзя другую продукцию использовать по этому и мучаюсь сижу (
    – Karter
    24 сен 2018 в 7:04
  • Может есть тогда вариантик как это добро адаптировать под Иеху ?
    – Karter
    24 сен 2018 в 7:05
  • @Karter увы, но мне даже протестировать не на чем((... Сильно расползается, да?
    – UModeL
    24 сен 2018 в 7:07

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.