Jackie Note

範例: <a href="#" download="aaa.jpg"> 當<a>標籤加上download屬性時就能下載圖片，download="aaa.jpg"則是能夠為圖片命名。 不過在跨瀏覽器的支援下就有問題了，接下來我們來探討在chrome,edge,ie9,line,facebook底下download會發生甚麼事。 download屬性兼容性如下: chrome:支援。 edge:支援。 ie9:不支援。 以下也會介紹若使用外部網域圖片，按下<a>之後會發生甚麼事。 chrome 支援download屬性，按下<a>之後會再網頁下方出現下載圖片，功能完全正常。 若要使用外部網域圖片必須 使用javascript先將圖片網址設定在canvas裡，再轉成base64圖檔 ，之後才能成功下載，否則會因為是下載第三方資源而讓download失效，變成是網頁檢視(預覽)圖片。 p.s 如果是使用iphone7或iphone7plus開啟chrome的話，使用canvas轉base64檔會下載成一個document檔(無效的檔案)，所以為了iphone7以下的機型，必須改成下載本地端的圖檔。 edge 支援download屬性，按下<a>之後會再網頁下方出現下載圖片，功能完全正常。 若要下載圖片必須使用javascript，將 a 標籤的 href 修改url，但是必須為 本地端的圖片url ，否則會變成是網頁檢視(預覽)圖片。 若使用外部網域圖片，則download屬性失效，變成是前往該網站預覽圖片。 ie9 不支援download屬性，按下<a>之後download失效，變成是網頁檢視(預覽)圖片。 若使用外部網域圖片會變成是網頁檢視(預覽)圖片。 FACEBOOK瀏覽器 不支援download屬性，按下<a>之後download失效，變成是另開網頁檢視(預覽)圖片，長按圖片可以下載。 QQ瀏覽器 不支援download屬性，按下<a>之後download失效，變成是另開網頁檢視...

var r=Math.floor(Math.random()*4);//隨機獲得0~3的亂數

function detectmob() { if( navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/webOS/i) || navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i) || navigator.userAgent.match(/iPod/i) || navigator.userAgent.match(/BlackBerry/i) || navigator.userAgent.match(/Windows Phone/i) ){ return true; } else { return false; } }

有時settimout跟setinterval會發生越來越快問題，或是設定多組settimout跟setinterva，時間間隔會錯亂。我推薦使用jquery.timers，定時器能正常的每秒執行一次。 /************************************************************* * everyTime(時間間隔, [計時器名稱], 函式名稱, [次數限制], [等待函式程序完成]) *************************************************************/ //每1秒執行函式test() function test(){ //do something... } $('body').everyTime('1s',test); //每1秒執行 $('body').everyTime('1s',function(){ //do something... }); //每1秒執行，並命名計時器名稱為A $('body').everyTime('1s','A',function(){ //do something... }); //每20秒執行，最多5次，並命名計時器名稱為B $('body').everyTime('2das','B',function(){ //do something... },5); //每20秒執行，無限次，並命名計時器名稱為C //若時間間隔抵到，但函式程序仍未完成則需等待執行函式完成後再繼續計時 $('body').everyTime('2das','C',function(){ //執行一個會超過20秒以上的程式 },0,true); /*********************************************************** * oneTime(時間間隔, [計時器名稱], 呼叫的函式) ***************************************...

/*html*/ <div class="arrow arrow_left" onclick="changeindex(-1);"></div> <div class="arrow arrow_right" onclick="changeindex(1)"></div> /*javascript*/ var this_index = 0; //設定一個初始0的整數 function changeindex(change){     this_index = (this_index+change+7)%7;     console.log(this_index) } 邏輯是(例如): 30%30=>0 31%30=>1 32%30=>2 33%30=>3 7的部分要看你的slider的lenght(長度)而定， 如此一來按左右兩箭頭就能判斷slider當前的index囉！進而寫出輪播器效果

▼參考連結1： 【部落格教學】Google AdSense怎麼領款？西聯匯款，京城銀行，終於領到第一筆100美金了!! https://kaohsiungtoeat.pixnet.net/blog/post/221999394-%E3%80%90%E9%83%A8%E8%90%BD%E6%A0%BC%E6%95%99%E5%AD%B8%E3%80%91google-adsense%E6%80%8E%E9%BA%BC%E9%A0%98%E6%AC%BE%EF%BC%9F%E8%A5%BF%E8%81%AF%E5%8C%AF ▼參考連結2： [懶人包]Google AdSense廣告如何領錢？電匯、西聯匯款、支票。 https://sofree.cc/google-adsense-payment/

