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 鼠标滚轮事件
Apr 09 Javascript
javascript 显示当前系统时间代码
Dec 28 Javascript
jQuery实现的Div窗口震动特效
Jun 09 Javascript
JS验证IP,子网掩码,网关和MAC的方法
Jul 02 Javascript
vue-cli如何引入bootstrap工具的方法
Oct 19 Javascript
详解使用vuex进行菜单管理
Dec 21 Javascript
Vue项目中跨域问题解决方案
Jun 05 Javascript
一文快速详解前端框架 Vue 最强大的功能
May 21 Javascript
对Layer UI 模块化的用法详解
Sep 26 Javascript
Vue中keep-alive组件作用详解
Feb 04 Javascript
vue使用自定义事件的表单输入组件用法详解【日期组件与货币组件】
Jun 01 Javascript
一行JavaScript代码如何实现瀑布流布局
Dec 11 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处理excel cvs表格的方法实例介绍
2013/05/13 PHP
解析PHP中一些可能会被忽略的问题
2013/06/21 PHP
codeigniter框架批量插入数据
2014/01/09 PHP
PHP 字符串长度判断效率更高的方法
2014/03/02 PHP
thinkphp普通查询与表达式查询实例分析
2014/11/24 PHP
PHP Streams(流)详细介绍及使用
2015/05/12 PHP
php session实现多级目录存放实现代码
2016/02/03 PHP
PHP中函数gzuncompress无法使用的解决方法
2017/03/02 PHP
jQuery对象和DOM对象的相互转化实现代码
2010/03/02 Javascript
js检查页面上有无重复id的实现代码
2013/07/17 Javascript
js数组的基本用法及数组根据下标(数值或字符)移除元素
2013/10/20 Javascript
javascript跨域原因以及解决方案分享
2015/04/08 Javascript
响应式表格之固定表头的简单实现
2016/08/26 Javascript
javaScript实现复选框全选反选事件详解
2020/11/20 Javascript
vue中子组件向父组件传递数据的实例代码(实现加减功能)
2018/04/20 Javascript
Vue.js实现备忘录功能
2019/06/26 Javascript
js实现淘宝首页的banner栏效果
2019/11/26 Javascript
javascript全局自定义鼠标右键菜单
2020/12/08 Javascript
vue3 watch和watchEffect的使用以及有哪些区别
2021/01/26 Vue.js
[08:42]DOTA2每周TOP10 精彩击杀集锦vol.2
2014/06/25 DOTA
Python中的XML库4Suite Server的介绍
2015/04/14 Python
详解Python中__str__和__repr__方法的区别
2015/04/17 Python
Python代理IP爬虫的新手使用教程
2019/09/05 Python
在 Python 中使用 7zip 备份文件的操作
2020/12/11 Python
Python用access判断文件是否被占用的实例方法
2020/12/17 Python
美国求婚钻戒网站:Super Jeweler
2016/08/27 全球购物
德国网上宠物店:Zoobio
2018/05/23 全球购物
应届本科生推荐信范文
2013/12/25 职场文书
工程项目建议书范文
2014/03/12 职场文书
村委会换届选举方案
2014/05/03 职场文书
学校欢迎标语
2014/06/18 职场文书
学生安全责任书模板
2014/07/25 职场文书
财务出纳岗位职责
2015/03/31 职场文书
民事起诉书范本
2015/05/19 职场文书
让人瞬间清醒的句子,句句经典,字字如金
2019/07/08 职场文书
JS前端使用canvas实现物体的点选示例
2022/08/05 Javascript