<![CDATA[A.PAO designSTUDIO BLOG]]> https://blog.apao.idv.tw/index.php zh-tw https://blog.apao.idv.tw/post/1294/ <![CDATA[點擊 input 文字框內之預設文字時就移除預設文字的方法]]> apao <apao@www.apao.idv.tw> Tue, 28 May 2019 06:04:16 +0000 https://blog.apao.idv.tw/post/1294/ ▼加在一般 html 方法，以下的「輸入內容」要同時輸入兩邊。
說明：使用onfocus 事件，檢查value的內容，如果是初始內容，就將內容清空
<input type="text" value="輸入內容" onfocus="javascript:if(this.value=='輸入內容')this.value='';">

▼DEMO try it：

  
  


▼加在HTML5 的方法
說明：輸入文字時，預設文字才會消失。
<input id="email" type="text" placeholder="輸入內容" size="22" />

▼DEMO try it：

  
  

Tags - , , , , ]]> https://blog.apao.idv.tw/post/1106/ <![CDATA[Radio 選擇時 隱藏或是秀出 區塊 ]]> apao <apao@www.apao.idv.tw> Sun, 12 Apr 2015 12:07:43 +0000 https://blog.apao.idv.tw/post/1106/ 點擊在新視窗中瀏覽此圖片
同時秀出價格

點擊在新視窗中瀏覽此圖片
同時秀出價格

CSS (head)
/*隱藏區塊用*/
.box{display: none;}
/*秀出區塊用*/
.bS01{}
.bS02{}
.bS03{}
/*區塊範圍指定*/
.bBW{}


JavaScript (head)
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
        $('input[type="radio"]').click(function(){
            if($(this).attr("value")=="bOne"){
                $(".box").hide();
                $(".bS01").show();
            }
            if($(this).attr("value")=="bTwo"){
                $(".box").hide();
                $(".bS02").show();
            }

        });
    });
</script>


HTML Code (body)

信用卡 / ATM
貨到付款

<input name="Paytype" type="radio" value="bOne" checked="checked">信用卡 / ATM
<input name="Paytype" type="radio" value="bTwo">貨到付款

<!-- 如果開始要顯示要加入 style="display:block;" 不顯示則加入  style="display:none;"-->
<div class="bS01 box bBW" style="display:block;">線上刷卡機制將客戶直接連結到各「銀行網路信用卡機制」，當客戶在本公司平台刷卡時，本公司及其它任何人均無法取得客戶信用卡資料。同時本公司平台網路安全受網際威信SSL安全機制的嚴格保護。將資料作複雜的運算及編碼，讓客戶安心地自由的瀏覽並付費，而無後顧之憂。<br>
我們的線上付款方式有以下機制: <br>
一.信用卡(限<font color="#FF0000">NT100元</font>以上): Visa、 Master、JCB、U卡、America Express
<br>
二.銀行晶片卡線上轉帳(限NT200~20,000以內) 線上交易成功後, 我們將立即為你處理出貨的動作,謝謝。</div>

<div class="bS02 box bBW">本公司與各大知名的宅配公司合作，您可以等到收到商品的同時，將貨款交付給該宅配公司即可。本項服務將代宅配代收手續費<span style=" color:red;">30元</span>。
</div>

<!-- 如果開始要顯示要加入 style="display:block;" 不顯示則加入  style="display:none;"-->
<span class="bS01 box">0元</span><span class="bS02 box">30元</span>


