HHH_Course/goto.js

$(window).bind('scroll', function (e) {
  parallaxScroll();
});
function parallaxScroll() {
  var scrolled = $(window).scrollTop();
  // 困擾
  $('#circle2').css('top', (350 - (scrolled * .2)) + 'px');
  $('#circle3').css('top', (1000- (scrolled * .2)) + 'px');
  $('#circle1').css('top', (650 - (scrolled * .2)) + 'px');
// 課程大綱
  $('#act1').css('top', (30 + (scrolled * .1)) + 'px');
  $('#act2').css('top', (800 - (scrolled * .2)) + 'px');
  $('#act3').css('top', (300 - (scrolled * .1)) + 'px');
  $('#act4').css('top', (0 + (scrolled * .1)) + 'px');
  $('#act5').css('top', (800 - (scrolled * .2)) + 'px');



}
// 手機課程大綱輪播
$("#card-box").slick({
  arrows: false,
  slidesToShow: 1,
  centerMode: true,
  infinite: false,
});

  // 手機課程大綱彈跳視窗
  // 視窗一

  $(".box-img01").click(function () {
    $(".mobile01-1").fadeIn();
    $(".mobile-box1").fadeIn();
    $(".card-box-1").slick({
      arrows: false,
      slidesToShow: 1,
      centerMode: true,
      infinite: false,
    });
  });

  $(".close").click(function () {
    $(".mobile-box1").fadeOut();
    $(".mobile01-1").fadeOut();

  });



  // 視窗二
  $(".mobile01-2").fadeOut(0);
  $(".mobile-box2").fadeOut(0);

  $(".box-img02").click(function () {
    $(".mobile01-2").fadeIn();
    $(".mobile-box2").fadeIn();
    $(".card-box-2").slick({
      arrows: false,
      slidesToShow: 1,
      centerMode: true,
      infinite: false,
    });
  });

  $(".close").click(function () {
    $(".mobile-box2").fadeOut();
    $(".mobile01-2").fadeOut();

  });


  // 視窗三
  $(".mobile01-3").fadeOut(0);
  $(".mobile-box3").fadeOut(0);

  $(".box-img03").click(function () {
    $(".mobile01-3").fadeIn();
    $(".mobile-box3").fadeIn();
    $(".card-box-3").slick({
      arrows: false,
      slidesToShow: 1,
      centerMode: true,
      infinite: false,
    });

  });

  $(".close").click(function () {
    $(".mobile-box3").fadeOut();
    $(".mobile01-3").fadeOut();

  });


  // 手機課程日程輪播
  $("#card-box2").slick({
    arrows: false,
    slidesToShow: 1,
    centerMode: true,
    infinite: false,
  });

  // 手機選單彈跳視窗
  $("#menu-box2").hide();
  $("#menu-box").hide();

  $("#menu-btn1").click(function () {

    $("#menu-box").slideToggle("slow");
    $("#menu-box2").slideToggle("slow");

  });
  $(".link").click(function () {
    $("#menu-box").slideUp("slow", function () {
      $("#menu-box2").slideUp("slow");
      // Animation complete.
    });
  });

  $("*").each(function (index, element) {
    // 此元素被點選後執行
    $(this).click(function (e) {
      // 取得被點選元素的屬性：data-gt-target
      var target = $(this).attr("data-gt-target");
      var duration = $(this).attr("data-gt-duration");
      var offset = $(this).attr("data-gt-offset");

      // JS 語法：判斷式
      // if (條件) {程式區塊}
      // 當條件成立，會執行程式區塊

      // 如果 目標有資料 才會執行 { } 內的程式
      // 避免出現 undefine (未定義 - 不存在的資料)
      if (target) {
        //console.log("目標：" + target);
        //console.log("時間：" + duration);
        //console.log("位移：" + offset);

        // 上方位置 = 目標區塊.位移().上方位置
        var top = $(target).offset().top;
        //console.log("要前往元素的上方位置：" + top);

        // 網頁元素.停止().動畫({ 上方捲動：指定元素 - 位移}，持續時間)
        // parseInt() 將文字轉為數字

        $("html").stop().animate({
          scrollTop: top - offset
        }, parseInt(duration));
      }
    });
  });

  // 避免動畫與使用者滾輪衝突
  // html 在滾動滾輪時 停止 html 所有效果
  $("html").on("mousewheel", function () {
    $("html").stop();
  });

  // gotop下滑效果
  $(".arrow").hide();
  $(window).scroll(function () {
    var y = window.scrollY;

    if (y > 10) {
      $(".arrow").show();
    } else {
      $(".arrow").hide();
    }

  });


  $.fn.serializeObject = function () {
    var o = {};
    var a = this.serializeArray();
    // o["id"] = 0;
    // o["time_stamp"] = "";
    $.each(a, function () {
      if (o[this.name]) {
        if (!o[this.name].push) {
          o[this.name] = [o[this.name]];
        }
        o[this.name].push(this.value || '');
      } else {
        o[this.name] = this.value || '';
      }
    });

    return o;
  };

  $(".contact-form").submit(function (e) {
    /*	var formRef = $('#form1').serializeArray();
      var jsonString = JSON.stringify(formRef);*/
    var jsonInfo = $('.contact-form').serializeObject();
    var jsonString = JSON.stringify(jsonInfo);
    console.log(jsonString),
      $.ajax({
        type: 'POST',
        url: 'http://172.105.205.52:8003/add_client_info',
        data: jsonString,
        dataType: 'json',


        success: function (data) {
          console.log('送出成功: ' + data);
          alert("送出成功");
          // if (data == 0) {
          //   alert("送出成功");
          // } else if (data == 1) {
          //   alert("此email已填過表單");
          // } else if (data == 2) {
          //   alert("此phone已填過表單");
          // } else if (data == 3) {
          //   alert("此email、phone已填過表單");
          // }
          location.reload();
        },
        beforeSend: function () {
          console.log('beforeSend');
        },
        complete: function () {
          console.log('complete');
        },
        error: function (jqXHR, textStatus, errorThrown) {
          console.log(JSON.stringify(jqXHR));
          console.log("AJAX errr: " + textStatus + ' : ' + errorThrown);
          console.log('送出失敗: ' + jqXHR.responseText);
        }
      });
    return false;
  });

  $(function () {

    $(".box1").hover(
      function () {
        $("#title1").html('課程1手機拍片');
        $("#title1-1").html('知名媒體網站電視台店長');

      },

      function () {
        $("#title1").html('課程1');
        $("#title1-1").html('手機拍片');

      })
  });

  $(function () {

    $(".box2").hover(
      function () {
        $("#title2").html('課程2社群營造');
        $("#title2-1").html('資深數位廣告投手');

      },

      function () {
        $("#title2").html('課程2');
        $("#title2-1").html('社群營造');
      })
  });
  $(function () {

    $(".box3").hover(
      function () {
        $("#title3").html('課程3文案撰寫');
        $("#title3-1").html('資深新聞媒體工作者');

      },

      function () {
        $("#title3").html('課程3');
        $("#title3-1").html('文案撰寫');
      })
  });

  // 電腦版彈跳視窗
  $("#Course-box01").fadeOut(0);
  $(".Course-box01").fadeOut(0);

  $("#Course-box02").fadeOut(0);
  $(".Course-box01").fadeOut(0);

  $("#Course-box03").fadeOut(0);
  $(".Course-box01").fadeOut(0);

  // 電腦版視窗一
  $(".box1").click(function () {
    $("#Course-box01").fadeIn();
    $(".Course-box01").fadeIn();

  });

  $(".close").click(function () {
    $("#Course-box01").fadeOut();
    $(".Course-box01").fadeOut();

  });

  // 電腦版視窗二
  $(".box2").click(function () {
    $("#Course-box02").fadeIn();
    $(".Course-box01").fadeIn();

  });

  $(".close").click(function () {
    $("#Course-box02").fadeOut();
    $(".Course-box01").fadeOut();

  });

  // 電腦版視窗三
  $(".box3").click(function () {
    $("#Course-box03").fadeIn();
    $(".Course-box01").fadeIn();

  });

  $(".close").click(function () {
    $("#Course-box03").fadeOut();
    $(".Course-box01").fadeOut();

  });

  (function () {
    const second = 1000,
          minute = second * 60,
          hour = minute * 60,
          day = hour * 24;
  
    let birthday = "July 21, 2021 00:00:00",
        countDown = new Date(birthday).getTime(),
        x = setInterval(function() {    
  
          let now = new Date().getTime(),
              distance = countDown - now;
  
          document.getElementById("days").innerText = Math.floor(distance / (day)),
            document.getElementById("hours").innerText = Math.floor((distance % (day)) / (hour)),
            document.getElementById("minutes").innerText = Math.floor((distance % (hour)) / (minute)),
            document.getElementById("seconds").innerText = Math.floor((distance % (minute)) / second);
  
          //do something later when date is reached
          if (distance < 0) {
            let headline = document.getElementById("headline"),
                countdown = document.getElementById("countdown"),
                content = document.getElementById("content");
  
            headline.innerText = "It's my birthday!";
            countdown.style.display = "none";
            content.style.display = "block";
  
            clearInterval(x);
          }
          //seconds
        }, 0)
    }());