EXCEL 比對多元資料方法

原理

excel中的vlookup函數只能用找單一資料,也就是當手上有一筆清單及資料庫如下

資料庫

中文 日文
紅色 レッド
藍色 ブルー
綠色 グリーン
黃色 イエロー
黑色 ブラック
白色 ホワイト
棕色 ブラウン
粉紅色 ピンク

資料清單

紅色
藍色
棕色

經過vlookup比對後可以得出

比對後的資料清單

紅色 レッド
藍色 ブルー
棕色 ブラウン

但當資料庫非一對一情況下,vlookup只能隨機找到一個對應資料,無法全部顯示

資料庫:單一資料擁有多個對應資料

中文 日文
紅色 レッド
紅色 ボルドー
紅色 ダークレッド
藍色 ブルー
藍色 ネイビー
綠色 グリーン
黃色 イエロー
黑色 ブラック
白色 ホワイト
棕色 ブラウン
棕色 ショコラ
棕色 モカ
粉紅色 ピンク

解決方法

  1. 下載充滿函數的excel檔案
  2. 將資料庫部分貼在B跟C欄
  3. 清單貼在E欄

可以找出所有相關資料

紅色 レッド ボルドー ダークレッド
藍色 ブルー ネイビー
棕色 ブラウン ショコラ モカ

筆記線效果

技巧

  1. linear-gradient
  2. 漸層中,後色%小於前色%形成色塊
  3. background-size
<div>
line1<br>
line2<br>
line3<br>
line4<br>
</div>
div {
  background: linear-gradient(rgba(238, 238, 238, 0.35) 95%, rgba(43, 139, 165, 0.15) 5%);
  //size決定重複的漸層色塊大小
  background-size: 100% 19px;
  border-radius: 3px 3px 3px 3px;
  font-size: 14px;
  border: 1px solid #90a955; 
}

Display

line1
line2
line3
line4

在網頁編輯器上使用KhanAcademy的JS語法 ProcessingJS

一般編輯器無法顯示KhanAcademy的JS語法原因

  1. 未設定Processing.js函式庫
    https://cdn.jsdelivr.net/processing.js/1.4.8/processing.min.js
  2. 沒有在html寫canvas標籤

 解決方法

canvas#mycanvas
var sketchProc = function(processingInstance) {
     with (processingInstance) {
        size(400, 400); 
        frameRate(30);
        
        // 這邊貼上KhanAcademy的JS程式碼
    
    }};

    // Get the canvas that Processing-js will use
    var canvas = document.getElementById("mycanvas"); 
    // Pass the function sketchProc (defined in myCode.js) to Processing's constructor.
    var processingInstance = new Processing(canvas, sketchProc); 

media

讓不同寬度尺寸套用不同CSS

範例

.container
.container
  .block.a AAAA
  .block.b BBB
  .block.c CC
  .block.d DD
  .block.e EE
  .block.f FF
  .block.g GGGG
.container
 font-size: 0
 box-sizing: border-box

.block
 height: 200px
 text-align: center
 box-sizing: border-box
 border: 3px solid #fff
 font-size: 40px
 display: inline-block
 padding-top: 50px

.a
 width: 100%
 background-color: #00796B

.b
 width: 70%
 background-color: #B2DFDB
.c
 width: 30%
 background-color: #FFFFFF

.d
 width: 30%
 background-color: #00BCD4

.e
 width: 35%
 background-color: #BDBDBD

.f
width: 35%
background-color: #757575

.g
 width: 100%
 background-color: #009688

//以螢幕為條件,寬度800以下時套用這組css
@media screen and (max-width: 800px)
 .b
   width: 100%
 .c,.d,.e,.f
   width: 50%

//以螢幕為條件,寬度400以下時套用這組css
@media screen and (max-width: 400px)
 .b,.c,.e,.d,.f
   width: 100%

Display

PC:1200px

AAAA
BBB
CC
DD
EE
FF
GGGG

TABLET:800px

AAAA
BBB
CC
DD
EE
FF
GGGG

SMARTPHONE:400px

AAAA
BBB
CC
DD
EE
FF
GGGG

消除切版間隙

切版常見問題

區塊無法依照%數順利填滿版面,中間不知為何産生空隙,導致元素掉下來

.container
 .a width 70%
 .b height 30%
.container
 width: 300px
 height: 100px
 border: 1px solid #90a955

.a,.b
 border: 1px solid #90a955
 height: 100%
 background-color: rgba(193, 215, 174, 0.3)

.a
 width: 70%

.b
 width: 30% 
Display
width 70%
height 30%

解決方法

  1. 將外層包覆元素文字尺寸設0,内部元素文字尺寸設回來。
  2. display: inline-block,元素水平排列。
    詳細請看這篇文章
  3. box-sizing: border-box→外框框線尺寸包在框元素之内。
    詳細請看這篇文章
