iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 9
0
Modern Web

JS 學習歷程系列 第 9

結衣我老婆啦 - 情侶理想身高差 * onClick(一)

餓死抬頭,在網路上找了一個可以用 JS 試玩的簡易計算:男女理想身高比例計算機

由於這題是在我接觸 JS 一週後玩出來的東西,跟先前單純介紹 JS 概念相比,有略為深入一點(就那麼一點!!)

  1. 話不多說,直接上 HTML 碼:
<h1 class="mb">請輸入身高(免單位僅輸入數字,例如167)</h1>
<input type="text" class="myHeight mb"></br>
<input type="button" class="calcul mb" value="計算中"></br>
女生看這裡<div class="boyResult result mb"></div>
男生看這裡<div class="girlResult result mb"></div>
  1. CSS 碼也要來一下:
.mb{
  margin-bottom: 30px;
}
.myHeight{
  height:30px;
  width:300px;
}
.result{
  height:50px;
  width:300px;
  border:1px solid black;
}
  1. codePen 頁面截圖:

https://ithelp.ithome.com.tw/upload/images/20190910/2011992282daCfdviH.png

  1. 明天再上重頭戲 JS

上一篇
含笑苦讀只求自己不忘 - function 參數 / 變數
下一篇
結衣我老婆啦 - 情侶理想身高差 * onClick(二)
系列文
JS 學習歷程30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中
1
CynthiaChuang
iT邦新手 5 級 ‧ 2019-09-10 10:37:13

這標題XDDDD

Chita iT邦新手 5 級 ‧ 2019-09-10 15:19:57 檢舉

其實每天光想標題就要花掉三個小時 (被毆

1
紅茶小公主
iT邦新手 2 級 ‧ 2019-09-10 10:51:24

叫我嗎~

Chita iT邦新手 5 級 ‧ 2019-09-10 15:19:05 檢舉

有人拍你肩不要回頭(顆顆顆顆

1

我老婆說不願意當標題,請刪文,謝謝

Chita iT邦新手 5 級 ‧ 2019-09-10 15:18:22 檢舉

醒醒吧你沒有老婆(呼巴掌)

我要留言

立即登入留言