goto.js 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590
  1. $("*").each(function (index, element) {
  2. // 此元素被點選後執行
  3. $(this).click(function (e) {
  4. // 取得被點選元素的屬性:data-gt-target
  5. var target = $(this).attr("data-gt-target");
  6. var duration = $(this).attr("data-gt-duration");
  7. var offset = $(this).attr("data-gt-offset");
  8. // JS 語法:判斷式
  9. // if (條件) {程式區塊}
  10. // 當條件成立,會執行程式區塊
  11. // 如果 目標有資料 才會執行 { } 內的程式
  12. // 避免出現 undefine (未定義 - 不存在的資料)
  13. if (target) {
  14. //console.log("目標:" + target);
  15. //console.log("時間:" + duration);
  16. //console.log("位移:" + offset);
  17. // 上方位置 = 目標區塊.位移().上方位置
  18. var top = $(target).offset().top;
  19. //console.log("要前往元素的上方位置:" + top);
  20. // 網頁元素.停止().動畫({ 上方捲動:指定元素 - 位移},持續時間)
  21. // parseInt() 將文字轉為數字
  22. $("html").stop().animate({
  23. scrollTop: top - offset
  24. }, parseInt(duration));
  25. }
  26. });
  27. });
  28. // 避免動畫與使用者滾輪衝突
  29. // html 在滾動滾輪時 停止 html 所有效果
  30. $("html").on("mousewheel", function () {
  31. $("html").stop();
  32. });
  33. // gotop下滑效果
  34. $(".arrow").hide();
  35. $(window).scroll(function () {
  36. var y = window.scrollY;
  37. if (y > 500) {
  38. $(".arrow").show();
  39. } else {
  40. $(".arrow").hide();
  41. }
  42. });
  43. console.log(28);
  44. // $('.nav-item2').click(function(){
  45. // $(this).toggleClass('after-nav')
  46. // })
  47. // function funcTest2() {
  48. // $.ajax({
  49. // method: "GET",
  50. // url: "designer4.json",
  51. // dataType: "json",
  52. // })
  53. // .done(function (msg) {
  54. // var desBanner = '';
  55. // var MobBanner = '';
  56. // var bodyBannerDes = '';
  57. // console.log(msg);
  58. // var res = msg.length;
  59. // console.log(res);
  60. // const limit = res;
  61. // var arrIndex = Math.floor(Math.random() * msg.length);
  62. // console.log(arrIndex);
  63. // console.log(msg[arrIndex].Designerimg);
  64. // desBanner += ' \
  65. // <div class="banner-des row vertical align-items-end px-0 mx-0">\
  66. // <div class="banner-0 col-0 order-1 col-lg-5 order-1 pe-0">\
  67. // <img class="img-fluid" src="./img/banner/bannertitle.png" alt="">\
  68. // </div>\
  69. // <div class="banner-1 col-5 order-3 col-lg-5 order-2 text-white text-end py-3">\
  70. // <a style="text-decoration: none;color:#fff;" href="./about/index.html?id='+ msg[arrIndex].id + '"><div class="banner1-1" style="font-weight: 900;">' + msg[arrIndex].WorkName + '</div>\
  71. // <p><span class="fs-5">'+ msg[arrIndex].DesignerName + '</span>設計師</p>\
  72. // </a>\
  73. // <button type="button" class="btn border border-white"><a target="_blank" href="tel: '+ msg[arrIndex].TollFreeCall + '"><img class="" src="img/002-phone-call.svg" alt=""></a>\</button>\
  74. // <button type="button" class="btn border border-white" data-bs-toggle="modal" data-bs-target="#exampleModal"><img class="" src="img/001-blogging.svg" alt=""></button>\
  75. // </div>\
  76. // <div class="banner-2 col-7 order-2 col-lg-2 order-3 px-0 mx-0">\
  77. // <a class="desbutton" data-info="'+ msg[arrIndex].id + '" href="./about/index.html?id='+ msg[arrIndex].id + '"><img class="img-fluid" src="' + msg[arrIndex].Designerimg + '" alt=""></a>\
  78. // </div>\
  79. // </div>';
  80. // MobBanner += ' \
  81. // <div class="banner-m row vertical align-items-end px-0 mx-0">\
  82. // <div class="bannerm-0 col-12 my-5 px-0">\
  83. // <img class="img-fluid" src="./img/banner/banner-mobile.png" alt="">\
  84. // </div>\
  85. // <div class="bannerm-2 col-7 order-2 col-lg-2 order-3 px-0 mx-0">\
  86. // <a href="./about/index.html?id='+ msg[arrIndex].id + '"><img class="img-fluid" src="' + msg[arrIndex].Designerimg + '" alt=""></a>\
  87. // </div>\
  88. // <div class="bannerm-1 col-5 order-3 col-lg-5 order-2 text-white text-start pb-3">\
  89. // <a style="text-decoration: none;color:#fff;" href="./about/index.html?id='+ msg[arrIndex].id + '">\
  90. // <div class="banner1-1 pt-3 pb-4" style="font-weight: 900;">'+ msg[arrIndex].WorkName + '</div>\
  91. // <p class=""><span class="fs-5">'+ msg[arrIndex].DesignerName + '</span>設計師</p>\
  92. // </a>\
  93. // <button type="button" class="btn border border-white"><a target="_blank" href="tel: '+ msg[arrIndex].TollFreeCall + '"><img class="" src="img/002-phone-call.svg" alt=""></a>\</button>\
  94. // <button type="button" class="btn border border-white" data-bs-toggle="modal" data-bs-target="#exampleModal"><img class="" src="img/001-blogging.svg" alt=""></button>\
  95. // </div>\
  96. // </div > ';
  97. // bodyBannerDes += ' \
  98. // <img class="banner-img img-fluid" id="img_id" src="'+ msg[arrIndex].workimg[0].img + '" alt="">\
  99. // ';
  100. // $('.banner-des').html(desBanner);
  101. // $('.banner-m').html(MobBanner);
  102. // $('#bannerdes-img').html(bodyBannerDes);
  103. // // var test = msg[0].newstext1;
  104. // // $('#jsontest').append(test);
  105. // });
  106. // }
  107. // window.onload = funcTest2();
  108. // window.setInterval("funcTest2()", 1000 * 8);
  109. // $(document).ready(function () {
  110. // $.ajax({
  111. // method: "GET",
  112. // url: "designer4.json",
  113. // dataType: "json",
  114. // })
  115. // .done(function (msg) {
  116. // var DesignerContent = '';
  117. // console.log(msg)
  118. // for (var i = 0; i < msg.length; i++) {
  119. // // new_des1.push(msg[msg.length].id);
  120. // DesignerContent += ' \
  121. // <div id="'+ msg[i].id + '" class="secimg col-4 col-lg-2 mx-0 px-0 border-0"><a href="./about/index.html?id=' + msg[i].id + '"><img class="img-fluid"\
  122. // src="'+ msg[i].Designerimg + '"\
  123. // alt="">\
  124. // <div class="sec02-p-m p-1 mt-1 text-center">\
  125. // <p class="my-0">'+ msg[i].WorkName + '</p>\
  126. // <p>'+ msg[i].DesignerName + '</p>\
  127. // </div>\
  128. // </a>\
  129. // </div>';
  130. // }
  131. // $('.sec01-designer').html(DesignerContent);
  132. // // var test = msg[0].newstext1;
  133. // // $('#jsontest').append(test);
  134. // });
  135. // });
  136. window.onload=function(){
  137. function funcTest5() {
  138. $.ajax({
  139. method: "GET",
  140. url: "designer4.json",
  141. dataType: "json",
  142. async: false,
  143. })
  144. .done(function (msg) {
  145. console.log(msg);
  146. function shuffleArray(inputArray) {
  147. inputArray.sort(() => Math.random() - 0.5);
  148. }
  149. shuffleArray(msg);
  150. console.log(msg.length);
  151. // temp初始化
  152. for (var i = 0; i < msg.length; i++) {
  153. temp[i] = msg[i].id
  154. }
  155. templength = temp.length;
  156. });
  157. }
  158. var templength = 0;
  159. var des1 = [];
  160. var des2 = [];
  161. var temp = [];
  162. var numb1 = [];
  163. funcTest5();
  164. funcTest4();
  165. function funcTest4() {
  166. for (var j = 0; j < templength; j++) {
  167. des1[j] = temp[j]
  168. }
  169. console.log(des1)
  170. for (var j = 0; j < des1.length - 1; j++) {
  171. des2[j] = des1[j]
  172. }
  173. numb1[0] = des1[des1.length - 1];
  174. console.log(numb1[0]);
  175. for (var j = 0; j < des1.length - 1; j++) {
  176. numb1[j + 1] = des2[j];
  177. }
  178. for (var j = 0; j < numb1.length; j++) {
  179. temp[j] = numb1[j];
  180. }
  181. console.log(temp);
  182. var desBanner = '';
  183. var MobBanner = '';
  184. var bodyBannerDes = '';
  185. var DesignerContent = '';
  186. for (var i = 0; i < temp.length; i++) {
  187. var deslist = 0;
  188. var deslist2 = 0;
  189. deslist = get_data(temp[i]);
  190. deslist2 = get_data(temp[0]);
  191. DesignerContent += ' \
  192. <div id="'+ deslist.id + '" class="secimg col-4 col-lg-2 mx-0 px-0 border-0"><a href="./about/index.html?id=' + deslist.id + '"><img class="img-fluid"\
  193. src="'+ deslist.Designerimg + '"\
  194. alt="">\
  195. <div class="sec02-p-m p-1 mt-1 text-center">\
  196. <p class="my-0">'+ deslist.WorkName + '</p>\
  197. <p>'+ deslist.DesignerName + '</p>\
  198. </div>\
  199. </a>\
  200. </div>';
  201. }
  202. desBanner += ' \
  203. <div class="banner-des row vertical align-items-end px-0 mx-0">\
  204. <div class="banner-0 col-0 order-1 col-lg-5 order-1 pe-0">\
  205. <img class="img-fluid" src="./img/banner/bannertitle.png" alt="">\
  206. </div>\
  207. <div class="banner-1 col-5 order-3 col-lg-5 order-2 text-white text-end py-3">\
  208. <a style="text-decoration: none;color:#fff;" href="./about/index.html?id='+ deslist2.id + '"><div class="banner1-1" style="font-weight: 900;">' + deslist2.WorkName + '</div>\
  209. <p><span class="fs-5">'+ deslist2.DesignerName + '</span>設計師</p>\
  210. </a>\
  211. <button type="button" class="btn border border-white"><a target="_blank" href="tel: '+ deslist2.TollFreeCall + '"><img class="" src="img/002-phone-call.svg" alt=""></a>\</button>\
  212. <button type="button" id="'+ deslist2.id + '" data-info="' + deslist2.id + '" class="mesg btn border border-white" data-bs-toggle="modal" data-bs-target="#exampleModal"><img class="" src="img/001-blogging.svg" alt=""></button>\
  213. </div>\
  214. <div class="banner-2 col-7 order-2 col-lg-2 order-3 px-0 mx-0">\
  215. <a class="desbutton" data-info="'+ deslist2.id + '" href="./about/index.html?id=' + deslist2.id + '"><img class="img-fluid" src="' + deslist2.Designerimg + '" alt=""></a>\
  216. </div>\
  217. </div>';
  218. MobBanner += ' \
  219. <div class="banner-m row vertical align-items-end px-0 mx-0">\
  220. <div class="bannerm-0 col-12 my-5 px-0">\
  221. <img class="img-fluid" src="./img/banner/banner-mobile.png" alt="">\
  222. </div>\
  223. <div class="bannerm-2 col-7 order-2 col-lg-2 order-3 px-0 mx-0">\
  224. <a href="./about/index.html?id='+ deslist2.id + '"><img class="img-fluid" src="' + deslist2.Designerimg + '" alt=""></a>\
  225. </div>\
  226. <div class="bannerm-1 col-5 order-3 col-lg-5 order-2 text-white text-start pb-3">\
  227. <a style="text-decoration: none;color:#fff;" href="./about/index.html?id='+ deslist2.id + '">\
  228. <div class="banner1-1 pt-3 pb-1" style="font-weight: 900;">'+ deslist2.WorkName + '</div>\
  229. <p class=""><span class="fs-5">'+ deslist2.DesignerName + '</span>設計師</p>\
  230. </a>\
  231. <button type="button" class="btn border border-white"><a target="_blank" href="tel: '+ deslist2.TollFreeCall + '"><img class="" src="img/002-phone-call.svg" alt=""></a>\</button>\
  232. <button type="button" id="'+ deslist2.id + '" data-info="' + deslist2.id + '" class="mesg btn border border-white" data-bs-toggle="modal" data-bs-target="#exampleModal"><img class="" src="img/001-blogging.svg" alt=""></button>\
  233. </div>\
  234. </div > ';
  235. bodyBannerDes += ' \
  236. <img class="banner-img img-fluid" id="img_id" src="'+ deslist2.workimg[0].img + '" alt="">\
  237. ';
  238. $('.banner-des').html(desBanner);
  239. $('.banner-m').html(MobBanner);
  240. $('#bannerdes-img').html(bodyBannerDes);
  241. $('.sec01-designer').html(DesignerContent);
  242. }
  243. function get_data(id) {
  244. var A = [];
  245. $.ajax({
  246. method: "GET",
  247. url: "../designer4.json",
  248. dataType: "json",
  249. async: false,
  250. })
  251. .done(function (msg) {
  252. for (var i = 0; i < msg.length; i++) {
  253. if (msg[i].id == id) {
  254. A = msg[i]
  255. }
  256. }
  257. });
  258. return A
  259. }
  260. setInterval("funcTest4()", 1000 * 10);
  261. }
  262. // if (msg[i].id == id) {
  263. // console.log()
  264. // }
  265. // setInterval("funcTest5()", 5000);
  266. // 點選該設計師,導至其對應id的參數網址
  267. // $('#278').click(function () {
  268. // console.log(1);
  269. // window.location.href = `./about/index.html?id=278`;
  270. // });
  271. // $('#507').click(function () {
  272. // console.log(2);
  273. // window.location.href = `./about/index.html?id=507`;
  274. // });
  275. // $('#423').click(function () {
  276. // console.log(3);
  277. // window.location.href = `./about/index.html?id=423`;
  278. // });
  279. // $('#594').click(function () {
  280. // console.log(4);
  281. // window.location.href = `./about/index.html?id=594`;
  282. // });
  283. // $('#364').click(function () {
  284. // console.log(5);
  285. // window.location.href = `./about/index.html?id=364`;
  286. // });
  287. // $('#500').click(function () {
  288. // console.log(6);
  289. // window.location.href = `./about/index.html?id=500`;
  290. // });
  291. // $('#651').click(function () {
  292. // console.log(7);
  293. // window.location.href = `./about/index.html?id=651`;
  294. // });
  295. // $('#347').click(function () {
  296. // console.log(8);
  297. // window.location.href = `./about/index.html?id=347`;
  298. // });
  299. // $('#363').click(function () {
  300. // console.log(9);
  301. // window.location.href = `./about/index.html?id=363`;
  302. // });
  303. // $('#555').click(function () {
  304. // console.log(10);
  305. // window.location.href = `./about/index.html?id=555`;
  306. // });
  307. // $('#79').click(function () {
  308. // console.log(11);
  309. // window.location.href = `./about/index.html?id=79`;
  310. // });
  311. // $('#158').click(function () {
  312. // console.log(12);
  313. // window.location.href = `./about/index.html?id=158`;
  314. // });
  315. // $('#301').click(function () {
  316. // console.log(13);
  317. // window.location.href = `./about/index.html?id=301`;
  318. // });
  319. // $('#402').click(function () {
  320. // console.log(14);
  321. // window.location.href = `./about/index.html?id=402`;
  322. // });
  323. // $('#131').click(function () {
  324. // console.log(15);
  325. // window.location.href = `./about/index.html?id=131`;
  326. // });
  327. // $('#28').click(function () {
  328. // console.log(16);
  329. // window.location.href = `./about/index.html?id=28`;
  330. // });
  331. // $('#65').click(function () {
  332. // console.log(17);
  333. // window.location.href = `./about/index.html?id=65`;
  334. // });
  335. // $('#672').click(function () {
  336. // console.log(9);
  337. // window.location.href = `./about/index.html?id=672`;
  338. // });
  339. // $('#438').click(function () {
  340. // console.log(9);
  341. // window.location.href = `./about/index.html?id=438`;
  342. // });
  343. // $('#291').click(function () {
  344. // console.log(9);
  345. // window.location.href = `./about/index.html?id=291`;
  346. // });
  347. // $('#465').click(function () {
  348. // console.log(9);
  349. // window.location.href = `./about/index.html?id=465`;
  350. // });
  351. // $('#436').click(function () {
  352. // console.log(9);
  353. // window.location.href = `./about/index.html?id=436`;
  354. // });
  355. // $('#279').click(function () {
  356. // console.log(9);
  357. // window.location.href = `./about/index.html?id=279`;
  358. // });
  359. // $('#418').click(function () {
  360. // console.log(9);
  361. // window.location.href = `./about/index.html?id=418`;
  362. // });
  363. // $('#385').click(function () {
  364. // console.log(9);
  365. // window.location.href = `./about/index.html?id=385`;
  366. // });
  367. // $('#688').click(function () {
  368. // console.log(9);
  369. // window.location.href = `./about/index.html?id=688`;
  370. // });
  371. // $('#474').click(function () {
  372. // console.log(9);
  373. // window.location.href = `./about/index.html?id=474`;
  374. // });
  375. // $('#505').click(function () {
  376. // console.log(9);
  377. // window.location.href = `./about/index.html?id=505`;
  378. // });
  379. // $('#712').click(function () {
  380. // console.log(9);
  381. // window.location.href = `./about/index.html?id=712`;
  382. // });
  383. // $('#680').click(function () {
  384. // console.log(9);
  385. // window.location.href = `./about/index.html?id=680`;
  386. // });
  387. // $('#705').click(function () {
  388. // console.log(9);
  389. // window.location.href = `./about/index.html?id=705`;
  390. // });
  391. // $('#23').click(function () {
  392. // console.log(9);
  393. // window.location.href = `./about/index.html?id=23`;
  394. // });
  395. // $('#33').click(function () {
  396. // console.log(9);
  397. // window.location.href = `./about/index.html?id=33`;
  398. // });
  399. // $('#491').click(function () {
  400. // console.log(9);
  401. // window.location.href = `./about/index.html?id=491`;
  402. // });
  403. // function funcTest() {
  404. // $("div.sec01-designer div").sort(function () {
  405. // return Math.random() * 10 > 5 ? 1 : -1;
  406. // }).each(function () {
  407. // var $t = $(this),
  408. // color = $t.attr("");
  409. // $t.css({ backgroundColor: color }).appendTo($t.parent());
  410. // });
  411. // }
  412. // window.setInterval("funcTest()", 1000 * 10);
  413. // window.onload = funcTest();
  414. $.fn.serializeObject = function () {
  415. var o = {};
  416. var a = this.serializeArray();
  417. o["id"] = 0;
  418. o["time_stamp"] = "";
  419. $.each(a, function () {
  420. if (o[this.name]) {
  421. if (!o[this.name].push) {
  422. o[this.name] = [o[this.name]];
  423. }
  424. o[this.name].push(this.value || '');
  425. } else {
  426. o[this.name] = this.value || '';
  427. }
  428. });
  429. return o;
  430. };
  431. $(".contact-form1").submit(function (e) {
  432. /* var formRef = $('#form1').serializeArray();
  433. var jsonString = JSON.stringify(formRef);*/
  434. var jsonInfo = $('.contact-form1').serializeObject();
  435. var jsonString = JSON.stringify(jsonInfo);
  436. console.log(jsonString);
  437. $.ajax({
  438. type: 'POST',
  439. url: 'https://go.hhh.com.tw:8002/deco_request_detail',
  440. data: jsonString,
  441. dataType: 'json',
  442. success: function (data) {
  443. console.log('送出成功: ' + data);
  444. if (data == 0) {
  445. alert("送出成功");
  446. } else if (data == 1) {
  447. alert("此email已填過表單");
  448. } else if (data == 2) {
  449. alert("此phone已填過表單");
  450. } else if (data == 3) {
  451. alert("此email、phone已填過表單");
  452. }
  453. location.href = "./index_complete_line.html";
  454. },
  455. beforeSend: function () {
  456. console.log('beforeSend');
  457. },
  458. complete: function () {
  459. console.log('complete');
  460. },
  461. error: function (jqXHR, textStatus, errorThrown) {
  462. console.log(JSON.stringify(jqXHR));
  463. console.log("AJAX errr: " + textStatus + ' : ' + errorThrown);
  464. console.log('送出失敗: ' + jqXHR.responseText);
  465. alert("送出失敗");
  466. }
  467. });
  468. return false;
  469. });
  470. $(function () {
  471. var dateToday = new Date();
  472. //jQuery datepicker 設定限制日期最小最大 minDate maxDate hideIfNoPrevNext
  473. $(".datepicker").datepicker({
  474. //顯示上個月日期 及下個月日期 ,但是不可選的。
  475. //default:false
  476. showOtherMonths: true,
  477. // 設置當沒有上一個/下一個可選擇的情況下,隱藏掉相應的按鈕。(默認為不可用)
  478. //配合有設定最大最小時使用
  479. //default:false
  480. hideIfNoPrevNext: true,
  481. minDate: dateToday,
  482. // 設置一個最大的可選日期。可以是Date對象,或者是數字(從今天算起,例如+7),
  483. //或者有效的字符串('y'代表年, 'm'代表月, 'w'代表周, 'd'代表日, 例如:'+1m +7d')。
  484. });
  485. });
  486. $(".mesg").click(function () {
  487. console.log(1);
  488. var desid =$(this).data("info");
  489. console.log(desid);
  490. // var desid2=String(desid);
  491. // console.log(desid2);
  492. $("#version").val(desid);
  493. // $("#version").html(desid);
  494. });