▼css animation 簡寫: animation: saleChange 2s 1s infinite; -webkit-animation: saleChange 2s 1s infinite; ▼CSS animation 好用的工具教學: 一些好用工具的教學可參考以下影片( Big Boy Can Code ) https://www.youtube.com/watch?v=Y4xBYZJSvuM&t=13s ▼CSS animation 好用的工具: animate.css: https://daneden.github.io/animate.css/ animista: https://animista.net/ keyframes.app: https://keyframes.app/

▼500是可以調整的數值，藍色數字調整不同比例視窗所呈現的區塊長寬 page3ContentResize();     $(window).resize(function() {         page3ContentResize();     });     function page3ContentResize(){//page3Contant區塊自適應         var page3_width = $('.page3').width(),             page3_height = $('.page3').height(),             page3Content_set_newwidth = 0,             page3Content_set_newheight = 0;         if(page3_width<page3_height+ 500 ){             // console.log('寬小於高')             page3Content_set_newWidth = page3_width/ 1.3 ;             page3Content_set_newHeight = page3_width/ 3.5 ;         }else{             // console.log('寬大於高')             pa...

▼css部分可做以下設定 /* 设置滚动条的样式 */ .right_info::-webkit-scrollbar { width:12px; } /* 滚动槽 */ .right_info::-webkit-scrollbar-track { -webkit-box-shadow:inset006pxrgba(255,255,255,1); border-radius:10px; background:rgba(255,255,255,1); } /* 滚动条滑块 */ .right_info::-webkit-scrollbar-thumb { border-radius:10px; background:rgba(24,65,144) !important; -webkit-box-shadow:inset006pxrgba(0,0,0,0.5); } .right_info::-webkit-scrollbar-thumb:window-inactive { background:rgba(255,0,0,0.4); } /* 滚动条ie */ .right_info{   scrollbar-base-color: #ffffff;   scrollbar-face-color: #144190;   scrollbar-3dlight-color: #ffffff;   scrollbar-highlight-color: #ffffff;   scrollbar-track-color: #ffffff;   scrollbar-shadow-color: #ffffff;   scrollbar-dark-shadow-color: #ffffff; } ▼niceScroll.js可做以下設定 var explorer = window.navigator.userAgent;     if (explorer.indexOf("MSIE") >= 0) {//ie10及以下 ...

範例: ▼設置錨點 (連結按了網頁不會重新整理) <a href="#story"> ▼js判斷錨點內容做動作 if(location.hash == "#story" || location.hash == "#character" || location.hash == "#background"){ $(".story_totalnav").addClass("active"); $(".navigation_2nd").fadeIn(500) }else{ $(".story_totalnav").removeClass("active"); $(".navigation_2nd").fadeOut(500) } if(location.hash == "#ost"){ $(".ost_area").addClass("active") }else{ $(".ost_area").removeClass("active") }

寫了一個翻卡牌小遊戲的原型，來試試看吧~ ▼網址: https://www.ok.jackie.com.tw/source/webgame-front-end/card_game/index.html

.▼放置全域 var new_arr = [];//定義一個新陣列，作為產生亂數時存放用 . . . . . ▼function內 var arr = [1,2,3,4,1,2,3,4,1,2,3,4];       arr.sort(randomSort);        new_arr.push(arr);//塞入陣列裡 . . . . .▼取得隨機號碼給sort()重新排列 function randomSort(a, b) { return Math.random() > 0.5 ? -1 : 1; } . . . . .▼清空陣列 new_arr.length = 0;

hello！我是一名網頁設計師，這是我的作品集網站 https://ok.jackie.com.tw/ ，若有案子發包也歡迎找我合作唷！ 聯絡方式: jackietsai.design@gmail.com / 或在我的官網上留言 jackie的作品集網站: https://ok.jackie.com.tw/

用 CSS 讓過長溢出的字省略變 ... CSS div { /*紅色三個設定都要有*/ overflow : hidden; text-overflow : ellipsis; white-space : nowrap; width : 240px; } 參考資料: https://blog.xuite.net/vexed/tech/22596484-%E7%94%A8+CSS+%E8%AE%93%E9%81%8E%E9%95%B7%E6%BA%A2%E5%87%BA%E7%9A%84%E5%AD%97%E7%9C%81%E7%95%A5%E8%AE%8A+?fbclid=IwAR0GdiY8UYqsHD6bf_Lq7u-5nPFjBih-ZbxVSiM0ZpaFY8dtIA2e5Rxvzxk