吉言軍's Note: 8月 2014

2014年8月27日星期三

[Web]JS表單篇

圖片送出按鈕

<a href="javascript:form1.submit();"> <img src="img.jpg"</a>

重設按鈕

<a href="javascript:form1.reset();"> <img src="img.jpg"</a>

允許/禁止訪問表單

document.form1.disabled = true / false;

讀取表單所有名稱

form1.elements.lengthform1.elements[i].name

驗證是否輸入是否為數字

var num = "0123456789"var str = form.id.value;for(i=0;i<str.length;i++){ if(num.indexOf(str.charAt(i))== -1)}

使用鍵盤快速選取欄位

<form> <label for="Namebox" accessKey="N"><u>N</u>ame:</label> <input type="text" id="Namebox"></form>

文字欄位取得focus

<input type="text" id="txID">form.txID.focus();

選取文字欄位中的文字

form.ID.focus();form.ID.select();

改變文字欄位中的顏色

<input type="text" value="HERE" onMouseOver = "this.style.color = 'red' ">

改變文字欄位中的背景顏色

<input type="text" value="HERE" onMouseOver = "this.style.background= 'red' ">

改變文字欄位中的1邊框顏色

<input type="text" value="HERE" onMouseOver = "this.style.borderColor= 'red' ">

文字欄位自動調整大小

onKeyPress = "autoWidth()"str = form.ID.value;if(str.length !=0){ form.ID.size = str.length;}

改變文字欄位中的對齊方式

form.Id.style.textAlign = left/center/right;

製作Google搜尋表單

<form id="fm1_Id" action="http://www.google.com/search"> <input name="q" id="searchWord" > <br> <input type="submit" value="搜尋"></form>

檢驗一組按鈕的選擇狀態

<form id="form1"><input name="sex" type="radio" checked>男<input name="sex" type="radio" >女</form>
form1.sex[0].checked form1.sex[1].checked

核取方塊狀態

form1.id[i].checked

帶標籤的核取方塊

<input type="checkbox" id="ch1"><label for="ch1" > 標籤 </label>

取得下拉選單中選取的值

<form id="form1"><select id="sel1" onChange="get()"><option value="第一項">第一項</option><option value="第二項">第二項</option><option value="第三項">第三項</option></form>
form1.sel1.value

取得下拉選單的索引值

form1.sel1.selectedIndex

取得選單中的多個值

<select id="sel1" multiple>form.id[i].selected // 看看有沒有被選到form.id[i].value

在新視窗中開啓網頁

