Budget Programmer: 程式碼

顯示具有 程式碼 標籤的文章。顯示所有文章

2018年3月31日星期六

2018年1月28日星期日

(JS)WebCodeCamJS Qrcode Bardcode Reader

Qrcode & BarCode

2018年1月24日星期三

(JS)使用jquery-qrcode生成二維碼

先簡單說一下jquery-qrcode，這個開源的library（可以從https://github.com/jeromeetienne/jquery-qrcode 獲取），

qrcode.js 是實現二維碼數據計算的核心類，

jquery.qrcode.js 是把它用jquery方式封裝起來的，用它來實現圖形渲染，其實就是畫圖（支持canvas和table兩種方式）

支持的功能主要有：

2018年1月21日星期日

(JS) Donate me Bitcoin 贊助按鈕

風險警告：投資加密幣風險極高! Investing altcoins accompanies with the highest risk!

Please Donate To Bitcoin Address: [[address]]

Donation of [[value]] BTC Received. Thank You.

[[error]]

用法：
https://blockchain.info/create_donation_button?address=比特幣錢包
錢包如:16KLuqE4VwaEbuucjQRndWtdmyWNwADTy

JS

1
2

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript" src="https://blockchain.info/Resources/js/pay-now-button.js"></script>

HTML

注意：請檢查data-address是否正確

<div style="font-size:16px;margin:0 auto;width:300px" class="blockchain-btn"
     data-address="16KLuqE4VwaEbuucjQRndWtdmyWNwADTy"
     data-shared="false">
    <div class="blockchain stage-begin">
        <img src="https://blockchain.info/Resources/buttons/donate_64.png"/>
    </div>
    <div class="blockchain stage-loading" style="text-align:center">
        <img src="https://blockchain.info/Resources/loading-large.gif"/>
    </div>
    <div class="blockchain stage-ready">
         <p align="center">Please Donate To Bitcoin Address: <b>[[address]]</b></p>
         <p align="center" class="qr-code"></p>
    </div>
    <div class="blockchain stage-paid">
         Donation of <b>[[value]] BTC</b> Received. Thank You.
    </div>
    <div class="blockchain stage-error">
        <font color="red">[[error]]</font>
    </div>
</div>

2018年1月20日星期六

(JS)QR Code by Google Charts API

Google Charts API已過時，未來可能不支援

QR Code是由黑白方塊組成的機器可讀代碼，通常用於存儲URL或其他信息，供智慧手機上的相機閱讀。

舉例來說，下面是包含本網站主頁鏈接的二維碼：

Google Chart API是一個工具，可以讓人們從一些數據中輕鬆創建圖表並將其嵌入到網頁中。Google根據HTTP請求中的數據和格式參數創建圖表的PNG圖像。

以下是一般格式：

https://chart.googleapis.com/chart?cht=qr&chl=DATA&chs=160x160&chld=L|0

參數	描述
CHL	要編碼的內容。確保內容是HTML編碼的，例如`%20空白`
CHT	圖表類型。`qr`QR code。
CHS	生成的QR碼圖像的尺寸為`<width>x<height>`。

請參閱Google開發者網站了解更多信息。

本站所使用的簡單Qrcode外掛

PS.url encoder建議使用encodeURIComponent避免#等特殊符號問題

參考來源：https://mathewsachin.github.io/blog/2017/01/03/make-qr-code.html

2018年1月17日星期三

(JS) full calendar中華民國政府行政機關辦公日曆表

最佳解析度590x600以上

2018年1月15日星期一

(JS) wScratchPad Scratcher 18+刮刮樂效果

JS:wScratchPad

https://github.com/websanova/wScratchPad
Setting:

$('#elem').wScratchPad({
  size        : 5,          // The size of the brush/scratch.
  bg          : '#cacaca',  // Background (image path or hex color).
  fg          : '#6699ff',  // Foreground (image path or hex color).
  realtime    : true,       // Calculates percentage in realitime.
  scratchDown : null,       // Set scratchDown callback.
  scratchUp   : null,       // Set scratchUp callback.
  scratchMove : null,       // Set scratcMove callback.
  cursor      : 'crosshair' // Set cursor.
});

