Class add and remove

此寫法為達成以下目的(常應用於選單收合)

  • A開啟時,點了B,打開B時要順便收起A
  • A開啟時,點了A,要收起A
.box apple
.box orange
.box grape
.box blue
.box gray
.box
 width: 200px
 height: 100px
 background-color: #eee
 text-align: center
 line-height: 100px
 transition-duration: 0.5s
 
.box.teal
 background-color: teal
 color: #fff
const boxes=document.querySelectorAll(".box");

boxes.forEach(box => box.addEventListener("click", checkall)
)

function checkall(){
 const nowTeal=document.querySelector(".teal");
 
 if(nowTeal){
  nowTeal.classList.remove("teal");
 }
 
 if(nowTeal==this){
  this.classList.remove("teal");
 }else{
   this.classList.add("teal");
 }

}

highchart 5角圖

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<div id="container"></div>
#container
 min-width: 400px
 max-width: 600px
 height: 400px
 margin: 0 auto
const spiderData=[
    {
        tag: '住宅',
        value: 5
    },
    {
        tag: '醫療',
        value: 2
    },
    {
        tag: '食品安全',
        value: 5
    },
    {
        tag: '教育',
        value: 1
    },
    {
        tag: '\t',
        value: 0
    },
]

const maxValue=Math.max(...spiderData.map(el => el.value));

Highcharts.chart('container', {

    chart: {
        polar: true,
        type: 'line',
        margin: [40, 0, 0, 0],
    },

    credits: {
        enabled: false
    },

    title: {
        text: ''
    },

    pane: {
        size: '100%'
    },

    exporting: { 
        enabled: false 
    },

    xAxis: {
        categories: spiderData.map((el) => {
            if(el.value===maxValue){
                return `<div style="color: red">${el.tag}<div>`;
            }else{
                return el.tag;
            }
        }),
        tickmarkPlacement: 'on',
        lineWidth: 0,
    },

    yAxis: {
        gridLineInterpolation: 'polygon',
        lineWidth: 0,
        min: 0,
        tickPositions: [0, 1, 2, 3, 4, 5],
        endOnTick: true,
    },

    tooltip: {
        enabled: false,
    },

    series: [{
        showInLegend: false,
        data: spiderData.map(el => el.value),
        pointPlacement: 'on',

    }]

});

CODEPEN

【CSS】字體設定

日文楷體

  • Mac會顯示「游教科書體」
  • Windows會顯示「標楷體」
h1 游教科書あっ!レポートレポート
h1
 font-family: YuKyo-Medium, STKaiti, DFKai-sb
 font-weight: normal

Display

游教科書あっ!レポートレポート

中文襯線體

  • Mac會顯示「宋體-繁」
  • Windows 英數字顯示「News Time Roman」,中文顯示「新細明體」
h1 這是一段中文字查詢頁面
h1
 font-family: 'Songti TC', 'Times New Roman', 'PMingLiu'
 font-weight: normal

Display

這是一段中文字查詢頁面

highchart 儀表圖

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/solid-gauge.js"></script>
<div id="container-speed" class="container"></div>
.container {
  min-width: 310px; 
  max-width: 400px; 
  height: 300px; 
  margin: 0 auto;
}

tspan {
  font-size: inherit;
  color: inherit;
}

.verybad {
  color: #C00000;
  border-color: #C00000;
}

.bad {
  color: #E16100;
  border-color: #E16100;
}

.neutral {
  color: #FFC000;
  border-color: #FFC000;
}

.good {
  color: #D8Bf1A;
  border-color: #D8Bf1A;
}

.verygood {
  color: #9BBB59;
  border-color: #9BBB59;
}

.badge {
  font-size: 12px;
  border: 1px solid;
  border-radius: 3px;
  padding: 1px 2px;
  vertical-align: middle;
}

.voice-num {
  vertical-align: middle;
}
const testData=[43];

