透過Vue實現限制數入字數

我們都知道,平常在社群網站上會限制使用者輸入的字數。最具代表性的網站就是Twitter,Twitter限制一般使用者每次發表文章的字數在140字以內。讓使用者用最簡短的文字來表達想法。對於優化使用者體驗比較好的方式是,當使用者在輸入的同時,提示使用者還有多少字可以輸入,當使用這輸入的字數達到限制時,及時地停止使用者繼續輸入。 像這樣子限制使用者輸入字數的機制要如何來實現呢? 有兩的點需要注意: 如何計算使用者輸入了多少字? 當使用這輸入的字數達到限制時,該如何停止繼續輸入? 今天我們就要透過Vue.js來製作一個可以幫我們控制輸入字數的程式。首先,我們先準備好需要的HTML檔案。 <!DOCTYPE html> <html lang=“zh-TW”> <head> <meta charset=“UTF-8” /> <meta name=“viewport” content=“width=device-width, initial-scale=1.0” /> <meta http-equiv=“X-UA-Compatible” content=“ie=edge” /> <link rel=“stylesheet” href=“https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css” integrity=“sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO” crossorigin=“anonymous” /> <title>Start</title> </head> <body> <div id=“app” class=“container”> <div class=“row”> <div class=“col”> <textarea cols=“30”

如何利用Python實現攝氏轉華氏的溫度轉換

編寫程式的目的就是為了解決問題,因此,在開始設計程式之前,先暸解問題是很重要的。
開始寫程式之前要先暸解以下幾件事:
  1. 待解決的問題其具體內容是什麼?
  2. 使用者為何?
  3. 要處理的資料類型是什麼?放在哪裡?
  4. 資料要如何輸入電腦?
  5. 要如何處理資料?
  6. 資料處理完畢後,要如何呈現?
  7. 處理完畢的資料需要儲存嗎?如果要儲存,需要放在哪裡?
既然已經暸解問題了,接下來透過程式處理的方法與處理的順序又是什麼呢?
這時候可以利用流程圖來分析。不過,在畫圖之前需要先把程式處理的方式依照邏輯的順序與步驟一個一個地寫下來。

把程式運作的主要流程列出來之後,再透過流程圖來表示出來。

這個程式其實網路上到處都有可以使用的線上轉換器,在這裡我們只是想要透過Python這個程式語言來看看,是否也可以實現,也算是一個牛刀小試。

我們希望:使用者輸入攝氏溫度後,可以得到相對應的華氏溫度。

思考方式:
關於這個問題要如何解呢?首先應該要問的是,如果是徒手轉換這兩個數值的話,該如何進行?

為了解答這個問題,首先我們先找出攝氏轉華氏的公式。

以下是維基百科上面的說明:

可以看出攝氏轉華氏的公式是:


F = C x 9/5 + 32

整個流程是下面這樣。


分析完畢之後,我們就可以開始寫程式了。

程式碼說明:
  1. 先印出說明,
  2. 提示使用者輸入攝氏溫度,並且移除輸入字串頭尾多餘的空白
  3. 帶入攝氏轉華氏公式,並將結果指定為F
  4. 印出轉換的結果(華氏溫度)
其中:
  • print() 函數:python保留字,可以印出想要的結果。
  • int(C): 透過 int() 函數,把C轉換為整數(integer)
  • strip()方法:用來移除字串頭尾指定的字元(預設為空格)或字元序列。
  • format()格式化函數:用來格式化字串

其實,要實現攝氏轉華氏不只有上面的方式,你也可以把程式改寫成函式的方式來獲取答案:

如果將上面的程式加上while迴圈,程式就會不斷的幫你轉換數值。

在迴圈中加入停止控制選項,只要按下q,就可以停止程式的執行。


留言

  1. 請問如果使用者可以先選擇溫度轉換方式,然後再輸入一個溫度,可以轉換成另一溫度,請問你會怎麼寫呢?謝謝!

    回覆刪除
    回覆
    1. 您好,
      請看下面原始碼。
      https://gist.github.com/seaniap/5f1c0e4b8d46dfdc342aae5bbb4c8db0

      歡迎討論

      刪除
    2. Sean Yeh您好,
      謝謝回覆。
      真的很感謝您提供的解答。
      但有兩個地方有些疑問,
      1.請問第7行,whatConvert = "1",這裡寫這個的用意?
      2.如果12行與16行不加上.strip()),是否也可以?

      謝謝!

      刪除
    3. 謝謝您的提醒。
      本來我想設定一個預設的狀態,所以第7行預先指定了1的選項。不過,似乎不寫也不影響。
      另外,12行與16行加上.strip()的目的是為了防呆,避免使用者輸入不必要的空白,如果確定不會的話,不寫.strip()程式也是可以跑的。

      刪除

張貼留言

這個網誌中的熱門文章

用Python的條件實現電影分級流程

Vue元件實作,將HTML網頁Vue元件化

Python基礎篇--[條件]如果發生這種狀況時,我該怎麼辦?