【筆記】用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>  </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)，但那又是另一個故事了
你可能也想看
