HHH_Course/goto.js

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

//   }



// }
// 手機課程大綱輪播
$(function () {
  $('#card-box').slick({
    arrows: false,
    slidesToShow: 3,
    slidesToScroll: 3,
    infinite: true,
    centerMode: true,
    dots: true,
    responsive: [
      , {
        breakpoint: 768,
        settings: {
          arrows: false,
          slidesToShow: 3,
          slidesToScroll: 3,
          centerMode: true,
          infinite: true,
          dots: true,
        }
      },
      , {
        breakpoint: 767,// RWD在600寬度時切換顯示數量
        settings: {
          arrows: false,
          slidesToShow: 1,
          centerMode: true,
          infinite: false,
          dots: true,
        }
      },
    ]
  });
})
// $("#card-box").slick({
//   arrows: false,
//   slidesToShow: 1,
//   centerMode: true,
//   infinite: false,
//   dots: true,
// });

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

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

$(".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,
    dots: true,
  });
});

$(".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,
    dots: true,
  });

});

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

});


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

// 手機選單彈跳視窗
$("#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();

  $.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: 'https://go.hhh.com.tw:8004/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;
});

// 手機板表單
$.fn.serializeObject = function () {
  var o = {};
  var a = this.serializeArray();

  $.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-form2").submit(function (e) {
  /*	var formRef = $('#form1').serializeArray();
    var jsonString = JSON.stringify(formRef);*/
  var jsonInfo = $('.contact-form2').serializeObject();
  var jsonString = JSON.stringify(jsonInfo);
  console.log(jsonString),
    $.ajax({
      type: 'POST',
      url: 'https://go.hhh.com.tw:8004/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('知名媒體網站電視台店長');
      $("#title1-2").html('Vincnet');
    },

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

$(function () {

  $(".box2").hover(
    function () {
      $("#title2").html('課程2數位行銷與社群');
      $("#title2-1").html('資深數位廣告投手');
      $("#title2-2").html('Ruby');
    },

    function () {
      $("#title2").html('課程2');
      $("#title2-1").html('數位行銷與社群');
      $("#title2-2").html('');
    })
});
$(function () {

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

    function () {
      $("#title3").html('課程3');
      $("#title3-1").html('文案撰寫');
      $("#title3-2").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 = "Aug 23, 2021 00:00:00",
    countDown = new Date(birthday).getTime(),

    x = setInterval(function () {

      let now = new Date().getTime(),
        distance = countDown - now;

      var a = (distance / (day));
      var b = (distance % (day)) / (hour);
      var c = (distance % (hour)) / (minute);
      var d = (distance % (minute)) / (second);

      var hour1 = Math.floor(b);
      var result = hour1 < 10 ? '0' + hour1 : hour1;

      var second1 = Math.floor(d);
      var result2 = second1 < 10 ? '0' + second1 : second1;

      var minute1 = Math.floor(c);
      var result3 = minute1 < 10 ? '0' + minute1 : minute1;

      var day1 = Math.floor(a);
      var result4 = day1 < 10 ? '0' + day1 : day1;

      document.getElementById("days").innerText = result4,
        document.getElementById("hours").innerText = result,
        document.getElementById("minutes").innerText = result3,
        document.getElementById("seconds").innerText = result2;


      //do something later when date is reached

      //seconds
    }, 0)
}());


window.onload=function(){
  $("#light-box").fadeIn();
  $(".light-box1").fadeIn();
}

$(".close").click(function () {
  $("#light-box").fadeOut();
  $(".light-box1").fadeOut();

});