Javascript / css 在 Inte.net Explorer 中不工作

Question

我正在通过浏览器测试网站（例如 Lambda 测试）在 Inte.net Explorer 上测试我的网站 - 但它根本无法正常工作。 什么也没有发生，没有动静。 这是怎么回事，我该如何解决？ 我已经在 IE 11 和 IE 9 上测试过了。

来自这篇文章： 如何在 Windows 中启用 JavaScript

看起来有时您必须手动启用 javascript，我假设像 lambda 测试这样的网站已经启用了此功能。 我用的是 Mac，所以我实际上不能使用 IE。

更新 - CSS：

 img
{
  display:none;
  height: 400px;
}


 img.invisible
{
  visibility: hidden;
}

img.show
{
  display:inline;
}

img.anim1
{
  animation-duration: 2000ms;
}

 img.anim2
{
  animation-duration: 2000ms;
}

img.anim3
{
  animation-duration: 2000ms;
}


.fadeIn
{
  animation-name: fadeIn;
}

@keyframes fadeIn 
{
 0% {opacity: 0;}
 100% {opacity: 1;}
}


@-ms-keyframes fadeIn 
{
 0% {opacity: 0;}
 100% {opacity: 1;}
}

.fadeOut
{
  animation-name: fadeOut;
}

@-ms-keyframes fadeOut 
{
 0% {opacity: 1;}
 100% {opacity: 0; display:none;}
}

    
    <section class="conA">
    <div id="container">
      <div id="heroText">
         <p>Lorem ipsum</p>
        <div id="text"></div>
      </div>
      <div id="images"></div>
    </div>
    </section>
    
    
    
    <script type="text/javascript">
    
    var _CONTENT = [ "lorem ipsum", "example sentence"
    , "example 2", "example 3" ];
    
    
    var IMAGE_URLS = ['img/image2.png', 'img/image1.png', 'img/image3.png', 'img/image1.png','img/image2.png','img/image3.png', 'img/image4.png','img/image5.png','img/image6.png','https://www.gravatar.com/avatar/a235706e3d81b614acaec3368edfea4b?s=96&d=identicon&r=PG','https://i.stack.imgur.com/qxeUf.jpg?s=96&g=1','https://i.stack.imgur.com/4xczZ.jpg?s=96&g=1'];
    
    var IMAGES = IMAGE_URLS.map((url, index) =>
    {
      var img = document.createElement('img');
      img.setAttribute('src', url);
      img.classList.add('anim'+((index%3)+1));
      img.classList.add('fadeOut');
      document.getElementById('images').appendChild(img);
      return img;
    });
    
    var _PART = 0;
    
    var _PART_INDEX = 0;
    
    var _INTERVAL_VAL;
    
    var _ELEMENT = document.querySelector("#text");
    
    function Type() { 
      var text =  _CONTENT[_PART].substring(0, _PART_INDEX + 1);
      _ELEMENT.innerHTML = text;
      _PART_INDEX++;
    
      if(text === _CONTENT[_PART]) {
    
      let imgIndexBase = _PART*3;
        IMAGES[imgIndexBase].classList.remove('fadeOut');
        IMAGES[imgIndexBase+1].classList.remove('fadeOut');
        IMAGES[imgIndexBase+2].classList.remove('fadeOut');
        setTimeout(function() { IMAGES[imgIndexBase].classList.add('fadeIn','show'); }, 0);
        setTimeout(function() { IMAGES[imgIndexBase].classList.add('fadeOut'); }, 2000);
        setTimeout(function() { IMAGES[imgIndexBase].classList.remove('fadeOut','show'); }, 3000);
        setTimeout(function() { IMAGES[imgIndexBase+1].classList.add('fadeIn','show'); }, 3000);
        setTimeout(function() { IMAGES[imgIndexBase+1].classList.add('fadeOut'); }, 5000);
        setTimeout(function() { IMAGES[imgIndexBase+1].classList.remove('fadeOut','show'); }, 7000);
        setTimeout(function() { IMAGES[imgIndexBase+2].classList.add('fadeIn','show'); }, 7000);
        setTimeout(function() { IMAGES[imgIndexBase+2].classList.add('fadeOut'); }, 9000);
        setTimeout(function() { IMAGES[imgIndexBase+2].classList.remove('fadeOut','show'); }, 10000);
      
    
    
    
        clearInterval(_INTERVAL_VAL);
        setTimeout(function() {
          _INTERVAL_VAL = setInterval(Delete, 50);
        }, 11000);
    
      }
    }
    
    
    
        function Delete() {
      var text =  _CONTENT[_PART].substring(0, _PART_INDEX - 1);
      _ELEMENT.innerHTML = text;
      _PART_INDEX--;
    
      // If sentence has been deleted then start to display the next sentence
      if(text === '') {
     
    
    
        clearInterval(_INTERVAL_VAL);
    
        // If last sentence then display the first one, else move to the next
        if(_PART == (_CONTENT.length - 1))
          _PART = 0;
        else
          _PART++;
        _PART_INDEX = 0;
    
        // Start to display the next sentence after some time
        setTimeout(function() {
          _INTERVAL_VAL = setInterval(Type, 100);
        }, 500);
      }
    }
    
    _INTERVAL_VAL = setInterval(Type, 100);
    
    </script>

