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广告实现代码
Nov 17 Javascript
简短几句 通俗解释javascript的闭包
Jan 17 Javascript
javascript检查表单数据是否改变的方法
Jul 30 Javascript
javascript实现yield的方法
Nov 06 Javascript
AngularJs Javascript MVC 框架
Jun 20 Javascript
js实现自定义进度条效果
Mar 15 Javascript
详解webpack介绍&amp;安装&amp;常用命令
Jun 29 Javascript
js原生代码实现轮播图的实例讲解
Jul 28 Javascript
Vue CLI3 开启gzip压缩文件的方式
Sep 30 Javascript
深入浅析js原型链和vue构造函数
Oct 25 Javascript
Vue this.$router.push(参数)实现页面跳转操作
Sep 09 Javascript
Element-ui Layout布局(Row和Col组件)的实现
Dec 06 Vue.js
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访问RabbitMQ消息队列的方法示例
2018/06/06 PHP
PHP asXML()函数讲解
2019/02/03 PHP
PHP反射基础知识回顾
2020/09/10 PHP
jquery.validate使用攻略 第五步 正则验证
2010/07/01 Javascript
Javascript中定义方法的另类写法(批量定义js对象的方法)
2011/02/25 Javascript
面向对象设计模式的核心法则
2013/11/10 Javascript
深入分析下javascript中的[]()+!
2015/07/07 Javascript
浅析JSONP技术原理及实现
2016/06/08 Javascript
基于node.js制作简单爬虫教程
2017/06/29 Javascript
Express进阶之log4js实用入门指南
2018/02/10 Javascript
详解async/await 异步应用的常用场景
2019/05/13 Javascript
JS学习笔记之贪吃蛇小游戏demo实例详解
2019/05/29 Javascript
ES6基础之 Promise 对象用法实例详解
2019/08/22 Javascript
JsonProperty 的使用方法详解
2019/10/11 Javascript
原生JS实现无缝轮播图片
2020/06/24 Javascript
[52:26]完美世界DOTA2联赛决赛 FTD vs Phoenix 第一场 11.08
2020/11/11 DOTA
Python模块学习 filecmp 文件比较
2012/08/27 Python
pyqt4教程之messagebox使用示例分享
2014/03/07 Python
使用Python的Flask框架构建大型Web应用程序的结构示例
2016/06/04 Python
Python开发中爬虫使用代理proxy抓取网页的方法示例
2017/09/26 Python
浅谈Python用QQ邮箱发送邮件时授权码的问题
2018/01/29 Python
PyQt5每天必学之事件与信号
2018/04/20 Python
Python2实现的图片文本识别功能详解
2018/07/11 Python
Python 实现文件打包、上传与校验的方法
2019/02/13 Python
如何配置关联Python 解释器 Anaconda的教程(图解)
2020/04/30 Python
python变量的作用域是什么
2020/05/26 Python
Python变量及数据类型用法原理汇总
2020/08/06 Python
纯CSS3代码实现文字描边
2016/04/25 HTML / CSS
美国大尺码女装零售商:TORRID
2016/10/01 全球购物
客户表扬信范文
2014/01/10 职场文书
《乡下孩子》教学反思
2014/04/17 职场文书
大型主题婚礼活动策划方案
2014/09/15 职场文书
领导班子整改措施
2014/10/24 职场文书
Windows10下安装MySQL8
2021/04/06 MySQL
vue中div禁止点击事件的实现
2022/04/02 Vue.js
Python 操作pdf pdfplumber读取PDF写入Exce
2022/08/14 Python