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 相关文章推荐
jQuery操作select的实例代码
Jun 14 Javascript
js全屏显示显示代码的三种方法
Nov 11 Javascript
推荐10 款 SVG 动画的 JavaScript 库
Mar 24 Javascript
jquery实现带缩略图的可定制高度画廊效果(5种)
Aug 28 Javascript
JavaScript对象数组排序函数及六个用法
Dec 23 Javascript
详解vue 模版组件的三种用法
Jul 21 Javascript
swiper插件自定义切换箭头按钮
Dec 28 Javascript
jQuery+CSS实现的table表格行列转置功能示例
Jan 08 jQuery
vue安装和使用scss及sass与scss的区别详解
Oct 15 Javascript
微信小程序全局变量功能与用法详解
Jan 22 Javascript
js控制随机数生成概率代码实例
Mar 21 Javascript
Vue CLI3中使用compass normalize的方法
May 30 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 curl请求信息和返回信息设置代码实例
2015/04/27 PHP
PHP 序列化和反序列化函数实例详解
2020/07/18 PHP
Ajax中的JSON格式与php传输过程全面解析
2017/11/14 PHP
调试php程序的简单步骤
2019/10/04 PHP
ExtJs扩展之GroupPropertyGrid代码
2010/03/05 Javascript
js 纯数字不重复排列的另类方法
2010/07/17 Javascript
基于jQuery的动态增删改查表格信息,可左键/右键提示(原创自Zjmainstay)
2012/07/31 Javascript
如何利用JS通过身份证号获取当事人的生日、年龄、性别
2016/01/22 Javascript
JavaScript数据结构与算法之集合(Set)
2016/01/29 Javascript
微信小程序 后台https域名绑定和免费的https证书申请详解
2016/11/10 Javascript
浅谈在fetch方法中添加header后遇到的预检请求问题
2017/08/31 Javascript
浅谈angular.copy() 深拷贝
2017/09/14 Javascript
微信小程序中post方法与get方法的封装
2017/09/26 Javascript
React Native 搭建开发环境的方法步骤
2017/10/30 Javascript
微信小程序支付及退款流程详解
2017/11/30 Javascript
Vue的生命周期操作示例
2019/09/17 Javascript
js实现网页随机验证码
2020/10/19 Javascript
windows下安装Python和pip终极图文教程
2017/03/05 Python
如何使用Python实现自动化水军评论
2019/06/26 Python
使用Django搭建web服务器的例子(最最正确的方式)
2019/08/29 Python
Python3+Requests+Excel完整接口自动化测试框架的实现
2019/10/11 Python
解决Django提交表单报错:CSRF token missing or incorrect的问题
2020/03/13 Python
解决Ubuntu18中的pycharm不能调用tensorflow-gpu的问题
2020/09/17 Python
HTML5 Canvas旋转动画的2个代码例子(一个旋转的太极图效果)
2014/04/10 HTML / CSS
谈一谈HTML5本地存储技术
2016/03/02 HTML / CSS
SQL中where和having的区别
2012/06/17 面试题
程序集与命名空间有什么不同
2014/07/25 面试题
机电一体化专业应届本科生求职信
2013/09/27 职场文书
教师实习自我鉴定
2013/12/13 职场文书
活动志愿者自荐信
2014/01/27 职场文书
销售总经理岗位职责
2014/03/15 职场文书
幼儿园老师寄语
2014/04/03 职场文书
艺人经纪人岗位职责
2014/04/15 职场文书
初中英语教师个人工作总结
2015/02/09 职场文书
公证书
2019/04/17 职场文书
Python-typing: 类型标注与支持 Any类型详解
2021/05/10 Python