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


Posted in Javascript onApril 16, 2013
<!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>
Javascript 相关文章推荐
使用jQuery清空file文件域的解决方案
Apr 12 Javascript
js整数字符串转换为金额类型数据(示例代码)
Dec 26 Javascript
js使用正则实现ReplaceAll全部替换的方法
Aug 22 Javascript
Javascript基础教程之变量
Jan 18 Javascript
JavaScript常用标签和方法总结
Sep 01 Javascript
JavaScript实现仿新浪微博大厅和腾讯微博首页滚动特效源码
Sep 15 Javascript
JavaScript中定义类的方式详解
Jan 07 Javascript
只需五句话搞定JavaScript作用域(经典)
Jul 26 Javascript
基于jPlayer三分屏的制作方法
Dec 21 Javascript
解决vue动态为数据添加新属性遇到的问题
Sep 18 Javascript
如何在微信小程序里面退出小程序的方法
Apr 28 Javascript
使用axios请求时,发送formData请求的示例
Oct 29 Javascript
jQuery实现点击标题输入详细信息
Apr 16 #Javascript
jQuery图片的展开和收缩实现代码
Apr 16 #Javascript
js变换显示图片的实例
Apr 16 #Javascript
在jQuery中 常用的选择器介绍
Apr 16 #Javascript
jQuery中对节点进行操作的相关介绍
Apr 16 #Javascript
jQuery中实现动画效果的基本操作介绍
Apr 16 #Javascript
基于jQuery中对数组进行操作的方法
Apr 16 #Javascript
You might like
PHP中用header图片地址 简单隐藏图片源地址
2008/04/09 PHP
PHP加密扩展库Mcrypt安装和实例
2013/11/10 PHP
PHP错误Parse error: syntax error, unexpected end of file in test.php on line 12解决方法
2014/06/23 PHP
让你的网站可编辑的实现js代码
2009/10/19 Javascript
Javascript delete 引用类型对象
2013/11/01 Javascript
jQuery focus和blur事件的应用详解
2014/01/26 Javascript
js类定义函数时用prototype与不用的区别示例介绍
2014/06/10 Javascript
javascript删除数组重复元素的方法汇总
2015/06/24 Javascript
js字符串截取函数slice、substring和substr的比较
2016/05/17 Javascript
原生js实现自由拖拽弹窗代码demo
2016/06/29 Javascript
vue双向数据绑定原理探究(附demo)
2017/01/17 Javascript
Easyui使用Dialog行内按钮布局的实例
2017/07/27 Javascript
JS变量提升原理与用法实例浅析
2020/05/22 Javascript
python爬虫教程之爬取百度贴吧并下载的示例
2014/03/07 Python
用python + hadoop streaming 分布式编程(一) -- 原理介绍,样例程序与本地调试
2014/07/14 Python
python一键去抖音视频水印工具
2018/09/14 Python
python三方库之requests的快速上手
2019/03/04 Python
Python实现KNN(K-近邻)算法的示例代码
2019/03/05 Python
django基于restframework的CBV封装详解
2019/08/08 Python
PYTHON绘制雷达图代码实例
2019/10/15 Python
python使用协程实现并发操作的方法详解
2019/12/27 Python
python、PyTorch图像读取与numpy转换实例
2020/01/13 Python
python计算二维矩形IOU实例
2020/01/18 Python
Python的in,is和id函数代码实例
2020/04/18 Python
通俗讲解python 装饰器
2020/09/07 Python
python通过函数名调用函数的几种场景
2020/09/23 Python
HTML5验证以及日期显示的实现详解
2013/07/05 HTML / CSS
为有想象力的人提供的生活方式商店:Firebox
2018/06/04 全球购物
如何将整数int转换成字串String
2014/03/21 面试题
中科软测试工程师面试题
2012/06/16 面试题
最新个人职业生涯规划书
2014/01/22 职场文书
监察建议书范文
2014/03/12 职场文书
群众路线查摆问题整改措施
2014/10/10 职场文书
法定授权委托证明书
2015/06/18 职场文书
2015中学学校工作总结
2015/07/20 职场文书
部门主管竞聘书
2015/09/15 职场文书