2018年1月14日星期日

Cross Domain 跨網站取得資料yahoo api

原文：https://code.tutsplus.com/tutorials/quick-tip-cross-domain-ajax-request-with-yql-and-jquery--net-10225

yahoo api 可以取得其他網站的資料
但原文html方式已經失效剩下Json (xml未試)

Jsfiddle demo:

JS

var site = "http://data.ntpc.gov.tw/api/v1/rest/datastore/382000000A-000077-002";
var url = "https://query.yahooapis.com/v1/public/yql?q=" + encodeURIComponent('select * from json where url="' + site + '"') + "&format=json"; 

  $.getJSON( url, function(data) {
  $("#result").html( JSON.stringify(data) );
});

試著抓取
http://data.ntpc.gov.tw/api/v1/rest/datastore/382000000A-000077-002
都失敗原因出在瀏覽器不允許cross domain抓取資料
因為會有安全問題middle in attack(中間人攻擊)

Chrome extension plugin:Allow-Control-Allow-Origin: *
外掛：https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=zh-TW
外掛原文：
Allows to you request any site with ajax from any source. Adds to response 'Allow-Control-Allow-Origin: *' header
Developer tool.

*Summary*
Add to response header rule - 'Access-Control-Allow-Origin: *'

*Hint*
Same behavior you can get just using chrome flags [http://www.chromium.org/dJSevelopers/how-tos/run-chromium-with-flags]

chrome --disable-web-security

or

--allow-file-access-from-files --allow-file-access --allow-cross-origin-auth-prompt

簡單來說就是一個開關都設好了

Now:Test on jsfiddle

JS with jquery

//Enable cross domain function only
var site = "http://data.ntpc.gov.tw/api/v1/rest/datastore/382000000A-000077-002";
  $.getJSON( site, function(data) {
  //html with json to string
  $("#result").html( JSON.stringify(data) );
});

2018年1月12日星期五

微軟Visual Studio Code 開源免費跨平台代碼編輯器

Visual Studio Code (簡稱 VS Code / VSC) 是一款免費開源的現代化輕量級代碼編輯器，支持語法高亮、智能代碼補全、自定義熱鍵、括號匹配、代碼片段、代碼對比 Diff、GIT 等特性，並針對網頁開發和雲端應用開發做了優化。軟體跨平台支持 Win、Mac 以及 Linux，運行流暢，可謂是微軟的良心之作……

相信很多程式設計師同學都沒想過有一天能在不用虛擬機的情況下直接在 Mac、Linux 上使用 VisualStudio 吧。當然，微軟稱 Visual Studio Code 並非完整版的 Visual Studio，它只是一款輕量級的代碼編輯器，而不是一個重量級的完整 IDE (集成開發環境)，它的競爭對手將會是 Sublime Text、Atom、VIM、Notepad++ 等產品。

當你開始閱讀這篇文章時，請先不要把Visual Studio Code和.net、Windows聯想到一起，因為VS Code是一個跨平台，支持30多種語言的開箱代碼編輯器。不管你是.Net、Java、PHP、Python、JavaScript、Objective-C...還是前端開發者，都值得擁有

PS.有用過M$ Visual Studio就會知道這個工具的好!!

下載網址：https://code.visualstudio.com/

原文網址：https://read01.com/58oQB.html

2018年1月11日星期四

(CSS)(JS)聖旨卷軸效果

HTML

<div class="content">
  <div class="l-pic-index"></div><!--左转轴-->
  <div class="r-pic-index"></div><!--右转轴-->
  <div class="l-bg-index"></div>
  <div class="r-bg-index"></div>
  <div class="main-index">
   <!-- <h1 class="title"><img src="./img/intro-title.png" alt=""></h1> -->
  
     <div class="intro-text">
   <div class="first">奉</div>
   <div>天承運皇帝詔曰</div>
   <div>用盡我所有努力絞盡我所有腦力經過我千思萬想獻你我一片心意恰似比洛陽紙貴更勝似千金一擲祝君平安福氣多日進斗金財富來</div>
     </div>
  </div>
 </div>

JS

  //卷轴展开效果 Document Ready
  $(".l-pic-index").animate({'left':'50px','top':'0px'},1450);
  $(".r-pic-index").animate({'right':'-60px','top':'0px'},1450);
  $(".l-bg-index").animate({'width':'236px','left':'73px'},1500);
  $(".r-bg-index").animate({'width':'236px','right':'-38px'},1500,function(){
   $(".main-index").fadeIn(800);
  });

CSS

body,ul,li,p,h1,h2,h3,h4,h5{
 margin:0;
 padding:0;
 font-size:100%;
}
body{
 font-family: 'Microsoft YaHei UI', 'Microsoft YaHei', SimSun, 'Segoe UI', Tahoma, Helvetica, Sans-Serif;
 background: #6f0b02;
}
img{
 border:0;
}
.content{
 position: relative;
 margin: 40px 0 0 -21px;
 width: 500px;
 height: 460px;
}
.l-pic-index{
 position: absolute;
 left: 200px;
 top: 1px;
 z-index:2;
 width:50px;
 height:460px;
 background: url("https://i.imgur.com/muLgAEn.png") no-repeat right 0;
}
.r-pic-index{
 position: absolute;
 right: 200px;
 top: 0;
 z-index: 2;
 width:50px;
 *width:82px;
 height:460px;
 background: url("https://i.imgur.com/C1a5S59.png") no-repeat left 0;
}
.l-bg-index{
 position: absolute;
// top: 20px;/*中间转轴位置*/
 left: 230px;
 z-index: 1;
 width: 25px;
 height: 459px;
 background: url("https://i.imgur.com/ospnj28.png") right 0 no-repeat;
}
.r-bg-index{
 position: absolute;
 right: 230px;
 z-index: 1;
 width: 25px;
 height: 459px;
 background: url("https://i.imgur.com/9Kl8d5Y.png") 0 0 no-repeat;
}
.main-index{
 display: none;
 overflow: hidden;
 zoom:1;
 position: absolute;
 z-index: 5;
 width:900px;
 height:250px;
 left:95px;
 top:75px;
 color: #2e2e2e;

}
.intro-text{
 writing-mode: vertical-rl;
 font-size:32px;

}


 .first
{
 text-indent:1em;
 
}

有空再來解析先備份
來源：http://www.paobuke.com/zh-tw/develop/javascript/pbk43018.html、http://588ku.com/sucai/7140313.html

2018年1月9日星期二

(CSS)Chinese Wedding Card 電子喜帖

手機建議使用橫看,目前直書顯示會因會中文字型不同而顯示不同，手機作業系統不同也可能產生不同。

HTML

<!--喜帖--向右翻>
<div id="wedding" dir="rtl">
 <div class="hard"> 
 <img
  src="https://cdn.rawgit.com/lagendre/rsvp/gh-pages/img/cover.jpg"  class="cover_page" />   
 </div>

 <div class="hard">
   <section>
                  <br />
    <img src="https://cdn.rawgit.com/lagendre/rsvp/gh-pages/img/context.jpg" height="106" class="map"/>
              <!--a href="img/map_big.jpg"  data-featherlight="image"><img src="img/map.jpg" width="280" alt="map to restaurant" class="map" /></a-->
                 <br /> <br /><br /> <br />  
               
            </section>
 </div>
 
 <div class="hard">
        <section>
            
<div class="margin">謹詹於中華民國ｏｏｏ年<div class="text"><div>國曆ｏ月ｏ日</div><div>農曆ｏ月ｏ日</div></div>(星期ｏ)
    <br/ >
    為<div class="text"><div>ｏ男ｏｏ先生</div><div>ｏ女ｏｏ小姐</div></div>舉行婚禮典禮敬備喜筵 &nbsp;恭請
 
<div class="middle">
 <span class="welcome">闔第光臨</span>
           <div class="parents text">
             <div>ｏ ｏ ｏ</div>
             <div>ｏ ｏ ｏ</div>
             <div>ｏ ｏ ｏ</div>
             <div>ｏ ｏ ｏ</div>
           </div>
            <span class="bottom">鞠躬</span>
            </div>
 <span class="invite">恕邀</span>
            <img src="https://cdn.rawgit.com/lagendre/rsvp/gh-pages/img/div_bar.png" class="text" height="10">
            <div class="text">
            <div>席設：ｏ ｏ ｏ ｏ</div>
            <div>地址：ｏｏｏｏｏｏｏｏ<span class="number">888</span>號</div>
            <div>
           <a href="tel:123456789" target="_blank" tittle="打電話">電話：ｏｏｏｏｏｏｏｏｏ</a>
            </div>
            <div>
            時間：<a href="#" target="_blank" download="wedding.ics" title="加入行事曆">ｏｏｏｏ時準時入席</a></div> 
            </div>
            </div>
        </section>
    </div>
  
</div>
<!--end of 喜帖-->

JS

$("#wedding").turn({
  width:  400,
  height: 300,
    elevation: 50,
    gradients: true
});

CSS

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

body {
  margin: 0;
  padding: 0;
  background-color: lightpink;
  overflow: hidden;
}
/*
wedding card
*/      
section {
 -ms-writing-mode: tb-rl; /* old syntax. IE */
 -webkit-writing-mode: vertical-rl;
 -moz-writing-mode: vertical-rl;
 -ms-writing-mode: vertical-rl;
 writing-mode: vertical-rl; /* new syntax */ 
  display:inline-block;
  vertical-align:middle;
  font-family: 'cwTeXKai', serif;
  font-size:12px;
  color: #acd8bf;
  text-align: justify;
}

section .text{
        display:inline-block;
        vertical-align:middle;
}
  

.cover_page{
        width: 200px;
        height: 300px;
         cursor:move;
}
    
    
.hard{
        background:  red;
       
}

/*
right page
*/    
    section .margin {
   margin-top: 2em;  
    }

    section .indent {
   text-indent: 2em;  
    }
       
    section .welcome{
         font-size: 12pt;
    }
    
    section .bottom{
        margin-top: 1em;
         font-size: 12pt;
        
    }
    
    section .middle{
        margin-right: 1em;
        margin-left: 1em;    
    }

   section .parents{
        margin-top: 2.9em;
  }
    
    section .invite{
       // text-indent: 2em;
        margin-bottom: 1em;
    }
    
  
     section .invite_text{
        font-size: 0.5rem;
    }


    section .number { text-combine-upright: all }

    a {
        text-decoration: none;
        color: #acd8bf;        
    }

Google Web Fonts 五款免費網頁字型(黑體, 仿宋, 明體, 楷體, 圓體)

網頁使用 webfont (雲端字型) 為能解決以下問題：
– 工程師不用再跟設計師解釋，為什麼網頁上的字型跟設計稿長的不一樣
– 讓 Windows 的網頁文字不再只是黑體/明體/標楷體套餐
– 讓跨瀏覽器都能顯示相同字型
– 網頁編輯人員不用再把特別的字型都做成圖片
– 讓文字可以有好看的字體，同時也可以被選取、複製、翻譯、向量縮放、被搜尋引擎索引。
– 用其他亞洲語系的系統字型來顯示黑體，如日文 (Meiryo)、韓文 (Malgun Gothic)、中國 (SimHei, Microsoft YaHei)，可以讓網頁上的文字顯示得比較不一樣，但可能發生缺字、筆畫不同、或是有些電腦沒裝的問題。
– 讓微軟正黑體粗體的碧、筵、綰不要有多一個空格，或是粗體筆畫異常的問題

Google Fonts又推出了五款網路專用的免費字型，分別有黑體、仿宋、明體、楷體及圓體，讓部落格在網頁的字型呈現上又多了好幾種不同的選擇，也讓文章標題更加的明顯跟有設計感。

只需引用google fonts的css，就可以將網頁中的文字套用上不同的字型，無論在Chrome、Firefox、Safari、IE皆可正常顯示。

Google Fonts使用方法

進入Google Fonts網頁後，請直接搜尋Chinese-traditional，這一區的文字都是正體中文(繁體)，也都可以完全免費使用，每個字型分別將css引用與指定字型就可以了。

網站名稱：Google Fonts : Early Access

網站網址：https://www.google.com/fonts/earlyaccess

來源：https://wpbox.tips/google-fonts-chinese-traditional/
https://blog.user.today/chinese-webfont-note/

(CSS)諸葛亮出師表

CSS語法回顧

直書：writing-mode: vertical-rl;
分散對齊：text-align: justify;
依字元對齊：margin-top:2em;
抬頭空格：text-indent : 2em;
Google的楷體：font-family: 'cwTeXKai', serif;

@import url(//fonts.googleapis.com/earlyaccess/cwtexkai.css);
免費的字體來源：https://fonts.google.com/earlyaccess

@import url(//fonts.googleapis.com/earlyaccess/cwtexkai.css);
#chinesetxt { 
writing-mode: vertical-rl; 
font-size: 36px;
font-family: 'cwTeXKai', serif;
text-align: justify;
height:330px;
line-height:40px;
margin-top:1.8em;
margin-left:-0.2em
}
.paragraph{
  text-indent : 1em;
}
body{
background-image: url("https://i.imgur.com/U4WVYju.jpg");
background-repeat: repeat-x;
}

JS利用

捲軸移動至標題：document.documentElement.scrollLeft = document.body.scrollLeft = document.getElementById("chinesetxt").offsetWidth;

1 2	document.documentElement.scrollLeft=document.body.scrollLeft = document.getElementById("chinesetxt").offsetWidth;

HTML

<div id="chinesetxt" lang="zh-Hant">
<div ><b>出師表</b></div>
<div>
臣亮言：
</div>
<div>先帝創業未半，而中道崩殂。今天下三分，益州疲弊，此誠危急存亡之秋也。然侍衛之臣，不懈於內；忠志之士，忘身於外者，蓋追先帝之殊遇，欲報之於陛下也。誠宜開張聖聽，以光先帝遺德，恢弘志士之氣；不宜妄自菲薄，引喻失義，以塞忠諫之路也。宮中府中，俱為一體，陟罰臧否，不宜異同。若有作姦犯科，及為忠善者，宜付有司，論其刑賞，以昭陛下平明之治，不宜篇私，使內外異法也。</div>
<div class="paragraph">
侍中、侍郎郭攸之、費褘、董允等，此皆良實，志慮忠純，是以先帝簡拔以遺陛下。愚以為宮中之事，事無大小，悉以咨之，然後施行，必能裨補闕漏，有所廣益。將軍向寵，性行淑均，曉暢軍事，試用於昔日，先帝稱之曰「能」，是以眾議舉寵為督。愚以為營中之事，悉以咨之，必能使行陣和睦，優劣得所。親賢臣，遠小人，此先漢所以興隆也；親小人，遠賢臣，此後漢所以傾頹也。先帝在時，每與臣論此事，未嘗不歎息痛恨於桓、靈也。侍中、尚書、長史；參軍，此悉貞良死節之臣也，願陛下親之信之，則漢室之隆，可計日而待也。
</div>
<div class="paragraph">
臣本布衣，躬耕於南陽，苟全性命於亂世，不求聞達於諸侯。先帝不以臣卑鄙，猥自枉屈，三顧臣於草廬之中，諮臣以當世之事，由是感激，遂許先帝以驅馳。後值傾覆，受任於敗軍之際，奉命於危難之間，爾來二十有一年矣！先帝知臣謹慎，故臨崩寄臣以大事也。受命以來，夙夜憂勤，恐託付不效，以傷先帝之明。故五月渡瀘，深入不毛。今南方已定，兵甲已足，當獎率三軍，北定中原，庶竭駑鈍，攘除奸凶，興復漢室，還於舊都；此臣所以報先帝而忠陛下之職分也。至於斟酌損益，進盡忠言，則攸之、褘、允之任也。
</div>
<div class="paragraph" >
願陛下託臣以討賊興復之效；不效，則治臣之罪，以告先帝之靈。若無興德之言，則戮允等，以彰其慢。陛下亦宜自課，以諮諏善道，察納雅言，深追先帝遺詔，臣不勝受恩感激。
</div>
<div class="paragraph">
今當遠離，臨表涕泣，不知所云。
</div>
</div>

(CSS)段落文字縮排、凸排設定

text-indent 首行凸排
當要作凸排時，當把text-indent設成-4em時，表示向左靠，而em代表什麼意思呢?其實em與百分比有點像，它基準則取決於文字的尺寸，比方文字設15px，這時1em=15px，所以當前面要向前四個字，就可用4em，正負代表方向，當向左移4em，又用margin推4m，這時區塊大小，就由原來的400px變成460px，若希望讓區塊，還是保持400px時，就得將with設成340px，才能維持一樣的大小喔！才不會在那擠來擠去，造成版面的跑位。
梅問題-CSS教學－段落文字縮排與凸排設定

<style>
p{
width:400px;
font-size:15px;
margin-left : 4em; 
text-indent : -4em ;

}
</style>
<body>
<p>
<style>
p{
width:400px;
font-size:15px;
margin-left : 4em; 
text-indent : -4em ;

}
</style>
<body>
<p>
觸控式的虛擬鍵盤，已是目前智慧型手機的趨勢，當省略以往實體鍵盤的空間後，讓手機螢幕可視範圍變更大，雖然說虛擬鍵盤很方便，也不佔空間
</p>
</body>
</p>
</body>

text-indent 首行縮排
縮排就比剛的凸排,來的簡單許多，只要下text-indent，立即就可段落字的首向縮排，但在縮排時，寬度則不會受任何的影響，原來設定多少就是多少囉!
梅問題-CSS教學－段落文字縮排與凸排設定

<style>
p{
width:400px;
font-size:15px;
text-indent : 4em;

}
</style>

<p>
觸控式的虛擬鍵盤，已是目前智慧型手機的趨勢，當省略以往實體鍵盤的空間後，讓手機螢幕可視範圍變更大，雖然說虛擬鍵盤很方便，也不佔空間
</p>

p { 
    font-size: 12px;　　　　　          /* 設定文字大小 */
    line-height: 24px;　　　          　/* 設定文字行距 */
    letter-spacing: 3px;　            　/* 設定文字間距 */
    background-image: url(dot.gif); /* 設定文字背景圖  */
}

來源:https://www.minwt.com/webdesign-dev/css/5383.html

2018年1月8日星期一

(CSS3)用 CSS 讓字體可以變成直書 writing-mode

終於橫式直書已可以在chrome firefox IE等各大主流出現了
復興中華文化的里程碑阿

1
2
3

<p lang="zh-Hant">民國<span class="num">105</span
>年<span class="num">4</span
>月<span class="num">29</span>日</p>

1 2	html { writing-mode: vertical-rl; font: 24px serif } .num { text-combine-upright: all }

DEMO

來源：https://developer.mozilla.org/en-US/docs/Web/CSS/text-combine-upright

利用直書做喜帖（待續）

(JS)turn.js翻書效果

Turn.js是一款用於製作翻頁電子書的插件，筆者認為算是效果及功能都相當不錯的插件，以下介紹Turn.js的基本使用及RWD，筆者使用版本為4.1.0

Turn.js官網

1.建置

從官網下載插件後，在<head></head>中加入連結turn.js及jquery的script tag(請注意插件的檔案位置，以下是將其與html檔放在同一資料夾中)

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="turn.min.js"></script>

<body></body> 中放入以下code，若要增減頁數，增減 div tag即可，hard class是其中一種翻頁效果，可自由決定加不加

<div id="flipbook_IDname">
 <div class="hard"> Turn.js </div>
 <div class="hard"></div>
 <div> Page 1 </div>
 <div> Page 2 </div>
 <div> Page 3 </div>
 <div> Page 4 </div>
 <div class="hard"></div>
</div>

最後再js檔或script tag中加入以下code，就完成啦!

$("#flipbook_IDname").turn({
  width: 400,
  height: 300,
  autoCenter: true
});

長寬藉由改動width及height後的數值來設定

2.翻到特定頁數

$("#flipbook_IDname").turn("page", 10);
//數字就是你要翻到的頁數

3.變為單頁式

$("#flipbook_IDname").turn("display","single");
//single是單頁，double是雙頁也就是預設

4.改變書頁長寬

$("#flipbook_IDname").turn("size", 1000, 750);
//第一個數字為width,第二個數字為height
//注意!!!這裡及建置步驟的width都是指雙頁式時，兩頁的寬

5.RWD
藉由第4項的function，來做出RWD效果，以下的例子電子書寬度會維持視窗寬度的一半，高度則是視窗高度的0.8倍

$(window).resize(function(){
          $("#flipbook_IDNAME").turn("size", window.innerWidth*0.5,window.innerHeight*0.8);
})
//window.innerWidth 視窗寬  window.innerHeight視窗高

除了這些以外，Turn.js還是有許多功能的，詳細請參閱官方網站的Documentation

(JS)Featherlight lightbox圖片強調

開源Featherlight 具高度輕量化。僅 400 行 JavaScript 代碼和 100 行 CSS，檔案小於 6kB。它非常聰明、響應式、支持圖像、ajax 和 iframes 隨時可適應你的需要。 Featherlight 適用於 IE8+ 及所有現代瀏覽器和移動平台。
https://noelboss.github.io/featherlight/

(JS)jQuery Handsontable網頁Excel

jQuery Handsontable 是jQuery插件中一款非常酷的可編輯的表格，它的描述是：a minimalistic Excel-like data grid editor for HTML, JavaScript & jQuery. (一款類似於Excel的可編輯表格，通過HTML， JavaScript和jQuery可以對它進行實現)

來簡單介紹下0.35.0，此版本也是最新版本，當然可能會有一些bug，但是，對於這種開源項目，我們也應該抱著一種嘗試與學習的心態去面對，所以，我們就學習一下它的最新版本，同時如果大家發現bug還可以給作者提出，學習的樂趣不就在其中嗎？

這個版本更加的靈活，它提供了更多的鉤子方法（例如：事件和回調機制）和更多的靈活的操作，同時該版本兼容0.8版本的API，當然有一些具體的變化，大家可以看具體變化細節。

在其官網中我們可以看到非常好的演示效果，同時你可以點擊Edit in jsFiddle進入在線編輯模式（jsFiddle是一款非常好用的js在線編輯演示工具，想在博客上演示自己的成果的js工程師們有福了），同時，我們可以點擊Hide source code展現出來簡單的代碼。

var data = [
  ["", "Maserati", "Mazda", "Mercedes", "Mini", "Mitsubishi"],
  ["2009", 0, 2941, 4303, 354, 5814],
  ["2010", 5, 2905, 2867, 412, 5284],
  ["2011", 4, 2517, 4822, 552, 6127],
  ["2012", 2, 2422, 5399, 776, 4151]
];

$('#example').handsontable({
  data: data,
  minSpareRows: 1,
  colHeaders: true,
  contextMenu: true
});

訂閱：文章 (Atom)

星期日	+19°	+19°
星期二	+20°	+17°
星期三	+19°	+17°
星期四	+18°	+17°
星期五	+16°	+15°
星期六	+19°	+17°

2018年3月31日 星期六

2018年1月28日 星期日

2018年1月24日 星期三

2018年1月21日 星期日

JS

HTML

2018年1月20日 星期六

本站所使用的簡單Qrcode外掛

2018年1月17日 星期三

2018年1月15日 星期一

JS:wScratchPad

2018年1月14日 星期日

JS

JS with jquery

2018年1月12日 星期五

2018年1月11日 星期四

HTML

JS

CSS

2018年1月9日 星期二

HTML

JS

CSS

Google Fonts使用方法

2018年1月8日 星期一

QR Code Generator

賺幣水龍頭

2018年3月31日星期六

2018年1月28日星期日

2018年1月24日星期三

2018年1月21日星期日

2018年1月20日星期六

2018年1月17日星期三

2018年1月15日星期一

2018年1月14日星期日

2018年1月12日星期五

2018年1月11日星期四

2018年1月9日星期二

2018年1月8日星期一