tag:blogger.com,1999:blog-59465307047421309702024-03-06T16:20:07.273+08:00Jax 的工作紀錄除了在整理學習上的經驗,同時也能幫助其他需要的人Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.comBlogger21125tag:blogger.com,1999:blog-5946530704742130970.post-17281822509853364672013-08-17T14:55:00.001+08:002013-08-17T15:01:57.490+08:00[PHP] url, base64, sprite 三種格式的 icons.css 產生器先做一個假設,如果 icon 的檔名就是 css 的 class 樣式名稱,那麼我們只要掃瞄資料夾的 Icon 圖檔,然後產生對應的 CSS 檔案,這樣就可以省去製作 Sprite 圖檔跟維護 CSS 對應的問題。<br />
<br />
第一種 url 格式只是取得路徑的問題。<br />
<br />
第二種 base64 格式可以透過 <code>base64_encode(file_get_contents($path));</code> 就簡單的達成。<br />
<br />
第三種 sprite 格式則使用 <a target="_blank" href="http://php.net/manual/en/book.imagick.php">Imagick</a> 去處理,會比較快樂。<br />
<br />
<br />
接著以下就是如何達成的程式片段:<br />
<br />
<pre class="php" name="code"><?php
/*把目錄改變到當前文件下*/
chdir(dirname(__FILE__));
/*Sprite 圖與圖的間距*/
$spriteGap = 30;
/*=[ 取得圖檔資訊 ]=*/
$maxWidth = 0;
$maxHeight = 0;
$nextTop = 0;
$imageList = array();
foreach ( glob('icons/*.{png,jpg,gif}',GLOB_BRACE) as $path )
{
$image = new Imagick($path);
$name = pathinfo($path,PATHINFO_FILENAME);
if(isset($imageList[$name])){
throw new Exception("圖片名稱重複 [ $name ]");
}
$info = array(
'{top}' => $nextTop,
'{image}' => $image,
'{width}' => $image->getImageWidth(),
'{height}' => $image->getImageHeight(),
'{name}' => $name,
'{path}' => $path,
'{isAnimate}' => false
);
$header = '';
switch($image->getImageFormat()){
case "PNG":
$header = 'data:image/png;base64,'; break;
case "JPEG":
$header = 'data:image/jpeg;base64,'; break;
case "GIF":
$header = 'data:image/gif;base64,'; break;
default: break;
}
$info['{uri}'] = $header.base64_encode(file_get_contents($path));
$maxWidth = max($maxWidth, $info['{width}']);
$maxHeight = max($maxHeight, $info['{height}']);
/*檢查圖片是否為動畫*/
$frameNum = 0;
foreach($image->deconstructImages() as $i) {
$frameNum++;
if ($frameNum > 1) {
$info['{isAnimate}'] = true;
break;
}
}
if(!$info['{isAnimate}']){
$nextTop += $info['{height}'] + $spriteGap;
}
$imageList[$name] = $info;
}
/*=[ 製作 CSS Sprite 圖檔 ]=*/
$spriteImage = new Imagick();
$spriteImage->newImage($maxWidth, $nextTop, new ImagickPixel());
$spriteImage->setImageFormat('png');
$spriteImage->paintTransparentImage(new ImagickPixel(), 0.0, 0);
foreach ($imageList as $name => $info)
{
if($info['{isAnimate}']){ continue; } /* 忽略 GIF 動畫 */
/* 複製 Icon 圖檔到 Sprite */
$spriteImage->compositeImage(
$info['{image}'],
$info['{image}']->getImageCompose(),
0,
$info['{top}']
);
$info['{image}']->destroy();
unset($imageList[$name]['{image}']);
}
$spriteImage->writeImage('icons.sprite.png');
$spriteImage->destroy();
$spriteImage = null;
</pre><br />
<br />
下載完整程式: <a target="_blank" href="https://dl.dropboxusercontent.com/u/16784943/code-demo/php_make_icons_css.zip">php_make_icons_css.zip</a>Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com0tag:blogger.com,1999:blog-5946530704742130970.post-49832142920384977892013-07-07T13:29:00.000+08:002013-07-07T13:37:33.015+08:00[轉載][CSS] drop-shadows without images轉載自:<a target="_blank" href="http://nicolasgallagher.com/css-drop-shadows-without-images/">CSS drop-shadows without images</a><br />
<style type="text/css">
.post-body {
position:relative;
z-index:1;
}
/* Shared styles */
.drop-shadow {
position:relative;
float:left;
width:40%;
padding:1em;
margin:2em 10px 4em;
background:#fff;
-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.drop-shadow:before,
.drop-shadow:after {
content:"";
position:absolute;
z-index:-2;
}
.drop-shadow p {
font-size:16px;
font-weight:bold;
}
/* Lifted corners */
.lifted {
-moz-border-radius:4px;
border-radius:4px;
}
.lifted:before,
.lifted:after {
bottom:15px;
left:10px;
width:50%;
height:20%;
max-width:300px;
max-height:100px;
-webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
-moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
-webkit-transform:rotate(-3deg);
-moz-transform:rotate(-3deg);
-ms-transform:rotate(-3deg);
-o-transform:rotate(-3deg);
transform:rotate(-3deg);
}
.lifted:after {
right:10px;
left:auto;
-webkit-transform:rotate(3deg);
-moz-transform:rotate(3deg);
-ms-transform:rotate(3deg);
-o-transform:rotate(3deg);
transform:rotate(3deg);
}
/* Curled corners */
.curled {
border:1px solid #efefef;
-moz-border-radius:0 0 120px 120px / 0 0 6px 6px;
border-radius:0 0 120px 120px / 0 0 6px 6px;
}
.curled:before,
.curled:after {
bottom:12px;
left:10px;
width:50%;
height:55%;
max-width:200px;
max-height:100px;
-webkit-box-shadow:0 8px 12px rgba(0, 0, 0, 0.5);
-moz-box-shadow:0 8px 12px rgba(0, 0, 0, 0.5);
box-shadow:0 8px 12px rgba(0, 0, 0, 0.5);
-webkit-transform:skew(-8deg) rotate(-3deg);
-moz-transform:skew(-8deg) rotate(-3deg);
-ms-transform:skew(-8deg) rotate(-3deg);
-o-transform:skew(-8deg) rotate(-3deg);
transform:skew(-8deg) rotate(-3deg);
}
.curled:after {
right:10px;
left:auto;
-webkit-transform:skew(8deg) rotate(3deg);
-moz-transform:skew(8deg) rotate(3deg);
-ms-transform:skew(8deg) rotate(3deg);
-o-transform:skew(8deg) rotate(3deg);
transform:skew(8deg) rotate(3deg);
}
/* Perspective */
.perspective:before {
left:80px;
bottom:5px;
width:50%;
height:35%;
max-width:200px;
max-height:50px;
-webkit-box-shadow:-80px 0 8px rgba(0, 0, 0, 0.4);
-moz-box-shadow:-80px 0 8px rgba(0, 0, 0, 0.4);
box-shadow:-80px 0 8px rgba(0, 0, 0, 0.4);
-webkit-transform:skew(50deg);
-moz-transform:skew(50deg);
-ms-transform:skew(50deg);
-o-transform:skew(50deg);
transform:skew(50deg);
-webkit-transform-origin:0 100%;
-moz-transform-origin:0 100%;
-ms-transform-origin:0 100%;
-o-transform-origin:0 100%;
transform-origin:0 100%;
}
.perspective:after {
display:none;
}
/* Raised shadow - no pseudo-elements needed */
.raised {
-webkit-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
/* Curved shadows */
.curved:before {
top:10px;
bottom:10px;
left:0;
right:50%;
-webkit-box-shadow:0 0 15px rgba(0,0,0,0.6);
-moz-box-shadow:0 0 15px rgba(0,0,0,0.6);
box-shadow:0 0 15px rgba(0,0,0,0.6);
-moz-border-radius:10px / 100px;
border-radius:10px / 100px;
}
.curved-vt-2:before {
right:0;
}
.curved-hz-1:before {
top:50%;
bottom:0;
left:10px;
right:10px;
-moz-border-radius:100px / 10px;
border-radius:100px / 10px;
}
.curved-hz-2:before {
top:0;
bottom:0;
left:10px;
right:10px;
-moz-border-radius:100px / 10px;
border-radius:100px / 10px;
}
/* Rotated box */
.rotated {
-webkit-box-shadow:none;
-moz-box-shadow:none;
box-shadow:none;
-webkit-transform:rotate(-3deg);
-moz-transform:rotate(-3deg);
-ms-transform:rotate(-3deg);
-o-transform:rotate(-3deg);
transform:rotate(-3deg);
}
.rotated > :first-child:before {
content:"";
position:absolute;
z-index:-1;
top:0;
bottom:0;
left:0;
right:0;
background:#fff;
-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
</style><br />
<div class="drop-shadow lifted"><p>Lifted corners</p></div><div class="drop-shadow curled"><p>Curled corners</p></div><div class="drop-shadow perspective"><p>Perspective</p></div><div class="drop-shadow raised"><p>Raised box</p></div><div class="drop-shadow curved curved-vt-1"><p>Single vertical curve</p></div><div class="drop-shadow curved curved-vt-2"><p>Vertical curves</p></div><div class="drop-shadow curved curved-hz-1"><p>Single horizontal curve</p></div><div class="drop-shadow curved curved-hz-2"><p>Horizontal curves</p></div><div class="drop-shadow lifted rotated"><p>Rotated box</p></div>Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com0tag:blogger.com,1999:blog-5946530704742130970.post-64578714668888091462009-12-18T16:50:00.008+08:002011-05-06T18:13:43.456+08:00[HTML] 規劃延生屬性之前在玩 Firefox 的外掛時,在 <a href="https://developer.mozilla.org/zh_tw/XUL">XUL</a> 的定義中學到其他屬性設定,當中有些定義還蠻常用到的<br />如:empty, emptytext, max, min...等<br /><br />這裡我只是要說明一個簡化開發的 solution,並沒有完整的應用規劃,為了瞭解這個 solution 可以先看看一個簡單的<a target="_blank" href="http://sites.google.com/site/weskerjax/code-demo/html_extension.zip">範例 html_extension.zip</a>。<br /><br />其實最近看到 <a href="http://dev.w3.org/html5/spec/Overview.html">HTML5</a> 已經將很多常見的介面應用加入定義中,但還是可以將系統架構中常用的功能做成延伸屬性,在 <a href="http://dev.w3.org/html5/spec/Overview.html">HTML5</a> 普及之前這是一個很好的 solution。<br /><br /><br />在之前的專案中,我做了一下的規劃:<br /><dl><dt>element [延伸屬性]{所有元素共用}<br /></dt><dd>removeDelay="sec" {設定幾秒鐘後自動[移除]此元素}<br />pulsate="sec" {設定幾秒鐘後自動結束元素[閃爍]}<br /><br /></dd><dt>input,textarea [延伸屬性]<br /></dt><dd>emptyText="為空預設提示" {設定當輸入匡為空時的文字提示}<br /><br /></dd><dt>form > tr [延伸樣式]<br /></dt><dd>class="NotNull" {檢查區塊內的元素是否有選項值}<br /><br /></dd><dt>form > input [延伸屬性]<br /></dt><dd>format="" {表單送出前的格式檢查,但不會檢查是否為空} <br /><ul><li>'tel':電話</li><li>'mobile':行動電話</li><li>'email':電子信箱</li><li>'url':網路連結<br /></li></ul></dd><dd>jtype="" {資料輸入時的輔助}<br />(基本格式輸入)<br /><ul><li>'uint':無符號整數</li><li>'int':整數</li><li>'float':浮點數</li><li>'id':帳號格式</li><li>'alnum':保留字母和数字及底線<br /></li></ul><br />(輔助日期輸入)<br /><ul><li>'date':選擇日期</li><li>'start_date':選擇起始日期</li><li>'end_date':選擇結束日期<br /></li></ul> <br />(輔助時間輸入)<br /><ul><li>'time':選擇時間</li><li>'start_time':選擇起始時間</li><li>'end_time':選擇結束時間<br /></li></ul></dd></dl><br /> <br />在下面的 HTML 中可以看到程式碼都便得很簡單<br /><pre class="xml" name="code"><br /><!--動態效果--><br /><div pulsate="4">4秒閃爍</div><br /><div removeDelay="10">10秒後消失</div><br /><div pulsate="5" removeDelay="8">5秒閃爍&8秒後消失</div><br /><br /><br /><!--表單--><br /><form class="FormWidget" method="post" action=""><br /><table class="FormList" border="0"><br /> <caption>輸入限制</caption><br /><br /> <tr class="NotNull"><br /> <th><label for="data_1">無符號整數 :</label></th><br /> <td><input type="text" jtype="uint" value="" class="Int" id="data_1" name="data_1"/></td><br /> </tr><br /><br /> <tr class="NotNull"><br /> <th><label for="data_2">整數 :</label></th><br /> <td><input type="text" jtype="int" value="" class="Int" id="data_2" name="data_2"/></td><br /> </tr><br /><br /> <tr class="NotNull"><br /> <th><label for="data_3">浮點數 :</label></th><br /> <td><input type="text" jtype="float" value="" class="Int" id="data_3" name="data_3"/></td><br /> </tr><br /> <br /> <tr><br /> <th><label for="data_4">帳號格式 :</label></th><br /> <td><input type="text" jtype="id" value="" class="Text" id="data_4" name="data_4" emptyText="請輸入帳號"/></td><br /> </tr><br /><br /> <tr class="NotNull"><br /> <th><label for="data_5">英數及底線 :</label></th><br /> <td><input type="text" jtype="" value="" class="Text" id="data_5" name="data_5"/></td><br /> </tr><br /></table><br /><br /><br /><table class="FormList" border="0"><br /> <caption>時間 & 日期</caption><br /><br /> <tr><br /> <th><label for="data_6">日期 :</label></th><br /> <td><input type="text" jtype="date" value="" id="data_6" name="data_6"/></td><br /> </tr><br /><br /> <tr><br /> <th><label>日期區間 :</label></th><br /> <td><br /> <div class="OptionBar"><br /> <label>起始<input type="text" jtype="start_date" value="" class="Text" name="start_date"/></label><br /> -<br /> <label>結束<input type="text" jtype="end_date" value="" class="Text" name="end_date"/></label><br /> </div><br /> </td><br /> </tr><br /> <br /> <tr><br /> <th><label for="data_7">時間 :</label></th><br /> <td><input type="text" jtype="time" value="" id="data_7" name="data_7"/></td><br /> </tr><br /> <br /> <tr><br /> <th><label>時間區間 :</label></th><br /> <td><br /> <div class="OptionBar"><br /> <label>起始<input type="text" jtype="start_time" value="" name="start_time"/></label><br /> -<br /> <label>結束<input type="text" jtype="end_time" value="sdsfsdf" name="end_time"/></label><br /> </div><br /> </td><br /> </tr><br /></table><br /><br /><br /><table class="FormList" border="0"><br /> <caption>格式檢查</caption><br /><br /> <tr><br /> <th><label for="data_8">電話格式 :</label></th><br /> <td><input type="text" format="tel" value="" class="Text" id="data_8" name="data_8"/></td><br /> </tr><br /> <br /> <tr class="NotNull"><br /> <th><label for="data_9">行動電話格式 :</label></th><br /> <td><input type="text" format="mobile" value="0912345678" class="Text" id="data_9" name="data_9"/></td><br /> </tr><br /> <br /> <tr class="NotNull"><br /> <th><label for="data_10">E-mail 格式 :</label></th><br /> <td><input type="text" format="email" value="" class="Text" id="data_10" name="data_10"/></td><br /> </tr><br /> <br /> <tr><br /> <th><label for="data_11">連結格式 :</label></th><br /> <td><input type="text" format="url" value="" class="Text" id="data_11" name="data_11"/></td><br /> </tr><br /></table><br /><br /><div class="Buttons"><br /> <input type="submit" class="Button" value="儲存"/><br /></div><br /></form><br /></pre>Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com0tag:blogger.com,1999:blog-5946530704742130970.post-43731950219784708392009-04-29T21:34:00.008+08:002011-05-06T18:13:43.458+08:00Web 文件類型壓縮及註解清除器大部分的 Web 文件壓縮,都是將不要的<span style="color: rgb(255, 0, 0); font-weight: bold;">空白文字或不必要的註解清除</span>,以換取檔案的大小。<br /><br />之前找尋不到合適的工具,索性就自己寫一個工具,這次將之前的<a href="/2008/06/html-smartyjavascriptcss-php.html">HTML & Smarty、JavaScript、CSS 及 PHP 註解清除器</a>做一個整合,並且做一些使用上的教學。<br /><br />修改特點:<br /><ul><li>整合之前的文件類型至一個工具上</li><li>只針對 <span style="color: rgb(255, 0, 0); font-weight: bold;">html , htm , css , js 及 php 副檔名</span>的文件做處理</li><li>增加參數選擇</li></ul><br /><h4>web_clear 參數說明</h4>web_clear [-hvc] (filename)<br />[-h | -?] : 顯示參數說明<br />[-v] : 顯示被執行的檔案列表<br />[-c] : 單純只清除註解<br />(filename) : 檔案路徑或目錄路徑<br /><br /><br /><h4>Windows 下的操作</h4><img src="http://1.bp.blogspot.com/_b8lN_UbLoEc/SfgrteQhD5I/AAAAAAAAEME/Ciw18fvXfu0/20090429-181052.jpg" alt="" id="BLOGGER_PHOTO_ID_5330058219209428882" border="0" /><br />可以透過拖移文件或資料夾的方式執行此工具。<br /><br />也可以透過命令列或批次檔去執行<br /><pre class="sh" name="code"><br />@ECHO off<br /><br />web_clear.exe -v "Z:\Web" Z:\WebServer\1.html Z:\WebServer\1.css <br /><br />PAUSE <br /></pre><br /><br /><h4>Linux 下的操作</h4>透過命令列或 Shell 去執行<br /><pre class="sh" name="code"><br />#!/bin/bash<br /><br />PATH=/bin:/sbin:/usr/bin:/usr/sbin:/usr/local/bin:/usr/local/sbin:~/bin<br />export PATH<br /><br />./web_clear -v /home/test/index.php<br /><br /># 也可以配合 find 去執行<br />#./web_clear -v `find /home/test -name '*.css' -or -name '*.js'`<br /><br />exit 0<br /></pre><br /><br /><h4>檔案下載:</h4><a target="_blank" href="http://sites.google.com/site/weskerjax/code-demo/web_clear.tar.gz">web_clear.tar.gz</a><br /><br /><pre class="sh:nocontrols" name="code"><br />web_clear<br />|-- linux<br />| |-- source<br />| | |-- web_clear.c<br />| | `-- web_clear.l<br />| |<br />| |-- clear_file.sh<br />| `-- web_clear<br />|<br />`-- windows<br /> |-- source<br /> | |-- web_clear.c<br /> | `-- web_clear.l<br /> |<br /> |-- clear_file.bat<br /> `-- web_clear.exe<br /><br />4 directories, 8 files<br /></pre>Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com10tag:blogger.com,1999:blog-5946530704742130970.post-68247463223482269072009-04-29T17:22:00.002+08:002014-03-05T14:47:09.645+08:00[PHP] 線上編碼文件轉換器這是利用 iconv 及 curl 去做線上文件編碼轉換,之前為了讓桌面行事曆能夠讀取 Google Calendar 而做的轉換器。<br /><br /><pre class="php" name="code"><br /><?php <br />// 設定最長執行的秒數<br />ini_set ("expect.timeout", 30);<br />set_time_limit(30);<br /><br />if($_GET['url']){<br /> // 設定原始編碼及目標編碼<br /> $source=($_GET['source'])? $_GET['source']: 'UTF-8';<br /> $target=($_GET['target'])? $_GET['target']: 'BIG5';<br /> <br /> // 取得 URL<br /> $url=$_GET['url'];<br /><br /> // 初始化 CURL<br /> $ch = curl_init();<br /> <br /> // 設定 URL <br /> curl_setopt($ch, CURLOPT_URL, $url); <br /> // 讓 curl_exec() 獲取的信息以資料流的形式返回,而不是直接輸出。<br /> curl_setopt ($ch, CURLOPT_RETURNTRANSFER, 1);<br /> // 在發起連接前等待的時間,如果設置為0,則不等待<br /> curl_setopt ($ch, CURLOPT_CONNECTTIMEOUT, 0);<br /> // 設定 CURL 最長執行的秒數<br /> curl_setopt ($ch, CURLOPT_TIMEOUT, 30);<br /><br /> // 嘗試取得文件內容<br /> $store = curl_exec ($ch);<br /><br /> // 檢查文件是否正確取得<br /> if (!curl_errno($ch)){<br /> // 編碼轉換<br /> echo iconv($source,$target, $store);<br /> exit;<br /> }<br />}<br />?><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><br /><html><br /><head><br /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><br /> <title>線上編碼文件轉換器</title><br /></head><br /><body style="width:28em;margin:5% auto;text-align:center;"><br /> <form method="get" action=""><br /> <fieldset><br /> <legend>線上編碼文件轉換器</legend><br /> <label>URL : <input type="text" name="url" size="48" /></label><br /> <p><br /> <input type="text" name="source" size="12" value="UTF-8" /> <br /> -&gt; 轉換至 -&gt;<br /> <input type="text" name="target" size="12" value="BIG5" /><br /> </p><br /> <p><input type="submit" value="開始轉換"/></p><br /> </fieldset><br /> </form><br /></body><br /></html><br /><br /></pre><br /><br />參考文章:<br /><a href="http://calos-tw.blogspot.com/2009/04/phpcurl.html">PHP程式學習筆記本(PHP.Javascript.Mysql.cakephp.Jquery.Smarty): php.curl詳解</a>Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com0tag:blogger.com,1999:blog-5946530704742130970.post-22950943020519977482009-03-19T01:25:00.012+08:002011-05-06T18:13:43.461+08:00[Shell] 利用 tar 作資料備份一般在 console 使用 tar 做備份壓縮時,都會習慣使用<span style="color: rgb(255, 0, 0); font-weight: bold;">相對路徑做壓縮</span>,在解壓縮時也比較方便,可是再寫 Shell 做 crontab 排程時,也想要使用相對路徑做壓縮的話,必須用一些方法,下面的 script 還加上過濾檔案的機制,可以<span style="color: rgb(255, 0, 0); font-weight: bold;">排除一些隱藏檔或特定目錄</span>的備份。<br />
<br />
<pre class="sh" name="code">#!/bin/bash
# Program : 備份指定目錄
# History : 2009/03/19
# Author : Jax
# E-mail : weskerjax@gmail.com
# Website : http://jax-work-archive.blogspot.com/
PATH=/bin:/sbin:/usr/bin:/usr/sbin
export PATH
# 排除不需要備份的檔案類型
EXCLUDE=""
FILTER=(
"*.bak" # 排除副檔名為 .bak 的檔案
".*" # 排除所有隱藏檔
"/CVS/" # 排除所有目錄為 CVS 的目錄
"Smarty/cache" # 排除路徑為 Smarty/cache 的目錄
"Smarty/tpl_c" # 排除路徑為 Smarty/tpl_c 的目錄
)
for i in "${FILTER[@]}" ; do
EXCLUDE="$EXCLUDE --exclude=$i"
done
# 時間參數
DATE=$(date +%Y%m%d)
# 配份目錄
TARGET_DIR="/home/web"
# 備份檔名路徑目錄
ZIP_FILE="/home/backup/backup_$DATE.tar.bz2"
# 執行壓縮指令
tar -jcf $ZIP_FILE $EXCLUDE -C $TARGET_DIR $(ls $TARGET_DIR)
exit 0;
</pre><br />
<br />
原始檔:<a target="_blank" href="http://sites.google.com/site/weskerjax/code-demo/server_backup.sh">server_backup.sh</a>Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com0tag:blogger.com,1999:blog-5946530704742130970.post-83435885997914029652008-12-06T02:18:00.008+08:002013-06-11T21:37:55.536+08:00離開頁面前的對話匡 window.onBeforeUnload 事件在頁面改變前會觸發 window.onBeforeUnload 事件<br />
但要怎麼產生出離開前的確認匡呢?<br />
根據在 <a target="_blank" href="http://msdn.microsoft.com/en-us/library/ms536907%28VS.85%29.aspx">MSDN(onbeforeunload Event)</a> 找到的說明<br />
<blockquote>When a string is assigned to the returnValue property of window.event, a dialog box appears that gives users the option to stay on the current page and retain the string that was assigned to it. The default statement that appears in the dialog box, "Are you sure you want to navigate away from this page? ... Press OK to continue, or Cancel to stay on the current page.", cannot be removed or altered.</blockquote><br />
我們只要對這個事件 return 一個訊息就可以達成<br />
除了 undefined 以外的所有值都會產生確認匡<br />
<br />
那到底要怎麼做呢?<br />
<pre class="js" name="code">/*註冊事件*/
window.onbeforeunload = function(){
return "是否要離開此頁面";
};
/*解除事件*/
window.onbeforeunload = null;
</pre><br />
<br />
就這樣簡單的幾行就可以達成<br />
真是簡單到不行<br />
而且大多數的瀏覽器都支援<br />
<br />
<a target="_blank" href="http://dl.dropbox.com/u/16784943/code-demo/page_lock.htm">展示頁面(Demo Page)</a>Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com1tag:blogger.com,1999:blog-5946530704742130970.post-31349628408426494742008-11-15T18:04:00.007+08:002012-05-18T17:58:21.566+08:00在固定大小的排版中做圖片選取之前所用的圖片裁切介面(<a href="/2008/04/moocrop-square.html">MooCrop 正方形選取( Square )</a>)<br />
在大尺寸圖片的選取上不是很直覺<br />
明明就只是要裁出一張固定大小的圖<br />
卻暫了大量的版面配置<br />
所以我採用網路地圖的機制做了一個裁切工具<br />
這個想法目前還只是個雛形<br />
<br />
<a href="http://dl.dropbox.com/u/16784943/code-demo/image_select.htm" target="_blank">展示頁面(Demo Page)</a>Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com0tag:blogger.com,1999:blog-5946530704742130970.post-6075672421535589482008-10-07T02:03:00.015+08:002013-06-11T21:12:00.018+08:00CSS fixed 定位( FF / IE6 )fixed 定位主要是以 window 物件區塊做定位依據,所以不會隨頁面捲動而變動定位。<br />
<br />
以往要達成這種模式的定位都要利用 JavaScript 的 onscroll 事件去達成,是蠻吃重的一種方法,而且流暢度也不好,會有閃爍的現象。<br />
<br />
<span style="color: rgb(255, 0, 0); font-weight: bold;">利用 fixed 定位可以簡化 JavaScript 的開發和負擔</span>,而且又穩定且簡單設定。<br />
<br />
<pre class="css" name="code">body{
height:1200px;
/* prevent screen flash in IE6(解決 IE6 不正常閃爍) */
background:url(nothing.txt) white fixed;
}
div{
background:#FF0066;
border:4px solid #FF9999;
}
/* 水平置中 */
.fixed-center{
width:100px;
height:100px;
position:fixed;
top:50%;
left:50%;
/* 上邊界計算 */
/* -(border-top-width + padding-top + (height/2) ) */
/* 或者是整體高除以二(offsetHeight/2) */
margin-top:-52px;
/* 左邊界計算 */
/* -(border-left-width + padding-left + (width/2) ) */
/* 或者是整體寬除以二(offsetWidth/2) */
margin-left:-52px;
/* position fixed for IE6 */
_position: absolute;
_margin-top:0;
/* clientHeight:不包含邊匡的區塊高度( padding + height ) */
/* offsetHeight:包含邊匡的區塊高度( border + padding + height ) */
_top:expression(documentElement.scrollTop + ( documentElement.clientHeight-this.offsetHeight )/2
);
}
.fixed-top-center{
width:100px;
height:100px;
position:fixed;
top:0;
left:50%;
margin-left:-52px;
/* position fixed for IE6 */
_position: absolute;
_top:expression(documentElement.scrollTop);
}
.fixed-bottom-center{
width:100px;
height:100px;
position:fixed;
bottom:0;
left:50%;
margin-left:-52px;
/* position fixed for IE6 */
_position: absolute;
_top:expression( documentElement.scrollTop+documentElement.clientHeight-this.offsetHeight );
}
</pre><br />
<br />
<a target="_blank" href="http://dl.dropbox.com/u/16784943/code-demo/position_fixed.htm">展示頁面(Demo Page)</a><br />
<br />
參考來源:<a target="_blank" href="http://tw.myblog.yahoo.com/class2u-com/article?mid=2096">上下左右置中、不隨頁面捲動的內容-小正正教室</a>Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com4tag:blogger.com,1999:blog-5946530704742130970.post-35794700237860450342008-09-13T17:51:00.009+08:002013-06-11T21:16:13.331+08:00利用 JavaScript 讓 IE6 支援 CSS 2.0 hover 的方法利用 IE6 特有的 expression 屬性質,去執行 JavaScript 程式。<br />
<span style="color: rgb(51, 51, 255);">好處是可以簡化開發,讓設計師可以自己去控制想要的樣式。</span><br />
<span style="color: rgb(255, 51, 51);">壞處是執行大量的 expression 會讓 IE6 很吃重。</span><br />
<br />
<br />
<a href="http://dl.dropbox.com/u/16784943/code-demo/ie_hover.htc">ie_hover.htc</a> 中的程式碼:<br />
<pre class="js" name="code">this.onmouseover=function(){
if(!this.className.match(/(^|\s)hover(\s|$)/)){
this.className=(this.className+' hover')
.replace(/\s{2,}/g,' ')
.replace(/^\s+|\s+$/g, '');
}
}
this.onmouseout=function(){
this.className=this.className
.replace(/(^|\s)hover(\s|$)/,' ')
.replace(/\s{2,}/g,' ')
.replace(/^\s+|\s+$/g, '');
}
this.style.behavior=null;
</pre><br />
<br />
<a href="http://dl.dropbox.com/u/16784943/code-demo/ie_hover.html">ie_hover.html</a> 中的 CSS:<br />
<pre class="css" name="code">p{
padding-left:30px;
behavior: url(ie_hover.htc);
}
p:hover,
p.hover{
padding-left:0;
}
</pre><br />
<br />
<a target="_blank" href="http://dl.dropbox.com/u/16784943/code-demo/ie_hover.html">展示頁面(Demo Page)</a>Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com0tag:blogger.com,1999:blog-5946530704742130970.post-18224413152082268552008-09-09T08:12:00.007+08:002014-11-30T17:28:57.956+08:00CSS 三欄排版<ol><li>float 排版<br />
<img alt="CSS 三欄排版" src="http://3.bp.blogspot.com/-C770WGilHoo/SK0Asws3sTI/AAAAAAAANHg/fKqlOByUABk/Diagram8a.png" /><br />
這是在 Table 排版之後最常見的排版方式,利用 float 與 clear 的屬性設定去達成的分欄排版。<br />
<br />
最近發現除了利用 clear 屬性的空 Tag 以外還有其他的方式可以達到這個效果,在最外層的 div 上加入以下屬性也可以達到相同的效果:<br />
<pre class="css" name="code">* html #demo_1{
height: 1%;
}
#demo_1:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#demo_1 {
zoom: 1;
}
</pre><br />
<br />
</li>
<li>table 排版<br />
<img alt="CSS 三欄排版" src="http://2.bp.blogspot.com/-yju8Fw0zlM4/SK0AtG7NDZI/AAAAAAAANHg/WVqbZkyrFm0/Diagram8b.png" /><br />
這是最早期排版方式,雖然有種種的缺點,但還是有很多網站使用,除了利用原有的 Table Tag,也可以使用其他 Tag 設定 display 屬性去達到 Table 排版的效果,雖然在寬度的定義上的彈性,但還是<span style="color: red; font-weight: bold;">建議保持只有一個欄位的彈性寬度</span>,過多的彈性寬度只會造成意想不到的後果。<br />
<br />
<br />
</li>
<li>margin and float 排版<br />
<img alt="CSS 三欄排版" src="http://3.bp.blogspot.com/--pErvdfn1fg/SK0AtEOlTWI/AAAAAAAANHg/hytdKuVs7hU/Diagram8c.png" /><br />
這是利用中欄的 margin 屬性空出側欄位空間,再利用 float 及負邊界方式去達成的三欄排版,因為 float 屬性不會對整體高度做出貢獻,如果需要側欄的高度影響,必須上擁有 clear 屬性的 Tag 或利用第一個範例的方法,由於中欄沒有 float 屬性所以不能在內容使用 clear 屬性。<br />
<br />
<br />
</li>
<li>margin and position排版<br />
<img alt="CSS 三欄排版" src="http://4.bp.blogspot.com/-UAj1f4TXz-8/SK0AtbofR5I/AAAAAAAANHg/uTnVRxmG500/Diagram8d.png" /><br />
這是利用中欄的 margin 屬性空出側欄位空間,再利用 position 的定位方式去達成的三欄排版,因為 position 屬性不像 float 屬性,可以利用 clear 屬性做出高度的貢獻,所以<span style="color: red; font-weight: bold;">側欄的高度不可以大於主欄</span>,要不然會造成顯示重疊。<br />
<br />
<br />
</li>
<li>padding and float排版<br />
<img alt="CSS 三欄排版" src="http://1.bp.blogspot.com/-gFnIzXUQjb0/SMSSpzSOP7I/AAAAAAAANHg/KUcXfihVqFA/Diagram8-2.png" /><br />
這是結合 (float 排版) 及 (margin and float 排版) 的排版方式,主要是解決 (margin and float 排版) 的主欄中不可以使用 clear 屬性的問題,CSS 的差別只在於利用外匡的 padding 屬性去做預留空間的設定。</li>
</ol><br />
<br />
優劣差異:<br />
<table border="1" class="table_list"><tbody>
<tr class="header"><th></th><th>float</th><th>table</th><th>margin<br />
float</th><th>margin<br />
position</th><th>padding<br />
float</th></tr>
<tr><td>靈活性</td><td style="color: #3333ff; text-align: center;">高</td><td style="color: #ff3333; text-align: center;">低</td><td style="color: #3333ff; text-align: center;">高</td><td style="color: #3333ff; text-align: center;">高</td><td style="color: #3333ff; text-align: center;">高</td></tr>
<tr><td>親和力</td><td style="color: #3333ff; text-align: center;">高</td><td style="color: #ff3333; text-align: center;">低</td><td style="color: #3333ff; text-align: center;">高</td><td style="color: #3333ff; text-align: center;">高</td><td style="color: #3333ff; text-align: center;">高</td></tr>
<tr><td>HTML 結構</td><td style="color: #3333ff; text-align: center;">簡單</td><td style="color: #ff3333; text-align: center;">複雜</td><td style="color: #3333ff; text-align: center;">簡單</td><td style="color: #3333ff; text-align: center;">簡單</td><td style="color: #3333ff; text-align: center;">簡單</td></tr>
<tr><td>寬度彈性</td><td style="color: #ff3333; text-align: center;">no</td><td style="color: #3333ff; text-align: center;">yes</td><td style="color: #3333ff; text-align: center;">yes</td><td style="color: #3333ff; text-align: center;">yes</td><td style="color: #3333ff; text-align: center;">yes</td></tr>
<tr><td>允許彈性的欄位數</td><td style="color: #ff3333; text-align: center;">0</td><td style="color: #3333ff; text-align: center;">all</td><td style="color: #3333ff; text-align: center;">1</td><td style="color: #3333ff; text-align: center;">1</td><td style="color: #3333ff; text-align: center;">1</td></tr>
<tr><td>overflow 容錯</td><td style="color: #ff3333; text-align: center;">低</td><td style="color: #3333ff; text-align: center;">高</td><td style="color: #ff3333; text-align: center;">低</td><td style="color: #3333ff; text-align: center;">高</td><td style="color: #ff3333; text-align: center;">低</td></tr>
<tr><td>瀏覽器的解析差異</td><td style="color: #3333ff; text-align: center;">小</td><td style="color: #ff3333; text-align: center;"></td><td style="color: #3333ff; text-align: center;">小</td><td style="color: #3333ff; text-align: center;">小</td><td style="color: #3333ff; text-align: center;">小</td></tr>
<tr><td>欄位的高度影響</td><td style="color: #3333ff; text-align: center;">all</td><td style="color: #3333ff; text-align: center;">all</td><td style="color: #3333ff; text-align: center;">all</td><td style="color: #ff3333; text-align: center;">1</td><td style="color: #3333ff; text-align: center;">all</td> </tr>
</tbody></table><br />
<br />
<a href="http://dl.dropbox.com/u/16784943/code-demo/typeset.html" target="_blank">展示頁面(Demo Page)</a>Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com2tag:blogger.com,1999:blog-5946530704742130970.post-67966992951415630662008-06-01T19:34:00.011+08:002011-05-06T18:13:43.469+08:00HTML & Smarty、JavaScript、CSS 及 PHP 註解清除器之前為了上線前去除不要的註解及多餘的空白符號,一直在找合適的工具,可是找到大部分都是 windows 的軟體,想找 Linux 的卻沒找到,於是就自己用 Lex 寫了一些,幾本上我分成四個語言的清除器,設計上是直接覆寫原始的檔案,所以在應用前請先自行複製備份,由於清除器沒有做語法驗證,再撰寫時需要特別嚴謹 ( PS: 程式碼中常被忽略的結束符號 <span style="color: rgb(255, 0, 0);">";"</span> )。<br /><br />清除規則:<ul><li>HTML & Smarty</li><ul><li>清除 < 及 > 前後的空白及換行(\n)符號</li><li>清除 HTML 註解 (<!-- 註解 -->)</li><li>清除 Smarty 註解 ({* 註解 *})</li><li>清除 JavaScript 單行及多行註解 (/* 註解 */ , //註解)</li><li>清除 JavaScript 多餘的空白及換行(\n)符號</li><li>完整保留單引號及雙引號內的字串</li></ul><li>JavaScript</li><ul><li>清除多餘的空白及換行(\n)符號</li><li>清除單行及多行註解 (/* 註解 */ , //註解)</li><li>完整保留單引號及雙引號內的字串</li></ul><li>CSS</li><ul><li>清除多餘的空白及換行(\n)符號</li><li>清除多行註解 (/* 註解 */)</li><li>完整保留單引號及雙引號內的字串</li></ul><li>PHP</li><ul><li>清除行首及行尾的空白符號</li><li>清除無用的空白行</li><li>清除單行及多行註解 (/* 註解 */ , //註解)</li><li>完整保留單引號及雙引號內的字串</li></ul></ul><br />這已經經過很多次的測試跟修改了,目前還沒有出現特別的狀況,有需要的人可以用用看,在 linux 上必許要安裝 flex 及 gcc 才可以編譯,當然 windows 也有的flex 及 gcc 的編譯器。<br /><br /><a target="_blank" href="http://sites.google.com/site/weskerjax/code-demo/lex_clear.rar">檔案連結</a>Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com0tag:blogger.com,1999:blog-5946530704742130970.post-27685692394083488012008-05-03T22:00:00.020+08:002013-06-11T21:02:02.798+08:00JavaScript 效率優化最近開始重視 JavaScript 的效率問題,原因在於感到自己寫的網頁越來越不流暢,其中大量的計算跟無法避免的迴圈愈來愈多,加上 UI 介面跟動態效果的需要,使得瀏覽器的負荷過大,所以這是個需要重視的問題,這直接的影響網站名聲的好壞。<br />
<br />
要如何作效率優化呢?因為 JavaScript 是直譯語言,無法透過編譯器加以優化,所以只能從撰寫方式下手。<br />
<br />
下面有一個效率很差的例子:<br />
<pre class="js" name="code">for (var i=0; i<data.length; i++) {
document.getElementById("link").innerHTML += data[i];
document.getElementById("link").hreh += "&" + data[i];
document.getElementById("link").title += data[i] + ",";
document.getElementById("link").className += data[i] + " ";
document.getElementById("link").name += data[i] + "_";
}
</pre><br />
<br />
當中有幾個影響效率的問題:<br />
<ol><li style="color: rgb(255, 0, 0); font-weight: bold;">過渡的使用 getElementById 搜尋 DOM 物件,尤其是在 for 迴圈中</li>
<li style="color: rgb(255, 0, 0); font-weight: bold;">大量的存取 length、innerHTML 等成員變數</li>
<li style="color: rgb(255, 0, 0); font-weight: bold;">多次的存取 data[i],這跟上一個差不多</li>
</ol><br />
<br />
<br />
這些問題的修改方法:<br />
<pre class="js" name="code">/*利用暫存變數作處理*/
var temp1='', temp2='', temp3='', temp4='', temp5='';
/*利用 l 紀錄 length 的值,以避免多次存取成員變數*/
for (var i=0,l=data.length; i<l; i++) {
/*利用 d 紀錄 data[i] 的值,以避免多次存取成員變數*/
d = data[i];
temp1 += d;
temp2 += "&" + d;
temp3 += d + ",";
temp4 += d + " ";
temp5 += d + "_";
}
/*利用暫存變數紀錄 DOM 物件*/
var link = document.getElementById("link");
link.innerHTML += temp1;
link.hreh += temp2;
link.title += temp3;
link.className += temp4;
link.name += temp5;
</pre><br />
<br />
<br />
實驗 1000 筆資料的結果:<br />
第 1 個耗時:5625(msec)<br />
第 2 個耗時:47(msec)<br />
<a target="_blank" href="http://dl.dropbox.com/u/16784943/code-demo/demo_js_speed.htm">展示(demo)</a><br />
<br />
參考來源:<br />
<a target="_blank" href="http://www.robertnyman.com/2008/04/11/javascript-loop-performance/">JavaScript loop performance</a><br />
<a target="_blank" href="http://www.openspc2.org/JavaScript/Web_Standard/201/index.html">随時innerHTMLに書き込んだ場合と一括して書き込んだ場合</a><br />
<a target="_blank" href="http://www.openspc2.org/JavaScript/Web_Standard/202/index.html">innerHTMLとinnerText/textContentの速度比較</a><br />
<a target="_blank" href="http://www.openspc2.org/JavaScript/Web_Standard/203/index.html">getElementByID、変数、withによる参照速度比較</a><br />
<a target="_blank" href="http://www.openspc2.org/JavaScript/Web_Standard/204/index.html">シリアルサーチと正規表現の速度比較</a>Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com1tag:blogger.com,1999:blog-5946530704742130970.post-91382070560734718942008-05-02T22:56:00.014+08:002018-03-20T14:02:40.971+08:00用 JavaScript 作 HTML 比較(diff)為了做到文字比較,我利用『最長共同部分序列』(Longest Common Subsequence)演算法,這是屬於動態規劃演算法的一種,特點就是以空間換速度,在比較過程需要 (m+1)*(n+1) 的記憶體空間,效率是 m*n,m 跟 n 的數量取決於文章的長度與切割的大小,我的切割方式是以空白符號及 HTML tag 作分界,對英文的切割有正向的優勢,所以在中文上就有點糟,但因為切割的長度大效率會比較快。<br />
<pre class="js" name="code">/*切割文字*/
function toReg(str){
var array = str.match(/<[^>]*>|[^< ,.\r\n\t]+[ ,.\r\n\t]*/ig);
result = [];
for(var i = 0, l = array.length; i < l; i++) {
if(array[i].charAt(0) == '<') {
temp = array[i].match(/[^<][^> ]*/i);
result[i] = {
txt: array[i],
tag: temp
};
}else{
result[i] = {
txt: array[i],
tag: false
};
}
}
return result;
}
/*最長共同部分序列*/
function LCS(na, oa){
var m = na.length, n = oa.length;
var i, j;
var d = [];
/*Dynamic*/
for(i = 0; i <= m; i++) {
d[i] = [];
d[i][0] = 0;
}
for(j = 1; j <= n; j++) {
d[0][j] = 0;
}
/*動態規劃演算法*/
for(i = 1; i <= m; i++) {
for(j = 1; j <= n; j++) {
if(na[i - 1].txt == oa[j - 1].txt) {
d[i][j] = d[i - 1][j - 1] + 1;
}else if(na[i - 1].tag && na[i - 1].tag==oa[j - 1].tag) {
d[i][j] = d[i - 1][j - 1] + 1;
}else if (d[i][j - 1] > d[i - 1][j]) {
d[i][j] = d[i][j - 1];
}else {
d[i][j] = d[i - 1][j];
}
}
}
/*標註共同部分序列*/
i = m;
j = n;
while (i > 0 && j > 0) {
if(d[i][j] == d[i - 1][j]) {
i--;
}else if(d[i][j] == d[i][j - 1]) {
j--;
}else{
i--;
j--;
na[i].com = j;
oa[j].com = i;
}
}
delete d;
}
/*合併比較陣列*/
function merge(na, oa){
var m = na.length, n = oa.length;
var result = [];
if(!m && !n) { return null; }
var i;
var oldPrint = 0;
for(i = 0; i < m; i++) {
/*有共同的資料*/
if(na[i].com != undefined) {
/*有刪除的舊資料*/
if(na[i].com > oldPrint) {
var maxRow=(na[i].com < n) ? na[i].com : n;
for(j = oldPrint; j < maxRow; j++) {
if(oa[j].tag) {
result.push(oa[j].txt);
}else{
result.push('<del>' + oa[j].txt + '</del>');
}
}
}
/*記錄下一次舊資料的指標*/
oldPrint = na[i].com + 1;
/*儲存共同的資料*/
result.push(na[i].txt);
/*新的差異資料*/
}else{
if(na[i].tag) {
result.push(na[i].txt);
}else{
result.push('<ins>' + na[i].txt + '</ins>');
}
}
}
return result;
}
</pre><br />
<a target="_blank" href="https://weskerjax.github.io/code-demo/demo_diff.htm">展示(demo)</a><br />
Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com2tag:blogger.com,1999:blog-5946530704742130970.post-35320303088808439602008-04-06T22:50:00.011+08:002013-06-11T20:57:03.550+08:00MooCrop 正方形選取( Square )<a target="_blank" href="http://www.nwhite.net/MooCrop/">MooCrop</a> 是建構 <a target="_blank" href="http://mootools.net/">MooTools</a> 上的圖片裁切類別<br />
不過本身沒有方形鎖定的功能<br />
我利用一個簡單的觀念改寫原本的函數<br />
<span style="color: rgb(255, 0, 0); font-weight: bold;">將兩個方向的寬高同時加減</span><br />
在初始為正方形的狀況下<br />
不管如何縮放都會達成正方形<br />
<br />
我還增加預覽裁切功能<br />
<br />
<a target="_blank" href="http://sites.google.com/site/weskerjax/code-demo/MooCropSquare.zip">範例(example)</a><br />
<a target="_blank" href="http://dl.dropbox.com/u/16784943/code-demo/moocrop.htm" target="_blank">展示(demo)</a>Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com0tag:blogger.com,1999:blog-5946530704742130970.post-28305640618190787762007-10-13T13:26:00.005+08:002012-05-18T18:01:20.666+08:00線性代數 計算機這是在讀二技時寫的,當初是用 C++ 去寫 <span title="最簡約化矩陣">RREF()</span>,後來為了能有圖形介面,又用 Java 改寫,並且加了其他的運算進去,學了 JavaScript 之後又將他移到網頁上,基本上是用瀏覽器再做運算,在結構上整個語法並不是很好,當時學藝不精,不過功能上是正常的。<br />
<br />
<a target="_blank" href="http://dl.dropbox.com/u/16784943/code-demo/matrix-computer.htm">檔案連結 </a>Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com0tag:blogger.com,1999:blog-5946530704742130970.post-2212219735613125482007-09-23T17:07:00.005+08:002023-02-25T21:43:43.018+08:00利用 ASP 對 Access 資料庫重組由於 Access 資料庫沒有支援的 SQL 指令可做重組
而且在做刪除資料時,還是不會將空間釋放出來
這種狀況只能從 Server 上做重組釋放的動作
但不是每個人都可以進入 Server 上做這個動作
所以另外的辦法就是從 ASP 網頁上執行
<pre class="vb" name="code">
<%
'CompactDB 成功將回傳 true,失敗將回傳 false
'DBUrl 以主目錄開始的資料庫相對位址字串
'passwd 資料庫密碼,如果沒有請輸入空字串
Function CompactDB(DBUrl,passwd)
Set fso = CreateObject("Scripting.FileSystemObject")
Dim strDB
strDB = server.MapPath(DBUrl)
Dim strNewDB
strNewDB = server.MapPath(DBUrl & ".tmp")
Dim login
If(passwd<>"") Then
login = ";Jet OLEDB:Database Password=" & passwd & ";"
Else
login = ""
End If
If fso.FileExists(strDB) Then
'壓縮資料庫
Set Engine = CreateObject("JRO.JetEngine")
strPvd = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source="
Engine.CompactDatabase strPvd&strDB&login,strPvd&strNewDB&login
Set Engine = nothing
'刪除舊的資料庫
fso.DeleteFile strDB
fso.MoveFile strNewDB,strDB
'回傳已成功的訊息
CompactDB = true
Else
'回傳失敗訊息
CompactDB = false
End If
Set fso = nothing
End Function
%>
</pre>
<a href="http://sites.google.com/site/weskerjax/code-demo/compact_database.rar">檔案連結</a>Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com0tag:blogger.com,1999:blog-5946530704742130970.post-25762985351227399402007-09-21T23:24:00.004+08:002011-05-06T18:13:43.479+08:00HTML 外出單 產生器這是在軍中寫的一個外出單自動產生器<br />完全是用<span abbr="筆記本" title="筆記本"> Notepad </span>來寫的<br />經過很多次的修改<br />大部分能找到的錯誤都更改了<br />也許還會有學弟需要用到<br />所以在這裡貼出來<br /><br /><a target="_blank" href="http://sites.google.com/site/weskerjax/code-demo/html-out-table.rar">檔案連結</a>Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com0tag:blogger.com,1999:blog-5946530704742130970.post-30061353293802806942007-09-19T01:31:00.006+08:002012-05-18T18:01:47.557+08:00利用物件的方式設定事件這是我第一次使用物件的方式設定事件處理,以前都是用 HTML 去處理事件的呼叫,在<span style="font-weight: bold;"><a href="http://jax-work-archive.blogspot.com/2007/07/javascript.html">利用 JavaScript 將表格模擬成按鈕</a></span>中就是用這種模式去運作的,那麼用物件去設定有什麼好處呢?<br />
<br />
第一用這個方法去處理的話,可以減少網頁檔案的大小,也減少 HTML 上的複雜度,讓網頁有更好的結構感,使 HTML 更容易閱讀,且更容易撰寫。<br />
<br />
第二對於大量使用相同的事件有更好處理,重複使用性高,將程式碼獨立成個體的文件,只要在適當的位址中載入,就能重複使用相同的程式碼。<br />
<br />
第三對於事件的新增及修改有更大的靈活度,不必在新增事件時要去改每個物件的 HTML,可以統一管理相同物件的新增及修改。<br />
<br />
所以在大量使用相同程式碼時,這是一個不錯的選擇。<br />
<pre class="js" name="code">/* 取得所有名稱為 s_but 的物件群組 */
var spanButtons = document.getElementsByName("s_but");
/* 設定群組中每一個物件的事件 */
for (var i = 0; i < spanButtons.length; i++) {
/* 設定當滑鼠按下時的事件函數 */
spanButtons[i].onmousedown = downChange;
/* 設定當滑鼠重疊時的事件函數 */
spanButtons[i].onmouseover = overChange;
/* 設定當滑鼠離開時的事件函數 */
spanButtons[i].onmouseout = outChange;
}
/*Down Change*/
function downChange(){
this.style.borderStyle = "inset";
this.style.backgroundColor = "#EEDDDD";
}
/*Out Change*/
function outChange(){
this.style.borderColor = "";
this.style.borderStyle = "outset";
this.style.backgroundColor = "#FFFFFF";
}
/*Over Change*/
function overChange(){
this.style.borderColor = "#FF0000";
}
</pre>
<a target="_blank" href="http://dl.dropbox.com/u/16784943/code-demo/object-event.html">檔案連結</a>Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com0tag:blogger.com,1999:blog-5946530704742130970.post-6362292494394391252007-09-03T04:54:00.007+08:002013-06-11T20:41:12.906+08:00利用 Date() 檢查日期格式這是利用 JavaScript 中現有的函數 Date() 作日期驗證<br />
使用的原理是將輸入值轉成正規的文字字串<br />
再用 Date() 新增一個日期物件<br />
如果是正確日期將會和輸入是一樣的字串<br />
利用這個原理做到日期格式的驗證<br />
<pre class="js" name="code">/*-- (判斷日期格式是否正確) -------------------------*/
function isDate(year, month, day){
var dateStr;
if (!month || !day) {
if (month == '') {
dateStr = year + "/1/1"
}else if (day == '') {
dateStr = year + '/' + month + '/1';
}else {
dateStr = year.replace(/[.-]/g, '/');
}
}else {
dateStr = year + '/' + month + '/' + day;
}
dateStr = dateStr.replace(/\/0+/g, '/');
var accDate = new Date(dateStr);
var tempDate = accDate.getFullYear() + "/";
tempDate += (accDate.getMonth() + 1) + "/";
tempDate += accDate.getDate();
if (dateStr == tempDate) {
return true;
}
return false;
}
/*檢查格式*/
isDate("2007/2/12")
isDate("2007-2-12")
isDate("2007.2.12")
isDate("2007/02/02")
isDate("2007", "2", "12")
isDate("2007", "2", "")
isDate(2007, 2, 12)
</pre><br />
<a target="_blank" href="http://dl.dropbox.com/u/16784943/code-demo/isDate.html">檔案連結</a>Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com4tag:blogger.com,1999:blog-5946530704742130970.post-5267334812457071592007-06-06T12:56:00.007+08:002013-06-11T20:36:47.283+08:00數獨(sudoku)程式寫作這幾天<span style="font-weight: bold;">無修室</span>裡有許多人都在解數獨,<span style="font-weight: bold;">李昂</span>、<span style="font-weight: bold;">祐助</span>、<span style="font-weight: bold;">彥良</span>當然還有我,以前去參加程式競賽時也有數獨的題目,當時沒有寫出來心中有點遺憾,所以又再次的想去寫程式了,也好久沒讓大腦動一動了。<br />
<br />
只靠<span style="font-weight: bold;">筆記本</span>來撰寫<span style="font-weight: bold;">JavaScript</span>和<span style="font-weight: bold;">Internet Explorer</span>來除錯,<span style="font-weight: bold;">林易泉</span>老師常說,寫程式最好還是用<span style="font-weight: bold;">筆記本</span>,不要靠一些輔助工具,但還真是有難度的說,光是除錯就花了不少時間了,還好有做排版要不然根本不知道錯在那裡,排版上也是辛苦的很,<span style="font-weight: bold;">tab</span>的寬度又太大,只能一直按空白鍵來做排版了,html 的撰寫也只能靠自己慢慢寫了,要是有撰寫工具該有多好,以前只要專心去想流程就好了,剩下的<span style="font-weight: bold;">排版</span>和<span style="font-weight: bold;">除錯</span>電腦會輔助你完成,現在還要自己去找流程以外的錯誤,<span style="font-weight: bold;">Internet Explorer</span>給的錯誤訊息又那麼的不明確,訊息行數常常都落差幾百行,有等於沒有。<br />
<br />
最後還是寫出來了,已經可以解出較困難的題目了,運算時間也很快,只是空間的使用還需要修改一下,要將部分的INT變數改為Boolean變數以節省空間和加快邏輯運算,花了快三天的時間才完成撰寫,這比我預計的時間要慢很多,這種運算型的題目頂多花一天就很夠了!看來少了工具真的差很多。<br />
<br />
<a target="_blank" href="http://dl.dropbox.com/u/16784943/code-demo/SUDOKU.html">SUDOKU.html</a> <small>2007.06.03</small><br />
<a target="_blank" href="http://dl.dropbox.com/u/16784943/code-demo/SUDOKU_2.html">SUDOKU_2.html</a> <small>2011.05.23</small>Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com1