WEB骇客

  <table cellspacing="0" class="table">
  <tr>
    <th>Fruits</th>
    <th>Vegetables</th>
    <th>Rocks</th>
  </tr>
  <tr>
    <td>Apple</td>
    <td>Celery</td>
    <td>Granite</td>
  </tr>
  <tr>
    <td>Orange</td>
    <td>Cabbage</td>
    <td>Flint</td>
  </tr>
</table>

<p><button>collapse行1</button></p>

<p><button>hide行1</button></p>

<p><button>重置</button></p>



body {
  text-align: center;
  padding-top: 20px;
  font-family: Arial, sans-serif;
}

table {
  border-collapse: separate;
  border-spacing: 5px;
  border: solid 1px black;
  width: 500px;
  margin: 0 auto;
}

th, td {
  text-align: center;
  border: solid 1px black;
  padding: 10px;
}

.vc {
  visibility: collapse;
}

.vh {
  visibility: hidden;
}

button {
  margin-top: 5px;
}
  (function() {

    /**
    * Capture all errors for this pen
    **/
    window.onerror = function(message, file, line) { return true; }

    /**
    * Capture and kill Web Audio
    **/
    // Kill webKitAudioContext function and mozAudioContext so that they
    // cannot play sounds in the grid
    if (typeof(webkitAudioContext) != "undefined") {
      webkitAudioContext = function() {return false;};
    }

    if (typeof(webkitAudioContext) != "undefined") {
      mozAudioContext = function() {return false;};
    }

    // Kill the browser asking for access to the video cam or audio
    navigator.webkitGetUserMedia = function(params, func) {
      // stop all calls in the grid.
    };

    /**
    * Capture and kill animations after X number of seconds
    **/
    window.__animationDuration = 4000;
    window.__animationsTimedOut = false;
    window.__animationRequests = [];
    window.__requestAnimationFrame = false;
    window.__cancelAnimationFrame = false;

    var vendorsReqestAnimationFrame = ['requestAnimationFrame',
                                       'mozRequestAnimationFrame',
                                       'webkitRequestAnimationFrame'];

    // find the browsers requestAnimationFrame and cancelAnimationFrame
    for(var x = 0; x < vendorsReqestAnimationFrame.length; x++) {
        if(!window.__requestAnimationFrame) {
          window.__requestAnimationFrame = window[vendorsReqestAnimationFrame[x]];
        }
    }

    window.__cancelAnimationFrame = window.cancelAnimationFrame || window.mozCancelAnimationFrame;

    // Wrap the requestAnimationFrame so we can stop it in the future
    var __reqFrame = function(callback, element) {
      // after the timeout we no longer take requests
      if(__animationsTimedOut) {
        return 0;
      }
      else {
        timerID = __requestAnimationFrame(callback, element);
        __animationRequests.push(timerID);

        return timerID;
      }
    }

    for(var x = 0; x < vendorsReqestAnimationFrame.length; x++) {
      window[vendorsReqestAnimationFrame[x]] = __reqFrame;
    }

    // Cancel the animations after expiration
    setTimeout(function() {
      for(var i=0; i < __animationRequests.length; i++) {
        window.__cancelAnimationFrame(__animationRequests[i]);
      }

      __animationsTimedOut = true;
    }, __animationDuration, 'push');

    /**
    * Capture setInterval and setTimeout to kill after X number of seconds
    **/
    window.setInterval = (function(oldSetInterval) {
        var registered = [];

        var f = function(a,b) {
            // check if the time has expired,
            // after __animationDuration expires don't take anymore setIntervals
            if(this.timedOut) {
              return 0;
            }
            else {
              return registered[ registered.length ] = oldSetInterval(a,b);
            }
        };

        f.clearAll = function() {
            var r;

            while(r = registered.pop()) {
               clearInterval( r );
            }

            this.timedOut = true;
        };

        f.timedOut = false;

        return f;
    })(window.setInterval);

    window.setTimeout = (function(oldSetTimeout) {
        var registered = [];

        // because some of our timeouts may time out afterwards
        // we want to make sure they know the secret sauce to still use
        // setTimeout after the time has expired, thats why we have a
        // third param
        var f = function(a,b, push) {
            // check if the time has expired,
            // after __animationDuration expires don't take anymore requests
            if(this.timedOut && typeof(push) == 'undefined') {
              return 0;
            }
            else {
              // If push is there, never clear that interval
              // so never add it to the registry
              if(push) {
                return oldSetTimeout(a,b);
              }
              else {
                return registered[ registered.length ] = oldSetTimeout(a,b);
              }
            }
        };

        f.clearAll = function() {
            var r;

            while(r = registered.pop()) {
               clearTimeout( r );
            }

            this.timedOut = true;
        };

        f.timedOut = false;

        return f;
    })(window.setTimeout);

    setTimeout(function() {
      setTimeout.clearAll();
      setInterval.clearAll();
    }, __animationDuration, 'push');

  }());


var btns = document.getElementsByTagName('button'),
    rows = document.getElementsByTagName('tr');

btns[0].addEventListener('click', function () {
  rows[1].className = 'vc';
}, false);

btns[1].addEventListener('click', function () {
  rows[1].className = 'vh';
}, false);

btns[2].addEventListener('click', function () {
  rows[1].className = '';
}, false);

  (function() {

    setTimeout(function() {
      // If onload hasn't been called, stop all requests after 2 seconds
      if(typeof(_l) == 'undefined') {
        if(window.stop !== undefined) window.stop();
        else if(document.execCommand !== undefined) document.execCommand("Stop", false);
      }
    }, 2000, 'push');

    /*
    * Capture and kill CSS animations after X number of seconds
    */
    function pauseAnimations() {
      var body = document.getElementsByTagName('body')[0];

      if(body.addEventListener) {
        body.addEventListener("webkitAnimationStart", listener, false);
        body.addEventListener("webkitAnimationIteration", listener, false);
        body.addEventListener("animationstart", listener, false);
        body.addEventListener("animationiteration", listener, false);
      }
    }

    function listener(e) {
      if(e.type == "webkitAnimationStart" || e.type == "webkitAnimationIteration") {
        var targetEl = e.target;

        setTimeout(function() {
          targetEl.style.webkitAnimationPlayState = 'paused';
        }, __animationDuration, 'push');
      }
      else if(e.type == "animationstart" || e.type == "animationiteration") {
        var targetEl = e.target;

        setTimeout(function() {
          targetEl.style.MozAnimationPlayState = 'paused';
        }, __animationDuration, 'push');
      }
    }

    pauseAnimations();

    // Pause all audio elements, allow the audio/video
    // elements to render before stopping them
    function pauseElementTypes(type) {
      for (var i = 0, els = document.getElementsByTagName(type); i < els.length; i++) {
        els[i].pause();
      }
    }

    // Wait until the elements have been created to pause them
    setTimeout(function() {
      pauseElementTypes('audio');
      pauseElementTypes('video');
    }, 100);

  }());
返回