open（）取代window.loction（）open(http://www.google.com);

取得檔案位置(含路徑)

<form id="form2" enctype="multipart/form-data" ><input type="file" id="file"> <input type="button" onClick="get()" value="FileName"></form>
form2.id.value

取得檔案名稱（不含路徑）

取得檔案路徑後，用split()將路徑以“\”切割，再存入陣列中，最後取出陣列的最後一項在JavaScript中插入一個反斜線必須用雙斜線表示。var fName = form2.id.value;var fileName = new Array();fileName = fName.split("\\");fileName[fileName.length-1]

取得選取檔案的副檔名

取得檔案路徑後，用split()將路徑以“.”切割，再存入陣列中，最後取出陣列的最後一項
fileName = fName.split(".");

將選取的檔案圖片顯示出來

先判斷是不是圖檔
extname.toUpperCase() =="JPG"pic.src = fileName; //完整路徑

取得選取圖片的檔案大小

先建立圖片物件，並為圖片物件指定來源，再使用物件屬性取得size
img = new Image();
img.src = fileName;
size = img.fileSize / 1024 ; //將圖片大小轉成KB

取得選取圖片的寬高

img.widthimg.height

選取圖片作為網頁背景

document.body.backgronund = imgURL;

2014年8月24日星期日

[Web]JS網頁事件篇

進入、離開網頁顯示訊息

<body onLoad="alert('歡贏')" onUnload="alert('謝謝')">

單擊、雙擊滑鼠事件

<input type="button" onClick="alert('單擊')"><input type="button" onDbClick="alert('雙擊')">

取得滑鼠的按鍵

function getButton(){ switch(event.button) { case 0 : alert("左鍵");break; case 1 : alert("右鍵");break; case 2 : alert("中鍵");break; }}document.onmousedown = getButton; //監聽器

滑鼠按下事件

<body onmousedown="alert('點擊')">

絕對禁止按滑鼠右鍵

<body onContextMenu="alert('NO') ; return false" >

滑鼠控制文字滾動

<marquee direction="up" onMouseOver="this.stop()"onMosueOut="this.start()">

取得滑鼠座標

function getMouse(){ event.x; event.y;}document.onmousemove = getMouse;

交換式圖片按鈕

<img src="img1" onMouseOver = " this.src = ' img2 ' " onMouseOut = " this.src = ' img1 ' " >

顯示或隱藏圖片

picID.style.visibility = 'visible'picID.style.visibility = 'hidden'

取得按鍵ASCII編碼

function getkeyCode(){ asc = event.keyCode; key = String.fromCharCode(asc);}document.onkeydown = getkeyCode; // 可以取得所有按鍵，但無法分辨大小寫document.onkeypress = getkeyCode; //可分辨大小寫

前往某網頁

window.loaction.href = "www.google.com";

將按下的按鍵顯示在網頁上

asc = event.keyCode;key = String.fromCharCode(asc);str += key;txt.innerHTML = str;document.onkeypress = showkey;

顯示不同滑鼠樣式

<div onMouseOver = "this.style.cursor='hand'">手形指標</div>

使用外部滑鼠樣式

靜態指標:this.style.cursor='url(img.cur)'動態指標:this.style.cursor='url(img.ani)'

登入密碼驗證

看網頁原始碼就破解

var password = prompt("請輸入密碼","");

取得頁面所有超連結地址

陣列 = document.all.tags("A");

[Web]JS實用範例辭典-視窗篇

視窗篇

警告對話方塊

alert("HI你好");

確認對話方塊

ret = confirm("可以加你朋友嗎"); //ret回傳值(true/false)

顯示網頁對話方塊

可以顯示一個對話方塊，此對話方塊是另一個網頁的內容

features = "dialogWidth:300px;dialogHeight:200px;status=no"; // 設定對話方塊CSS

showModalDialog("dialog.html",window,features);

以頂層模式顯示網頁對話方塊

不同於showModalDialog的地方是，顯示對話方塊後還可以同時操作原本後面的網頁視窗

features = "dialogWidth:300px;dialogHeight:300px;status-no";

showModelessDialog(dialog.html,window,features);

取得瀏覽器視窗大小

var width = document.body.clientWidth;
var height = document.body.clientHeight + 125; //瀏覽器網址，工具列...

取得螢幕大小

var width = screen.width;
var height = screen.height;

不能改變大小的視窗

一但改變視窗大小就觸發<body> onResize事件
<body onResize="window.resize(400,300)">

指定瀏覽器視窗位置

window.moveTo(200,100); //(距離螢幕左邊的距離，距離螢幕頂部的距離)

震動的視窗

window.top.moveBy(0,i); //相對移動

視窗縮小效果(IE)

resizeTo(width,height);
moveTo( (screen.height-height)/2 , (screen.width-width)/2 );

視窗自動捲動

window.scrollBy(1,0); // 0 , 正 , 負值的六種組合方向
<body onLoad="setInterval('window.scrollBy(0,1)',50)">

去掉視窗捲軸

定義body的CSS
body{overflow:scroll;overflow-x:hidden;overflow-y:hidden;}

讓捲軸從左邊出現

<body dir="rtl">

改變捲軸的樣式CSS

body
{
scrollbar-face-color : # ffd0d0 //捲軸表單顏色
scrollbar-highlight-color : ffffff //高光顏色
}

視窗失焦事件

body
{onBlur="alert('out of focus')"}

彈出新網頁視窗

window.open("newPage.html");

彈出無屬性列網頁視窗

window.open("newPage.html","","top=100,left=300,width=300,height=200");

彈出視窗狀態

window.open("newPage.html',"","HERE");
fullscreen=yes //全螢幕
menubar=yes //功能表
toolbar=yes //標準按鈕列，下一頁
location=yes //網址
status=yes //底下狀態列
scrollbar = yes //有捲軸
resize=yes //允許調整視窗

關閉視窗

self.close()
window.close()

在主視窗關閉彈出視窗

p = window.open('newPage.html');
p.close();

在彈出視窗關閉主視窗

opener.close();

將主視窗的資料輸出到彈出視窗

var p = window.open("receive.html","","width=300,height=200,top=300,left=800");
var msg = textID.value;
p.document.write("<p>" + msg + "</p>");

自動關閉視窗

setTimeout(self.close(),5000);

setTimeout(myfunction,5000); //不可myfunction()

Reference

JavaScript實用範例辭典-孫俊平

2014年8月5日星期二

[unity]tag Detect

大綱

現在有一場景，上面有很多遊戲物件，當滑鼠點擊畫面時，我們可以得到以下資訊:1、點擊位置的座標(screenspace、worldspace)2、是否點擊到物件3、點擊到哪個物件

說明

場景中有很多物件，要做當滑鼠點擊物件時，知道是點到哪個物件。先將遊戲物件標籤，以供程式判斷；gameobject.tag

使用到Input.GetMouseButtonDown來觸發，接下來是將點擊到的位置由Screenspace轉成遊戲世界的World space

var ray = Camera.main.ScreenPointToRay(Input.mousePosition);

將由攝影機投射出光線，包含著位置與方向資訊。

Physics.Raycast(ray,hit);

如果攝影機射出的光線，有碰擊到遊戲物件(collider)，回返回true，然後hit會得到光線與collider在哪個位置被碰到的物件資訊。

point = hit.point; (哪個位置)

object = hit.transform.gameObject;(哪個物件)

Code :

#pragma strict

var Ball : GameObject;

var object: GameObject;

var point: Vector3;

function Start () {

}

function Update () {

if(Input.GetMouseButtonDown(0))

{

//Instantiate(Ball,Input.mousePosition,transform.rotation);

//print(Input.mousePosition);

var hit: RaycastHit;

var ray = Camera.main.ScreenPointToRay(Input.mousePosition);

if (Physics.Raycast(ray, hit))

{

point = hit.point;

object = hit.transform.gameObject;

//print(object.tag);

print(point);

Instantiate(Ball,point,transform.rotation);

}

else

{

print("SHIT");

}

Reference

Unity Document

2014年8月2日星期六

[unity]Input

在Unity 中使用input 物件來偵測滑鼠，鍵盤事件。
偵測情況基本上有三種:1、GetKey : 當按下時會持續作用2、GetKeyDown : 當按下那一刻才會作用3，GetKeyUp : 當按下後放開那一刻才會作用

Example:

偵測滑鼠左中右鍵

if(Input.GetMouseButton(0))
Debug.Log("Pressed left click.");
if(Input.GetMouseButton(1))
Debug.Log("Pressed right click.");
if(Input.GetMouseButton(2))
Debug.Log("Pressed middle click.");

三種不同的方式偵測是否按下"A"

if(Input.GetKey(KeyCode.A)) // print continue when press key

{

print("A");

}

if(Input.GetKeyDown(KeyCode.A)) // print once when press key

{

print("press A");

}

if(Input.GetKeyUp(KeyCode.A)) // print once when release key

{

print("press A");

}

按下任意鍵

if(Input.anyKeyDown)

{

print("anyKey");

}

Refernce:

Unity KeyCode API

CG 學習網

2014年8月1日星期五

[unity]onMouseDown

利用onMouseDowm 呈現當滑鼠按到遊戲物件時，開關燈光。
有兩種方式，

1、先製造一個cube GameObject然後在cube GameObject上附加燈光元件，所以程式是將onMouseDown依附在cube上，然後在程式碼中指定燈的強弱，因為是附加在cube的關係，在程式碼中，以gameObject.light.intensity即可存取。

#pragma strict

var lightSW = true;
function Start () {
print("Hello World");
}
function Update () {
gameObject.transform.Rotate(0,30*Time.deltaTime,0);
}
function OnMouseDown()
{
if(lightSW)
{
gameObject.light.intensity = 5;
lightSW = false;
}
else{
gameObject.light.intensity = 0;
lightSW = true;
}
}

2、製造一個cube GameObject 與一個spotlight GameObject ，將onMouseDowm附加在cube上，
因為兩個gameObject相互獨立，所以cube的程式要控制spotlight的話，必須將spotlight 以 gameObject(var GB_light:GameObject;)的方式讀進程式，然後再加以控制。

#pragma strict
var GB_light:GameObject;
var lightSW = true;
function Start () {
print("Hello World");
}
function Update () {
gameObject.transform.Rotate(0,30*Time.deltaTime,0);
}
function OnMouseDown()
{
if(lightSW)
{
GB_light.light.intensity = 5;
lightSW = false;
}
else{
GB_light.light.intensity = 0;
lightSW = true;
}
}

Reference

CG學習網

[unity]JavaScrpt遊戲物件基本操作

移動GmaeObject到指定位置

gameObject.transform.position = Vector3(x,y,z);

使GameObject向指定方向移動

gameObject.transform.Translate(x,y,z);

一秒轉30度

gameObject.transform.Rotate(0,30*Time.deltaTime,0);

旋轉到指定角度

gameObject.transform.rotation = Quaternion.Euler(0,30,0);

透過滑鼠指定啟動不同Camera

public var Camera3 : GameObject;Camera1.active = true;

Input.GetMouseButtonDown(1)

動態生成物件(Instantiate) : 先製造prefab，經過某個事件後才生成物件

var prefabObj : GameObject;Instantiate(prefabObj,transform.position,transform.rotation);

切換場景:可以場景檔名或引數呼叫(需在Sences In Build建立順序)

Application.LoadLevel("Sence2")

Application.LoadLevel(0);

Refence

超連結

Application.OpenURL("www.google.com");

AudioSource

建立空元件，並加上audiosource component，將mp3拉進audiosource

var audio_A : AduioSource;

aduio.play();

more

screen shot(png)

Application.CaptureScreenShot("filename.png");

Reference

CG數位學習網

彥霖實驗筆記

[unity]基本效果-看圖說故事

particle system
terrain
prefab
fog (Edit->Render Settings)
ambient Light (Edit->Render Settings)
skyBox (Edit->Render Settings)

light
flare
materials
shadder

particle system (import)

Referece : Unity CG數位學習網

訂閱：文章 (Atom)

2014年8月27日 星期三

2014年8月24日 星期日

2014年8月5日 星期二

2014年8月2日 星期六

2014年8月1日 星期五

2014年8月27日星期三

2014年8月24日星期日

2014年8月5日星期二

2014年8月2日星期六

2014年8月1日星期五