js相冊效果代碼(點擊創(chuàng)建即可)
更新時間：2013年04月16日 15:06:55 作者：
利用js 書寫的相冊代碼，點擊創(chuàng)建即可看到效果，感興趣的朋友可以參考下哈，希望對你學習jquery有所幫助
復制代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
Image
{
width:100px;
height:100px;
}
</style>
<script type="text/javascript">
function createimgs() {
var array = ['29b56ef1ecac0a2e23fe73abb8457ed9.jpg',
'3615bd55e6db2d3eb2a45a8369653f12(1).jpg',
'3615bd55e6db2d3eb2a45a8369653f12.jpg',
'837adad119910d349f05149ad4a02ef0.jpg',
'849b23dac9ceafe6d7e7b94a73b46e82.jpg',
'91fe451f6e8081fe492c6ae617a50274.jpg',
'9b1b7be8d60eef1e15257797d779d91b.jpg',
'9fce9273034aed88fab0bcfef344dae7.jpg',
'a5f59f9d670a936bf8281090bc2ce7c7.jpg',
'cda8a8f5b72e165c153fd396db02ab64.jpg',
'd159717ab855f729066b333d439f630e.jpg',
'd7ef1897c62640dba44532e6475c49c6.jpg',
'ef62b67b4dc1bc80daaaf9ebbf90d854.jpg',
'f6b31d9bca975794bd23fdf71295e1c4.jpg',
'f856bd37b432eb532098fa170dfbafd4.jpg'
];
//alert(array.length);
var tablenode = document.createElement('table');
var tbody = document.createElement('tbody');
tablenode.setAttribute('width', '600px');
tablenode.setAttribute('height', '400px');
tablenode.setAttribute('border', '2px');
var count = 0;
for (var i = 0; i < 3; i++) {
var trnode = document.createElement('tr');
for (var j = 0; j < 5; j++) {
var tdnode = document.createElement('td');
var imgnode = document.createElement('img');
imgnode.setAttribute('src', 'scenery/' + array[count]);
// imgnode.setAttribute('width', '100px');
// imgnode.setAttribute('height', '100px');
tdnode.appendChild(imgnode);
trnode.appendChild(tdnode);
count++;
}
tbody.appendChild(trnode);
}
tablenode.appendChild(tbody);
document.body.appendChild(tablenode);
}
</script>
</head>
<body>
<input type="button" value="創(chuàng)建相冊" onclick="createimgs();" />
</body>
</html>
相關文章
HTML+CSS+JavaScript實現(xiàn)可拖拽模態(tài)框
這篇文章主要為大家詳細介紹了HTML+CSS+JavaScript實現(xiàn)可拖拽模態(tài)框，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
這篇文章主要介紹了Angular 頁面跳轉時傳參問題的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-08-08
這篇文章主要為大家詳細介紹了js實現(xiàn)經(jīng)典貪吃蛇小游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-03-03
百度有啊通欄展示大家并不陌生吧，下面與大家分享下具體的實現(xiàn)js代碼，感興趣的朋友可以參考下哈2013-05-05
JavaScript實現(xiàn)焦點進入文本框內關閉輸入法的核心代碼
這篇文章給大家分享js實現(xiàn)焦點進入文本框內關閉輸入法，代碼簡單易懂，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2017-09-09
這篇文章主要介紹了利用momentJs做一個倒計時組件，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2021-12-12
這篇文章主要為大家介紹了JavaScript設計模式中的模板方法模式，對JavaScript設計模式感興趣的小伙伴們可以參考一下2016-01-01
最近發(fā)現(xiàn)JS當中toFixed()方法存在一些問題,所以這里給大家總結下,這篇文章主要給大家介紹了關于JS中toFixed(2)精度問題的原因以及解決辦法,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-04-04
uniapp幾行代碼解決滾動穿透問題(項目實戰(zhàn))
這篇文章主要介紹了uniapp幾行代碼解決滾動穿透問題,本文結合實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-01-01
本篇文章主要介紹了JavaScript中瀏覽器兼容問題的寫法小議，具有一定的參考價值，感興趣的小伙伴們可以參考一下。2016-12-12