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 动态table添加colspan\rowspan 参数的方法
Jul 25 Javascript
jQuery EasyUI API 中文文档 - TreeGrid 树表格使用介绍
Nov 21 Javascript
利用JS实现浏览器的title闪烁
Jul 08 Javascript
文本域光标操作的jQuery扩展分享
Mar 10 Javascript
Javascript玩转继承(一)
May 08 Javascript
基于Bootstrap的UI扩展 StyleBootstrap
Jun 17 Javascript
Javascript获取background属性中url的值
Oct 17 Javascript
基于Three.js插件制作360度全景图
Nov 29 Javascript
JavaScript实现Fly Bird小游戏
Dec 15 Javascript
在Express中提供静态文件的实现方法
Oct 17 Javascript
解决VUE mounted 钩子函数执行时 img 未加载导致页面布局的问题
Jul 27 Javascript
Vue实现boradcast和dispatch的示例
Nov 13 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在字符串中查找指定字符串并删除的代码
2008/10/02 PHP
PHP header函数分析详解
2011/08/06 PHP
学习php分页代码实例
2013/10/24 PHP
php cli换行示例
2014/04/22 PHP
PHP实现阳历到农历转换的类实例
2015/03/07 PHP
PHP随机生成信用卡卡号的方法
2015/03/23 PHP
PHP实现图片自动清理的方法
2015/07/08 PHP
Zend Framework创建自己的动作助手详解
2016/03/05 PHP
php中array_column函数简单实现方法
2016/07/11 PHP
php性能分析之php-fpm慢执行日志slow log用法浅析
2016/10/17 PHP
select、radio表单回显功能实现避免使用jquery载入赋值
2013/06/08 Javascript
javaScript如何处理从java后台返回的list
2014/04/24 Javascript
jquery的clone方法应用于textarea和select的bug修复
2014/06/26 Javascript
node.js中的fs.rename方法使用说明
2014/12/16 Javascript
分享我的jquery实现下拉菜单心的
2015/11/29 Javascript
总结JavaScript设计模式编程中的享元模式使用
2016/05/21 Javascript
微信小程序(应用号)开发新闻客户端实例
2016/10/24 Javascript
漂亮实用的页面loading(加载)封装代码
2017/02/03 Javascript
jQuery快速实现商品数量加减的方法
2017/02/06 Javascript
10个在JavaScript开发中常遇到的BUG
2017/12/18 Javascript
vue2.0实现移动端的输入框实时检索更新列表功能
2018/05/08 Javascript
小程序云函数调用API接口的方法
2019/05/17 Javascript
vue-router 控制路由权限的实现
2020/09/24 Javascript
python顺序执行多个py文件的方法
2019/06/29 Python
Flask框架模板渲染操作简单示例
2019/07/31 Python
在Python 的线程中运行协程的方法
2020/02/24 Python
python爬虫中PhantomJS加载页面的实例方法
2020/11/12 Python
利用python如何实现猫捉老鼠小游戏
2020/12/04 Python
python和opencv构建运动检测器的实现
2021/03/03 Python
金蝶的一道SQL笔试题
2012/12/18 面试题
《青海高原一株柳》教学反思
2014/04/25 职场文书
关于旅游的活动方案
2014/08/15 职场文书
Python可变集合和不可变集合的构造方法大全
2021/12/06 Python
经典《舰娘》游改全新动画预告 预定11月开播
2022/04/01 日漫
Netflix《海贼王》真人版剧集多张片场照曝光
2022/04/04 日漫
Redis中key的过期删除策略和内存淘汰机制
2022/04/12 Redis