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 事件记录使用说明
Oct 20 Javascript
通过Javascript读取本地Excel文件内容的代码示例
Apr 08 Javascript
js实现的黑背景灰色二级导航菜单效果代码
Aug 24 Javascript
jQuery实现带水平滑杆的焦点图动画插件
Mar 08 Javascript
Svg.js实例教程及使用手册详解(一)
May 16 Javascript
基于JS实现导航条flash导航条
Jun 17 Javascript
Vue.js系列之项目结构说明(2)
Jan 03 Javascript
使用jquery判断一个元素是否含有一个指定的类(class)实例
Feb 12 Javascript
深入浅析angular和vue还有jquery的区别
Aug 13 jQuery
Vue.js点击切换按钮改变内容的实例讲解
Aug 22 Javascript
Vue中mintui的field实现blur和focus事件的方法
Aug 25 Javascript
vue router带参数页面刷新或回退参数消失的解决方法
Feb 27 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格式输出文件var_export函数实例
2014/11/15 PHP
基于JQuery的6个Tab选项卡插件
2010/09/03 Javascript
减少访问DOM的次数提升javascript性能
2014/02/24 Javascript
file控件选择上传文件确定后触发的js事件是哪个
2014/03/17 Javascript
node+express+ejs制作简单页面上手指南
2014/11/26 Javascript
JavaScript检查数字是否为整数或浮点数的方法
2015/06/09 Javascript
js检查是否关闭浏览器的方法
2016/08/02 Javascript
JS常用知识点整理
2017/01/21 Javascript
Angularjs 双向绑定时字符串的转换成数字类型的问题
2017/06/12 Javascript
React中使用collections时key的重要性详解
2017/08/07 Javascript
微信小程序之页面跳转和参数传递的实现
2017/09/29 Javascript
vue里面使用mui的弹出日期选择插件实例
2018/09/16 Javascript
解决Vue使用swiper动态加载数据,动态轮播数据显示白屏的问题
2018/09/27 Javascript
layui加载数据显示loading加载完成loading消失的实例代码
2019/09/23 Javascript
vue项目打包之开发环境和部署环境的实现
2020/04/23 Javascript
JavaScript位置参数实现原理及过程解析
2020/09/14 Javascript
vue实现图片裁剪后上传
2020/12/16 Vue.js
python解决字典中的值是列表问题的方法
2013/03/04 Python
python使用ctypes模块调用windowsapi获取系统版本示例
2014/04/17 Python
跟老齐学Python之有容乃大的list(4)
2014/09/28 Python
使用Python装饰器在Django框架下去除冗余代码的教程
2015/04/16 Python
Python之日期与时间处理模块(date和datetime)
2017/02/16 Python
python绘制铅球的运行轨迹代码分享
2017/11/14 Python
Python中免验证跳转到内容页的实例代码
2020/10/23 Python
python用opencv 图像傅里叶变换
2021/01/04 Python
socket.io 和canvas 实现的共享画板功能
2019/05/22 HTML / CSS
大学生入党自我鉴定
2013/10/31 职场文书
老师给学生的表扬信
2014/01/17 职场文书
《我的伯父鲁迅先生》教学反思
2014/02/12 职场文书
《挑山工》的教学反思
2014/02/16 职场文书
领导班子自我剖析材料
2014/08/16 职场文书
2014年测量员工作总结
2014/12/12 职场文书
党建工作目标管理责任书
2015/01/29 职场文书
2016年五一劳动节专题校园广播稿
2015/12/17 职场文书
Python中可变和不可变对象的深入讲解
2021/08/02 Python
日本十大血腥动漫,那些被禁播的动漫盘点
2022/03/21 日漫