HTML5 快捷生成批量下载地址工具[代码分享]

简介: 将代码收藏到浏览器收藏夹以便快速打开。(运行环境chrome)代码data:text/html;charset=utf-8,html%E6%89%B9%E9%87%8F%E4%B8%8B%E8%BD%BD%E7%94%9F%E6%88%90%E...

将代码收藏到浏览器收藏夹以便快速打开。(运行环境chrome)

代码

data:text/html;charset=utf-8,<html><head><title>html%E6%89%B9%E9%87%8F%E4%B8%8B%E8%BD%BD%E7%94%9F%E6%88%90%E5%99%A8</title><script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.4.min.js"></script><style> * { margin: 0; padding: 0; } body { width: 95%; margin: 0 auto; } input, button { padding: 5px 8px; margin: 10px; background-color: #FFF; border: 1px #ccc solid; } button { cursor: pointer; } #runDownHrefVal > a { display: inline-block; }</style></head><body> %E6%9B%BF%E6%8D%A2%E7%AC%A6(*)<input style="width: 90%" id="demo_input" placeholder="url" /><br /> %E5%BC%80%E5%A7%8B%E5%80%BC<input id="start" type="number" />-%E7%BB%93%E6%9D%9F%E5%80%BC<input id="end" type="number" />%E5%8C%B9%E9%85%8D%E9%95%BF%E5%BA%A6%E5%B0%8F%E4%BA%8E%E9%95%BF%E5%BA%A6%E8%87%AA%E5%8A%A8%E5%A1%AB%E5%85%850<input id="min_len" type="number" min="1" value="1" onblur="if ($(this).val().length<=0) {$(this).val('1')}" /><button onclick="runDownHref()">%E7%94%9F%E6%88%90</button><div id="runDownHrefVal" style="height: 60%; width: 100%; overflow: auto; border: 1px #cccccc solid"></div><form onsubmit="return false"><button onclick="downLoadAll()" id="downLoadAllBtn"> %E4%B8%8B%E8%BD%BD%E5%85%A8%E9%83%A8</button><button onclick="story.select();document.execCommand(%26quot%3BCopy%26quot%3B);">%E5%A4%8D%E5%88%B6</button><textarea name="story" rows="12" style="width: 1px; height: 1px; overflow: hidden;opacity: 0"></textarea></form><script> function lenck(strObj){if(strObj==null||strObj.length<=0){return true;}return false;}var tmp="";function runDownHref(){$("#runDownHrefVal").html("");$("textarea[name='story']").val("");var demoInputVal=$("#demo_input").val();if(lenck(demoInputVal)){alert("url%E4%B8%8D%E8%83%BD%E4%B8%BA%E7%A9%BA");return;}var start=parseInt($("#start").val());var end=parseInt($("#end").val());var min_len=parseInt($("#min_len").val());if(lenck(start)||lenck(end)){return;}if(start>end){alert("%E5%BC%80%E5%A7%8B%E5%80%BC%E4%B8%8D%E8%83%BD%E5%A4%A7%E4%BA%8E%E7%BB%93%E6%9D%9F%E5%80%BC");return;}for(var i=start;i<=end;i++){tmp="";for(var j=(i+"").length;j<parseInt(min_len);j++){tmp="0"+tmp;}tmp=demoInputVal.replace(/\(\*\)/g,tmp+i);$("#runDownHrefVal").append($("<a/>",{href:tmp,download:""}).html(tmp));$("#runDownHrefVal").append($("<br/>"));$("textarea[name='story']").val($("textarea[name='story']").val()+tmp+"\n");}}function downLoadAll(){if(confirm("%E6%82%A8%E7%9C%9F%E7%9A%84%E7%A1%AE%E5%AE%9A%E8%A6%81%E4%B8%8B%E8%BD%BD%E5%90%97%EF%BC%9F\n\n%E8%AF%B7%E7%A1%AE%E8%AE%A4%EF%BC%81(%E6%96%87%E4%BB%B6%E9%87%8F%E8%BF%87%E5%A4%A7%E8%AE%A1%E7%AE%97%E6%9C%BA%E9%85%8D%E7%BD%AE%E4%BD%8E%E7%9A%84%E5%8F%AF%E8%83%BD%E4%BC%9A%E5%88%B0%E8%87%B3%E7%B3%BB%E7%BB%9F%E5%8D%A1%E6%AD%BB)")==true){var downLoadList=$("#runDownHrefVal>a");for(var i in downLoadList){downLoadList[i].click();}}}</script></body></html>

