网站首页 > 基础教程 正文
有以下老照片文件夹：
写一个批处理(bat)自动建立图片网页，并有并对每一图片以文件做描述，网页使用<div>标签，宽度为74.125%，div居中，内容左对齐，图片宽度如果超过这个宽度，自动使用这个宽度，效果如下：
使用的CSS：
<style type=text/css>
div{width:74.125%;}
div{margin:auto;}
img{display:block;}
img{padding:2px 0px 16px 0px;}
img{border:0 red solid;}
a:link{text-decoration: none; color:#fff;}
</style>使用的JS：
<script>
window.onload = function() { // 超出容器宽度的图片按容器宽度显示
var div = document.getElementsByTagName("div");
//var _w = div.offsetWidth; // 返回元素的总宽度
var _w = document.querySelector(".wrap").offsetWidth
var Imgarray = document.getElementsByTagName("img");
var realWidth; //真实的宽度
var realHeight; //真实的高度
for (var i = 0; i < Imgarray.length; i++) {
var imgtemp = new Image(); //创建一个image对象
imgtemp.src = Imgarray[i].src;
imgtemp.index = i; //指定一个检索值，用于确定是哪张图
imgtemp.onload = function() { //图片加载完成后执行
var _stemp = this; //将当前指针复制给新的变量，不然会导致变量共用
realWidth = this.width;
if (realWidth >= _w) {
Imgarray[_stemp.index].style.width = _w + 'px';
} else {
Imgarray[_stemp.index].style.width = realWidth + 'px';
}}}}
</script> 批处理(bat)生成的html
<div class=wrap>
<p style="text-indent:-2em;">The three Soong sisters1940 ↓</p>
<a href="The three Soong sisters1940.png" title="The three Soong sisters1940.png"><img src="The three Soong sisters1940.png" /></a>
<p style="text-indent:-2em;">邓颖超和周恩来1970 ↓</p>
<a href="邓颖超和周恩来1970.jpg" title="邓颖超和周恩来1970.jpg"><img src="邓颖超和周恩来1970.jpg" /></a>
<p style="text-indent:-2em;">李讷、林豆豆、聂力、陶斯亮1961 ↓</p>
<a href="李讷、林豆豆、聂力、陶斯亮1961.jpg" title="李讷、林豆豆、聂力、陶斯亮1961.jpg"><img src="李讷、林豆豆、聂力、陶斯亮1961.jpg" /></a>
<p style="text-indent:-2em;">刘少奇、王光美1948 ↓</p>
<a href="刘少奇、王光美1948.jpg" title="刘少奇、王光美1948.jpg"><img src="刘少奇、王光美1948.jpg" /></a>
<p style="text-indent:-2em;">毛岸英与刘思齐 ↓</p>
<a href="毛岸英与刘思齐.jpg" title="毛岸英与刘思齐.jpg"><img src="毛岸英与刘思齐.jpg" /></a>
<p style="text-indent:-2em;">钱钟书与杨绛1934 ↓</p>
<a href="钱钟书与杨绛1934.jpg" title="钱钟书与杨绛1934.jpg"><img src="钱钟书与杨绛1934.jpg" /></a>
<p style="text-indent:-2em;">孙中山和宋庆龄 ↓</p>
<a href="孙中山和宋庆龄.jpg" title="孙中山和宋庆龄.jpg"><img src="孙中山和宋庆龄.jpg" /></a>
<p style="text-indent:-2em;">杨振宁、李政道、杜致礼、秦惠jun ↓</p>
<a href="杨振宁、李政道、杜致礼、秦惠jun.jpg" title="杨振宁、李政道、杜致礼、秦惠jun.jpg"><img src="杨振宁、李政道、杜致礼、秦惠jun.jpg" /></a>
<p style="text-indent:-2em;">朱毛邓周 ↓</p>
<a href="朱毛邓周.jpg" title="朱毛邓周.jpg"><img src="朱毛邓周.jpg" /></a>
<p style="text-indent:-2em;">走完长征路的四位女红军陈琮英（任弼时夫人）、蔡畅、夏明、刘英（张闻天夫人）1937 ↓</p>
<a href="走完长征路的四位女红军陈琮英（任弼时夫人）、蔡畅、夏明、刘英（张闻天夫人）1937.jpg" title="走完长征路的四位女红军陈琮英（任弼时夫人）、蔡畅、夏明、刘英（张闻天夫人）1937.jpg"><img src="走完长征路的四位女红军陈琮英（任弼时夫人）、蔡畅、夏明、刘英（张闻天夫人）1937.jpg" /></a>
</div> 完整的bat：
::chcp 65001
::type head.txt >picList.html
echo ^<!DOCTYPE html^> >picList.html
echo ^<html xmlns="http://www.w3.org/1999/xhtml"^> >>picList.html
echo ^<meta content="text/html; charset=utf-8" /^> >>picList.html
echo ^<head^> >>picList.html
echo ^<title^>picList^</title^> >>picList.html
echo ^<style type=text/css^> >>picList.html
echo div{width:74.125^%%;} >>picList.html
echo div{margin^:auto;} >>picList.html
echo img{display^:block;} >>picList.html
::echo img{margin^:auto;} // 图片居中中>>picList.html
echo img{padding^:2px 0px 16px 0px;} >>picList.html
echo img{border^:0 red solid;} >>picList.html
echo a:link{text-decoration: none; color:#fff;} >>picList.html
echo ^</style^> >> picList.html
echo ^</head^> >> picList.html
echo ^<script^> >>picList.html
echo window.onload = function() { // 超出容器宽度的图片按容器宽度显示 >>picList.html
echo var div = document.getElementsByTagName("div"); >>picList.html
echo //var _w = div.offsetWidth; // 返回元素的总宽度 >>picList.html
echo var _w = document.querySelector(".wrap").offsetWidth >>picList.html
echo var Imgarray = document.getElementsByTagName("img"); >>picList.html
echo var realWidth; //真实的宽度 >>picList.html
echo var realHeight; //真实的高度 >>picList.html
echo for (var i = 0; i ^< Imgarray.length; i++) { >>picList.html
echo var imgtemp = new Image(); //创建一个image对象 >>picList.html
echo imgtemp.src = Imgarray[i].src; >>picList.html
echo imgtemp.index = i; //指定一个检索值，用于确定是哪张图 >>picList.html
echo imgtemp.onload = function() { //图片加载完成后执行 >>picList.html
echo var _stemp = this; //将当前指针复制给新的变量，不然会导致变量共用 >>picList.html
echo realWidth = this.width; >>picList.html
echo if (realWidth ^>= _w) { >>picList.html
echo Imgarray[_stemp.index].style.width = _w + 'px'; >>picList.html
echo } else { >>picList.html
echo Imgarray[_stemp.index].style.width = realWidth + 'px'; >>picList.html
echo }}}} >>picList.html
echo ^</script^> >>picList.html
echo ^<body^> >>picList.html
echo ^<div class=wrap^> >>picList.html
for /f "tokens=1,2 usebackq delims=." %%b in (`dir /o:n /b`) do ( ::n是按文件名，d是按日期
if not "%%c" == "bat" (
if not "%%c" == "html" (
echo ^<p style="text-indent:-2em;"^>%%b ↓^</p^> >>picList.html
echo ^<a href="%%b.%%c" title="%%b.%%c"^>^<img src="%%b.%%c" /^>^</a^> >>picList.html
)
)
)
echo ^</div^> >>picList.html
echo ^</body^> >>picList.html
echo ^</html^> >>picList.html
::for %a in (*.html) do echo "<a href=%a>%a</a>" >>picList.html
::type end.txt >>picList.html
::delims=.后面如果有空格，对于文件名中如果有空格时则会出错；
::dir /o:d /b：显示文件夹名或文件名（包括扩展名）；批处理生成的完整的html文件：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<meta content="text/html; charset=utf-8" />
<head>
<title>picList</title>
<style type=text/css>
div{width:74.125%;}
div{margin:auto;}
img{display:block;}
img{padding:2px 0px 16px 0px;}
img{border:0 red solid;}
a:link{text-decoration: none; color:#fff;}
</style>
</head>
<script>
window.onload = function() { // 超出容器宽度的图片按容器宽度显示
var div = document.getElementsByTagName("div");
//var _w = div.offsetWidth; // 返回元素的总宽度
var _w = document.querySelector(".wrap").offsetWidth
var Imgarray = document.getElementsByTagName("img");
var realWidth; //真实的宽度
var realHeight; //真实的高度
for (var i = 0; i < Imgarray.length; i++) {
var imgtemp = new Image(); //创建一个image对象
imgtemp.src = Imgarray[i].src;
imgtemp.index = i; //指定一个检索值，用于确定是哪张图
imgtemp.onload = function() { //图片加载完成后执行
var _stemp = this; //将当前指针复制给新的变量，不然会导致变量共用
realWidth = this.width;
if (realWidth >= _w) {
Imgarray[_stemp.index].style.width = _w + 'px';
} else {
Imgarray[_stemp.index].style.width = realWidth + 'px';
}}}}
</script>
<body>
<div class=wrap>
<p style="text-indent:-2em;">The three Soong sisters1940 ↓</p>
<a href="The three Soong sisters1940.png" title="The three Soong sisters1940.png"><img src="The three Soong sisters1940.png" /></a>
<p style="text-indent:-2em;">邓颖超和周恩来1970 ↓</p>
<a href="邓颖超和周恩来1970.jpg" title="邓颖超和周恩来1970.jpg"><img src="邓颖超和周恩来1970.jpg" /></a>
<p style="text-indent:-2em;">李讷、林豆豆、聂力、陶斯亮1961 ↓</p>
<a href="李讷、林豆豆、聂力、陶斯亮1961.jpg" title="李讷、林豆豆、聂力、陶斯亮1961.jpg"><img src="李讷、林豆豆、聂力、陶斯亮1961.jpg" /></a>
<p style="text-indent:-2em;">刘少奇、王光美1948 ↓</p>
<a href="刘少奇、王光美1948.jpg" title="刘少奇、王光美1948.jpg"><img src="刘少奇、王光美1948.jpg" /></a>
<p style="text-indent:-2em;">毛岸英与刘思齐 ↓</p>
<a href="毛岸英与刘思齐.jpg" title="毛岸英与刘思齐.jpg"><img src="毛岸英与刘思齐.jpg" /></a>
<p style="text-indent:-2em;">钱钟书与杨绛1934 ↓</p>
<a href="钱钟书与杨绛1934.jpg" title="钱钟书与杨绛1934.jpg"><img src="钱钟书与杨绛1934.jpg" /></a>
<p style="text-indent:-2em;">孙中山和宋庆龄 ↓</p>
<a href="孙中山和宋庆龄.jpg" title="孙中山和宋庆龄.jpg"><img src="孙中山和宋庆龄.jpg" /></a>
<p style="text-indent:-2em;">杨振宁、李政道、杜致礼、秦惠jun ↓</p>
<a href="杨振宁、李政道、杜致礼、秦惠jun.jpg" title="杨振宁、李政道、杜致礼、秦惠jun.jpg"><img src="杨振宁、李政道、杜致礼、秦惠jun.jpg" /></a>
<p style="text-indent:-2em;">朱毛邓周 ↓</p>
<a href="朱毛邓周.jpg" title="朱毛邓周.jpg"><img src="朱毛邓周.jpg" /></a>
<p style="text-indent:-2em;">走完长征路的四位女红军陈琮英（任弼时夫人）、蔡畅、夏明、刘英（张闻天夫人）1937 ↓</p>
<a href="走完长征路的四位女红军陈琮英（任弼时夫人）、蔡畅、夏明、刘英（张闻天夫人）1937.jpg" title="走完长征路的四位女红军陈琮英（任弼时夫人）、蔡畅、夏明、刘英（张闻天夫人）1937.jpg"><img src="走完长征路的四位女红军陈琮英（任弼时夫人）、蔡畅、夏明、刘英（张闻天夫人）1937.jpg" /></a>
</div>
</body>
</html>
－End－
猜你喜欢
- 2024-10-17 「Js」js事件委托是什么?使用js事件委托的好处有哪些?
- 2024-10-17 HTML-JavaScript基础(非常详细) html javascript教程
- 2024-10-17 Javascript 模块化指北 javascript的模块规范
- 2024-10-17 第51节 可编辑的内容-Javascript-零点程序员-王唯
- 2024-10-17 JavaScript-如何在js代码中引用一个js模块?
- 2024-10-17 前端里那些你不知道的事儿之 【window.onload】
- 2024-10-17 JavaScript 保留关键字 js的保留关键字不可以用作
- 2024-10-17 如何在JavaScript中运行.NET Core代码
- 2024-10-17 如何实现前端懒加载图像 前端懒加载及其实现方式
- 2024-10-17 html JavaScript md5解密代码分享，附接口亲测可用
- 最近发表
- 标签列表
-
- jsp (69)
- pythonlist (60)
- gitpush (78)
- gitreset (66)
- python字典 (67)
- dockercp (63)
- gitclone命令 (63)
- dockersave (62)
- linux命令大全 (65)
- pythonif (68)
- pythonifelse (59)
- deletesql (62)
- c++模板 (62)
- c#event (59)
- linuxgzip (68)
- 字符串连接 (73)
- nginx配置文件详解 (61)
- html标签 (69)
- c++初始化列表 (64)
- mysqlinnodbmyisam区别 (63)
- arraylistadd (66)
- console.table (62)
- mysqldatesub函数 (63)
- window10java环境变量设置 (66)
- c++虚函数和纯虚函数的区别 (66)