【筆記】用JavaScript幫你選擇午餐要吃什麼
閱讀時間約 9 分鐘
利用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)，但那又是另一個故事了
21會員
18內容數
留言0
查看全部
你可能也想看
Google News 追蹤
這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！
秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Hi 大家好，我是Ethan😊
相近大家都知道保濕是皮膚保養中最基本，也是最重要的一步。無論是在畫室裡長時間對著畫布，還是在旅途中面對各種氣候變化，保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水，還能提升後續保養品的吸收效率。
曾經，我的保養程序簡單到只包括清潔和隨意上乳液
firestore 是 google 所提供的雲端文件式資料庫服務，為各種開發工具提供了方便使用的 sdk，python 的套件名稱為 firebase-admin，用 pip 安裝後就可操作了。
pip install firebase-admin
第一章: 像有錢人一樣花錢
-就是要存錢下來
有錢定義
永遠不工作，還有足夠的錢過生活
擁有足夠的收益，提供兩倍國內中等家庭的生活水準
全台: 2x110=220萬
台北: 2x140=280萬
該有的花錢態度
250萬的投資組合，每年報酬率6~7%。每年提出4%來花用，這樣能夠永
海苔醬第一次知道這本書時，是在瓦基podcast「下一本讀什麼」有一集剛好就是分享精準閱讀這本書。最近有空到圖書館借書，偶然看到這本書名時，腦子立刻就想到好像就是podcast聽到的那集，不管是不是總之就先借起來，閱讀後才知道原來就是同一本書呀！海苔醬跟這本書真的很有緣份呢！
作者:林萃芬-諮商心理師
從書中解析腳色人格特質，探索天賦潛能，洞悉心理狀態，讓自己度過各種難關。書中能讓自我理解是屬於鬼滅裡的哪一種人格？如何更認識自己？
書摘重點整理以及心得整理：
ＣＨ１ 鬼滅重點主角群角色分析
＞竈門炭治郎：源源不斷的正能量，同理每個人的處境
1. 無條件的
開始使用子彈筆記10天，感受到效率大大提升！
子彈筆記很特別！讓我有效回顧過去，點燃熱情，更深入理解自己的心情起伏。這些都轉為超強的做事動力🤯。
以下是我用10天找回熱情，掌握實踐心得，成為自我管理的達人的3個最佳實踐：
最佳實踐1 - 從過去10天的記錄裡，熱情再燃：妳記得10天前熱衷什麼嗎？子
身為一名教師，我需要專注在課程的設計，這裡包含學生需要知道的知識盤點，教師清不清楚自己到底要學生知道這些的目的是什麼，還有實際在課堂上教學的技術等等。學生的狀況越不好掌控，本質的掌握越重要，這可能就是我對《易經》中「以不變應萬變」的理解吧。
這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！
秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Hi 大家好，我是Ethan😊
相近大家都知道保濕是皮膚保養中最基本，也是最重要的一步。無論是在畫室裡長時間對著畫布，還是在旅途中面對各種氣候變化，保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水，還能提升後續保養品的吸收效率。
曾經，我的保養程序簡單到只包括清潔和隨意上乳液
firestore 是 google 所提供的雲端文件式資料庫服務，為各種開發工具提供了方便使用的 sdk，python 的套件名稱為 firebase-admin，用 pip 安裝後就可操作了。
pip install firebase-admin
第一章: 像有錢人一樣花錢
-就是要存錢下來
有錢定義
永遠不工作，還有足夠的錢過生活
擁有足夠的收益，提供兩倍國內中等家庭的生活水準
全台: 2x110=220萬
台北: 2x140=280萬
該有的花錢態度
250萬的投資組合，每年報酬率6~7%。每年提出4%來花用，這樣能夠永
海苔醬第一次知道這本書時，是在瓦基podcast「下一本讀什麼」有一集剛好就是分享精準閱讀這本書。最近有空到圖書館借書，偶然看到這本書名時，腦子立刻就想到好像就是podcast聽到的那集，不管是不是總之就先借起來，閱讀後才知道原來就是同一本書呀！海苔醬跟這本書真的很有緣份呢！
作者:林萃芬-諮商心理師
從書中解析腳色人格特質，探索天賦潛能，洞悉心理狀態，讓自己度過各種難關。書中能讓自我理解是屬於鬼滅裡的哪一種人格？如何更認識自己？
書摘重點整理以及心得整理：
ＣＨ１ 鬼滅重點主角群角色分析
＞竈門炭治郎：源源不斷的正能量，同理每個人的處境
1. 無條件的
開始使用子彈筆記10天，感受到效率大大提升！
子彈筆記很特別！讓我有效回顧過去，點燃熱情，更深入理解自己的心情起伏。這些都轉為超強的做事動力🤯。
以下是我用10天找回熱情，掌握實踐心得，成為自我管理的達人的3個最佳實踐：
最佳實踐1 - 從過去10天的記錄裡，熱情再燃：妳記得10天前熱衷什麼嗎？子
身為一名教師，我需要專注在課程的設計，這裡包含學生需要知道的知識盤點，教師清不清楚自己到底要學生知道這些的目的是什麼，還有實際在課堂上教學的技術等等。學生的狀況越不好掌控，本質的掌握越重要，這可能就是我對《易經》中「以不變應萬變」的理解吧。