效果图片

img_3c2ba52dcdb1d9742d44b6177453b104.png
1
img_69897673d7656847174ebe3bed122103.png
2
img_69897673d7656847174ebe3bed122103.png
3
相关文章
|
4天前
|
敏捷开发
【sgCreateTableColumn】自定义小工具:敏捷开发→自动化生成表格列html代码(表格列生成工具)[基于el-table-column]
【sgCreateTableColumn】自定义小工具:敏捷开发→自动化生成表格列html代码(表格列生成工具)[基于el-table-column]
|
4天前
|
移动开发 前端开发 HTML5
HTML5实现酷炫个人产品推广、工具推广、信息推广、个人主页、个人介绍、酷炫官网、门户网站模板源码
HTML5实现酷炫个人产品推广、工具推广、信息推广、个人主页、个人介绍、酷炫官网、门户网站模板源码
|
4天前
一种pug与html相互转换的工具
一种pug与html相互转换的工具
|
4天前
|
移动开发 HTML5
HTML5/CSS3粒子效果进度条代码
HTML5/CSS3进度条应用。这款进度条插件在播放进度过程中出现粒子效果,就像一些小颗粒从进度条上散落下来
19 0
HTML5/CSS3粒子效果进度条代码
|
4天前
|
移动开发 前端开发 HTML5
Canvas实现超酷Loading动画HTML代码
之前我们分享过很多基于CSS3的Loading动画效果,相信大家都很喜欢。今天我们要来分享一款基于HTML5 Canvas的发光Loading加载动画特效。Loading旋转图标是在canvas画布上绘制的,整个loading动画是发光3D的视觉效果,HTML5非常强大。
12 1
Canvas实现超酷Loading动画HTML代码
|
4天前
|
前端开发 文件存储 Python
python之xhtml2pdf: HTML转PDF工具示例详解
python之xhtml2pdf: HTML转PDF工具示例详解
12 0
|
4天前
|
JavaScript 前端开发 安全
Vue中如何以HTML形式显示内容并动态生成HTML代码
Vue中如何以HTML形式显示内容并动态生成HTML代码
27 1
|
4天前
|
缓存 前端开发 IDE
【专栏:工具与技巧篇】HTML与CSS代码压缩与合并
【4月更文挑战第30天】本文探讨了优化Web性能的关键——HTML和CSS代码压缩与合并。代码压缩通过移除空白字符、注释和缩短标识符减小文件大小,而代码合并则减少HTTP请求。开发者可借助在线工具、构建工具插件、编辑器扩展或手动方式实现压缩和合并。最佳实践中,应保留未压缩备份,测试压缩效果,利用缓存并自动化流程。同时,注意适度优化,避免影响首屏渲染速度。关注新工具和策略以维持网站性能和可维护性。
|
4天前
|
存储 移动开发 前端开发
【专栏:工具与技巧篇】高效的 HTML 与 CSS 编写技巧
【4月更文挑战第30天】本文探讨了提高HTML和CSS编写效率的技巧,包括使用语义化标签、精简代码、利用HTML5新特性;使用CSS预处理器、模块化设计、优化选择器及媒体查询;协同技巧如一致的类名规划和理解盒模型;选择高效工具如Visual Studio Code和代码格式化工具;以及性能优化方法如代码压缩、减少HTTP请求和图片优化。通过案例分析,展示如何在实践中应用这些技巧,以创建结构良好、样式优美且性能卓越的网站。
|
4天前
|
前端开发 JavaScript
浏览器通过构建DOM树来解析HTML代码
【4月更文挑战第30天】浏览器通过构建DOM树来解析HTML代码
27 1