參考：
http://www.tutorialrepublic.com/codelab.php?topic=faq&file=jquery-show-hide-div-using-radio-button
Tags - , , , , ]]> https://blog.apao.idv.tw/post/1091/ <![CDATA[[文字方式]  點擊連結隱藏或顯示DIV]]> apao <apao@www.apao.idv.tw> Wed, 11 Mar 2015 19:48:46 +0000 https://blog.apao.idv.tw/post/1091/ <style type="text/css">
span{border:#999 solid 1px; padding:3px; border-radius:6px; -moz-border-radius:6px; -webkit-border-radius:6px;}
div#show{ margin:10px 0 0 0; padding:5px; border:#999 dashed 1px;}
</style>

javascript 部分
<script type='text/javascript'>
function show(obj, id)
{
  var o=document.getElementById(id);
  if( o.style.display == 'none' )
  {
    o.style.display='';
    obj.innerHTML='隱藏';
  }
  else
  {
    o.style.display='none';
    obj.innerHTML='顯示';
  }
}
</script>


html 部分
<span onclick='show(this, "show")'>顯示</span><br>
<div id='show' style="display:none;">按下文字按鈕後呈現內容</div>


網頁功能展示
http://goo.gl/hURxOu
Tags - , , , , , , ]]> https://blog.apao.idv.tw/post/1084/ <![CDATA[[checkbox] 隱藏 顯示]]> apao <apao@www.apao.idv.tw> Sun, 08 Mar 2015 06:30:34 +0000 https://blog.apao.idv.tw/post/1084/ <style type="text/css">
div#show{ margin:10px 0 0 0; padding:5px; border:#999 dashed 1px;}
</style>

javascript部分
<script type="text/javascript">
<!--
  function show(obj,item){
    document.getElementById(item).style.display = obj.checked?"block":"none";
  }
//-->
</script>


html部分
<input type="checkbox" onclick="show(this,'show');" />
<div id="show" style="display:none">這是顯示的內容</div>

註：show可以任意改為其他文字

展示網頁
http://goo.gl/ONVVvT
----------------------------------
單一選項做法
在head中
<script type="text/javascript">
<!--
  //show()函式需要兩個參數：obj為CheckBox元素本身；item為Div區塊的id
  function show(obj,item){
    //判斷CheckBox是否被勾選 若是則顯示區塊 反之則隱藏
    document.getElementById(item).style.display = obj.checked?"block":"none";
  }
//-->
</script>

在Body中
<input type="checkbox" onclick="show(this,'s2');" />
<div id="s2" style="display:none"></div>


-------------------------------------------
多選項同時顯示或不顯示
在head中
<script type="text/javascript">
<!--
  //items陣列用來紀錄要顯示/隱藏的區塊id
  var items = new Array("s2","s3");
  //show()函式需要一個參數：obj為CheckBox元素本身
  function show(obj){
    //一一取得items陣列中的物件 並判斷CheckBox是否被勾選 若是則顯示區塊 反之則隱藏
    for(var i=0;i<items.length;i++){
      document.getElementById(items[i]).style.display = obj.checked?"block":"none";
    }
  }
//-->
</script>

在Body中
<input type="checkbox" onclick="show(this,'s2');" />
<div id="s2" style="display:none"></div>
<input type="checkbox" onclick="show(this,'s3');" />
<div id="s3" style="display:none"></div>

Tags - , , , , ]]> https://blog.apao.idv.tw/post/1026/ <![CDATA[手機版 判別式]]> apao <apao@www.apao.idv.tw> Thu, 19 Jun 2014 03:17:44 +0000 https://blog.apao.idv.tw/post/1026/ <script type="text/javascript">
function checkserAgent(){
var userAgentInfo=navigator.userAgent;
var userAgentKeywords=new Array(“Android", “iPhone" ,"SymbianOS", “Windows Phone", “iPad", “iPod", “MQQBrowser");
var flag=false;
if(userAgentInfo.indexOf(“Windows NT")==-1){
flag=true;
}
return flag;
}
if(checkserAgent()){
document.location.href="http://www.apao.idv.tw/mobile/";
}
</script>
Tags - , , ]]> https://blog.apao.idv.tw/post/899/ <![CDATA[window.open 開啟另一視窗]]> apao <apao@www.apao.idv.tw> Sat, 25 Aug 2012 10:59:31 +0000 https://blog.apao.idv.tw/post/899/ 點擊在新視窗中瀏覽此圖片


<script LANGUAGE="JavaScript">
<!--
　　function openwin() {
　　window.open ("page.html", "newwindow", "height=100, width=400, toolbar =no, menubar=no, scrollbars=no, resizable=no, location=no, status=no") file://写成一行

　　}
//-->
</script>


