pCloud Partner Program

[jQuery]檢查HTML元素是否秀在畫面上

程式技術/Javascript 2018/04/03 17:40
views: 27490 times
一般在操作與檢查瀏覽器畫面上的元件, 是否可以看得到, 使用 css, display 等方法進行檢查, 不過實際上只是檢查是否能在瀏覽器上出現, 但因為瀏覽器只能出現目前可視的區域, 所以實際上元素是否有捲到可以出現的地方是無法透過原本的檢查方法進行檢查, 需要做一些運算.

這個 jQuery plugin: jquery-visible 就是用來檢查這樣的狀況:

https://github.com/customd/jquery-visible/

引用了這個 jQuery Plugin 後, 就能利用 visible() 方法來檢查是否目前的畫面是看得到這個元素. 另外也可以透過 'partial' 參數來檢查是否部分可以看到, 範例程式如:

https://codepen.io/timhuang/pen/rdKbyY

利用 $("#xxx").visible() 檢查是否全部可見或是使用 $("#xxx").visible('partial') 檢查是否部分可見, 十分方便好用.
top

[FUN]知道720p, 1080p, 1080i, 4k有什麼不同嗎?

程式技術/Javascript 2018/03/23 12:16
views: 44726 times
這張梗圖很有趣:




但利用 javascript 如何實作呢? 是個實用的小題目, 來看看程式吧:


執行結果:
https://codepen.io/timhuang/pen/MVoOdK
top

SQLite線上玩-sqliteonline

程式技術/Database 2018/03/09 17:42
views: 60758 times
這個網站提供了線上執行 SQLite 的功能, 對於初學者, 或想要了解 SQL 語法的人有很大的幫助.

https://sqliteonline.com

除了可以學習 SQLite 功能外, 其實在一般的應用, 有時想要快速的建立幾個簡單的 table 與輸入一些資料後存出來, 使用這個網站也能很快速容易地達成, 舉例來說, 建立一個 table:

CREATE TABLE t_product (f_id INTEGER PRIMARY KEY, f_name VARCHAR, f_cat VARCHAR, f_desc VARCHAR)


輸入一些資料:

INSERT INTO t_product VALUES (1, '哈利波特', '書', '有趣的魔法故事書'),
(2, '波西傑克森', '書', '半神半人的希臘混血人故事'),
(3, '充電線', '3c', 'usb 充電線'),
(4, 'iphone x', '3c', 'apple最新手機')


進行查詢:

select * from t_product WHERE f_cat = '3c'




select f_cat, Count(*) from t_product group by f_cat


而且可以方便地使用 link 分享, 上面的結果連結為:

https://sqliteonline.com/#fiddle-5aa25641295bd9gdjejr1mc0

另外也可以下載對應的 SQLite 資料檔, 真是太方便了呢.

若是希望使用應用程式來讀取, 可以使用 DB Browser for SQLite 這個軟體:

http://sqlitebrowser.org/

同時有 Windows 與 MAC 的版本可供使用.

top

使用Google Drive API讀取文件內容供前端應用

程式技術 2017/12/28 16:09
views: 89923 times
有時在做一些小型的前端介面, 需要 CMS (內容管理系統) 的上稿功能, 來進行內容管理, 不過實做上稿系統需要相當的時間與設計, 若能使用更簡便的方式, 將能大量節省維護的成本, 例如使用 Wordpress 或今天要介紹的 Google Drive API.

使用共用文件的方式來管理內容, 除了介面不用再實做外, 也可以透過權限管理來做一些設限, 方便存取與更新. 這次介紹的 API 是讀取 Google Docuemnt 的內容來供應前端應用, 所以就是讓程式讀取內容, 而使用者則是使用 Google Document 來更新內容.

會使用到的 API 為 Google Drive API 中的 file export, 目前已是 v3 的版本了, 可以參考:

https://developers.google.com/drive/v3/reference/files/export

如何使用呢, 首先在 Google Drive 新增一個 Google文件(Document)檔案, 並開放為擁有連結的人都可以檢視, 並取得該檔案的 fileId, fileId 就是在 URL 上會看到或是 share link 上會看到的一串英數, 有區分大小寫, 如:

