顯示具有網站標籤的文章。顯示所有文章

2018年3月31日星期六

2018年3月2日星期五

fetch the row count for all tables in a SQL SERVER database(計算微軟資料庫筆數)

USE  [enter your db name here]
GO

SELECT      SCHEMA_NAME(A.schema_id) + '.' +
        A.Name, SUM(B.rows) AS 'RowCount'
FROM        sys.objects A
INNER JOIN sys.partitions B ON A.object_id = B.object_id
WHERE       A.type = 'U'
GROUP BY    A.schema_id, A.Name
GO

2018年2月2日星期五

Simple Sharing Buttons Generator 線上快速製作純 HTML + CSS 社群網站分享按鈕

獨家LINE分享

<li>
<a href="http://line.naver.jp/R/msg/text/?分享的內容" target="_blank">
<img src="https://cdn.rawgit.com/lagendre/lagendre.github.io/30eddb37/img/flat_web_icon_set/color/Line.png" alt="用LINE傳送" height="32" width="32" />
</a>
</li>

什麼是站點地圖Sitemap？

站點地圖是一種文件，您可以通過該文件列出您網站上的網頁，從而將您網站內容的組織架構告知Google 和其他搜索引擎。Googlebot 等搜索引擎網頁抓取工具會讀取此文件，以便更加智能地抓取您的網站。

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日星期一

RawGit

https://rawgit.com/

GitCDN

https://gitcdn.xyz/

什麼是CDN ?

CDN(Content delivery network)，又名內容傳遞網路

這是一種內容在網路上傳輸的快取機制

一般而言，連上一個網站就等同於連上這個網站的所在的伺服器

舉例來說，如果你(人在台灣)使用網站的伺服器位置是在美國，你必須透過網路先連到遙遠的美國網路再連上網站(伺服器位置)

但是如果在亞洲的日本(節點)、香港(節點)甚至是台灣(節點)，佈有CDN服務的話(網站伺服器一樣在美國)

那麼你只需要連線到日本(節點)、香港(節點)或台灣(節點)的機房就可以連上網站(隨便一個都比美國近)

而你讀取到的內容，完全是和連線到美國網站的一模一樣

這其中的道理，CDN會判斷你的所在位置

根據你的位置來取得離你位置最近的那一筆資料，而這些讀取到的資料則是美國網站的緩存資料

如下圖

Web Sever 把產生的內容放入各個節點的機房中

各地用戶在讀取網站資料的時後會依據所在地去最近的機房拿資料

這樣一來就算Web Sever架在美國或歐洲，也不影響用戶讀取網站的速度

CDN好處

加速網頁瀏覽效能：因為已經將緩存資料放在最近的機房中，不需要重新像伺服器讀取
有效分流(頻寬)：當所有用戶都不再向同一個伺服器讀取資料，大幅降低集中流量
網站穩定度：網站流量分散後，網站的穩定度大幅提高，即使短暫當機也不怕用戶無法使用
安全性增加：因網站透過CDN分散出去，駭客較難直接攻擊網站本體

來源網址: http://newaurora.pixnet.net/blog/post/128995999-cdn

(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) );
});

(JS)Cross Domain Ajax 跨網域抓取資料

試著抓取
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月13日星期六

WhoisThisDomain網域名稱註冊資料查詢工具

WhoisThisDomain 是一款免費的網域名稱註冊資料查詢工具。每個網址 (網域名稱) 都有一位所有人，而透過 WHOIS 伺服器就可以查詢到該網址所有人的資料。WhoisThisDomain 可讓您一次輸入多個網址，自動向對應的 WHOIS 伺服器查詢網域名稱所有人、是否已被註冊、註冊到期日等等基本資料。值得一提的是，輸入網址時請省略「www」！

§ 作業系統：Windows 2000/XP/2003/Vista/2008/7/8/10

§ 官方網站下載頁面
http://www.nirsoft.net/utils/whois_this_domain.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>

訂閱：意見 (Atom)

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

2018年3月31日 星期六

2018年3月2日 星期五

2018年2月2日 星期五

什麼是站點地圖Sitemap？

2018年1月28日 星期日

2018年1月24日 星期三

2018年1月21日 星期日

JS

HTML

2018年1月20日 星期六

本站所使用的簡單Qrcode外掛

2018年1月17日 星期三

2018年1月15日 星期一

RawGit https://rawgit.com/ GitCDN https://gitcdn.xyz/

JS:wScratchPad

2018年1月14日 星期日

JS

JS with jquery

2018年1月13日 星期六

2018年1月11日 星期四

HTML

JS

CSS

2018年1月9日 星期二

HTML

JS

CSS

Google Fonts使用方法

QR Code Generator

賺幣水龍頭

2018年3月31日星期六

2018年3月2日星期五

2018年2月2日星期五

2018年1月28日星期日

2018年1月24日星期三

2018年1月21日星期日

2018年1月20日星期六

2018年1月17日星期三

2018年1月15日星期一

RawGit

https://rawgit.com/

GitCDN

https://gitcdn.xyz/

2018年1月14日星期日

2018年1月13日星期六

2018年1月11日星期四

2018年1月9日星期二