請點選注音符號後送出即可產生圖片
2018年2月2日 星期五
PHP的測試 (5) 用 jQuery取代 prototype.js 的上下左右按鍵
<script type="Text/JavaScript" src="jquery.js"></script>
<Script type="Text/JavaScript" Language="JavaScript">
$(document).ready(function(){
//當tbd裡所有的input
$('#tbd :input').keydown(function(e){
//取得自訂屬性的名稱
var id=$(this).attr('id');
var kk= id.split("_");
//alert(kk[1]+'!'+kk[2]);
var y=kk[1]*1;
var x=kk[2]*1;
newid='';
if (e.which==40) {//下
y = y+1;
newid='yx_'+y+'_'+x;
}
if (e.which==13) {//下
y = y+1;
newid='yx_'+y+'_'+x;
}
if (e.which==38) {//下
y = y-1;
newid='yx_'+y+'_'+x;
}
if (e.which==37) {//左
x = x-1;
newid='yx_'+y+'_'+x;
}
if (e.which==39) {//右
x = x+1;
newid='yx_'+y+'_'+x;
}
if (newid !='') {
document.getElementById(newid).select();
document.getElementById(newid).foucs();
}
});
})
</Script>
</HEAD>
<BODY>
<FORM action="" method=POST id=form1 name=form1>
<table border="1">
<thead>
<tr>
<th>CName</th>
<th>Value</th>
<th>ValueT</th>
</tr>
</thead>
<tbody id="tbd">
<tr>
<td><input type="text" id='yx_1_1' value="ZZZmeXX"></td>
<td><input type="text" id='yx_1_2' value="ValueXX"></td>
<td><input type="text" id='yx_1_3' value="ValueBB"></td>
</tr>
<tr>
<td><input type="text" id='yx_2_1' value="ZZZmeXX"></td>
<td><input type="text" id='yx_2_2' value="ValueXX"></td>
<td><input type="text" id='yx_2_3' value="ValueBB"></td>
</tr>
<tr>
<td><input type="text" id='yx_3_1' value="ZZZmeXX"></td>
<td><input type="text" id='yx_3_2' value="ValueXX"></td>
<td><input type="text" id='yx_3_3' value="ValueBB"></td>
</tr>
<tr>
<td><input type="text" id='yx_4_1' value="ZZZmeXX"></td>
<td><input type="text" id='yx_4_2' value="ValueXX"></td>
<td><input type="text" id='yx_4_3' value="ValueBB"></td>
</tr>
</tbody>
</table>
</FORM>
2017年10月13日 星期五
Greasemonkey範例
新增Greasemonkey套件
新使用者腳本
名稱 edit
命名空間 http://wusi.asuscomm.com/news5/
使用 http://wusi.asuscomm.com/*
將底下複製到使用者程式碼區
// ==UserScript==
// @name edit
// @namespace http://wusi.asuscomm.com/news5/
// @include http://wusi.asuscomm.com/news5/
// @version 1
// @grant none
// ==/UserScript==
function openInNewTab(url) {
var win = window.open(url, '_blank');
win.focus();
}
var x = document.getElementsByClassName('logo');
var btn = document.createElement('BUTTON');
var t = document.createTextNode('EDIT');
btn.appendChild(t);
x[0].appendChild(btn);
btn.onclick = function () {
a = location.href.split('/');
l = a.length;
//alert(a[l-1]);
b = a[l - 1].split('-');
c = b[0].match(/\d+/g);
url = 'http://wusi.asuscomm.com/news5/administrator/index.php?option=com_content&task=article.edit&id=' + c;
openInNewTab(url);
}
新使用者腳本
名稱 edit
命名空間 http://wusi.asuscomm.com/news5/
使用 http://wusi.asuscomm.com/*
將底下複製到使用者程式碼區
// ==UserScript==
// @name edit
// @namespace http://wusi.asuscomm.com/news5/
// @include http://wusi.asuscomm.com/news5/
// @version 1
// @grant none
// ==/UserScript==
function openInNewTab(url) {
var win = window.open(url, '_blank');
win.focus();
}
var x = document.getElementsByClassName('logo');
var btn = document.createElement('BUTTON');
var t = document.createTextNode('EDIT');
btn.appendChild(t);
x[0].appendChild(btn);
btn.onclick = function () {
a = location.href.split('/');
l = a.length;
//alert(a[l-1]);
b = a[l - 1].split('-');
c = b[0].match(/\d+/g);
url = 'http://wusi.asuscomm.com/news5/administrator/index.php?option=com_content&task=article.edit&id=' + c;
openInNewTab(url);
}
2017年10月7日 星期六
字串轉數值、數值轉字串
字串轉數值
方法一: Number constructor function
var e = '123';
e = Number(e); // 123
方法二: parseInt() 或 parseFloat()
var e = '123.45abc';
var e1 = parseInt(e, 10); // 123
var e2 = parseFloat(e); // 123.45
若無法轉換成數值時，會回傳 NaN (Not A Number)。
var f = 'abc123';
var f1 = Number(f); // NaN
var f2 = parseInt(f, 10); // NaN
var f3 = parseFloat(f); // NaN
數值轉字串
var a=10;
a = String(a);
alert(typeof a);
var a=10;
a = a.toString();
alert (typeof a);
jQuery的載入事件先後
在jQuery中，要做到"等網頁載入後再執行"，我們有兩種選擇:
$(document).ready(fn)與$(window).load(fn)
二者的差別在於$(document).ready(fn)發生在"網頁本身的HTML"載入後就觸發，而$(window).load(fn)則會等到"網頁HTML標籤中引用的圖檔、內嵌物件(如Flash)、IFrame"等拉哩拉雜的東西都載入後才會觸發。
來源： http://blog.darkthread.net/post-2009-06-05-jquery-ready-vs-load.aspx
瀏覽器物件(5)Location
Location Object Properties
| Property | Description |
|---|---|
| hash | Sets or returns the anchor part (#) of a URL |
| host | Sets or returns the hostname and port number of a URL |
| hostname | Sets or returns the hostname of a URL |
| href | Sets or returns the entire URL |
| origin | Returns the protocol, hostname and port number of a URL |
| pathname | Sets or returns the path name of a URL |
| port | Sets or returns the port number of a URL |
| protocol | Sets or returns the protocol of a URL |
| search | Sets or returns the querystring part of a URL |
Location Object Methods
| Method | Description |
|---|---|
| assign() | Loads a new document |
| reload() | Reloads the current document |
| replace() | Replaces the current document with a new one |
瀏覽器物件(4)History
瀏覽器物件(3)Screen
Screen Object Properties
| Property | Description |
|---|---|
| availHeight | Returns the height of the screen (excluding the Windows Taskbar) |
| availWidth | Returns the width of the screen (excluding the Windows Taskbar) |
| colorDepth | Returns the bit depth of the color palette for displaying images |
| height | Returns the total height of the screen |
| pixelDepth | Returns the color resolution (in bits per pixel) of the screen |
| width | Returns the total width of the screen |
2017年10月6日 星期五
瀏覽器物件(2)Navigator
Navigator Object Properties
| Property | Description |
|---|---|
| appCodeName | Returns the code name of the browser |
| appName | Returns the name of the browser |
| appVersion | Returns the version information of the browser |
| cookieEnabled | Determines whether cookies are enabled in the browser |
| geolocation | Returns a Geolocation object that can be used to locate the user's position |
| language | Returns the language of the browser |
| onLine | Determines whether the browser is online |
| platform | Returns for which platform the browser is compiled |
| product | Returns the engine name of the browser |
| userAgent | Returns the user-agent header sent by the browser to the server |
瀏覽器物件(1) Window
Window Object Properties
| Property | Description |
|---|---|
| closed | Returns a Boolean value indicating whether a window has been closed or not |
| defaultStatus | Sets or returns the default text in the statusbar of a window |
| document | Returns the Document object for the window (See Document object) |
| frameElement | Returns the <iframe> element in which the current window is inserted |
| frames | Returns all <iframe> elements in the current window |
| history | Returns the History object for the window (See History object) |
| innerHeight | Returns the inner height of a window's content area |
| innerWidth | Returns the inner width of a window's content area |
| length | Returns the number of <iframe> elements in the current window |
| localStorage | Allows to save key/value pairs in a web browser. Stores the data with no expiration date |
| location | Returns the Location object for the window (See Location object) |
| name | Sets or returns the name of a window |
| navigator | Returns the Navigator object for the window (See Navigator object) |
| opener | Returns a reference to the window that created the window |
| outerHeight | Returns the outer height of a window, including toolbars/scrollbars |
| outerWidth | Returns the outer width of a window, including toolbars/scrollbars |
| pageXOffset | Returns the pixels the current document has been scrolled (horizontally) from the upper left corner of the window |
| pageYOffset | Returns the pixels the current document has been scrolled (vertically) from the upper left corner of the window |
| parent | Returns the parent window of the current window |
| screen | Returns the Screen object for the window (See Screen object) |
| screenLeft | Returns the horizontal coordinate of the window relative to the screen |
| screenTop | Returns the vertical coordinate of the window relative to the screen |
| screenX | Returns the horizontal coordinate of the window relative to the screen |
| screenY | Returns the vertical coordinate of the window relative to the screen |
| sessionStorage | Allows to save key/value pairs in a web browser. Stores the data for one session |
| scrollX | An alias of pageXOffset |
| scrollY | An alias of pageYOffset |
| self | Returns the current window |
| status | Sets or returns the text in the statusbar of a window |
| top | Returns the topmost browser window |
Window Method
| Method | Description |
|---|---|
| alert() | Displays an alert box with a message and an OK button |
| atob() | Decodes a base-64 encoded string |
| blur() | Removes focus from the current window |
| btoa() | Encodes a string in base-64 |
| clearInterval() | Clears a timer set with setInterval() |
| clearTimeout() | Clears a timer set with setTimeout() |
| close() | Closes the current window |
| confirm() | Displays a dialog box with a message and an OK and a Cancel button |
| focus() | Sets focus to the current window |
| getComputedStyle() | Gets the current computed CSS styles applied to an element |
| getSelection() | Returns a Selection object representing the range of text selected by the user |
| matchMedia() | Returns a MediaQueryList object representing the specified CSS media query string |
| moveBy() | Moves a window relative to its current position |
| moveTo() | Moves a window to the specified position |
| open() | Opens a new browser window |
| print() | Prints the content of the current window |
| prompt() | Displays a dialog box that prompts the visitor for input |
| resizeBy() | Resizes the window by the specified pixels |
| resizeTo() | Resizes the window to the specified width and height |
| scroll() | Deprecated. This method has been replaced by the scrollTo() method. |
| scrollBy() | Scrolls the document by the specified number of pixels |
| scrollTo() | Scrolls the document to the specified coordinates |
| setInterval() | Calls a function or evaluates an expression at specified intervals (in milliseconds) |
| setTimeout() | Calls a function or evaluates an expression after a specified number of milliseconds |
| stop() | Stops the window from loading |
ajax基本用法
$.ajax({method: "POST",url: "some.php",data: { name: "John", location: "Boston" }}).done(function( msg ) {alert( "Data Saved: " + msg ); // 1}).fail(function() {
alert( "error" );});//其中 1 那一列可改成$( "#results" ).append( msg );或$( "#results" ).innerHTML( msg );等格式，依照需要去變化完全做完之後，及done 或 error完成後，可以用.always 持續下一個動作。基本上我喜歡用 setTimeout 去接續
2017年9月29日 星期五
HTML 語法一覽表
| 標籤 | 描述 | 4 | 5 |
|---|---|---|---|
| <!--...--> | 定義註釋。 | 4 | 5 |
| <!DOCTYPE> | 定義文檔類型。 | 4 | 5 |
| <a> | 定義超鏈接。 | 4 | 5 |
| <abbr> | 定義縮寫。 | 4 | 5 |
| <acronym> | HTML 5中不支持。定義首字母縮寫。 | 4 | |
| <address> | 定義地址元素。 | 4 | 5 |
| <applet> | HTML 5中不支持。定義applet。 | 4 | |
| <area> | 定義圖像映射中的區域。 | 4 | 5 |
| <article> | 定義article。 | 5 | |
| <aside> | 定義頁面內容之外的內容。 | 5 | |
| <audio> | 定義聲音內容。 | 5 | |
| <b> | 定義粗體文本。 | 4 | 5 |
| <base> | 定義頁面中所有鏈接的基準URL。 | 4 | 5 |
| <basefont> | HTML 5中不支持。請使用CSS代替。 | 4 | |
| <bdo> | 定義文本顯示的方向。 | 4 | 5 |
| <big> | HTML 5中不支持。定義大號文本。 | 4 | |
| <blockquote> | 定義長的引用。 | 4 | 5 |
| <body> | 定義body 元素。 | 4 | 5 |
| <br> | 插入換行符。 | 4 | 5 |
| <button> | 定義按鈕。 | 4 | 5 |
| <canvas> | 定義圖形。 | 5 | |
| <caption> | 定義表格標題。 | 4 | 5 |
| <center> | HTML 5中不支持。定義居中的文本。 | 4 | |
| <cite> | 定義引用。 | 4 | 5 |
| <code> | 定義計算機代碼文本。 | 4 | 5 |
| <col> | 定義表格列的屬性。 | 4 | 5 |
| <colgroup> | 定義表格列的分組。 | 4 | 5 |
| <command> | 定義命令按鈕。 | 5 | |
| <datalist> | 定義下拉列表。 | 5 | |
| <dd> | 定義定義的描述。 | 4 | 5 |
| <del> | 定義刪除文本。 | 4 | 5 |
| <details> | 定義元素的細節。 | 5 | |
| <dfn> | 定義定義項目。 | 4 | 5 |
| <dir> | HTML 5中不支持。定義目錄列表。 | 4 | |
| <div> | 定義文檔中的一個部分。 | 4 | 5 |
| <dl> | 定義定義列表。 | 4 | 5 |
| <dt> | 定義定義的項目。 | 4 | 5 |
| <em> | 定義強調文本。 | 4 | 5 |
| <embed> | 定義外部交互內容或插件。 | 5 | |
| <fieldset> | 定義fieldset。 | 4 | 5 |
| <figcaption> | 定義figure 元素的標題。 | 5 | |
| <figure> | 定義媒介內容的分組，以及它們的標題。 | 5 | |
| <font> | HTML 5 中不支持。 | 4 | |
| <footer> | 定義section 或page 的頁腳。 | 5 | |
| <form> | 定義表單。 | 4 | 5 |
| <frame> | HTML 5中不支持。定義子窗口（框架）。 | 4 | |
| <frameset> | HTML 5中不支持。定義框架的集。 | 4 | |
| <h1> to <h6> | 定義標題1 到標題6。 | 4 | 5 |
| <head> | 定義關於文檔的信息。 | 4 | 5 |
| <header> | 定義section 或page 的頁眉。 | 5 | |
| <hgroup> | 定義有關文檔中的section 的信息。 | 5 | |
| <hr> | 定義水平線。 | 4 | 5 |
| <html> | 定義html 文檔。 | 4 | 5 |
| <i> | 定義斜體文本。 | 4 | 5 |
| <iframe> | 定義行內的子窗口（框架）。 | 4 | 5 |
| <img> | 定義圖像。 | 4 | 5 |
| <input> | 定義輸入域。 | 4 | 5 |
| <ins> | 定義插入文本。 | 4 | 5 |
| <keygen> | 定義生成密鑰。 | 5 | |
| <isindex> | HTML 5中不支持。定義單行的輸入域。 | 4 | |
| <kbd> | 定義鍵盤文本。 | 4 | 5 |
| <label> | 定義表單控件的標註。 | 4 | 5 |
| <legend> | 定義fieldset 中的標題。 | 4 | 5 |
| <li> | 定義列表的項目。 | 4 | 5 |
| <link> | 定義資源引用。 | 4 | 5 |
| <map> | 定義圖像映射。 | 4 | 5 |
| <mark> | 定義有記號的文本。 | 5 | |
| <menu> | 定義菜單列表。 | 4 | 5 |
| <meta> | 定義元信息。 | 4 | 5 |
| <meter> | 定義預定義範圍內的度量。 | 5 | |
| <nav> | 定義導航鏈接。 | 5 | |
| <noframes> | HTML 5中不支持。定義noframe部分。 | 4 | |
| <noscript> | 定義noscript 部分。 | 4 | 5 |
| <object> | 定義嵌入對象。 | 4 | 5 |
| <ol> | 定義有序列表。 | 4 | 5 |
| <optgroup> | 定義選項組。 | 4 | 5 |
| <option> | 定義下拉列表中的選項。 | 4 | 5 |
| <output> | 定義輸出的一些類型。 | 5 | |
| <p> | 定義段落。 | 4 | 5 |
| <param> | 為對象定義參數。 | 4 | 5 |
| <pre> | 定義預格式化文本。 | 4 | 5 |
| <progress> | 定義任何類型的任務的進度。 | 5 | |
| <q> | 定義短的引用。 | 4 | 5 |
| <rp> | 定義若瀏覽器不支持ruby 元素顯示的內容。 | 5 | |
| <rt> | 定義ruby 註釋的解釋。 | 5 | |
| <ruby> | 定義ruby 註釋。 | 5 | |
| <s> | HTML 5中不支持。定義加刪除線的文本。 | 4 | |
| <samp> | 定義樣本計算機代碼。 | 4 | 5 |
| <script> | 定義腳本。 | 4 | 5 |
| <section> | 定義section。 | 5 | |
| <select> | 定義可選列表。 | 4 | 5 |
| <small> | 定義小號文本。 | 4 | 5 |
| <source> | 定義媒介源。 | 5 | |
| <span> | 定義文檔中的section。 | 4 | 5 |
| <strike> | HTML 5中不支持。定義加刪除線的文本。 | 4 | |
| <strong> | 定義強調文本。 | 4 | 5 |
| <style> | 定義樣式定義。 | 4 | 5 |
| <sub> | 定義下標文本。 | 4 | 5 |
| <summary> | 定義details 元素的標題。 | 5 | |
| <sup> | 定義上標文本。 | 4 | 5 |
| <table> | 定義表格。 | 4 | 5 |
| <tbody> | 定義表格的主體。 | 4 | 5 |
| <td> | 定義表格單元。 | 4 | 5 |
| <textarea> | 定義textarea。 | 4 | 5 |
| <tfoot> | 定義表格的腳註。 | 4 | 5 |
| <th> | 定義表頭。 | 4 | 5 |
| <thead> | 定義表頭。 | 4 | 5 |
| <time> | 定義日期/時間。 | 5 | |
| <title> | 定義文檔的標題。 | 4 | 5 |
| <tr> | 定義表格行。 | 4 | 5 |
| <tt> | HTML 5中不支持。定義打字機文本。 | 4 | |
| <u> | HTML 5中不支持。定義下劃線文本。 | 4 | |
| <ul> | 定義無序列表。 | 4 | 5 |
| <var> | 定義變量。 | 4 | 5 |
| <video> | 定義視頻。 | 5 | |
| <xmp> | HTML 5中不支持。定義預格式文本。 | 4 |
訂閱：
文章 (Atom)