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 相关文章推荐
一个分享按钮的插件使用介绍(可扩展,内附开发制作流程)
Sep 19 Javascript
jQuery实现点击标题输入详细信息
Apr 16 Javascript
浅谈JS闭包中的循环绑定处理程序
Nov 09 Javascript
使用Object.defineProperty实现简单的js双向绑定
Apr 15 Javascript
jQuery中页面返回顶部的方法总结
Dec 30 Javascript
js中小数向上取整数,向下取整数,四舍五入取整数的实现(必看篇)
Feb 13 Javascript
Javascript中将变量转换为字符串的三种方法
Sep 19 Javascript
详解在express站点中使用ejs模板引擎
Sep 21 Javascript
详解Vue项目编译后部署在非网站根目录的解决方案
Apr 26 Javascript
layui字体图标 loading图标静止不旋转的解决方法
Sep 23 Javascript
微信jssdk踩坑之签名错误invalid signature
May 19 Javascript
11个Javascript小技巧帮你提升代码质量(小结)
Dec 28 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
兼容ie6浏览器的php下载文件代码分享
2014/07/14 PHP
非常实用的PHP常用函数汇总
2014/12/17 PHP
PHP积分兑换接口实例
2015/02/09 PHP
PHP中empty和isset对于参数结构的判断及empty()和isset()的区别
2015/11/15 PHP
php获取ip及网址的简单方法(必看)
2017/04/01 PHP
php微信开发之音乐回复功能
2018/06/14 PHP
thinkPHP框架通过Redis实现增删改查操作的方法详解
2019/05/13 PHP
jQuery live
2009/05/15 Javascript
javascript 检测浏览器类型和版本的代码
2009/09/15 Javascript
一个XML格式数据转换为图表的例子
2010/02/09 Javascript
基于jQuery的消息提示插件之旅 DivAlert(三)
2010/04/01 Javascript
jquery命令汇总,方便使用jquery的朋友
2012/06/26 Javascript
理解javascript回调函数
2014/12/28 Javascript
初步了解javascript面向对象
2015/11/09 Javascript
使用Angular缓存父页面数据的方法
2017/01/03 Javascript
js时间控件只显示年月
2017/01/08 Javascript
jquery 判断是否支持Placeholder属性的方法
2017/02/07 Javascript
Vue服务端渲染和Vue浏览器端渲染的性能对比(实例PK )
2017/03/31 Javascript
你应该知道的几类npm依赖包管理详解
2017/10/06 Javascript
360提示[高危]使用存在漏洞的JQuery版本的解决方法
2017/10/27 jQuery
详解angular分页插件tm.pagination二次触发问题解决方案
2018/07/20 Javascript
浅谈ElementUI中switch回调函数change的参数问题
2018/08/24 Javascript
jQuery实现鼠标移入移出事件切换功能示例
2018/09/06 jQuery
17道题让你彻底理解JS中的类型转换
2019/08/08 Javascript
[25:59]Newbee vs TNC 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
[01:00:14]DOTA2官方TI8总决赛纪录片 真视界True Sight
2019/01/16 DOTA
PyTorch快速搭建神经网络及其保存提取方法详解
2018/04/28 Python
利用python-docx模块写批量生日邀请函
2019/08/26 Python
python安装virtualenv虚拟环境步骤图文详解
2019/09/18 Python
python IDLE添加行号显示教程
2020/04/25 Python
在Tensorflow中实现leakyRelu操作详解(高效)
2020/06/30 Python
解决Pyinstaller打包软件失败的一个坑
2021/03/04 Python
英国家庭珠宝商:T. H. Baker
2018/02/08 全球购物
精彩自我鉴定
2014/01/16 职场文书
学校班子个人对照检查材料思想汇报
2014/09/27 职场文书
Python开发简易五子棋小游戏
2022/05/02 Python