window.open 談出新視窗的命令文；
'page.html' 弹出窗口的文件名；
'newwindow' 彈出窗口的名字（不是文件名），可空白' '；
height=100 窗口高度；
width=400 窗口寬度；
top=0 窗口距離瀏覽器上方的距離值；
left=0 窗口距離瀏覽器左側的距離值；
toolbar=no 是否顯示工具欄，yes為顯示；
menubar，scrollbars 表示清單與滾動軸。
resizable=no 是否可改變視窗大小，yes为允許；
location=no 是否显示地址栏，yes为允许；
status=no 是否顯示狀態欄內的訊息（指是視窗開啟時），yes為允許；

html+javascript的寫法：

<html>
<head>
<script LANGUAGE="JavaScript">
<!--
　　function openwin() {
　　window.open ("page.html", "newwindow", "height=100, width=400, toolbar =no, menubar=no, scrollbars=no, resizable=no, location=no, status=no") //要寫成一行
　　}
//-->
</script>
</head>
<body onload="openwin()">
任意的頁面內容...
</body>
</html>


開啟新增視窗方法有四種：

方法一：
<body  onload="openwin()"> 瀏覽器開啟時(讀取時)彈出視窗；

方法二：
<body  onunload="openwin()"> 瀏覽器離開頁面時(不讀取)彈出視窗；

方法三：用一个连接调用：
<a href="#" onClick="window.open('URL', 'Joseph', config='height=350,width=440')"/>開啟一個新視窗</a>
注意：必須使用“#”

方法四：用於發布按鈕時：
<input type="button" onclick="openwin()" value="開啟視窗">



Tags - , ]]> https://blog.apao.idv.tw/post/824/ <![CDATA[圖片自動滑動切換效果 (JavaScript_SlideTrans)]]> apao <apao@www.apao.idv.tw> Tue, 11 Oct 2011 04:34:16 +0000 https://blog.apao.idv.tw/post/824/ 點擊在新視窗中瀏覽此圖片
DEMO

程序說明
原理就是通過不斷設置滑動對象的left(水平切換)和top(垂直切換)來實現圖片切換的動態效果。
首先需要一個容器，程序會自動設置容器overflow為hidden，如果不是相對或絕對定位會同時設置position為relative，
滑動對象會設置為絕對定位：
var p = CurrentStyle(this._container).position;
p == "relative" || p == "absolute" || (this._container.style.position = "relative");
this._container.style.overflow = "hidden";
this._slider.style.position = "absolute";

如果沒有設置Change切換參數屬性，會自動根據滑動對象獲取：
this.Change = this.options.Change ? this.options.Change :
    this._slider[bVertical ? "offsetHeight" : "offsetWidth"] / this._count;

執行Run方法就會開始進入切換，其中有一個可選參數用來重新設置要切換的圖片索引：
index == undefined && (index = this.Index);
index < 0 && (index = this._count - 1) || index >= this._count && (index = 0);

之後就到設置使用tween緩動時需要的參數了，
包括_target(目標值)、_t(時間)、_b(初始值)和_c(變化量)：
this._target = -Math.abs(this.Change) * (this.Index = index);
this._t = 0;
this._b = parseInt(CurrentStyle(this._slider)[this.options.Vertical ? "top" : "left"]);
this._c = this._target - this._b;

還有Duration(持續時間)是自定義屬性。
參數設置好後就執行Move程序開始移動了。
裡面很簡單，首先判斷_c是否有值（等於0表示不需要移動）和_t是否到達Duration，
未滿足條件就繼續移動，否則直接移動到目標值並進行下一次切換：
if (this._c && this._t < this.Duration) {
    this.MoveTo(Math.round(this.Tween(this._t++, this._b, this._c, this.Duration)));
    this._timer = setTimeout(Bind(this, this.Move), this.Time);
}else{
    this.MoveTo(this._target);
    this.Auto && (this._timer = setTimeout(Bind(this, this.Next), this.Pause));
}

使用說明：
1.html中確認Slider的數量與圖片之寬高
2.SlideTrans.js中改變圖片成現方式的數據

實例化需要3個參數，分別是容器對象，滑動對象和切換數量，之後可以直接執行Run方法運行：
HTML的CSS中找出：
.container, .container img{width:199px; height:38px;}

