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 相关文章推荐
ASP.NET中使用后端代码注册脚本 生成JQUERY-EASYUI的界面错位的解决方法
Jun 12 Javascript
JavaScript 图像动画的小demo
May 23 Javascript
基于jQuery的烟花效果(运动相关)点击屏幕出烟花
Jun 14 Javascript
基于jquery animate操作css样式属性小结
Nov 27 Javascript
JavaScript中iframe实现局部刷新的几种方法汇总
Jan 06 Javascript
Bootstrap零基础入门教程(三)
Jul 18 Javascript
Javascript实现一个简单的输入关键字添加标签效果实例
Jun 01 Javascript
10个最优秀的Node.js MVC框架
Aug 24 Javascript
JS温故而知新之变量提升和时间死区
Jan 27 Javascript
JavaScript惰性载入函数实例分析
Mar 27 Javascript
js中值引用和地址引用实例分析
Jun 21 Javascript
浅析JavaScript预编译和暗示全局变量
Sep 03 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
实现dedecms全站URL静态化改造的代码
2007/03/29 PHP
php7 错误处理机制修改实例分析
2020/05/25 PHP
通过AJAX的JS、JQuery两种方式解析XML示例介绍
2013/09/23 Javascript
javascript中match函数的用法小结
2014/02/08 Javascript
JS 获取浏览器和屏幕宽高等信息代码
2014/03/31 Javascript
JavaScript中的Web worker多线程API研究
2014/12/06 Javascript
node.js中的fs.unlinkSync方法使用说明
2014/12/15 Javascript
js实现完全自定义可带多级目录的网页鼠标右键菜单方法
2015/02/28 Javascript
跟我学习javascript的严格模式
2015/11/16 Javascript
详解JavaScript中数组和字符串的lastIndexOf()方法使用
2016/03/13 Javascript
浅谈JavaScript的全局变量与局部变量
2016/06/10 Javascript
深入理解Node.js的HTTP模块
2016/10/12 Javascript
几种tab切换详解
2017/02/03 Javascript
xmlplus组件设计系列之网格(DataGrid)(10)
2017/05/05 Javascript
解决vue的变量在settimeout内部效果失效的问题
2018/08/30 Javascript
详解JavaScript中的this指向问题
2021/02/05 Javascript
[03:17]史诗级大片应援2018DOTA2国际邀请赛 致敬每一位坚守遗迹的勇士
2018/07/20 DOTA
Python中使用strip()方法删除字符串中空格的教程
2015/05/20 Python
用Django实现一个可运行的区块链应用
2018/03/08 Python
django初始化数据库的实例
2018/05/27 Python
django框架使用views.py的函数对表进行增删改查内容操作详解【models.py中表的创建、views.py中函数的使用,基于对象的跨表查询】
2019/12/12 Python
Python中使用filter过滤列表的一个小技巧分享
2020/05/02 Python
解决Django Haystack全文检索为空的问题
2020/05/19 Python
美国护肤咨询及美容产品电商:Askderm
2017/02/24 全球购物
毕业生求职自荐书范文
2014/03/27 职场文书
煤矿安全生产责任书
2014/04/15 职场文书
美术第二课堂活动总结
2014/07/08 职场文书
放飞梦想演讲稿200字
2014/08/26 职场文书
二年级语文上册复习计划
2015/01/19 职场文书
心术观后感
2015/06/11 职场文书
《角的初步认识》教学反思
2016/02/17 职场文书
Nginx配置SSL证书出错解决方案
2021/03/31 Servers
golang http使用踩过的坑与填坑指南
2021/04/27 Golang
Linux系统下安装PHP7.3版本
2021/06/26 PHP
html解决浏览器记住密码输入框的问题
2023/05/07 HTML / CSS
HTML5中的DOCUMENT.VISIBILITYSTATE属性详解
2023/05/07 HTML / CSS