var speedOptions={

    chart:{
        type: 'gauge',
        plotBackgroundColor: null,
        plotBackgroundImage: null,
        plotBorderWidth: 0,
        plotShadow: false,
    },
        
    title: {
        text: '網路聲量'
    },
  
    pane: {
        startAngle: -90,
        endAngle: 90,
        background: null
    },
  
    exporting: { 
        enabled: false 
    },
  
    credits: {
        enabled: false
    },
        
    plotOptions: {
        gauge: {
            dataLabels: {
                borderColor: "none",
                useHTML: true,
                style: {
                    fontSize: "20px",
                }
                
            },
            dial: {
                baseLength: '0%',
                baseWidth: 10,
                radius: '100%',
                rearLength: '0%',
                topWidth: 1
            }
        }
    },
           
    // the value axis
    yAxis: {
        labels: {
            y: 10
        },
        tickPositions: [-50, 0, 50],
        minorTickLength: 0,
        min: -50,
        max: 50,
        plotBands: [{
            from: -50,
            to: 50,
            // color: '#C00000', // red
            color: {
                linearGradient: { x1: 0, x2: 1, y1: 0, y2: 0 },
                stops: [
                    [0.2, '#C00000'],
                    // #E16100
                    [0.5, '#FFC000'],
                    //#D8Bf1A
                    [0.7, '#9BBB59'],
                ]
            },
            thickness: '50%'
        }]
    },
    
    series: [{
        name: 'Speed',
        data: testData,
        dataLabels: {
            formatter: function(){
                let badge='';
                switch(true) {
                    case (this.y<-34):
                        //-35 -36 -37
                        badge='非常負面';
                        break;
                    case (this.y<-4):
                        //-34 -33 -32 ... -5
                        badge='較負面';
                        break;
                    case (this.y<5):
                        //-4 -3 ... 3 4
                        badge='中立';
                        break;
                    case (this.y<35):
                        //5 6 ... 33 34
                        badge='較正面';
                        break;
                    case (this.y<50):
                        badge='非常正面';
                }
            
                return `${this.y}分 ${badge}`
            }
        }
    }],
 
    tooltip: {
        enabled: false,
    },
 
};
Highcharts.chart('container-speed', speedOptions);

// -5 ~ +5 中立
// 5 ~ 35  較正面
// 35 ~ 50 非常正面

CODEPEN

 

Git ssh設定

mac https://qiita.com/shizuma/items/2b2f873a0034839e47ce

Mac

移動至ssh的資料夾

cd ~/.ssh

如果是首次使用ssh的話,.ssh folder裡面會沒有東西,要生成金鑰
(第二次以後使用的話,就不用再產生金鑰了)

$ssh-keygen -t rsa

下了這行↑指令後,Terminal會問3個問題,都打Enter就好

之後,copy電腦裡面的金鑰匙,並貼上Github
複製金鑰的指令:

pbcopy < ~/.ssh/id_rsa.pub

Win10

控制台 > 系統及安全性 > 系統 >
點選「進階系統設定」

進階 > 環境變數

選「Path」 > 編輯

新增 > 複製git/urs/bin的路徑貼上去

切換到終端機,找到.ssh資料夾

cd .ssh

產生ssh key

ssh-keygen

接下來不管Terminal回啥,按Enter,一共按3次Enter

之後,.ssh資料夾會產生「id_rsa」、「id_rsa.pub」2份檔案

複製id_rsa.pub的內容,輸入以下指令

cat id_rsa.pub

然後複製Terminal回傳的東西,並且貼上github

【JavaScript】appendChild

append虛擬元素時

#newBlock
 width: 100px
 height: 100px
 background: teal

const newBlock=document.createElement('div');
newBlock.id='newBlock';
document.appendChild(newBlock.cloneNode(true));

cloneNode代表無限複製,如果沒有用這個引數,他只會做出「搬移」(僅複製一次的效果)

append現有元素時

#nowBlock
hr
#newland

#nowBlock
 width: 100px
 height: 100px
 background: teal
newLand.appendChild(nowBlock.cloneNode(true))

localStorage

可以在瀏覽器存資料的方式,類似cookies。

  • 字串:可以存字串,讀取出來也是字串
  • 數字:可以存數字,但讀出來會變成字串
  • JSON:不能直接存JSON,要轉成string再存,讀出來也是字串化的JSON

const testJSON={
  color: 'red',
  count: 3,
  food: 'apple'
}

//寫localStorage一定要這樣寫,不能寫成localStorage.fruit
//要先轉成string後再存
localStorage['fruit']=JSON.stringify(testJSON);

//讀取
console.log(localStorage['fruit']) 
//"{"color":"red","count":3,"food":"apple"}"

//再轉成JSON繼續使用
console.log(JSON.parse(localStorage['fruit']))
//{color: 'red', count: 3, food: 'apple'}

Ian's Blog