.container
 width: 300px
 height: 100px
 border: 1px solid #90a955
 // 1 將外層包覆元素文字尺寸設0,内部元素文字尺寸設回來
 font-size: 0px
.a,.b
 border: 1px solid #90a955
 height: 100%
 background-color: rgba(193, 215, 174, 0.3)
 font-size: 18.4px
 // 3 外框框線尺寸包在框元素之内
 box-sizing: border-box
 // 2 元素水平排列
 display: inline-block
.a
 width: 70%
.b
 width: 30%     
Display
width 70%
height 30%

對話框效果

結構

h1元素方框+偽元素三角形
三角形做法請參考這邊

範例

<h1>some text</h1>
h1 {
 background-color: rgba(193, 215, 174, 0.3);
 color: #90a955;
 padding: 10px;
 border-radius: 1px;
 font-weight: 400;
 position: relative;
 font-size: 26px;
 font-weight: 600;
}

h1:after {
 content: " ";
 width: 0px;
 height: 0px;
 position: absolute;
 bottom: -16px;
 right: 30px;
 border-right: 10px solid transparent;
 border-left: 10px solid transparent;
 border-top: 16px solid rgba(193, 215, 174, 0.3);
}

Display

some text

螢光筆效果

CSS漸層法

<div>some text</div>
div {
 /* 無指定角度→由上到下 */
 /* 0~50%純色(透明),50%~100%純色(藍色) */
 /* 後色%小於前色%會變成色塊 */
 background-image: linear-gradient(transparent 50%, rgba(173, 234, 234, 0.5) 50%);
}

Display

some text

HTML5法

<mark>some text</mark>
mark{
 /* 可以調整顏色,但無法調整粗細度*/
 color: black;
 background-color: #fff9c0;
}

Display

some text

Ajax

説明

使用外部(後台)資料,不用自己建構資料模型。

步驟

  1. 使用ajax串接後台api
  2. 印出資料,success:成功
  3. 將function内資料外接
  4. 之後使用tododata變數,可以在外部編輯這筆資料

範例

div#notify
// 3 將function内資料外接
var tododata;

// 1 使用ajax串接後台api
$.ajax(
 {
  url: "https://goo.gl/PBvlqI",
 // 2 印出資料,success:成功
  success: function(res){
   $("#notify").text(res);
   tododata=res;
  }
 }
);

// 4 之後使用tododata變數,可以在外部編輯這筆資料
Display

(按下載入不安全的代碼後顯示)

應用:JSON與ajax結合

  1. 製作html清單模板
  2. 定義外部api
  3. ajax串接,ajax裡面是物件形式
    • 連接url變數
    • 成功:傳回參數→結果→外接
    • JSON.parse(文字)→物件結構
  4. 製作迴圈,準備列印資料
    • 迴圈下的api資料
    • 代換變數
    • 載入代換後的新模板
  5. 建立打勾項目
    • 取代class
    • 定義打勾class
.todolist
 h3 我的代辦清單
 hr
 ul#listitem
 //li(class="{{class}}") {{num}}. {{name}} {{date}}
*
font-family: 微軟正黑體
 
body
 padding: 30px

.todolist
 display: inline-block
 padding: 20px
 border: solid 3px
 
 & ul
  padding: 0px

 & li
  list-style: none
  width: 300px
  padding: 5px

 .done
  &:before
  content: " ✔ "
  color: red
// 1 製作html清單模板
var html="<li class='{{class}}'>{{num}}.{{name}} {{date}}</li>";
// 2 定義外部api
var api="https://goo.gl/PBvlqI";
// 3.3 定義外接資料
var data;

// 3 ajax串接,ajax裡面是物件形式
$.ajax({
 // 3.1 連接url變數
 url: api,
 // 3.2 成功:傳回參數→結果→外接
 success: function(res){
 // 3.3 JSON.parse(文字)→物件結構
 // console.log(JSON.parse(res));
 data=JSON.parse(res);
 
 // 4 製作迴圈,準備列印資料
 for(i=0;i<data.length;i++){
 // 4.1 迴圈下的api資料
 var item=data[i]
 // 5.2 定義打勾class
 // if簡寫(檢査項目==true)?"是的話傳値":"否的話傳値"
 var now_class=(item.done)==true?"done":"";
 
 
 // 4.2 代換變數
 var new_html=
 html.replace("{{num}}",i+1)
 .replace("{{name}}",item.name)
 .replace("{{date}}",item.date)
 // 5 建立打勾項目
 // 5.1 取代class
 .replace("{{class}}",now_class);
 
 // 4.3 載入代換後的新模板
 $("#listitem").append(new_html);
 }
 }
});
Display

CODEPEN