scripts.js 8.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321
  1. function getParameterByName(name, url = window.location.href) {
  2. name = name.replace(/[\[\]]/g, '\\$&');
  3. var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
  4. results = regex.exec(url);
  5. if (!results) return null;
  6. if (!results[2]) return '';
  7. return decodeURIComponent(results[2].replace(/\+/g, ' '));
  8. }
  9. function getSource() {
  10. let id = getParameterByName('utm_source');
  11. $('#utm_source').val(id);
  12. console.log(id);
  13. }
  14. getSource();
  15. $('.owl-carousel-pc').owlCarousel({
  16. loop: true,
  17. margin: 0,
  18. nav:true,
  19. autoWidth:true,
  20. mouseDrag: true,
  21. touchDrag: true,
  22. smartSpeed: 1000,
  23. autoplay: true,
  24. autoplayTimeout: 9000,
  25. autoplayHoverPause: false,
  26. responsive:{
  27. 0:{
  28. items:1
  29. },
  30. 600:{
  31. items:1
  32. },
  33. 1200:{
  34. items:2
  35. }
  36. }
  37. });
  38. $('.owl-carousel-mb').owlCarousel({
  39. loop:true,
  40. margin: 0,
  41. nav:true,
  42. mouseDrag: true,
  43. touchDrag: true,
  44. smartSpeed: 0,
  45. autoplay: true,
  46. autoplayTimeout: 10000,
  47. autoplayHoverPause: false,
  48. responsive:{
  49. 0:{
  50. items:1
  51. },
  52. 600:{
  53. items:1
  54. },
  55. 1000:{
  56. items:2
  57. }
  58. }
  59. });
  60. $('.owl-carousel-mb2').owlCarousel({
  61. loop:true,
  62. margin: 0,
  63. nav:true,
  64. mouseDrag: true,
  65. touchDrag: true,
  66. smartSpeed: 0,
  67. autoplay: true,
  68. autoplayTimeout: 10000,
  69. autoplayHoverPause: false,
  70. responsive:{
  71. 0:{
  72. items:1
  73. },
  74. 600:{
  75. items:1
  76. },
  77. 1000:{
  78. items:2
  79. }
  80. }
  81. });
  82. $('.owl-carousel-mb3').owlCarousel({
  83. loop:true,
  84. margin: 0,
  85. nav:true,
  86. mouseDrag: true,
  87. touchDrag: true,
  88. smartSpeed: 0,
  89. autoplay: true,
  90. autoplayTimeout: 10000,
  91. autoplayHoverPause: false,
  92. responsive:{
  93. 0:{
  94. items:1
  95. },
  96. 600:{
  97. items:1
  98. },
  99. 1000:{
  100. items:2
  101. }
  102. }
  103. });
  104. $('.owl-nav').css('display', 'none');
  105. $('designers__card').click(function(e){
  106. console.log(e);
  107. let url = e.target.dataset.address;
  108. document.location = url;
  109. })
  110. //jQuery time
  111. var current_fs, next_fs, previous_fs; //fieldsets
  112. var left, opacity, scale; //fieldset properties which we will animate
  113. var animating; //flag to prevent quick multi-click glitches
  114. $(".next").click(function(){
  115. if( !validate() ){
  116. return false;
  117. }
  118. if(animating) return false;
  119. animating = true;
  120. $("html,body").animate(
  121. {
  122. scrollTop: $(".personal__box").offset().top
  123. },
  124. 0
  125. );
  126. current_fs = $(this).parent();
  127. next_fs = $(this).parent().next();
  128. //activate next step on progressbar using the index of next_fs
  129. $("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");
  130. //show the next fieldset
  131. next_fs.show();
  132. //hide the current fieldset with style
  133. current_fs.animate({opacity: 0}, {
  134. step: function(now, mx) {
  135. //as the opacity of current_fs reduces to 0 - stored in "now"
  136. //1. scale current_fs down to 80%
  137. scale = 1 - (1 - now) * 0.2;
  138. //2. bring next_fs from the right(50%)
  139. left = (now * 50)+"%";
  140. //3. increase opacity of next_fs to 1 as it moves in
  141. opacity = 1 - now;
  142. current_fs.css({
  143. 'transform': 'scale('+scale+')',
  144. 'position': 'absolute'
  145. });
  146. next_fs.css({'left': left, 'opacity': opacity});
  147. },
  148. duration: 800,
  149. complete: function(){
  150. current_fs.hide();
  151. animating = false;
  152. },
  153. //this comes from the custom easing plugin
  154. easing: 'easeInOutBack'
  155. });
  156. });
  157. $(".previous").click(function(){
  158. if(animating) return false;
  159. animating = true;
  160. $("html,body").animate(
  161. {
  162. scrollTop: $(".personal__box").offset().top
  163. },
  164. 0
  165. );
  166. current_fs = $(this).parent();
  167. previous_fs = $(this).parent().prev();
  168. //de-activate current step on progressbar
  169. $("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active");
  170. //show the previous fieldset
  171. previous_fs.show();
  172. //hide the current fieldset with style
  173. current_fs.animate({opacity: 0}, {
  174. step: function(now, mx) {
  175. //as the opacity of current_fs reduces to 0 - stored in "now"
  176. //1. scale previous_fs from 80% to 100%
  177. scale = 0.8 + (1 - now) * 0.2;
  178. //2. take current_fs to the right(50%) - from 0%
  179. left = ((1-now) * 50)+"%";
  180. //3. increase opacity of previous_fs to 1 as it moves in
  181. opacity = 1 - now;
  182. current_fs.css({'left': left});
  183. previous_fs.css({'transform': 'scale('+scale+')', 'opacity': opacity});
  184. },
  185. duration: 800,
  186. complete: function(){
  187. current_fs.hide();
  188. animating = false;
  189. },
  190. //this comes from the custom easing plugin
  191. easing: 'easeInOutBack'
  192. });
  193. });
  194. function reload() {
  195. console.log("pass");
  196. location.reload();
  197. }
  198. $("input[name=submit]").click(function(){
  199. let stop;
  200. console.log($("#msform").serialize());
  201. if( $('input[name="q9"]:visible').val() !== undefined && !$('input[name="q9"]:visible').prop('checked') ) {
  202. stop = 1;
  203. $('#term-error').text('必須同意免責聲明與隱私使用政策');
  204. }else {
  205. stop = 0;
  206. $('#term-error').text('');
  207. }
  208. if(stop == 0) {
  209. alert("我們已將價值5萬元裝修折價券寄至您所填寫的電子信箱,請確認是否收到,謝謝!");
  210. }
  211. });
  212. // 依據管道導頁
  213. /* function showThankyou() {
  214. axios.get('http://q.ptt.cx/coffee').then(res => {
  215. if(res.data.coffee == 1) {
  216. document.location = '/a1/index_complete_line.html';
  217. } else {
  218. document.location = '/a1/index_complete_line_after.html';
  219. }
  220. });
  221. // document.location = '/a1/index_complete_line.html';
  222. } */
  223. // 跳離頁面
  224. function show_input_text(checkbox_id, input_id) {
  225. var checkBox = document.getElementById(checkbox_id);
  226. var inp = document.getElementById(input_id);
  227. if (checkBox.checked == true){
  228. inp.style.display = "block";
  229. } else {
  230. inp.style.display = "none";
  231. }
  232. }
  233. function validate() {
  234. function q2_validate() {
  235. let phoneno = /^\d{10}$/;
  236. if( $('input[name="q2"]:visible').val() !== undefined && $('input[name="q2"]:visible').val().length <= 0) {
  237. $('input[name="q2"]:visible').addClass('error');
  238. if( !$('.error-text').length )
  239. $('input.error').after('<p class="error-text">請輸入正確手機號碼</p>');
  240. return false;
  241. } else if($('input[name="q2"]:visible').val() !== undefined && !phoneno.test($('input[name="q2"]:visible').val())){
  242. $('input[name="q2"]:visible').addClass('error');
  243. if( !$('.error-text').length )
  244. $('input.error').after('<p class="error-text">請輸入正確手機號碼</p>');
  245. return false;
  246. }else {
  247. $('input[name="q2"]:visible').removeClass('error');
  248. $('.error-text').remove();
  249. return true;
  250. }
  251. }
  252. function q3_validate() {
  253. let emailPattern = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
  254. if( $('input[name="q3"]:visible').val() !== undefined && $('input[name="q3"]:visible').val().length <= 0) {
  255. $('input[name="q3"]:visible').addClass('error');
  256. if( !$('.error-text').length )
  257. $('input.error').after('<p class="error-text">請輸入E-mail</p>');
  258. return false;
  259. } else if ( $('input[name="q3"]:visible').val() !== undefined && !emailPattern.test($('input[name="q3"]:visible').val()) ){
  260. $('input[name="q3"]:visible').addClass('error');
  261. if( !$('.error-text').length )
  262. $('input.error').after('<p class="error-text">請輸入正確email格式</p>');
  263. return false;
  264. }
  265. else {
  266. $('input[name="q3"]:visible').removeClass('error');
  267. $('.error-text').remove();
  268. return true;
  269. }
  270. }
  271. /* function q4_validate() {
  272. if( $('input[name="q4"]:visible').val() !== undefined && $('input[name="q4"]:visible').val().length <= 0 ) {
  273. $('input[name="q4"]:visible').addClass('error');
  274. if( !$('.error-text').length )
  275. $('input.error').after('<p class="error-text">請輸入建案名稱</p>');
  276. return false;
  277. }
  278. else {
  279. $('input[name="q4"]:visible').removeClass('error');
  280. $('.error-text').remove();
  281. return true;
  282. }
  283. } */
  284. return q2_validate() && q3_validate();
  285. }
  286. /* function getJson() {
  287. $.getJSON("js/json.txt", function(data){
  288. data.forEach((item, idx) => {
  289. console.log(item);
  290. })
  291. })
  292. }
  293. getJson(); */