goto.js 9.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297
  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. function funcTest5() {
  45. $.ajax({
  46. method: "GET",
  47. url: "designer4.json",
  48. dataType: "json",
  49. async: false,
  50. })
  51. .done(function (msg) {
  52. console.log(msg);
  53. function shuffleArray(inputArray) {
  54. inputArray.sort(() => Math.random() - 0.5);
  55. }
  56. shuffleArray(msg);
  57. console.log(msg.length);
  58. // temp初始化
  59. for (var i = 0; i < msg.length; i++) {
  60. temp[i] = msg[i].id
  61. }
  62. templength = temp.length;
  63. });
  64. }
  65. var templength = 0;
  66. var des1 = [];
  67. var des2 = [];
  68. var temp = [];
  69. var numb1 = [];
  70. funcTest5();
  71. funcTest4();
  72. function funcTest4() {
  73. for (var j = 0; j < templength; j++) {
  74. des1[j] = temp[j]
  75. }
  76. console.log(des1)
  77. for (var j = 0; j < des1.length - 1; j++) {
  78. des2[j] = des1[j]
  79. }
  80. numb1[0] = des1[des1.length - 1];
  81. console.log(numb1[0]);
  82. for (var j = 0; j < des1.length - 1; j++) {
  83. numb1[j + 1] = des2[j];
  84. }
  85. for (var j = 0; j < numb1.length; j++) {
  86. temp[j] = numb1[j];
  87. }
  88. console.log(temp);
  89. var desBanner = '';
  90. var MobBanner = '';
  91. var bodyBannerDes = '';
  92. var DesignerContent = '';
  93. for (var i = 0; i < temp.length; i++) {
  94. var deslist = 0;
  95. var deslist2 = 0;
  96. deslist = get_data(temp[i]);
  97. deslist2 = get_data(temp[0]);
  98. DesignerContent += ' \
  99. <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"\
  100. src="'+ deslist.Designerimg + '"\
  101. alt="">\
  102. <div class="sec02-p-m p-1 mt-1 text-center">\
  103. <p class="my-0">'+ deslist.WorkName + '</p>\
  104. <p>'+ deslist.DesignerName + '</p>\
  105. </div>\
  106. </a>\
  107. </div>';
  108. }
  109. desBanner += ' \
  110. <div class="banner-des row vertical align-items-end px-0 mx-0">\
  111. <div class="banner-0 col-0 order-1 col-lg-5 order-1 pe-0">\
  112. <img class="img-fluid" src="./img/banner/bannertitle.png" alt="">\
  113. </div>\
  114. <div class="banner-1 col-5 order-3 col-lg-5 order-2 text-white text-end py-3">\
  115. <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>\
  116. <p><span class="fs-5">'+ deslist2.DesignerName + '</span>設計師</p>\
  117. </a>\
  118. <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>\
  119. <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>\
  120. </div>\
  121. <div class="banner-2 col-7 order-2 col-lg-2 order-3 px-0 mx-0">\
  122. <a class="desbutton" data-info="'+ deslist2.id + '" href="./about/index.html?id=' + deslist2.id + '"><img class="img-fluid" src="' + deslist2.Designerimg + '" alt=""></a>\
  123. </div>\
  124. </div>';
  125. MobBanner += ' \
  126. <div class="banner-m row vertical align-items-end px-0 mx-0">\
  127. <div class="bannerm-0 col-12 my-5 px-0">\
  128. <img class="img-fluid" src="./img/banner/banner-mobile.png" alt="">\
  129. </div>\
  130. <div class="bannerm-2 col-7 order-2 col-lg-2 order-3 px-0 mx-0">\
  131. <a href="./about/index.html?id='+ deslist2.id + '"><img class="img-fluid" src="' + deslist2.Designerimg + '" alt=""></a>\
  132. </div>\
  133. <div class="bannerm-1 col-5 order-3 col-lg-5 order-2 text-white text-start pb-3">\
  134. <a style="text-decoration: none;color:#fff;" href="./about/index.html?id='+ deslist2.id + '">\
  135. <div class="banner1-1 pt-3 pb-1" style="font-weight: 900;">'+ deslist2.WorkName + '</div>\
  136. <p class=""><span class="fs-5">'+ deslist2.DesignerName + '</span>設計師</p>\
  137. </a>\
  138. <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>\
  139. <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>\
  140. </div>\
  141. </div > ';
  142. bodyBannerDes += ' \
  143. <img class="banner-img img-fluid" id="img_id" src="'+ deslist2.workimg[0].img + '" alt="">\
  144. ';
  145. $('.banner-des').html(desBanner);
  146. $('.banner-m').html(MobBanner);
  147. $('#bannerdes-img').html(bodyBannerDes);
  148. $('.sec01-designer').html(DesignerContent);
  149. }
  150. function get_data(id) {
  151. var A = [];
  152. $.ajax({
  153. method: "GET",
  154. url: "../designer4.json",
  155. dataType: "json",
  156. async: false,
  157. })
  158. .done(function (msg) {
  159. for (var i = 0; i < msg.length; i++) {
  160. if (msg[i].id == id) {
  161. A = msg[i]
  162. }
  163. }
  164. });
  165. return A
  166. }
  167. setInterval("funcTest4()", 1000 * 10);
  168. $.fn.serializeObject = function () {
  169. var o = {};
  170. var a = this.serializeArray();
  171. o["id"] = 0;
  172. o["time_stamp"] = "";
  173. $.each(a, function () {
  174. if (o[this.name]) {
  175. if (!o[this.name].push) {
  176. o[this.name] = [o[this.name]];
  177. }
  178. o[this.name].push(this.value || '');
  179. } else {
  180. o[this.name] = this.value || '';
  181. }
  182. });
  183. return o;
  184. };
  185. $(".contact-form1").submit(function (e) {
  186. /* var formRef = $('#form1').serializeArray();
  187. var jsonString = JSON.stringify(formRef);*/
  188. var jsonInfo = $('.contact-form1').serializeObject();
  189. var jsonString = JSON.stringify(jsonInfo);
  190. console.log(jsonString);
  191. $.ajax({
  192. type: 'POST',
  193. url: 'https://go.hhh.com.tw:8002/deco_request_detail',
  194. data: jsonString,
  195. dataType: 'json',
  196. success: function (data) {
  197. console.log('送出成功: ' + data);
  198. if (data == 0) {
  199. alert("送出成功");
  200. } else if (data == 1) {
  201. alert("此email已填過表單");
  202. } else if (data == 2) {
  203. alert("此phone已填過表單");
  204. } else if (data == 3) {
  205. alert("此email、phone已填過表單");
  206. }
  207. location.href = "./index_complete_line.html";
  208. },
  209. beforeSend: function () {
  210. console.log('beforeSend');
  211. },
  212. complete: function () {
  213. console.log('complete');
  214. },
  215. error: function (jqXHR, textStatus, errorThrown) {
  216. console.log(JSON.stringify(jqXHR));
  217. console.log("AJAX errr: " + textStatus + ' : ' + errorThrown);
  218. console.log('送出失敗: ' + jqXHR.responseText);
  219. alert("送出失敗");
  220. }
  221. });
  222. return false;
  223. });
  224. $(function () {
  225. var dateToday = new Date();
  226. //jQuery datepicker 設定限制日期最小最大 minDate maxDate hideIfNoPrevNext
  227. $(".datepicker").datepicker({
  228. //顯示上個月日期 及下個月日期 ,但是不可選的。
  229. //default:false
  230. showOtherMonths: true,
  231. // 設置當沒有上一個/下一個可選擇的情況下,隱藏掉相應的按鈕。(默認為不可用)
  232. //配合有設定最大最小時使用
  233. //default:false
  234. hideIfNoPrevNext: true,
  235. minDate: dateToday,
  236. // 設置一個最大的可選日期。可以是Date對象,或者是數字(從今天算起,例如+7),
  237. //或者有效的字符串('y'代表年, 'm'代表月, 'w'代表周, 'd'代表日, 例如:'+1m +7d')。
  238. });
  239. });
  240. $(".mesg").click(function () {
  241. console.log(1);
  242. var desid =$(this).data("info");
  243. console.log(desid);
  244. // var desid2=String(desid);
  245. // console.log(desid2);
  246. $("#version").val(desid);
  247. // $("#version").html(desid);
  248. });