js相册效果代码(点击创建即可)

 更新时间:2013年04月16日 15:06:55   作者:  
利用js 书写的相册代码,点击创建即可看到效果,感兴趣的朋友可以参考下哈,希望对你学习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="创建相册" onclick="createimgs();" />
</body>
</html>

相关文章

  • js数组中删除重复值的代码小结

    js数组中删除重复值的代码小结

    最近需要用js控制数组,里面可能有一些重复的值,需要去掉,特为大家整理了这篇文章。
    2011-01-01
  • JS中用try catch对代码运行的性能影响分析

    JS中用try catch对代码运行的性能影响分析

    要捕获JavaScript代码中的异常一般会采用 try catch,不过try catch的使用是否是对代码性能产生影响呢?答案是肯定有的,但是有多少不得而知。下面这篇文章就给大家详细介绍了在JS中用try catch对代码运行的性能影响,有需要的朋友们可以参考借鉴。
    2016-12-12
  • 详解CocosCreator中几种计时器的使用方法

    详解CocosCreator中几种计时器的使用方法

    这篇文章主要介绍了CocosCreator中几种计时器的使用方法,推荐使用schedule,功能多些,销毁时还能自动移除
    2021-04-04
  • 基于JavaScript制作一个骰子游戏

    基于JavaScript制作一个骰子游戏

    这节实验我们将使用 HTML、CSS 和 JavaScript 构建一个骰子游戏。设置两名玩家(一个人玩也行)然后掷骰子,获得更高点数的玩家将赢得游戏,感兴趣的可以了解一下
    2022-04-04
  • JS创建对象的写法示例

    JS创建对象的写法示例

    这篇文章主要介绍了JS创建对象的写法,结合实例形式分析了javascript对象的定义、实现方法与使用技巧,需要的朋友可以参考下
    2016-11-11
  • 继续学习javascript闭包

    继续学习javascript闭包

    这篇文章主要还是继续学习javascript闭包,理解JavaScript的闭包是迈向高级JS程序员的必经之路,需要的朋友可以参考下
    2015-12-12
  • javascript Array.prototype.slice的使用示例

    javascript Array.prototype.slice的使用示例

    javascript Array.prototype.slice除了常见的从某个数组中抽取出新的数组外,它还有一些其他的用法,下面就为大家讲这些妙用
    2013-11-11
  • JavaScript 实现下雪特效的示例代码

    JavaScript 实现下雪特效的示例代码

    这篇文章主要介绍了JavaScript 实现下雪特效的示例代码,帮助大家利用JavaScript制作特效,感兴趣的朋友可以了解下
    2020-09-09
  • JS判断数组中是否有重复值得三种实用方法

    JS判断数组中是否有重复值得三种实用方法

    数组中是否有重复值的判断方法有很多,本文为大家推荐下比较实用的3种方法,感兴趣的朋友可以参考下,希望对大家有所帮助
    2013-08-08
  • 原生js jquery ajax请求以及jsonp的调用方法

    原生js jquery ajax请求以及jsonp的调用方法

    下面小编就为大家带来一篇原生js jquery ajax请求以及jsonp的调用方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08

最新评论