USHER CHEN

發表文章

目前顯示的是有「javascript」標籤的文章

javascript 自動捲動至選取項目

5月 02, 2017

當我們在瀏覽項目時，無論是條列式或圖像式，選取的下一個目標跑出畫面時，使用者可能會期待系統自動捲動到某個恰當的位置以繼續瀏覽，於是有了這個計算及需求，跟各位分享一下。首先，我的系統架構是這樣，使用者可以透過左右鍵好移動到前一個或下一個目標，然後先假設螢幕的高度是100，每個項目的高度是28，如下圖：再來，透過jQuery的 $(window).scrollTop()可以取得現在畫面的最上緣是在整個垂直方向的甚麼位置，以上圖來說，一開始畫面是紅框範圍，值為0。接著，透過 $selectedItem.offset().top 可以取得選取項目的最上緣所在垂直方向位置。以B項目為例，它的位置是88。然後，每當我們選取到一個新目標時，都要判斷它的位置是不是在合理的瀏覽範圍內，以我的需求來說，會希望整顆圖像在畫面裡，也就是說，下一個新的目標，它的位置至少要在 0 (畫面當下位置) + 100 (螢幕高度) - 28 (項目高度) = 72 裡。那來到現在的範例動作，當我們從A項目往下一個B項目移動時，B的位置是88 > 72，所以將畫面捲動。我希望畫面捲動成藍色框的位置，讓B離最上緣還稍微有個8的距離空間，所以我透過 $(window).scrollTop(B的位置 - 8) 來捲動。以上，是簡化的的範例，那再來，以下分享我在工作上實際的需求。系統的上方有個漂浮的header，下面也有個漂浮的footer，一併列入計算。當我往前面的項目移動時，我希望捲動頁面成新的目標在畫面最上排；而當我往後面項目移動時，希望捲動成新的目標在畫面最下排，程式碼如下： // 當選取Item超出畫面,做適當捲動 var headHeight = $('#pageHeader').outerHeight(), footHeight = $('#toolbar_0').outerHeight(), $window = $(window), winHeight = $window.height(), wi...

閱讀完整內容

javascript 工作排程管理器

7月 28, 2016

在程式上，有時候會遇到這樣的需求：某種工作，使用者可以一次大量地觸發它，或者不斷地增加工作進來，而基於效率及伺服器的能力管理，我們必須控制只有某些數量的工作可以運行，其他的排隊，我稱之為工作排程。比如下載某些檔案，使用者點了10個下載，但我們程式控制同時間最多只有3個在進行。以下是我用javascript寫的範例： <><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><> add 1 task add 10 tasks Cancel All ◎ 新增的 Task 隨機賦予 1 ~ 10 秒執行時間 ◎ 點擊 Waiting 或 Working 的 Task 可取消該 Task。 Waiting: Working: (Limit: 3) Finished: <><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><> 範例下載連結： https://drive.google.com/file/d/0B0kC-urN3g_jWnN0MkRRejcxbjA/view?usp=sharing

閱讀完整內容

javascript - 樂透 lottery - 號碼產生器

1月 17, 2016

本文想要分享，如何用javascript制作一個抽籤程式，然後是以樂透號碼為範例。一、首先，我們必須要知道如何使用亂數產生器，在javascript裡面 Math.random() 可以取得一個介於 0 ~ 1 (不包含1) 的浮點數亂數，而在實際使用上我們希望得到的是某個正整數，也就是編號幾號的東西，所以我們得動點手腳運算。比如現在有一個陣列 arr[10]，裡面放著 arr['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j'] 十樣東西，我們要挑出一個，所以我們希望得到的亂數是 arr 的 index： 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 其中一個號碼，於是做這樣的運算 Math.floor(Math.random() * 10) ，比如 0.452 * 10 = 4.52 去掉小數位數得到 4，比如 0.999 * 10 = 9.99 去掉小數位數得到 9。 * 10 是因為有10個選項，而 Math.floor 是去掉小數位數只取整數部份的涵式。這樣的運算會使得每個東西的機會均等嗎? 當亂數 0 ~ 0.099... * 10 得到 0 ~ 0.99... 取 0 當亂數 0.1 ~ 0.199... * 10 得到 1 ~ 1.99... 取 1 當亂數 0.2 ~ 0.299... * 10 得到 2 ~ 2.99... 取 2 當亂數 0.3 ~ 0.399... * 10 得到 3 ~ 3.99... 取 3 當亂數 0.4 ~ 0.499... * 10 得到 4 ~ 4.99... 取 4 當亂數 0.5 ~ 0.599... * 10 得到 5 ~ 5.99... 取 5 當亂數 0.6 ~ 0.699... * 10 得到 6 ~ 6.99... 取 6 當亂數 0.7 ~ 0.799... * 10 得到 7 ~ 7.99... 取 7 當亂數 0.8 ~ 0.899... * 10 得到 8 ~ 8.99... 取 8 當亂數 0.9 ~ 0.999... * 10 ...

