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 相关文章推荐
javascript 面向对象的JavaScript类
May 04 Javascript
JS异常处理的一个想法(sofish)
Mar 14 Javascript
重写document.write实现无阻塞加载js广告(补充)
Dec 12 Javascript
实例讲解避免javascript冲突的方法
Jan 03 Javascript
详解vue2父组件传递props异步数据到子组件的问题
Jun 29 Javascript
利用Three.js如何实现阴影效果实例代码
Sep 26 Javascript
vue双花括号的使用方法 附练习题
Nov 07 Javascript
JavaScript伪数组用法实例分析
Dec 22 Javascript
JS实现调用本地摄像头功能示例
May 18 Javascript
vue 列表页跳转详情页获取id以及详情页通过id获取数据
Mar 27 Javascript
微信小程序实现吸顶效果
Jan 08 Javascript
AJAX XMLHttpRequest对象创建使用详解
Aug 20 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 变量类型的强制转换
2009/10/23 PHP
PHP的explode和implode的使用说明
2011/07/17 PHP
php使用Jpgraph绘制简单X-Y坐标图的方法
2015/06/10 PHP
JavaScript 动态添加表格行 使用模板、标记
2009/10/24 Javascript
jquery1.4后 jqDrag 拖动 不可用
2010/02/06 Javascript
原生js实现跨浏览器获取鼠标按键的值
2013/04/08 Javascript
JQuery中SetTimeOut传参问题探讨
2013/05/10 Javascript
几种延迟加载JS代码的方法加快网页的访问速度
2013/10/12 Javascript
jQuery插件jPaginate实现无刷新分页
2015/05/04 Javascript
jQuery中设置form表单中action值的实现方法
2016/05/25 Javascript
js获取当前年月日-YYYYmmDD格式的实现代码
2016/06/01 Javascript
用nodejs的实现原理和搭建服务器(动态)
2016/08/10 NodeJs
jQuery中JSONP的两种实现方式详解
2016/09/26 Javascript
JS函数多个参数默认值指定方法分析
2016/11/28 Javascript
JS实现的简单分页功能示例
2018/08/23 Javascript
微信小程序自定义键盘 内部虚拟支付
2018/12/20 Javascript
浅谈发布订阅模式与观察者模式
2019/04/09 Javascript
关于vue-cli 3配置打包优化要点(推荐)
2019/04/22 Javascript
微信小程序如何实现全局重新加载
2019/06/05 Javascript
js 数据类型判断的方法
2020/12/03 Javascript
python reduce 函数使用详解
2017/12/05 Python
pygame游戏之旅 游戏中添加显示文字
2018/11/20 Python
python监测当前联网状态并连接的实例
2018/12/18 Python
django 2.2和mysql使用的常见问题
2019/07/18 Python
python获取全国城市pm2.5、臭氧等空气质量过程解析
2019/10/12 Python
Python Pandas数据分析工具用法实例
2020/11/05 Python
业务员岗位职责范本
2013/12/15 职场文书
电厂厂长岗位职责
2014/01/02 职场文书
会计专业大学生职业生涯规划书
2014/02/11 职场文书
运动会通讯稿200字
2014/02/16 职场文书
学习雷锋精神心得体会范文
2014/03/12 职场文书
总经理工作职责范文
2014/03/14 职场文书
放飞中国梦演讲稿
2014/04/23 职场文书
俞敏洪北大演讲稿
2014/05/22 职场文书
借钱欠条怎么写
2015/07/03 职场文书
SQL Server 数据库实验课第五周——常用查询条件
2021/04/05 SQL Server