https://docs.google.com/document/d/18De5jl4VhDP8XU7g_UOO2PcZ5qiCCBg4S2B5FOzgLFA/edit?usp=sharing

其中的 18De5jl4VhDP8XU7g_UOO2PcZ5qiCCBg4S2B5FOzgLFA 即為 fileId.

接下來在 google developer console 新增一個專案, 啟用 Google Drive API 功能, 並建立 API key 即可透過以下 API 進行檔案內容存取:

https://www.googleapis.com/drive/v3/files/18De5jl4VhDP8XU7g_UOO2PcZ5qiCCBg4S2B5FOzgLFA/export?mimeType=text/plain&key=[your api key]

其中 fileId 即為該文檔的 fileId, 而 export 為讀取, 後面的 mimeType 可以有以下幾種:

用戶插入圖片

(更多可以參考: https://developers.google.com/drive/v3/web/manage-downloads#downloading_google_documents)

而最後的 API key 則為在 Google Developer Console 專案內建立的 API Key, 就可以順利讀取內容, 以下則為一個簡單的範例:

http://sample.diary.tw/43/readdoc.php

程式碼如下:



如此一來可以方便使用者上稿又能快速更新到前台, 十分方便.

Quota 的部分如下:

用戶插入圖片

每日 10億次, 每 100秒每使用者 1000次, 每 100秒 1萬次, 三個計算基礎以下為免費.


top

MongoDB的管理工具-Robo 3T

程式技術/Database 2017/09/19 12:21
views: 81441 times
無論是使用 mlab 的 mongdb 線上資料庫, 或是自建的 mongodb 環境, 都需要一個方便的操作管理工具, 可以使用這個好用的 robomongo 的 Robo 3T 工具, 官方連結:

https://robomongo.org/

它是一個 open source 的工具, 用來存取 mongodb, github 連結:

https://github.com/Studio3T/robomongo

同時有 Windows (install, portable), Mac, Linux 三種版本可供使用, 十分方便, 介面操作也很直覺容易, 是在使用 mongodb 的好用工具.
top

MongoDB使用PHP查找特定欄位是否存在

程式技術/Database 2017/07/24 14:59
views: 89741 times
由於 MongoDB 是一種 schema-free 的資料庫, 使用 Document 為基礎的存放方式, 所以若是想要查找特定欄位是否存在的語法就很重要了, 先來看看官方的資料:

https://docs.mongodb.com/manual/reference/operator/query/exists/

語法是使用 $exists 的方式來判定特定欄位是否存在, 若要轉為 php 語法的話, 可以使用如下:


來列出在 collection 中 field1 不存在的資料, 這對於使用特定欄位做為處理資料或作業資料來說, 可以方便地判斷, 也不用預先開好欄位, 很方便實用的一個用法.


top

javascript跨瀏覽器解析日期時間字串問題

程式技術/Javascript 2017/03/01 16:25
views: 152880 times
在前端使用 javascript 解析日期時間字串時, 在不同瀏覽器有不同的解讀, 我們來看一下:

2017-03-01T16:00:00

這個字串若是以 Firefox 與 IE 來解讀, 是 localtime, 若是以 Chrome 來解讀則是 GMT, 測試網址如下: https://jsfiddle.net/timhuang/8paLsfyr/2/

若是希望都是以 GMT 來解讀, 可以多加一個 Z 在字串的最後, 如: 2017-03-01T16:00:00Z 就會讓各瀏覽器取得一樣的 GMT 結果, 測試網址一下在上面.

所以若是在前端, 使用 javascript 處理日期時間字串時, 一定要理解與清楚這個狀況, 否則可能會有跨瀏覽器不一致的狀況.

參考資料: http://stackoverflow.com/questions/15109894/new-date-works-differently-in-chrome-and-firefox


top

SQL Fiddle好用線上資料庫語法測試工具

程式技術/Database 2016/12/29 12:13
views: 201729 times
線上的前端有好用的 jsfiddle (https://jsfiddle.net/), CodePen (http://codepen.io/), 今天發現了一個很棒的資料庫語法測試工具, SQL Fiddle, 網址如下:

http://sqlfiddle.com/

這個好用的工具分為左右兩側, 分別是 DDL,DML 與 SQL 兩塊, 左側的 DDL, DML 可以直接定義資料表與資料內容, 當然, 還是用標準的資料庫語法. 右邊則是於 DDL, DML 執行之後, 才能使用的 SQL 語法查詢與測試用.

這樣不僅能快速定義資料表供應用外, 最重要的是可以測試 SQL 的查詢語法. 從左上角 Menu 可以看到支援的資料庫有:

MySQL 5.6
MySQL 5.5
Oracle 11g R2
PostgreSQL 9.3
SQLite (WebSQL)
SQLite (SQL.js)
MS SQL Server 2014
MS SQL Server 2008

8種不同資料庫與版本, 十分方便. 另外於 DDL/DML的部分, 也可以直接用上方 Text To DDL 進行設定, 更加方便, 讓不會使用 DDL/DML 的人員, 也能無痛建立資料表, 例如:

用戶插入圖片

table name: t_staff,
data:
name, age, title
Mary, 25, manager
Charlie, 18, Clerk
Fiona, 19, Clerk

(第一列為欄位名, 之後為資料)

就會生出以下語法:

用戶插入圖片

接下來, 就可以在右側進行查詢, 如:

select * from t_staff where age > 20

就可以查出對應的資料了, 十分方便, 尤其對於要查找資料時的不同資料庫語法間的應用, 都有很大的幫助. 另外已完成的結果, 還能快速分享, 對於查找問題, 有更多可以協同作業的可能, 上面的範例如下:

http://sqlfiddle.com/#!9/18a360/1
top

線上幸運抽獎-手機版

程式技術/Javascript 2016/11/11 11:38
views: 107069 times
之前一直要找時間做一個手機用的版本, 終於昨天花點時間寫好了, 有需要的朋友們歡迎多加利用, 網址如下:

http://sample.diary.tw/lucky-draw/m

功能與原來的版本相同, 只是介面用了 jQuery mobile 的方式呈現, 分別將說明、名單、獎項與抽獎放在4個分開的介面上, 利用下方的切換功能來進行切換, 一樣可以隨時加碼. 抽獎結果的部分, 考慮手機介面較小, 所以最後抽出的放在最上面, 而且上方會出現目前待抽的獎項與剩餘人數, 剩餘獎項與已得獎組數等資訊.

最後還是希望大家能多多利用, 也提供建議, 謝謝.

原來的電腦版介紹: http://diary.tw/tim/991
top

好用Google中文字體

程式技術 2016/10/12 11:07
views: 82731 times
製作網站時, 前端的中文字體真的是很傷腦筋, 又沒有那麼多的選擇, 又需要考慮使用者端是否有對應的字型. Google Font 計畫提供了許多字型可供應用, 也有不少繁體字型可供應用.

先來看看有哪些吧:

https://fonts.google.com/earlyaccess

上面是目前所有新增的 Google Font 的字體(非英文與拉丁文為主的), 我們可以用 Chinese 來查看看有哪些:

楷體 cwtexkai
圓體 cwtexyen
仿宋體 cwtexfangsong
Noto Sans TC notosanstc
明體 cwtexming
黑體 cwtexhei

這6種字體可供應用, 使用方式也很簡單, 直接使用對應的 CSS 即可, 以楷體為例, 可以看到他的 CSS 引入語法如下:

@import url(http://fonts.googleapis.com/earlyaccess/cwtexkai.css);

之後只需要在對應的 class 下 font-family 語法即可, 如下:

font-family: 'cwTeXKai', serif;

為方便一次檢視所有字體, 可以參考範例資料:

http://sample.diary.tw/42/index.htm

繼續閱讀:
http://www.ithome.com.tw/news/108941

top

PREV : [1] : [2] : [3] : [4] : [5] : ... [20] : NEXT



DJI Tello 小米萬能遙控器 手機App操控
Microsoft Office 365 中文家用版PKC (無光碟) ASUS華碩 AC1900 雙頻無線路由器 RT-AC68U
美國 VORNADO 533 渦流空氣循環機 (黑色) 御茶園 每朝健康綠茶(650mlx24入)
每朝健康 雙纖綠茶(650mlx24入)


 Waiting...