[JavaScript] 我是浪費時間大師。

其實原本的標題是
用Google Sheet做Dashboard

但那不是重點。

需要甚麼?

1.自己做按鈕!
2.把按鈕接上程式(這篇的重點)
3.完工!

工商時間

啊哈。

如果你覺得這個東西超讚ㄉ
或是你希望鼓勵我做更多內容
然後我就沒時間讀學測的話:

快去這裡按下這些酷酷的小按鈕,歐虧?
buymeacoffee.com/FatRabbit

Buy Me a Coffee !

1.做按鈕

我一開始的構想是:
有個可以按的按鈕,能增加互動性
不然我每次要改變數值,只是在key資料而已

我想做出 輕鬆操作,就能看出明顯成果
的那種感覺(哪種???)

等等會拿來連接程式碼的按鈕(圖片)

你可以插入圖片、也可以用繪圖功能來做你的按鈕
(更多google sheet繪圖功能的教學看 這篇

我的作法是用PowerPoint做出一樣大小的圖形
再全部存成圖片上傳。

(因為我很喜歡PPT,你想怎樣:D)

2.哩哩摳摳設定

整個面板的設計只圍繞在一格:累計的EXP.

然後運作核心是:
只要我完成目標,就加經驗到累計EXP.


其他數值都是算出來的,比如說:

-我設定每次升級需要100 EXP.
 所以下次升級就需要 ->

升級所需EXP. = 現在的等級 x 100


-然後我再算出:
 自從上次升級後,我又得到了多少經驗 ->

目前等級累計的EXP. = 總累計EXP. – (現在的等級-1) x 100


-這樣我就可以知道,離下次升級還差 ->

升級所需EXP. – 目前等級累計的EXP.


再來有一個酷東西,就是升級的進度條

一般玩遊戲都會有個經驗的進度條,
依照累積的經驗,進度條會不斷往前
整條跑滿後,玩家就會升等。

我找了很久,
終於找到這個函式可以做出進度條的效果:

=SPARKLINE ( [值] , [其他參數(選填)] )

所以這裡的
=SPARKLINE(L14, {“charttype","bar";"max",L13;"color1″,"#00FFFF"})

  • L14:就是目前的EXP.
  • “charttype","bar":設定SPARKLINE類型是長條圖
  • “max",L13:設定最大值是升級需要的EXP.
  • “color1″,"#00FFFF":設定顏色是亮藍色,記得用HEX格式

3.按鈕接程式

阿你接我(??????

再來為了讓我們一開始上傳的按鈕動起來
我們用一點簡單的小程式來對它施魔法:D

先打開 工具 > 指令碼編輯器


按下一些同意和授權之後
你應該會跳轉到另外一個網頁
然後看到 myFunction() 空在那裏等待你

接下來你的工作
就是寫一個個的副程式
只要點擊試算表裡面的按鈕
就執行這些副程式

比如說我寫了這個:

function week_plus30HR() { //名字可以自己改


  var spreadsheet = SpreadsheetApp.getActive();
  
  
  var add_value = Number(spreadsheet.getSheetValues(19,8,1,1)); //抓H19(讀30HR的獎勵,見下圖) (純數字)
  var now_value = Number(spreadsheet.getSheetValues(16,12,1,1)); //抓L16(累計的Exp.) (純數字)

  spreadsheet.getRange('L16').activate(); //點開L16(累計的Exp.)
  spreadsheet.getCurrentCell().setFormula(add_value + now_value); //設定累計Exp.為 "原值+獎勵" (記得都要是數值,不然會被當文字處理) 
  
  Browser.msgBox("獲得了每週30HR獎勵 [" + add_value + " Exp.] !"); //跳出通知
  upgradeCheck(); //呼叫檢查升級的副程式
}
程式會直接抓這邊設定的數值,所以要改很方便

按下左上角的儲存專案,然後回到試算表。


再來點一下你的按鈕 (上傳的圖片 / 繪圖)
右上會跑出 三個點 > 指派指令碼

然後輸入你剛剛取的副程式名稱


再按按看按鈕,
應該就會成功執行ㄌ!


然後上面有提到"檢查升級的副程式"
就是這個:

function upgradeCheck() {
  var spreadsheet = SpreadsheetApp.getActive();
  var exp_now = Number(spreadsheet.getSheetValues(11,12,1,1)); //L11
  var level_now = Number(spreadsheet.getSheetValues(11,8,1,1)); //H11

  if(exp_now <= 0){
    spreadsheet.getRange('H11').activate();
    spreadsheet.getCurrentCell().setFormula(level_now + 1);
    var level_now = level_now + 1 ;
    Browser.msgBox("升級啦!你現在是 " + level_now + " 等!");
  }
}

啊哈大概是這樣
想到甚麼有缺我再上來補。

使用 WordPress.com 設計專業網站
立即開始使用