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 页面只自动刷新一次
Jul 10 Javascript
JQuery中getJSON的使用方法
Dec 13 Javascript
JavaScript控制table某列不显示的方法
Mar 16 Javascript
javascript实现淘宝幻灯片广告展示效果
Apr 27 Javascript
Javascript验证Visa和MasterCard信用卡号的方法
Jul 27 Javascript
ionic实现可滑动的tab选项卡切换效果
Apr 15 Javascript
jQuery.Validate表单验证插件的使用示例详解
Jan 04 Javascript
HTML中使背景图片自适应浏览器大小实例详解
Apr 06 Javascript
AngularJS实现tab选项卡的方法详解
Jul 05 Javascript
浅入深出Vue之组件使用
Jul 11 Javascript
vue动态子组件的两种实现方式
Sep 01 Javascript
express中static中间件的具体使用方法
Oct 17 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文件上传及下载附带显示文件及目录功能
2017/04/27 PHP
PHP7 echo和print语句实例用法
2019/02/15 PHP
php服务器的系统详解
2019/10/12 PHP
基于jquery实现的可以编辑选择的下拉框的代码
2010/11/19 Javascript
零基础搭建Node.js、Express、Ejs、Mongodb服务器及应用开发入门
2014/12/20 Javascript
jQuery中contents()方法用法实例
2015/01/08 Javascript
基于JS实现数字+字母+中文的混合排序方法
2016/06/06 Javascript
JS实现随机颜色的3种方法与颜色格式的转化
2017/01/05 Javascript
js的三种继承方式详解
2017/01/21 Javascript
利用node.js爬取指定排名网站的JS引用库详解
2017/07/25 Javascript
jquery中done和then的区别(详解)
2017/12/19 jQuery
JavaScript简单实现关键字文本搜索高亮显示功能示例
2018/07/25 Javascript
解决vue的变量在settimeout内部效果失效的问题
2018/08/30 Javascript
JS中超越现实的匿名函数用法实例分析
2019/06/21 Javascript
微信小程序HTTP接口请求封装代码实例
2019/09/05 Javascript
前端vue-cli项目中使用img图片和background背景图的几种方法
2019/11/13 Javascript
koa-passport实现本地验证的方法示例
2020/02/20 Javascript
[01:13]2014DOTA2西雅图邀请赛 舌尖上的TI4
2014/07/08 DOTA
Python实现的简单万年历例子分享
2014/04/25 Python
20招让你的Python飞起来!
2016/09/27 Python
python使用turtle库绘制时钟
2020/03/25 Python
python调用staf自动化框架的方法
2018/12/26 Python
python爬取基于m3u8协议的ts文件并合并
2019/04/26 Python
Django crontab定时任务模块操作方法解析
2020/09/10 Python
python实现AdaBoost算法的示例
2020/10/03 Python
Python pip 常用命令汇总
2020/10/19 Python
css3类选择器之结合元素选择器和多类选择器用法
2017/03/09 HTML / CSS
CSS3实现的渐变幻灯片效果
2020/12/07 HTML / CSS
如何强制垃圾回收
2015/10/06 面试题
学生拾金不昧表扬信
2014/01/21 职场文书
先进事迹报告会感言
2014/01/24 职场文书
人事专员工作职责
2014/02/22 职场文书
初中教师业务学习材料
2014/05/12 职场文书
2016年11月份红领巾广播稿
2015/12/21 职场文书
nginx.conf配置文件结构小结
2022/04/08 Servers
MySQL 数据库 增删查改、克隆、外键 等操作
2022/05/11 MySQL