顯示文章

這裡允許您檢視這個會員的所有文章。請注意, 您只能看見您有權限閱讀的文章。


主題 - Ian08

頁: [1]
1
以下的正規表達式可以將 <p> 取代為 <br> 。

代碼: [選擇]
ereg_replace("<p>", "<br>", $string);

但如果不想讓 <p><span> 這樣的情況,也就是緊連著 <span> 的 <p> 被取代(除了 <span> 之外其他都沒關係),請問程式碼應該怎麼寫?下面這樣寫好像沒有效。

代碼: [選擇]
ereg_replace("<p>([^<s])", "<br>\\1", $string);

2
例如頁面中有很多 <div> , 每個 <div> 中的 <p> 數量不一定,且 <div> 中除了 <p> 之外,可能還有其他的 HTML 元素。

想把每個 <div> 中的 <p> 都變成陣列元素的字串,使得處理後的陣列看起來像這樣:

[
"<p>段落段落</p><p>段落段落</p>",
"<p>段落段落</p>",
"<p>段落段落</p><p>段落段落</p><p>段落段落</p>",
"<p>段落段落</p><p>段落段落</p>",
"<p>段落段落</p><p>段落段落</p><p>段落段落</p>"
]


目前想到的寫法是用迴圈的方式,再搭配 innerHTML ,將 <p> 逐個加入字串中。

代碼: [選擇]
<html>
<head>
<script type="text/javascript">

window.onload = function() {

var myArray = [];

var myDiv = document.getElementsByTagName("div");

for(var i=0; i<myDiv.length; i++){

var paragraph = myDiv[i].getElementsByTagName("p");

var arrayElement = "";

for(var j=0; j<paragraph.length; j++){        // 將 <p> 逐個加入字串中

arrayElement += "<p>" + paragraph[j].innerHTML + "</p>";

}

myArray.push(arrayElement);

}

}

</script>
</head>
<body>

<div>
<h3>標題標題</h3>
<p>段落段落</p>
<p>段落段落</p>
</div>
<div>
<p>段落段落</p>
<span>文字文字</span>
</div>
<div>
<p>段落段落</p>
<p>段落段落</p>
<p>段落段落</p>
<h4>標題標題標題</h4>
</div>
<div>
<p>段落段落</p>
<a href="#">連結連結</a>
<a href="#">連結連結</a>
<p>段落段落</p>
</div>
<div>
<h3>標題</h3>
<p>段落段落</p>
<a href="#">連結連結</a>
<p>段落段落</p>
<p>段落段落</p>
</div>

</body>
</html>



請問關於將 <p> 加為陣列中的字串的部份,有沒有更簡潔的寫法呢?

用 outerHTML 應該可讓程式碼變得稍微簡潔一點,但可惜 Firefox 不支援 outerHTML 。

3
以下的函式會刪除 body 中的指定的字元,例如目前的 var deleteChar = "a" 即是把 a 全都刪除。

代碼: [選擇]
<html>
<head>
<script type="text/javascript">

window.onload = function () {

var deleteChar = "a";

document.body.innerHTML = document.body.innerHTML.replace(new RegExp(deleteChar,"g"),"");

}

</script>
</head>
<body>
afojc6kb8lh27hy5kho1
</body>
</html>


但如果想刪除的是 ( ) [ ] ? * 等等符號就會出現錯誤,而想刪除 . 時則使整個字串都被刪除了。這應該是跟 Regular Expression 常用的符號有關。

請有什麼方法可以防止錯誤發生嗎?

4
請問如何以 PHP 達成這樣的功能:點擊某個連結時,將伺服器上的數個指定的資料夾壓縮成一個壓縮檔,並下載

哪裡有這方面的教學呢?

5
舉例而言,以下是用手動的方式把 <li></li> 加成陣列,每項陣列元素都是字串。但是當元素非常多時,這種手動的方式就很沒效率。

代碼: [選擇]
var myArray = [
'<li><a href="#">HTML element 1</a></li>',
'<li><a href="#">HTML element 2</a></li>',
'<li><a href="#">HTML element 3</a></li>',
'<li><a href="#">HTML element 4</a></li>',
'<li><a href="#">HTML element 5</a></li>',
'<li><a href="#">HTML element 6</a></li>'
]


而這是用 getElementsByTagName 的方式取得 <li></li> 的陣列,但是這樣的陣列,其陣列元素仍然是 HTML li object ,不是字串。

代碼: [選擇]
var myArray = document.getElementsByTagName("ul")[0].getElementsByTagName("li");


請問有什麼方式可以用 getElementsByTagName 取得 <li></li> 的陣列之後,再把陣列元素都變成字串?或有其他更好的方式?我試過 toString() ,但似乎無法這樣使用。

6
如果 Javascript 執行程式發生錯誤時(例如找不到元素或變數未定義等等),不想讓瀏覽器跳出錯誤訊息,通常都會把程式碼放在 try { } catch(e) { } 裡面,例如以下幾行程式碼(隨意舉例)。但是如果執行第一行程式碼的時候發生了錯誤,接下來的四行都不會被執行了。

代碼: [選擇]
try {
for(var i=0; i<myLi.length; i++){  /* do something */  }
if(myVar){  /* do something */  }
var myDiv = document.getElementById("id");
if(someVar = otherVar){  /* do something */  }
for(var i=0; i<myEle.length; i++){  /* do something */  }
}
catch(e) {
// do nothing
}

另一個方法是把每行程式碼都放在 try { } catch(e) { } 裡,如下,但如此一來又太累贅了。如果要執行的程式更多,就會變得更累贅。

代碼: [選擇]
try {  for(var i=0; i<myLi.length; i++){  /* do something */  }   } catch(e) {}
try {  if(myVar){  /* do something */  }                          } catch(e) {}
try {  var myDiv = document.getElementById("id");                 } catch(e) {}
try {  if(someVar = otherVar){  /* do something */  }             } catch(e) {}
try {  for(var i=0; i<myEle.length; i++){  /* do something */  }  } catch(e) {}


請問有沒有什麼寫法既簡潔,並且發生錯誤時不跳出錯誤訊息,又能繼續執行接下來的所有程式碼?

7
有些 Apache HTTP Server 的設定可以自動傳送更新過的 HTML、CSS、圖片等等檔案給使用者的瀏覽器。

但是我使用的 Apache 沒有做這樣的設定,以致於我上傳了更新後的檔案,使用瀏覽器瀏覽時還要按一下重新整理才能看到更新後的樣子。我目前沒有權限修改 Apache 的設定,因此請問有沒有辦法能使用 .htaccess 或其他方式讓 Apache 自動傳送更新過的檔案給使用者的瀏覽器?

8
想讓一個 <div id="first"></div> 水平向右移動,執行 function 時沒有問題。

代碼: [選擇]
<html>
<head>
<script type="text/javascript">

window.onload = function() {
Move.process('first','horizontal');
}

var Move = {
process: function(Id,Type) {
elemId  = document.getElementById(Id);
margin = 0;
Move.moving(Type);
},
moving: function(Type) {
margin++;
if(Type == 'horizontal') elemId.style.marginLeft = margin + 'px';
else elemId.style.marginTop = margin + 'px';
setTimeout("Move.moving('" + Type + "')", 30);
}
}

</script>
</head>
<body>

<div id="first">1. Text</div>

</body>
</html>



但如果再新增一個 <div id="second"></div> 讓它垂直向下移動,first 就不動了,而且 second 變成往右下方移動,似乎 first 的規則都被套用到 second 上了。

代碼: [選擇]
<html>
<head>
<script type="text/javascript">

window.onload = function() {
Move.process('first','horizontal');
Move.process('second','vertical');        // 新增
}

var Move = {
process: function(Id,Type) {
elemId  = document.getElementById(Id);
margin = 0;
Move.moving(Type);
},
moving: function(Type) {
margin++;
if(Type == 'horizontal') elemId.style.marginLeft = margin + 'px';
else elemId.style.marginTop = margin + 'px';
setTimeout("Move.moving('" + Type + "')", 30);
}
}

</script>
</head>
<body>

<div id="first">1. Text</div>

<div id="second">2. Text</div>

</body>
</html>


如果想讓 first 向右移動的同時讓 second 向下移動,也就是讓它們之間互不影響,請問應該怎麼達成呢?

9
網頁技術 / 如何用 javascript/DOM 將元素分組
« 於: 2008-10-24 09:38 »
例如有一個 <div id="myDiv"></div> 包含了很多 <a href="#">link</a>

代碼: [選擇]
<div id="myDiv">
        <a href="#">link</a>
        <a href="#">link</a>
        <a href="#">link</a>
        <a href="#">link</a>
        <a href="#">link</a>
        <a href="#">link</a>
        <a href="#">link</a>
        <a href="#">link</a>
        <a href="#">link</a>
        <a href="#">link</a>
        <a href="#">link</a>
        <a href="#">link</a>
        <a href="#">link</a>
</div>


想把每五個 <a href="#"></a> 用新的 <div></div> 包起來分成一小組,最後一組即使未滿五個也沒關係,仍然包成一小組。如下:

代碼: [選擇]
<div id="myDiv">
        <div>
                <a href="#">link</a>
                <a href="#">link</a>
                <a href="#">link</a>
                <a href="#">link</a>
                <a href="#">link</a>
        </div>
        <div>
                <a href="#">link</a>
                <a href="#">link</a>
                <a href="#">link</a>
                <a href="#">link</a>
                <a href="#">link</a>
        </div>
        <div>
                <a href="#">link</a>
                <a href="#">link</a>
                <a href="#">link</a>
        </div>
</div>


請問要怎麼用 DOM 達成這一點呢?我原本想到的方法是用 outerHTML 搭配 DOM,但是 Firefox 不支援 outerHTML。

10
如果想在使用者自行調整網頁字體大小(例如從瀏覽器選單中選擇,或按 Ctrl++)的時候執行某些動作,

請問如何用 Javascript 偵測使用者調整了字體大小?

11
onmouseover 設定滑鼠移上 div 時停止跑馬燈,然後 onmouseout 時再繼續。

但是當移上 div 裡面的 ulli 等元素時,瀏覽器似乎也會視其為離開 div,也就是 onmouseout ,以致於跑馬燈在那一瞬間也會動一下。請問要怎麼解決這個問題?

代碼: [選擇]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Marquee</title>
<style type="text/css">
div       { width: 900px; height: 250px; overflow: hidden; border: 3px solid lightblue; }
div ul    { margin: 50px 0 0 50px; padding: 0; width: 850px; height: 120px; border: 1px solid silver; list-style-type: none; }
div ul li { float: left; display: inline; margin-right: 50px; width: 120px; height: 120px; background: lightgreen; }
</style>
<script type="text/javascript">
        window.onload = function() {

                var marquee = document.getElementById("marquee");

                list = marquee.getElementsByTagName("ul")[0];

                leftMargin = 50;

                Marquee();

                marquee.onmouseover = function() { clearTimeout(roll); }
                marquee.onmouseout  = function() { Marquee(); }

        }

        function Marquee() {

                list.style.marginLeft = leftMargin + "px";

                leftMargin -= 1;

                roll = setTimeout("Marquee()", 15);

        }
</script>
</head>
<body>

        <div id="marquee">
                <ul>
                        <li>Text</li>
                        <li>Text</li>
                        <li>Text</li>
                        <li>Text</li>
                        <li>Text</li>
                </ul>
        </div>

</body>
</html>

12
網頁技術 / RegExp 在 IE 中無法正常運作
« 於: 2008-09-28 11:22 »
下面的 Javascript 會在 <p></p> 的外圍加上一個 <div id="outer"></div>,在 Firefox 中正常,但在所有版本的 IE 中都無法運作。請問有什麼解決方法嗎?

代碼: [選擇]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
        <title>RegExp test</title>

        <style type="text/css">
                #outer {
                    border: 3px solid lightblue;
                }
        </style>

        <script type="text/javascript">
                window.onload = function() {

                document.body.innerHTML = document.body.innerHTML.replace(RegExp("(\<p.+\>)","g"), "<div id=\"outer\">$1</div>");

                }
        </script>
</head>
<body>

        <p>Text Text Text Text Text Text Text Text Text Text Text Text Text</p>

</body>
</html>

13
用 DOM 產生 <marquee> ,在 Firefox 3 中失效,在 Firefox 2 中必須要滑鼠移上再移開之後才會開始運作。而其他瀏覽器都可運作。

但是若將 <marquee> 直接寫在 HTML 中,Firefox 又正常了。

請問怎麼會這樣?


代碼: [選擇]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TEST</title>
<style type="text/css">
marquee {
    padding: 20px;
    width: 300px;
    height: 150px;
    background: lightcyan;
    }

#mydiv {
    width: 150px;
    height: 150px;
    background: lightgreen;
    }
</style>
<script type="text/javascript">
window.onload = function() {

    var marquee = document.createElement("marquee");
    marquee.onmouseover = function() { this.stop() };
    marquee.onmouseout = function() { this.start() };
    marquee.setAttribute("scrollamount", 5, 0);
    document.body.appendChild(marquee);

    var mydiv = document.getElementById("mydiv");
    marquee.appendChild(mydiv);

}
</script>
</head>
<body>

<div id="mydiv"></div>

</body>
</html>

14
網路上可找到很多跑馬燈的程式,例如這個。但這些跑馬燈不外乎都是重複在同一個框格中跑,請問可否設定兩個框格,讓第一個框格中消失的內容在第二個框格中跑出,而不要在同一個框格中跑?

15
網頁技術 / 以 javascript/DOM 增加 div 的問題
« 於: 2008-07-20 12:22 »
當使用 document.createElement("div") 在每個<div></div> 中加入新的 <div></div> 時,瀏覽器就會當機,但如果加入的是 <span></span> ,也就是 document.createElement("span") ,則不會有問題。請問為什麼會這樣?


代碼: [選擇]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TEST</title>
<script type="text/javascript">
window.onload = function (){
    var divs = document.getElementsByTagName("div");
    for(var i=0; i<divs.length; i++){
        var newDiv = document.createElement("div");
        newDiv.className = "extra";
        divs[i].appendChild(newDiv);
    }
}
</script>
</head>
<body>

<div>TEST</div>
<div>TEST</div>
<div>TEST</div>
<div>TEST</div>
<div>TEST</div>

</body>
</html>

16
如果只想讓 IE 讀取 .js 檔,
一般會在 HTML 中使用條件註解,
其他瀏覽器就不會讀取該檔案:

<!--[if IE]>
<script type="text/javascript" src="myjavascript.js"></script>
<![endif]-->


但如果不想使用條件註解,
有沒有辦法讓其他瀏覽器在讀取 .js 檔的第一行時,
就判定不要再繼續往下讀取、直接離開了?
這麼一來就不會把整個 .js 檔都讀取完畢了。

頁: [1]