HTML的script中找出(4為圖片數目)：
new SlideTrans("idContainer", "idSlider", 4, { Vertical: false }).Run();

SlideTrans.js 中找出：
Vertical:  true,//是否垂直方向（方向不能改）
Auto:    true,//是否自動
Change:    0,//改變數
Duration:  40,//滑動持續時間
Time:    25,//滑動延時
Pause:    4000,//停頓時間(Auto為true時有效)
onStart:  function(){},//開始轉換時執行
onFinish:  function(){},//完成轉換時執行
Tween:    Tween.Quart.easeOut//tween算子

其中Vertical初始化後就不能修改，Tween算子可參照這裡的緩動效果選擇（實例中選了其中3個）。
還有提供了以下方法：
Next:切換下一個
Previous:切換上一個
Stop:停止自動切換
還有上面說到的Run
這個檔案只能在登入之後下載。請先 註冊 或 登入
Tags - , , , , , ]]> https://blog.apao.idv.tw/post/635/ <![CDATA[關閉視窗]]> apao <apao@www.apao.idv.tw> Fri, 06 Aug 2010 02:17:18 +0000 https://blog.apao.idv.tw/post/635/ <body>與</body>之間

<a href="#" onClick="window.close(); return false;">close window</a>

備註︰
close window可以自由置換
參考連結︰
http://www.livemusic98.com/map.html


Tags - ]]> https://blog.apao.idv.tw/post/634/ <![CDATA[走馬燈 (右向左)]]> apao <apao@www.apao.idv.tw> Thu, 05 Aug 2010 07:39:21 +0000 https://blog.apao.idv.tw/post/634/ <body >與</body>之間

<SCRIPT language="JavaScript"><!--
myMsg = "你好歡迎光臨！你好歡迎光臨！你好歡迎光臨！　　　";
myMsg = myMsg + myMsg;
myCnt = 0;
function myFunc(){
  document.myForm.myFormMes.value = myMsg.substring(myCnt,myMsg.length);
  myCnt = ( myCnt == (myMsg.length/2)-1 ) ? 0 : myCnt+1;
}
// --></SCRIPT>

<form name="myForm">
<input type="text" size="30" name="myFormMes">
</form>
<SCRIPT language="JavaScript"><!--
setInterval("myFunc()",200);
// --></SCRIPT>
備註︰
你好歡迎光臨！你好歡迎光臨！你好歡迎光臨！　　　←可自由置換，留空白有助於斷字，較容易理解。
size="30"←可用CSS控制寬度等等，較容易適用於各瀏覽器內。
參考連結︰
http://www.livemusic98.com
Tags - , , ]]> https://blog.apao.idv.tw/post/633/ <![CDATA[JavaScript 走馬燈 (一個字一個字出現)]]> apao <apao@www.apao.idv.tw> Wed, 04 Aug 2010 16:58:54 +0000 https://blog.apao.idv.tw/post/633/ 範例來自︰http://www.fa-hua.com.tw



以下放至於<body>與</body>之間

<SCRIPT language="JavaScript"><!--
myMsg = " 你好歡迎光臨！";
myCnt = 0;
myDspFlg = 0;


function myFunc(){
  if ( myDspFlg == 0 ){
    document.myForm.myFormMes.value = myMsg.substring(0,myCnt);
    if ( myCnt == myMsg.length ){
      myCnt = 0;
      myDspFlg = 1;
    }else{
      myCnt += 1;
    }
  }else if ( myDspFlg == 1 ){
    document.myForm.myFormMes.value = "";
    myDspFlg = 2;
  }else{
    document.myForm.myFormMes.value = myMsg;
    myCnt ++;
    if ( myCnt == 5 ){
      myDspFlg = 0;
      myCnt = 0;
    }else{
      myDspFlg = 1;
    }
  }
}
// --></SCRIPT>

<form name="myForm">
<input type="text" size="30" name="myFormMes">
</form>
<SCRIPT language="JavaScript"><!--
setInterval("myFunc()",200);
// --></SCRIPT>

備註︰
你好歡迎光臨！←可自由置換
size="30"←可以CSS指定寬度等等，較適用於各瀏覽器。

Tags - , ]]>