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 相关文章推荐
很全的显示阴历(农历)日期的js代码
Jan 01 Javascript
Javascript模块化编程(三)require.js的用法及功能介绍
Jan 17 Javascript
JSON格式的键盘编码对照表
Jan 29 Javascript
javascript实现表格增删改操作实例详解
May 15 Javascript
JavaScript ParseFloat()方法
Dec 18 Javascript
js实现下拉菜单效果
Mar 01 Javascript
JavaScript手风琴页面制作
May 17 Javascript
Vue单页面应用保证F5强刷不清空数据的解决方案
Jan 31 Javascript
JavaScript对象的浅拷贝与深拷贝实例分析
Jul 25 Javascript
默认浏览器设置及vue自动打开页面的方法
Sep 21 Javascript
详解用JS添加和删除class类名
Mar 25 Javascript
jQuery弹框插件使用方法详解
May 26 jQuery
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显示MySQL数据的三种方法
2008/06/05 PHP
php标签云的实现代码
2012/10/10 PHP
兼容PHP和Java的des加密解密代码分享
2014/06/26 PHP
js右键菜单效果代码
2007/07/21 Javascript
js 代码集(学习js的朋友可以看下)
2009/07/22 Javascript
JavaScript 计算图片加载数量的代码
2011/01/01 Javascript
实现局部遮罩与关闭原理及代码
2013/02/04 Javascript
javascript动态创建链接的方法
2015/05/13 Javascript
JavaScript获取两个数组交集的方法
2015/06/09 Javascript
函数四种调用模式以及其中的this指向
2017/01/16 Javascript
JavaScript循环_动力节点Java学院整理
2017/06/28 Javascript
5分钟教你用nodeJS手写一个mock数据服务器的方法
2019/09/10 NodeJs
JavaScript对象字面量和构造函数原理与用法详解
2020/04/18 Javascript
JS原形与原型链深入详解
2020/05/09 Javascript
[03:12]完美世界DOTA2联赛PWL DAY6集锦
2020/11/05 DOTA
提升Python程序运行效率的6个方法
2015/03/31 Python
Python求出0~100以内的所有素数
2018/01/23 Python
在python中list作函数形参,防止被实参修改的实现方法
2020/06/05 Python
python exit出错原因整理
2020/08/31 Python
python更新数据库中某个字段的数据(方法详解)
2020/11/18 Python
python3爬虫中引用Queue的实例讲解
2020/11/24 Python
python线程优先级队列知识点总结
2021/02/28 Python
css3编写浏览器背景渐变背景色的方法
2018/03/05 HTML / CSS
HTML5中微数据概述及在搜索引擎中的使用举例
2013/02/07 HTML / CSS
日本最大级玩偶手办购物:あみあみ Amiami
2018/04/23 全球购物
个人求职信范文分享
2013/12/13 职场文书
餐厅销售主管职责范本
2014/02/19 职场文书
博士生导师推荐信
2014/07/08 职场文书
学习张林森心得体会
2014/09/10 职场文书
教师自我剖析材料(四风问题)
2014/09/30 职场文书
地球一小时活动总结
2015/02/27 职场文书
辞职信格式模板
2015/02/27 职场文书
公司2015年终工作总结
2015/05/26 职场文书
“学党章、守党纪、讲党规”学习心得体会
2016/01/14 职场文书
Python中 range | np.arange | np.linspace三者的区别
2022/03/22 Python
使用 Docker Compose 构建复杂的多容器App
2022/04/30 Servers