JavaScript - Custom Functions for Custom Effects: What Have You Donefor Me Lately?(timer, setInterval, clearInterval)

Head First jQuery
(O'Reilly Media)
Ryan Benedetti(著), Ronan Cranley(著)

開発環境

• OS X Yosemite - Apple (OS)
• Safari, Firefox, Google Chrome(Webプラウザ)
• Emacs (CUI)、BBEdit - Bare Bones Software, Inc.(GUI) (Text Editor)
• JavaScript (プログラミング言語)

Head First jQuery(Ryan Benedetti(著)、Ronan Cranley(著)、O'Reilly Media)のChapter 7(Custom Functions for Custom Effects: What Have You Done for Me Lately?)、EXERCISE(No. 3796)を解いてみる。

その他参考書籍

• Head First HTML and CSS
• Head First JavaScript Programming

EXERCISE(No. 3796)

JavaScript(BBEdit, Emacs)

$(document).ready(function(){
    var headclix = 0,
        eyeclix = 0,
        noseclix = 0,
        mouthclix = 0,
        int1,
        int2,
        int3,
        goLighting = function () {
            int1 = setInterval( function () {
                lightning_one();
            }, 4000);
            int2 = setInterval( function () {
                lightning_two();
            }, 5000);
            int3 = setInterval( function () {
                lightning_three();
            }, 7000);
        },
        stopLightning = function () {
            window.clearInterval(int1);
            window.clearInterval(int2);
            window.clearInterval(int3);
        },
        lightning_one = function () {
            $('#container #lightning1').fadeIn(250).fadeOut(250);            
        },
        lightning_two = function () {
            $('#container #lightning2').fadeIn(250).fadeOut(250);
        },
        lightning_three = function () {
            $('#container #lightning3').fadeIn(250).fadeOut(250);
        };
    
 goLighting();
    window.onblur = stopLightning;
    window.onfocus = goLighting;
 $("#head").click(function(){
  if (headclix < 9){
         $("#head").animate({left:"-=367px"},500);
      headclix+=1;
  } else {
   $("#head").animate({left:"0px"},500);
   headclix = 0;
  }
 });
 $("#eyes").click(function(){
  if (eyeclix < 9){
      $("#eyes").animate({left:"-=367px"},500);
   eyeclix+=1;
  } else {
   $("#eyes").animate({left:"0px"},500);
   eyeclix = 0;
  }
 });
 $("#nose").click(function(){
  if (noseclix < 9){
         $("#nose").animate({left:"-=367px"},500);
      noseclix+=1;
  } else {
   $("#nose").animate({left:"0px"},500);
   noseclix = 0;
  }
 });
 $("#mouth").click(function(){
     if (mouthclix < 9){
         $("#mouth").animate({left:"-=367px"},500);
      mouthclix+=1;
  } else {
   $("#mouth").animate({left:"0px"},500);
   mouthclix = 0;
  }
 });
});

index3769.html