Answer 1

你尝试使用IE不支持的lambda函数和map ES6 function。 如果你使用 jQuery 那么你可以使用 jQuery 的等价于 ES6 map function：

var mappedArray = $.map(realArray, function(val, i ) {
  // Do something
});

您还应该使用 var 而不是 let 和 const 关键字，它们也不被 IE 支持。

替换你的阵列 function

IMAGE_URLS.map((url, index) => {} 

和：

jQuery.map(IMAGE_URLS, function (url, index)
{
  //mapping code here
}

Answer 2

对于 es6 语法问题，我认为你已经根据评论和更早的答案进行了更正。 您应该在代码中修复另一个问题： IE 11 不支持classList 中的add()和remove()的classList 。 所以你不能使用像这样的代码

setTimeout(function() { IMAGES[imgIndexBase].classList.add('fadeIn','show'); }, 0);

您需要将其更改为

setTimeout(function () { IMAGES[imgIndexBase].classList.add('fadeIn'); }, 0);
setTimeout(function () { IMAGES[imgIndexBase].classList.add('show'); }, 0);

对于代码中包含多个 arguments 的其他classList.add() & classList.remove()也是一样的。

所以你的代码片段的编辑部分如下所示：

//edit arrow function

var IMAGES = IMAGE_URLS.map(function (url, index) {
    var img = document.createElement('img');
    img.setAttribute('src', url);
    img.classList.add('anim' + (index % 3 + 1));
    img.classList.add('fadeOut');
    document.getElementById('images').appendChild(img);
    return img;
}); 

//edit classList in function Type()

let imgIndexBase = _PART * 3;
IMAGES[imgIndexBase].classList.remove('fadeOut');
IMAGES[imgIndexBase + 1].classList.remove('fadeOut');
IMAGES[imgIndexBase + 2].classList.remove('fadeOut');
setTimeout(function () { IMAGES[imgIndexBase].classList.add('fadeIn'); }, 0);
setTimeout(function () { IMAGES[imgIndexBase].classList.add('show'); }, 0);
setTimeout(function () { IMAGES[imgIndexBase].classList.add('fadeOut'); }, 2000);
setTimeout(function () { IMAGES[imgIndexBase].classList.remove('fadeOut'); }, 3000);
setTimeout(function () { IMAGES[imgIndexBase].classList.remove('show'); }, 3000);
setTimeout(function () { IMAGES[imgIndexBase + 1].classList.add('fadeIn'); }, 3000);
setTimeout(function () { IMAGES[imgIndexBase + 1].classList.add('show'); }, 3000);
setTimeout(function () { IMAGES[imgIndexBase + 1].classList.add('fadeOut'); }, 5000);
setTimeout(function () { IMAGES[imgIndexBase + 1].classList.remove('fadeOut'); }, 7000);
setTimeout(function () { IMAGES[imgIndexBase + 1].classList.remove('show'); }, 7000);
setTimeout(function () { IMAGES[imgIndexBase + 2].classList.add('fadeIn'); }, 7000);
setTimeout(function () { IMAGES[imgIndexBase + 2].classList.add('show'); }, 7000);
setTimeout(function () { IMAGES[imgIndexBase + 2].classList.add('fadeOut'); }, 9000);
setTimeout(function () { IMAGES[imgIndexBase + 2].classList.remove('fadeOut'); }, 10000);
setTimeout(function () { IMAGES[imgIndexBase + 2].classList.remove('show'); }, 10000);

结果在 IE 11 中：