<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<style>
* {
font-family: "Poppins", sans-serif;
padding:0;
margin:0;
}
h1 {
color:#282f40;
text-align:center;
font-weight:600
}
h3 {
color:#282f40;
text-align:left;
}
p {
color:#282f40;
}
a {
color:
}
.p-10 {
padding:10px
}
</style>

# Web Code

### HTML

### [客製化textarea](https://alex-d.github.io/Trumbowyg/)

<!-- Import css -->
<link href="/Assets/plugins/Trumbowyg-main/ui/trumbowyg.min.css" rel="stylesheet" />

<!-- Import jQuery -->
<script src='//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>

<!-- Import Trumbowyg -->
<script src="/Assets/plugins/Trumbowyg-main/trumbowyg.min.js"></script>
<script src="/Assets/plugins/Trumbowyg-main/langs/zh_tw.js"></script>

//html

<div id="AGbookset_content" name="AGbookset_content"></div>

//js

    $('#AGbookset_content').trumbowyg({
        resetCss: true, //重製css
        removeformatPasted: true, //刪除貼上格式
        imageWidthModalEdit: true, //自行調整圖片寬度
        lang: 'zh_tw',
    });

### 特殊語法

<div contenteditable="true">這裡的文字可以編輯</div>

<h3>
<a href="https://codepen.io/ZKMeteor/pen/vYMVJoV"> ChangeSize & localStorage & Navbar</a>
</h3>

:root {
  --nowsize: 1;
}
let size = this.getAttribute('data-size');
localStorage.size = size
document.body.style.setProperty("--size", localStorage.size);

<h3>
svg 刪除id、xml 加入fill="currentColor" ADOBE.AI SVG 程式碼
</h3>

