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实现关联数据(Linked Data)查询及注意细节
Feb 22 Javascript
JavaScript 和 Java 的区别浅析
Jul 31 Javascript
javascript闭包传参和事件的循环绑定示例探讨
Apr 17 Javascript
jQuery实现平滑滚动的标签分栏切换效果
Aug 28 Javascript
文本框只能输入数字的js代码(含小数点)
Jul 10 Javascript
JS短信验证码倒计时功能的实现(没有验证码,只有倒计时)
Oct 27 Javascript
微信小程序 wx.request(接口调用方式)详解及实例
Nov 23 Javascript
Javascript封装id、class与元素选择器方法示例
Mar 13 Javascript
JS和Canvas实现图片的预览压缩和上传功能
Mar 30 Javascript
Vue动态创建注册component的实例代码
Jun 14 Javascript
js获取对象,数组所有属性键值(key)和对应值(value)的方法示例
Jun 19 Javascript
vue选项卡切换登录方式小案例
Sep 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开发中常用的字符串操作函数
2011/02/08 PHP
php从文件夹随机读取文件的方法
2015/06/01 PHP
yii2.0整合阿里云oss上传单个文件的示例
2017/09/19 PHP
javascript 面向对象思想 附源码
2009/07/07 Javascript
JS动态调用方法名示例介绍
2013/12/18 Javascript
js 动态加载事件的几种方法总结
2013/12/25 Javascript
jquery ajax,ashx,json的用法总结
2014/02/12 Javascript
JsRender for object语法简介
2014/10/31 Javascript
让javascript加载速度倍增的方法(解决JS加载速度慢的问题)
2014/12/12 Javascript
JavaScript实现图片DIV竖向滑动的方法
2015/04/25 Javascript
jQuery中常用的遍历函数用法实例总结
2015/09/01 Javascript
php利用curl获取远程图片实现方法
2015/10/26 Javascript
jQuery实现控制文字内容溢出用省略号(…)表示的方法
2016/02/26 Javascript
浅谈JS中json数据的处理
2016/06/30 Javascript
深入浅析JavaScript函数前面的加号和叹号
2016/07/09 Javascript
jQuery分页插件jquery.pagination.js使用方法解析
2017/02/09 Javascript
ES6下React组件的写法示例代码
2017/05/04 Javascript
JS库之ParticlesJS使用简介
2017/09/12 Javascript
使用微信小程序开发弹出框应用实例详解
2018/10/18 Javascript
node Buffer缓存区常见操作示例
2019/05/04 Javascript
jQuery实现的鼠标拖动画矩形框示例【可兼容IE8】
2019/05/17 jQuery
js中let能否完全替代IIFE
2019/06/15 Javascript
React Ant Design树形表格的复杂增删改操作
2020/11/02 Javascript
使用setup.py安装python包和卸载python包的方法
2013/11/27 Python
python实现SMTP邮件发送功能
2020/06/16 Python
Python实现求解括号匹配问题的方法
2018/04/17 Python
Python动态赋值的陷阱知识点总结
2019/03/17 Python
Python对excel的基本操作方法
2021/02/18 Python
在线课程:Skillshare
2019/04/02 全球购物
优秀教师先进事迹
2014/01/22 职场文书
2014年预备党员学习两会心得体会
2014/03/17 职场文书
法院四风对照检查材料思想汇报
2014/10/06 职场文书
幼儿园亲子活动感想
2015/08/07 职场文书
适合毕业生创业的项目怎么找?
2019/08/08 职场文书
古诗之爱国古诗5首
2019/09/20 职场文书
python可视化分析绘制带趋势线的散点图和边缘直方图
2022/06/25 Python