-
Notifications
You must be signed in to change notification settings - Fork 12
/
index.html
110 lines (95 loc) · 7.64 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<!DOCTYPE html>
<html lang="tw">
<head>
<meta http-equiv="Content-Language" content="zh-tw" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui" />
<title>在瀏覽器 Console 上畫 QR Code！</title>
<link rel="canonical" href="https://works.ioa.tw/browser_console_qrcode/index.html" />
<meta name="robots" content="index,follow" />
<meta property="og:site_name" content="在瀏覽器 Console 上畫 QR Code！" />
<meta property="og:url" content="https://works.ioa.tw/browser_console_qrcode/index.html" />
<meta property="fb:admins" content="100000100541088" />
<meta property="fb:app_id" content="1033322433418965" />
<meta property="og:locale" content="zh_TW" />
<meta property="og:locale:alternate" content="en_US" />
<meta property="og:type" content="article" />
<meta property="article:author" content="https://www.facebook.com/comdan66" />
<meta property="article:publisher" content="https://www.facebook.com/comdan66" />
<meta property="article:section" content="吳政賢" />
<meta property="article:tag" content="Console" />
<meta property="article:tag" content="Chrome" />
<meta property="article:tag" content="QR Code" />
<meta property="og:see_also" content="http://www.ioa.tw/" />
<meta property="og:see_also" content="https://works.ioa.tw/number_flipping_counter/" />
<meta name="keywords" content="Chrome,Console,JavaScript,QR Code,OA Wu" />
<meta name="description" content="來用瀏覽器除錯器畫一個屬於個人的彩蛋吧！使用瀏覽器Console.log的功能，再利用css語法調整樣式，製作有趣的個人彩蛋，本次使用QRCode當作實作範例，大家也可以改成自己的喲！Painting QR Code on the browser Console." />
<meta property="og:title" content="在瀏覽器 Console 上畫 QR Code！" />
<meta property="og:description" content="來用瀏覽器除錯器畫一個屬於個人的彩蛋吧！使用瀏覽器Console.log的功能，再利用css語法調整樣式，製作有趣的個人彩蛋，本次使用QRCode當作實作範例，大家也可以改成自己的喲！Painting QR Code on the browser Console." />
<meta property="og:image" tag="larger" content="https://works.ioa.tw/browser_console_qrcode/img/og.jpg" alt="在瀏覽器 Console 上畫 QR Code！" />
<meta property="og:image:type" tag="larger" content="image/jpg" />
<meta property="og:image:width" tag="larger" content="1200" />
<meta property="og:image:height" tag="larger" content="630" />
<meta property="article:modified_time" content="2016-06-04T23:45:53+08:00" />
<meta property="article:published_time" content="2016-06-04T23:45:53+08:00" />
<link href="css/public.css" rel="stylesheet" type="text/css" />
<script src="js/public.js" language="javascript" type="text/javascript" ></script>
<script src="js/browser_console_qrcode.js" language="javascript" type="text/javascript" ></script>
</head>
<body lang="zh-tw">
<article>
<header>
<h1>在瀏覽器 Console 上畫 QR Code！</h1>
<span>一起來用 Browser Console 畫畫吧！</span>
</header>
<section>
<ul>
<li>請按<b>滑鼠右鍵</b>，選擇<b>檢視</b>再選擇<b>Console</b>吧！</li>
<li>Mac Chrome 電腦鍵盤快捷鍵 <b>Cmd + Option + J</b> 打開！</li>
<li>Windows、Linux Chrome 電腦鍵盤快捷鍵 <b>Ctrl + Shift + J</b> 打開！</li>
<li>關鍵<a href='https://github.com/comdan66/browser_console_qrcode/blob/master/js/browser_console_qrcode.js' target='_blank'>程式碼</a>在 <span>js/browser_console_qrcode.js</span> 內，程式碼有簡易註解，請各位大大服用！</li>
<li>主要先利用<b>二維陣列</b>表示 QR Code，以 1 代表黑點、0 代表白點，再轉換成要印出的字串。</li>
<li>接著利用 JavaScript <a href='http://www.w3schools.com/jsref/jsref_eval.asp' target='_blank'>eval</a> 將組合出的 console.log 字串執行！</li>
<li>GitHub 在<a href='https://github.com/comdan66/browser_console_qrcode' target='_blank'>這裡</a>，Demo 的話看<a href='https://works.ioa.tw/browser_console_qrcode/index.html' target='_blank'>這裡</a>，可以的話幫我按一下 <b>GitHub 星星</b>吧！</li>
<li>主要利用 Console.log 的方式印出，其中使用基本 css 語法修飾。</li>
<li>會使用 text-shadow 主要是要掩飾換行的<b>行距空白</b>，line-height 不能設太小，所以利用 text-shadow 掩飾空白處！</li>
<li>因為 Safari 的 Console 對於空白的處理寬度不同，所以也需要對白點做 css 設定！</li>
<li>若各位大大覺得有趣或不錯的話，請幫我在 <a href='https://github.com/comdan66/browser_console_qrcode' target='_blank'>GitHub</a> 上按個<b>喜歡</b>吧！</li>
<li>相關參考：<a href='http://stackoverflow.com/questions/7505623/colors-in-javascript-console' target='_blank'>Colors in JavaScript console - stackoverflow</a></li>
</ul>
</section>
<div class='n2'>
<figure href='https://github.com/comdan66/browser_console_qrcode'>
<img alt="瀏覽器 Console 上畫 QR Code！Painting QR Code on the browser Console." src="img/04.png" />
<figcaption data-description='程式碼在 js/browser_console_qrcode.js 內，程式碼有簡易註解，主要利用 Console.log 的方式去印出，其中使用基本 css 語法修飾，會使用 text-shadow 主要是要掩飾換行的行距空白，line-height 不能設太小，所以利用 text-shadow 掩飾空白處！'>關鍵 JavaScript</figcaption>
</figure>
<figure href='https://github.com/comdan66/browser_console_qrcode'>
<img alt="瀏覽器 Console 上畫 QR Code！Painting QR Code on the browser Console." src="img/03.png" />
<figcaption data-description='瀏覽器 Console 介面內的 QR Code 樣式！'>Console 介面即可見 QR Code</figcaption>
</figure>
</div>
<div class='n3'>
<figure href='https://github.com/comdan66/browser_console_qrcode'>
<img alt="瀏覽器 Console 上畫 QR Code！Painting QR Code on the browser Console." src="img/01.png" />
<figcaption data-description='滑鼠按右鍵，開啟 “檢視” 後選擇 “Console”，即可看到 QR Code！'>滑鼠右鍵，選擇 檢視 選擇 Console</figcaption>
</figure>
<figure href='https://github.com/comdan66/browser_console_qrcode'>
<img alt="瀏覽器 Console 上畫 QR Code！Painting QR Code on the browser Console." src="img/02.png" />
<figcaption data-description='若使用 Google Chrome 則可以使用 Chrome 快捷鍵，Mac Chrome 電腦鍵盤快捷鍵 Cmd + Option + j，Windows、Linux Chrome 電腦鍵盤快捷鍵 Ctrl + Shift + J'>Chrome 快捷鍵</figcaption>
</figure>
<figure href='https://github.com/comdan66/browser_console_qrcode'>
<img alt="瀏覽器 Console 上畫 QR Code！Painting QR Code on the browser Console." src="img/05.png" />
<figcaption data-description='若各位大大覺得有趣或不錯的話，請幫我在 GitHub 上按個喜歡吧！若想引用的話，按喜歡後全部授權給你喲！'>快點星星！</figcaption>
</figure>
</div>
</article>
<footer>
<div></div>
<div>
<div>Console QR Code ©2016</div>
<div>如有相關問題歡迎與<a href="http://www.ioa.tw/" target="_blank">作者</a>討論。</div>
</div>
<div></div>
</footer>
</body>
</html>