2017年7月18日 星期二

Html-CheckBox 多選選單操作

我們要如何製作一個簡單的單選選單?
要如何取到選單對應的參數?
此篇文章會提到如何使用 JS (JavaScript), JQ (JQuery)


A
B
C
<form>
    <input type="checkbox" name="vehicle" value="0">A<br>
    <input type="checkbox" name="vehicle" value="1">B<br>
    <input type="checkbox" name="vehicle" value="2">C<br>
</form>

如何取出 select radioBox value ?

var valuelist = ''; 

$('input[name="vehicle"]:checked').each(function() {
    valuelist += this.value + ',';
});

Html-RadioBox 單選選單操作

我們要如何製作一個簡單的單選選單?
要如何取到選單對應的參數?
此篇文章會提到如何使用 JS (JavaScript), JQ (JQuery)

Male
Female
Other
<form>
      <input type="radio" name="gender" value="male" checked> Male<br>
      <input type="radio" name="gender" value="female"> Female<br>
      <input type="radio" name="gender" value="other"> Other
</form>

如何取出 select radioBox value ?

var radioVar = $('input[name=gender]:checked').val();

Html-Option 下拉選單操作

我們要如何製作一個簡單的下拉選單?
要如何取到選單對應的參數?文字?
此篇文章會提到如何使用 JS (JavaScript), JQ (JQuery)

以下是範例 :



<select id="selectId" onchange="changeOption();">
  <option value="0">請選擇</option>
  <option value="1">a</option>
  <option value="2">b</option>
  <option value="3">c</option>
  <option value="4">d</option>
</select>

如何取出 select option value ?

var optionVar = $('#selectId').val();

如何取出 select option text ?

var optionText = $('#selectId option:selected').text();

如何設置被選擇的參數 ?
$("#selectId").val("2").change();


2017年7月12日 星期三

JavaScript-客製化日期選單

// 年度
var date = new Date();
var minYear = 1940,maxMonth = date.getFullYear(),
    selectYear = document.getElementById('selectYear');

for (var i = minYear; i<=maxMonth; i++){
    var opt = document.createElement('option');
    opt.value = i;
    opt.innerHTML = i;
    selectYear.appendChild(opt);
}

// 月份
var minMonth = 1,maxMonth = 12,
    selectMonth = document.getElementById('selectMonth');

for (var i = minMonth; i<=maxMonth; i++){
    var opt = document.createElement('option');
    opt.value = i;
    opt.innerHTML = i;
    selectMonth.appendChild(opt);
}

// 預設日期
daysInThisMonth();

// 日期
function daysInThisMonth() {
  var date_var = new Date(date.getFullYear(), date.getMonth()+1, 0).getDate();
  var minDay = 1,maxDay = date_var,
      selectDay = document.getElementById('selectDay');
    selectDay.options.length = 0;
  for (var i = minDay; i<=maxDay; i++){
      var opt = document.createElement('option');
      opt.value = i;
      opt.innerHTML = i;
      if(i == 1){
      opt.selected = "true";
      }
     
      selectDay.appendChild(opt);
  }
}
 

2017年5月1日 星期一

Website-FireBase Hosting 靜態網頁部屬


此篇會從如何安裝、連結、部屬專案開始

會寫此篇的目的在於因為網路資訊過多
想整理出自己較能理解的版本
官方文件說明 : 連結

步驟概要
- 下載 Node.js
- 用 npm 串接 FireBase
- 將專案部屬到 FireBase

1 . 下載 Node js : 連結












2 .開啟命令提示字元,確認 NPM 是否確實安裝
npm -version















3 . 安裝相關套件,以便於後續使用
npm install -g firebase-tools















4 . 新增專案檔案夾
並且要有 public
還有 index.html( 放置在 public 底下 )
















6 . 命令提示字元指向此路徑
cd C:\Users\BluePC\Desktop\Test\public ( 建議用複製 )

4 . 執行 FireBase ,並且執行程序
firebase init ( 不用加 npm  )















這邊可能會出現需要權限的需求,所以必須串接你的帳號















輸入 Login 指令,成功後再次執行 firebase init
firebase login















5 .選擇 Hosting 選項















6 . 選擇 Firebase 底下的指定專案















7 .
































































參考資料 : Firebase Hosting 靜態網站部署試用
參考資料 : Firebase 架站
參考資料 : Get Started with Hosting

Mac
參考資料:Firebase Hosting 靜態網站部署
參考資料:https://andy6804tw.github.io/2017/12/14/npm-tutorial/
參考資料:【備忘録】npm -g install に失敗する

歡迎轉載,請註明出處。