<svg version="1" id="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 1280 1024" style="enable-background:new 0 0 1280 1024;" xml:space="preserve">
<style type="text/css">
	.st0{fill:url(#SVGID_1_);}
</style>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="640" y1="1024" x2="640" y2="895.052">
	<stop  offset="0" style="stop-color:#BFFEFF"/>
</linearGradient>
<path class="st0" d="M0,956.46c0,0,330.5,40.04,568.5-36.96s246.18,55.37,470.09,23.68C1262.5,911.5,1280,956.46,1280,956.46V1024H0
	V956.46z"/>
</svg>

# CSS
:::warning
#### [Bootstrap](https://bootstrap5.hexschool.com/)
#### [Aos](https://michalsnik.github.io/aos/)
#### [Animate.css](https://animate.style/)
#### [load](https://cssloaders.github.io/)
#### <a href="https://codepen.io/ZKMeteor/pen/vYMVJoV">調整 CSS 變數</a>
#### [流程框](https://codepen.io/ZKMeteor/pen/OJGObEL)
#### [Percentage Chart](https://codepen.io/ZKMeteor/pen/gOJaQYB)
:::

<h3>
漸層顏色
</h3>

.orange {
    background: linear-gradient(to right, #ea5350 0%, #f5a500 75%, #fff 100% );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

<h3>
<a href="https://blog.csdn.net/m0_55333789/article/details/137078922">滾輪</a>
</h3>

.custlistbox {
    height:80vh;
    overflow-y:scroll;
    scrollbar-color: #a9a9a9 transparent;
    scrollbar-width: none;
}
::-webkit-scrollbar-thumb {
    border-radius:8px
}

# JS
:::warning
#### [JQ UI](https://jqueryui.com/)
#### [chartjs](https://www.chartjs.org/)
#### [拖曳](https://sortablejs.github.io/Sortable/)
#### [圖片放大檢視](https://github.com/feimosi/baguetteBox.js)
#### [上傳複數圖片](https://gerardbalaoro.github.io/jquery.filer/#documentation)
#### [scrollmagic](https://scrollmagic.io/examples/advanced/parallax_sections.html)
#### [時間](https://flatpickr.js.org/)
:::

<h3>
Promise
</h3>

function select() {
    return new Promise((resolve, reject) => {
        resolve()
    });
}
function delbtn() {
}
select().then(delbtn)

<h3>
async，await
</h3>

async function getData() {
  const data1 = await promiseFn(1); // 因為 await，promise 函式被中止直到回傳
  const data2 = await promiseFn(2);
  console.log(data1, data2); // 1, 成功 2, 成功
}
getData();

-------批次處理------------

// 假設有一個上傳 API
const uploadBatch = async (batch) => {
  try {
    const response = await fetch('https://api.example.com/upload', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(batch),
    });
    if (!response.ok) {
      throw new Error('Batch upload failed');
    }
    console.log('Batch uploaded successfully');
  } catch (error) {
    console.error(error);
  }
};

// 將資料分成批次
const uploadInBatches = async (data, batchSize) => {
  for (let i = 0; i < data.length; i += batchSize) {
    const batch = data.slice(i, i + batchSize);
    await uploadBatch(batch); // 等待當前批次上傳完成後再上傳下一批
  }
};

// 使用範例
const data = [/* 多筆資料 */];
uploadInBatches(data, 10);

#### [fullcalendar](https://fullcalendar.io/)

 <div id="example"></div>
  <script>
  	$( "#example" ).fullCalendar({
  		header: { // 頂部排版
  			left: "prev,next today", // 左邊放置上一頁、下一頁和今天
  			center: "title", // 中間放置標題
  			right: "month,basicWeek,basicDay" // 右邊放置月、周、天
  		},
        buttonText: {
                    today: '當前時間' //  按鈕文字
                },                
                views: {
                    dayGridMonth: {
                        buttonText: '月' // Change this text to your desired text in traditional Chinese
                    },
                    timeGridWeek: {
                        buttonText: '週' // Change this text to your desired text in traditional Chinese
                    },
                    timeGridDay: {
                        buttonText: '日'
                    }
                }, windowResize: function (view) { //rwd
                    if (window.innerWidth < 768) {
                        calendar.changeView('listMonth');
                    } else {
                        calendar.changeView('dayGridMonth');
                    }
                },
  		defaultDate: "2018-02-12", // 起始日期
  		weekends: false, // 顯示星期六跟星期日
  		editable: true,  // 啟動拖曳調整日期,
        locale: 'zh-tw',
  		events: [ // 事件
  			{ // 事件
  				title: "約會",
  				start: "2018-02-01"
  			},
  			{ // 事件(包含開始時間)
  				title: "中餐",
  				start: "2018-02-12T12:00:00"
  			},
  			{ // 事件(包含跨日開始時間、結束時間)
  				title: "音樂節",
  				start: "2018-02-07",
  				end: "2018-02-10"
  			},
  			{ // 事件(包含開始時間、結束時間)
  				title: "會議",
  				start: "2018-02-12T10:30:00",
  				end: "2018-02-12T12:30:00"
  			},
  			{ // 事件(設定連結)
  				title: "Click for Google",
  				url: "http://google.com/",
  				start: "2018-02-28"
  			}
  		],
        eventContent: function (arg) {
                    return {
                        html: `
                            <div style="font-weight:600;font-size:14px;color:black;overflow-x:auto">
                                <div class="fc-event-title" style="display:inline-block"><div class="fc-daygrid-event-dot" style="border-color: ${arg.event.backgroundColor};display:inline-block"></div>排程編號:${arg.event.id}&emsp;生產單號:${arg.event.title}</div>
                                <a class="btn btn-danger btn-sm"style="border:none;padding:3px;font-size:12px" onclick="getDeleteData(${arg.event.id})" data-toggle="modal" data-target="#showDeleteModal" value="">刪除</a>
                            </div>`
                    };
                },
  	});
  </script>

### 輪播
:::warning
#### 路徑要自己抓 <a href="https://owlcarousel2.github.io/OwlCarousel2/">Link</a>
:::

<div class="owl-carousel owl-theme">
    <div class="item" data-merge="1" data-hash="slide1"><h2>1</h2></div>
    <div class="item" data-merge="6"><h2>6</h2></div>
    <div class="item"><h2>11</h2></div> //未加等於一
</div>
<a href="#slide1">Slide 1</a>

$('.owl-carousel').owlCarousel({

    animateOut: 'slideOutDown', //可以使用animate.css套件合作使用
    animateIn: 'flipInX',
    autoplay:true,            //自動播放
    autoplayTimeout:1000,
    autoplayHoverPause:true,  // hover時停止自動撥放
    
    
    autoHeight:true,  //自動調整高度(僅適用一個項目
    
    URLhashListener:true,  //啟用a標籤跳轉
    startPosition: 'URLHash',
    
    loop:true, //是否重複
    margin:10,
    nav:true,//方向箭
    center: true,//致中
    autoWidth:true,//可以設置div寬度
    stagePadding: 50,//左右填滿
    rtl: false, //右至左
    responsive:{
        0:{
            items:1,
            nav:true
        },
        600:{
            items:3,
            nav:false
        },
        1000:{
            items:5,
            nav:true,
            loop:false
        }
    }
})

### 滾輪平滑
:::warning
https://github.com/locomotivemtl/locomotive-scroll
https://it-monk.com/locomotive-scroll-%E6%9B%B4%E6%B5%81%E6%9A%A2%E7%9A%84-%E8%A6%96%E5%B7%AE%E6%BB%BE%E5%8B%95%EF%BC%8C%E5%8F%AA%E8%83%BD%E7%94%A8%E5%BE%AE%E5%A6%99%E5%BD%A2%E5%AE%B9%E7%9A%84%E6%BB%BE%E5%8B%95%E6%84%9F/
:::

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/locomotive-scroll@4.1.0/dist/locomotive-scroll.css">
<script src="https://cdn.jsdelivr.net/npm/locomotive-scroll@4.1.0/dist/locomotive-scroll.min.js"></script>

const scroll = new LocomotiveScroll({
    el: document.querySelector('body'), // 滾動效果的作用範圍，整個網站都要滑順的話，直接設定 “body”
    smooth: true, //設定為 true ，開啟滾動效果
  	repeat: true, //物件如果有設定 data-scroll 每當物件進入視窗時，就會增加一個 is-inview 的 class，如果 repeat 設定成 true ， 每次物件進入或離開視線範圍內，都會依照狀態改變 class。
    lerp:.02  // 視窗滾動的平滑感,min:0,max:1
})

### IntersectionObserver

const observer = new IntersectionObserver(callback, {
  root: null,//null為viewport
  rootMargin: "0px 0px 0px 0px",//設置-往內推
  threshold: 0.0,//進入viewport比例
});
const changeclassend = document.querySelector('.changeclassend');
const changeclass = document.querySelectorAll('.changeclass');
const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {//進入
      topfixed.classList.remove('changed')
          changeclass.forEach( i =>{
            i.classList.remove('changed');
          })
    } else {//離開
      topfixed.classList.add('changed')
          changeclass.forEach( i =>{
            i.classList.add('changed');
    }
  });
});
observer.observe(changeclassend);;  //註冊
observer.unobserve(changeclassend);//刪除一個
observer.disconnect(); //刪除所有

### ScrollIntoView

const target = document.getElementById("target");
target.scrollIntoView({
  behavior: "smooth",//預設auto為跳
  block: "start",//垂直位子
  inline: "end",//水平 start,center,end,nearest //判斷元素位子對齊
});