閱讀完整內容

自己設計讓網頁支援多國語系的架構

6月 10, 2015

首先我們要把問題釐清，支援多國語系最基本的概念就是，畫面上的文字要被替換。於是我們先建立一個用來被替換的多國語系字典檔這邊先簡單用物件來當範例 // 多國語系文字庫 var gLib = { "0000": { "CHT": "Traditional Chinese (繁體中文)", "ENU": "English (English)", "KOR": "Korean (한국어)" }, "0001": { "CHT": "語言", "ENU": "Language", "KOR": "언어" }, "0002": { "CHT": "選擇語言：", "ENU": "Select your language:", "KOR": "언어를 선택하세요 :" } } 有了多國語系文字庫之後，我想要建立一個管理器來存取這個文字庫，我希望這個管理器僅保有我指定語言的部分，並且提供取用的 get function // 文字庫管理器 var gTxtLib = { resource: undefined, set: function(lib, lang) { var result = undefined; if (typeof lib == 'object') { result = {}; for (var id in lib) { var txtObj = lib[id]; result[id] = (lang in txtObj ? txtObj[lang] : undefined); } } this.resource = result; }, has...

閱讀完整內容

javascript milliseconds to time format

6月 09, 2015

// 換算ms時間成一般時間格式 function getTimeString(total_ms) { var ms = 0, sec = 0, min = 0, hour = 0; ms = total_ms % 1000; sec = parseInt((total_ms - ms) / 1000); if (sec != 0) min = Math.floor(sec / 60); if (min != 0) hour = Math.floor(min / 60); return (hour > 0 ? formatNumberLength(hour, 2) + ":" : "") + (min > 0 ? formatNumberLength(min % 60, 2) + ":" : "") + (sec > 0 ? formatNumberLength(sec % 60, 2) : "00") + "." + formatNumberLength(ms, 3); } // 將數值轉成指定長度的字串 function formatNumberLength(oNumber, oLength) { var str = parseInt(oNumber).toString(); while(str.length < oLength) { str = '0' + str; } return str; } <><> 結果範例 <><> ms: Result:

閱讀完整內容

javascript - class like

7月 23, 2013

當物件導向的程式寫久了之後，會發現class的包裝方式真的是一種很棒的東西，把一些相關的東西包在一起，包括變數，包括程式(function、方法)，內部共享資源，對外則提供安全(簡單)的存取通道。而我最近在寫 javascript，js沒有class這種東西，起初有點灰心，但後來網路上爬了一陣子發現，由於js架構的關係，可以弄出class like的程式架構，於是我就把它學起來了！以下弄一個範例分享給各位。這一個範例，概念上是弄一個叫myRing的物件，它是一個RING資料容器，大小是10，存滿10筆資料之後，又重頭開始存。存資料進去的function為addData。而依照新舊順序將容器裡所有資料取出的function為getData，另外dataLength為此容器目前的資料筆數。總共三個對外的資源，而內部控制及存取資料的變數有三個，curIndex, upLimit, myData，為private，外部不能直接存取。完整的程式碼如下：(js_class_like.html) <html> <head> <meta http-equiv="Content-Type" content="text/html" charset="utf-8"> <title>javascript class like</title> <style type="text/css"> #log { font-size:24px; color:blue; font-family:Tahoma; } </style> <script type="text/javascript"> var RoutineInt; var ring = new myRing(); RoutineInt = self.setInterval('MyAction()', 1000); function MyAction() { ring.addData(Math.floor(Math.random() * 100)); document.ge...

閱讀完整內容