2023-10-01|閱讀時間 ‧ 約 9 分鐘

【筆記】用JavaScript幫你選擇午餐要吃什麼

利用JavaScript的Math.random( )函數創造一個隨機值，並透過隨機值的結果印出相對應的文字，就可以讓程式幫你選午餐要吃什麼了，這個不是一個完整的東西，它有很多可以增加的地方

身為一名普通的上班族，每天上班最煩惱的就是要想午餐要吃什麼了，這時我們可以透過程式來決定我們要吃什麼，得先想一下頁面要有什麼內容：

1.有個按鈕，點了之後可以顯示平常吃的午餐店名或是位置，這個是隨機骰出的

2.既然是吃午餐，那就塞一張食物圖吧

3.顯示現在是幾點

想好要做啥以後，首先我們要先創建一個html文檔，聲明文檔類型(HTML5)、頁面語言(繁體中文)以及頁面解析字符編碼(UTF-8)，並設定CSS的樣式，我就先粗略設定一下讓它看起來可以用不會歪一邊就行了

<!DOCTYPE html>

<html lang="zh-TW">

<head>
  <meta charset="UTF-8">
  <title>我不知道今天要吃什麼所以只好開這個</title>
  <style>
  
body{
    background-color: #97e5e7;/*淺藍色*/
    border-style:double;
    margin: 50px auto;
    max-width: 800px;
    justify-content: center;/*水平置中*/
    align-items: center; /*垂直置中*/
    }
  
h1{
    color:chocolate
    }

    html, body {
  -webkit-text-size-adjust: none;
     -moz-text-size-adjust: none;
      -ms-text-size-adjust: none;
          text-size-adjust: none;  
}

    </style>
</head>

接著是body的部分，食物的圖片可以先上傳到縮網址在從縮網址複製下來，或是像我這樣，直接把圖片貼在github上面，然後複製上面顯示的網址

<body onload="current_time()">
  
    <!-- 標題 -->
    <div style="text-align:center;padding: 0px 0px 30px"> 
        <h1>今天午餐要吃什麼</h1>
    </div> 
    
    <!-- 食物圖片 -->
    <div style="text-align:center">
        <img src="https://user-images.githubusercontent.com/110076175/184523767-5afba99d-eca5-41a3-b291-a16f68c2c4ea.jpg">
    </div>

<br>  
    <!-- 時間 -->
   <div style="text-align:center">
   <div id="current"></div>
   </div>

<br>
    <!-- 按鈕 -->
    <div style="text-align:center;">
         <button onclick="myFunction()">肚子好餓 點我</button> 
    </div>

    <!-- 按鈕印出來的結果 -->
    <div style="text-align:center;color:rgb(255, 0, 242)">
         <p id="demo"></p>
    </div>
 <br>
 <ul> &emsp;</ul>
 
</body>
</html>

最後是js，總共要處理兩個，一個是時間的，一個是隨機值的

    <script>
        function current_time(){
        NowDate=new Date();
        hour=NowDate.getHours();
        min=NowDate.getMinutes();
        sec=NowDate.getSeconds();
        document.getElementById("current").innerHTML = "現在時間: "+hour+"點 "+min+"分 "+sec+"秒";
        setTimeout("current_time()",1000);
        }
     </script>

function的名稱為 current_time()，同時body onload 也調用這個函數，這個函數獲取了現在的日期、時間，並相對應的印出來

接著處理隨機值

 <script>
   
        function myFunction(){
            var x=""
            var number=Math.floor((Math.random()*7)+1);
            
            console.log(number)

            if (number==1) {
                x="西湖市場裡面"
                }

            if (number==2) {
                x="西湖蚊子咖哩飯"
                }
           
            if (number==3) {
                x="夢食代"
                }
            
            if (number==4) {
                x="消防局對面早餐店"
                }
            
            if (number==5) {
                x="椒麻雞大王"
                }
            
            if (number==6) {
                x="肯德基對面的健康餐"
                }
            
            if (number==7) {
                x="今日咖哩"
                }
            document.getElementById("demo").innerHTML =x
    }
    </script>

宣告一個變數 x，它是一個空字串，用來顯示我們的午餐要去哪吃

宣告一個變數number，它是用來產生隨機值的

這個會有幾層的思考路徑：

Math.random()函數會生成介於(包含)0到(不包含)1之間的隨機小數，然後根據你要選擇幾個午餐，乘上相對應的數

我要7選1，所以乘以7，這樣它就會顯示(包含)0到(不包含)7之間的隨機小數

利用Math.floor()函數將這個浮點數往下取整數，也就是我們會得到(包含)0到(不包含)7之間的整數

最後，+1讓整數範圍偏移，變成是(包含)1到(不包含)8之間的整數，所以我們會隨機骰出1-7，這時候再將1-7會印出來什麼數值分別顯示出來就可以了

底下的if就是當number骰出什麼數字，x就顯示什麼文字，這樣就可以用程式決定午餐要吃什麼了

console.log(number) 是把隨機值印出來來驗證是不是1-7，我們可以打開html檔案後按F12，在console(控制臺)看到

結果：

點了以後

這個會有一些東西可以再優化的，比如：

外觀XDD

我點了以後外框會往下一格

可以做一個我點食物名稱後，外開一個google瀏覽器地圖，並預設搜尋食物名稱

放在手機上看實在不怎麼好看，做個RWD

不用JavaScript改用Python也不是不行，只是JavaScript用在客戶端的互動(俗稱前端)，Python通常用在服務器端的執行(俗稱後端)，要用Python的話就得寫一支API，把它部署在可以放代碼的地方(比如GitHub)，但那又是另一個故事了

分享至

成為作者繼續創作的動力吧！

冬霞

追蹤

【筆記】用JavaScript幫你選擇午餐要吃什麼

冬霞的沙龍的其他內容

你可能也想看

發表回應

【筆記】用JavaScript幫你選擇午餐要吃什麼

冬霞的沙龍 的其他內容

你可能也想看

發表回應

冬霞的沙龍的其他內容