Question

有没有办法可以将脚本增强为自动加载而不是使用按钮。还有一种方法可以在此脚本中包含淡入式样式。

<script>
var content = [
  "Headline",
  "Headline 1",
  "Headline 2",
  "Headline 3",
];
var msgPtr = 0;
var stopAction = null;

function change() {
  var newMsg = content[msgPtr];
  document.getElementById('change').innerHTML = 'Breaking News: '+msgPtr+'<p>'+newMsg;
  msgPtr++;  msgPtr = (msgPtr % content.length);
}

function startFunction() { change();  stopAction = setInterval(change, 4000); }
function stopFunction() { clearInterval(stopAction); }

</script>

Answer 1

使用您当前的代码，您只需添加startFunction();然后结束即可自动启动。

让它淡入淡出有点复杂。我会做这样的事情：

// encapsulate in an object this IIFE returns
var headlines = (function () {
    'use strict';
  var content = [
      "Headline",
      "Headline 1",
      "Headline 2",
      "Headline 3",
    ],
    running = false,
    displayForMs = 4000,
    msgPtr = 0,
    stopAction = null,
    display = document.getElementById('change');

  // just updates the message in the element
  function changeMsg() {
    var newMsg = content[msgPtr];
    display.innerHTML = 'Breaking News: '+msgPtr+'<p>'+newMsg;
    msgPtr += 1;
    msgPtr = msgPtr % content.length;
  }

  function hide () {
    display.classList.add('hide');
  }

  function show () {
    display.classList.remove('hide');
  }

  function update () {
    var opacity = window.getComputedStyle(display).opacity;

    // fade out has ended, change message and fade in
    if (opacity === '0') {
      changeMsg();
      show();
    // fade in has ended, start waiting to trigger update
    } else if (opacity === '1') {
        stopAction = setTimeout(hide, displayForMs);
    }
  }

  display.addEventListener('transitionend', update, false);

  function startFunction() {
    running = true;
        // hiding causes an update()
    // update does not trigger if the element
    // is already invisible, show() to ensure
    // it has an opacity over 0
        show();
    // we have to wait for a repaint before calling hide
    // if we don't the hide class will be removed and readded
    // in the same frame too fast for the opacity to change
    // and the update will never fire
    requestAnimationFrame(function () {
      hide();
    });
  }

  function stopFunction() {
    running = false;
    clearTimeout(stopAction);
    // remove hide class just to continue to display
    // message and prevent another call to update
    // in case it was mid-fade out
    display.classList.remove('hide');
  }

  return {
    start: startFunction,
    stop: stopFunction,
    get running () {
        return running;
    }
  };
}());

var toggle = document.getElementById('headline-toggle');
toggle.addEventListener('click', function () {
    if (headlines.running) {
    headlines.stop();
    toggle.textContent = "Resume";
  } else {
    headlines.start();
    toggle.textContent = "Stop";
  }
}, false);

headlines.start();

这需要将.change类添加到#change元素并添加此CSS：

.change.hide {
  opacity: 0;
}

.change {
  opacity: 1;
  transition: opacity 1s;
}

代码使用CSS过渡来隐藏和显示元素，方法是添加和删除hide类。 transitionend event检测到元素的不透明度为'0'，然后调用update，通过changeMsg更改消息，然后调用show。 show通过删除'hide'类来显示该元素。当元素的不透明度为update时，将再次调用'1'，这会触发超时以触发下一个淡出。

Functioning example here

更新2016-08-29 我已经改变了淡入淡出代码的工作方式。现在，一旦淡入完成，就会触发计时器，允许显示完整displayForMs计数的消息，而不是受到转换长度的影响。我也改变了开始;它不再需要在调用元素时可见。我还向.running添加了headlines属性，以便您可以查询它当前是否正在运行。 jsFiddle使用它来使用单个切换按钮而不是单独的“开始”和“停止”按钮。

更新2016-09-02 我更新了示例，我添加了strict mode并将.running转换为getter而不是函数。这样您就可以if (headlines.running)代替if (headlines.running())。

另外，我已经为这个答案创建了一个micro-library based on the code。如果您使用凉亭，可以使用bower install headline-fader安装它。

使用它，做类似于你在代码中做的事情，加上自动启动它，你会这样做：

var headlineElement = document.getElementById('change'),
  myHeadlines = headlineFader(headlineElement, {
    headlines: [
      'Headline',
      'Headline 1',
      'Headline 2',
      'Headline 3',
    ],
    wait: 4000, // this is optional, the library defaults to 7000
  });

myHeadlines.start();

如何启用JavaScript自动加载功能？

1 个答案: