暫且不討論用 jQuery 來寫程式到底好不好, 因為我大概也沒有足夠的 JavaScript 資歷來討論這件事。不過, 倒是把前一陣子的『 jQuery 習作 - 隨機文章跑馬燈』改寫成不用 jQuery 的方式, 以下和大家分享。
.
最近, 自己寫的『相關文章點播台』外掛和其他功能暫告一段落, 轉而開始注意我的 Blogger 部落格的載入速度, 除了將大部分 JavaScript 加了 defer="defer" 屬性 (IE7似乎有問題), 也拿掉一些少用的 外部 JavaScript, 詳情可以參考以下的說明 :
.
再來, 把前一陣子的『 jQuery 習作 - 隨機文章跑馬燈』改寫成不用 jQuery 的方式。雖然原先 jQuery 的方式沒什麼問題, 但有了 LVCHEN 的提醒, 總是多一分準備會好一些。
...試著不用 jQuery 寫，其實對於學習 js 的幫助也不小，而且 jQuery 其實也有些 bug，太過依賴反而不好，碰到 bug 反而會花上更多時間。
=> LVCHEN 回應 『 jQuery 習作 - 隨機文章跑馬燈 』
.
模版修改方式、其他說明 以及 限制, 請見『 jQuery 習作 - 隨機文章跑馬燈』, 下面只列出 放在 HTML/JavaScript 網頁元素裡的 JavaScript
變數類別 :
- DOM 物件 : eArch
- DOM 物件陣列 : aPost, aHref, aTemp
- 字串 : sTemp
其他注意事項 :
- 紅色部分, 要搭配模版的架構, 還有 跑馬燈 的命名
- 藍色部分 : i<20 可以改成其他的文章篇數,
- 藍色部分 : /*/> */ 是因為輸入 HTML/JavaScript 網頁元素時, < > 必需成對, 用 < 又無效, 所以只好用 JavaScript 註解的方式補成 i<20; /*/> */
- 整段程式也可以放在模版, 但是 藍色部分 要改成
for (var i=0; i < 20; i++)
| jQuery 的方式 | 不使用 jQuery 的方式 (IE7 不適用, 最後面有另一版本)
|
<!-- 記得先載入 jQuery -->
<script type="text/javascript">
function myScroller() {
var shortspc = ' ';
var longspc = ' ';
var p_lnk = $('#BlogArchive1').find('.posts').find('a');
var ll = p_lnk.length;
var j = Math.floor((ll) * Math.random());
$('#U002').html('').append('[' + j + '/' + ll + ']' + longspc);
for (var i=0; i<20; /*/> */ i++){
j = j+1;
j = j % p_lnk.length;
var d0=p_lnk.eq(j).attr("href");
d0 = d0.match(/\d{4}\/\d{2}/);
$('#U002').append(d0+shortspc);
p_lnk.eq(j).clone().appendTo('#U002');
$('#U002').append(longspc);
};
} $(document).ready(function(e){
myScroller()
});
</script> | <script type="text/javascript">
function myScroller() {
var shortspc = ' ';
var longspc = ' ';
var eArch = document.getElementById('BlogArchive1');
var aPost = eArch.getElementsByClassName('posts');
var aHref = [];
var aTemp = [];
var sTemp = '';
var i,j;
for (i=0; i</*/>*/ aPost.length; i++) {
aTemp = aPost[i].getElementsByTagName('a');
for (j=0; j</*/>*/ aTemp.length; j++) {
aHref.push(aTemp[j]);
}}
var ll = aHref.length;
j = Math.floor((ll) * Math.random());
sTemp = sTemp.concat('[' + j + '/' + ll + ']' + longspc);
for (var i=0; i<20; /*/> */ i++){
j = j+1;
j = j % ll;
var d0=aHref[j].href;
d0 = d0.match(/\d{4}\/\d{2}/);
sTemp = sTemp.concat(d0+shortspc);
sTemp = sTemp.concat(aHref[j].parentNode.innerHTML+longspc);
};
document.getElementById('U002').innerHTML=sTemp;
}
myScroller();
</script> |
.
IE7 不適用 getElementsByClassName 改寫如下 (綠色部份) :
| <script type="text/javascript">
function myScroller() {
var shortspc = ' ';
var longspc = ' ';
var eArch = document.getElementById('BlogArchive1');
var aTemp = eArch.getElementsByTagName('a');
var aHref = [];
var sTemp = '';
var i,j;
for (i=0; i</*>*/ aTemp.length; i++) {
if (aTemp[i].href.match(/\d{4}\/\d{2}/))
if (!aTemp[i].href.match(/Id=BlogArchive1/i))
{ aHref.push(aTemp[i]); }
}
var ll = aHref.length;
var j = Math.floor((ll) * Math.random());
sTemp = sTemp.concat('[' + j + '/' + ll + ']' + longspc);
for (var i=0; i<20; /*/> */ i++){
j = j+1;
j = j % ll;
var d0=aHref[j].href;
d0 = d0.match(/\d{4}\/\d{2}/);
sTemp = sTemp.concat(d0+shortspc);
sTemp = sTemp.concat(aHref[j].parentNode.innerHTML+longspc);
};
document.getElementById('U002').innerHTML=sTemp;
}
myScroller();
</script> |
0 意見:
發表您的回應張貼留言