如何使用 javascript 函数并在 3 个不同的时间间隔 onclick 上更改图像？答案

【问题标题】：How do I take a javascript function and change an image on 3 separate time intervals onclick?如何使用 javascript 函数并在 3 个不同的时间间隔 onclick 上更改图像？
【发布时间】：2018-12-16 22:04:30
【问题描述】：

场景：

我目前有一张 gif 格式的背景图片。作为一个很酷的过渡，我想通过单击按钮来编辑图像。
我在代码笔上发现了这个非常棒的像素化功能：
https://codepen.io/crosslab/pen/ZLJxRj。
我希望用户可以点击一个按钮和 3 个阶段的像素效果到图像。
例如;在 300 毫秒 30% 像素化、600 毫秒 60% 像素化和 900 毫秒 90% 像素化。

我该怎么做？
我也愿意接受任何其他关于如何创建这种效果的建议，可能任何更多扭曲的效果都会很棒。
例如，这支笔有一个很酷的效果：https://codepen.io/anon/pen/OrMOWV

感谢观看！

<div class="footage">
</div>

<button class="menu1">
  <p class="">
    GO!
  </p>
</button>

.footage {
    height: 100vh;
    background-size: cover;
    background-position: center;
    transition: 2s ease-in-out;
    background-repeat: no-repeat;
    width: 100vw;
    background-image: url(https://media1.giphy.com/media/17qXCJ8dGZHjy/giphy.gif?cid=3640f6095c14c459364b487a410e8fa3);
    background-attachment: fixed;
    opacity: 1;
    position: absolute;
    top: 0px;
    left: 0px;
}

button {
  position: absolute;
  top: 10vh;
  left: 5vw;
}

【问题讨论】：

你不关心任何答案吗？ - 为什么？ -

标签： javascript jquery html css

【解决方案1】：

通过使用 setInterval / clearInterval...

var
  ref_Interval   = 0, 
  TimeDuration   = 0,
  clickStage     = 0
  ;      
const
  TimeLapsStep   = 100,  // ms
  TimeLimit      = 10000,
  info_TimeLapse = document.querySelector('#TimeLapse > span')
  ;
 
document.getElementById('TimingButton').onclick = function()
{
  switch (clickStage)
  {
    case 0:
        TimeDuration = 0;
        clearInterval(ref_Interval);
        ref_Interval = setInterval(TimeLapse_indent,TimeLapsStep);

        info_TimeLapse.textContent = '0ms, started...';
        clickStage++;
        break;
    case 1:
        info_TimeLapse.textContent = TimeDuration.toString() + 'ms, 1st stage.';
        clickStage++;
        break;
    case 2:
        clearInterval(ref_Interval);
        info_TimeLapse.textContent = TimeDuration.toString() + 'ms, 2nd stage - end.';
        clickStage   = 0;
        break;
  }
}
    
function TimeLapse_indent()
{
    TimeDuration+=TimeLapsStep;
    if (TimeDuration > TimeLimit)
    {
      clearInterval(ref_Interval);
      clickStage = 0;
      info_TimeLapse.textContent = 'out of Limit (' + TimeLimit.toString() + 'ms), stoped.';
    }
}

    <div id="TimeLapse"> time lapse = <span>none</span></div>

    <button id="TimingButton">TimingButton</button>

【讨论】：