`
imhades
  • 浏览: 23858 次
  • 性别: Icon_minigender_1
  • 来自: 广州
文章分类
社区版块
存档分类
最新评论

addSizes.js 自定标注链接文件的大小

阅读更多

 

来源: OurJS.cn , 原文: http://www.ourjs.cn/show.php?id=448

 

 

addSizes.js 是一段 JS 代码 , 用于从一个页面里链接的一些大的文件 , 并自动在它们的链接旁边标注文件大小。它的作者是 Nathalie Downe ,应用了 Simon Willison json-head App Engine 迷你服务。

使用它,你的链接不需要额外的代码,它自动会在页面里找到你的链接并更改为这样的格式,如 你的链接 (pdf 2.8 MB)” 。的确很好用!

 

JAVASCRIPT:

 

jQuery( function ($) {

 

    $( 'a[href$=".pdf"], a[href$=".doc"], a[href$=".mp3"], a[href$=".m4u"]' ).each( function () {

         // looking at the href of the link, if it contains .pdf or .doc or .mp3

         var link = $( this );

         var bits = this .href.split( '.' );

         var type = bits[bits.length -1];

               

         var url= "http://json-head.appspot.com/?url=" +encodeURI($( this ).attr( 'href' ))+ "&callback=?" ;

 

         // then call the json thing and insert the size back into the link text

         $.getJSON(url, function (json) {

                if (json.ok && json.headers[ 'Content-Length' ]) {

                        var length = parseInt(json.headers[ 'Content-Length' ], 10);

 

                        // divide the length into its largest unit

                        var units = [

                              [1024 * 1024 * 1024, 'GB' ],

                              [1024 * 1024, 'MB' ],

                              [1024, 'KB' ],

                              [1, 'bytes' ]

                         ];

 

                         for ( var i = 0; i <units.length; i++) {

 

                               var unitSize = units[i][0];

                               var unitText = units[i][1];

 

                               if (length>= unitSize) {

                                       length = length / unitSize;

                                       // 1 decimal place

                                       length = Math.ceil(length * 10) / 10;

                                       var lengthUnits = unitText;

                                        break ;

                               }

                         }

                          // insert the text directly after the link and add a class to the link

                         link.after( ' (' + type + ' ' + length + ' ' + lengthUnits + ')' );

                         link.addClass(type);

                     }

           } );

     } );

} );


来源: OurJS.cn , 原文: http://www.ourjs.cn/show.php?id=448

 

 

0
6
分享到:
评论

相关推荐

    china.js 中国及各地js 文件压缩包

    "china.js 中国及各地js 文件压缩包" 是一个专门针对中国地图数据和ECharts图表库的JavaScript资源集合。这个压缩包包含的核心组件是`china.js`,这可能是一个定制的JavaScript库,用于处理和展示中国地理信息,尤其...

    三维模型-three.js-PCD模型文件,用于three.js显示pcd文件

    在三维可视化领域,Three.js是一个非常流行的JavaScript库,它允许开发者在Web浏览器中创建和展示复杂的3D模型。本资源是关于使用Three.js处理PCD(Point Cloud Data)模型文件的,这是一种常见的3D点云数据格式。在...

    world.js.rar

    在给定的压缩包"world.js.rar"中,包含了多个与地图和地理数据相关的JavaScript文件。这些文件主要用于在Web应用程序中展示地图,并可能提供交互功能。让我们逐一了解这些文件及其可能包含的知识点。 1. **world.js...

    threejs楼栋标注.html

    threejs楼栋标注.html

    vue+konva.js(未使用vue-konva)实现数据标注矩形和多边形功能

    在本文中,我们将深入探讨如何使用Vue.js框架与Konva.js库来实现数据标注功能,特别是绘制和操作矩形及多边形。Vue.js是一种流行的前端JavaScript框架,它提供了组件化开发模式,使得构建可复用和易于维护的用户界面...

    javascript插件:jquery.ipicture.js在地图上做标记并可以用图文及链接展示(非常棒)

    jQuery.ipicture.js 是一款强大的JavaScript插件,它允许开发者在网页中的地图上创建标记,并且可以结合图文及链接进行丰富的信息展示。这款插件特别适合用于地理信息系统(GIS)应用,或者任何需要在地图上标注特定...

    jquery-cropper标注插件.zip

    在使用jQuery Cropper时,首先需要引入jQuery库和插件的JavaScript及CSS文件。接着,通过jQuery选择器找到要应用插件的图片元素,并调用`.cropper()`方法初始化插件。在初始化时,可以设置一系列选项来自定义插件的...

    JS 音频可视化插件Wavesurfer.js的使用教程.docx

    ### JS 音频可视化插件 Wavesurfer.js 的使用教程 #### 一、Wavesurfer.js 概述 Wavesurfer.js 是一款强大的基于 HTML5 Canvas 和 WebAudio API 的音频播放器插件,它提供了简洁易用的 API 接口以及高度可定制化的...

    Annotorious图片深度学习标注工具.zip

    1. annotorious.debug.js 和 annotorious.min.js:这是Annotorious的主要JavaScript库,分别提供调试版和优化后的版本。调试版对于开发和调试更有帮助,因为它包含完整的错误信息和代码结构;而min.js则是经过压缩和...

    JavaScript的PSD解析库psd.js.zip

    psd.js 是一个用来解析 PhotoShop 的 PSD 文件的 JavaScript 库,支持在浏览器上运行以及 Node.js 环境中使用。 示例代码: {PSD} = require 'psd' psd = PSD.fromFile __dirname '/test.psd' psd.parse() ...

    前端辅助标注

    10.4-前端标注辅助工具markman.zip 10.4-前端标注辅助工具markman.zip 10.4-前端标注辅助工具markman.zip 10.4-前端标注辅助工具markman.zip 10.4-前端标注辅助工具markman.zip

    DrawingManager_min.js

    `DrawingManager_min.js`通常会与`DrawingManager_min.css`一起使用,后者是一个样式文件,负责控制绘制工具的外观和交互效果,确保其在不同浏览器和设备上的兼容性和一致性。这两个文件结合使用,能够提供一套完整...

    three.js+photo-sphere-viewer.js 全景场景切换,全景家居,全景图效果预览

    "three.js"是一个流行的JavaScript库,专门用于在浏览器中进行3D图形渲染,而"photo-sphere-viewer.js"则是一个与three.js结合使用的插件,用于展示全景图像和场景。下面将详细解释这两个技术以及如何在实际项目中...

    Three.js-webgl物联网粮仓3D可视化

    本项目名为"Three.js-webgl物联网粮仓3D可视化",是基于WebGL技术的3D可视化管理系统,利用了Three.js库以及Vue.js框架,旨在实现对粮仓的高效管理和监控。通过JavaScript语言进行编程,结合物联网技术,该系统能够...

    ECarts相关(china.js , echarts.min.js, 地区表结构及经纬数据,地图demo)

    1. 引入 ECharts 库:在 HTML 文件中添加 `&lt;script&gt;` 标签,链接到 `echarts.min.js` 文件。 2. 准备容器:创建一个 DOM 元素作为图表的容器,例如一个 `&lt;div&gt;` 标签。 3. 初始化 ECharts 实例:使用 `echarts.init...

    SimpleCalendar.js日历插件.zip

    在实际使用过程中,开发者通常会通过引入SimpleCalendar.js的JavaScript文件,然后调用其提供的API来初始化日历并进行相关设置。例如,可以使用`new SimpleCalendar(options)`创建一个日历实例,并传递一个包含配置...

    cixingbiaozhu.rar_中文标注_标注_词性标注

    "cixingbiaozhu.rar_中文标注_标注_词性标注"这个项目,显然专注于实现这一功能,通过`cixingbiaozhu.cpp`这个源代码文件,我们可以深入探讨词性标注的原理和应用。 词性标注对于中文文本的理解至关重要,因为它...

    CAD_自动标注.rar

    1. **安装插件**:首先需要解压"CAD_自动标注.rar",然后根据插件提供的说明文档进行安装,通常涉及到复制插件文件到CAD软件的安装目录或插件文件夹。 2. **启动插件**:在CAD软件中,通过菜单栏、快捷键或者工具栏...

    用于添加彩色警报标注的Editor.js工具_JavaScript_SCSS.zip

    《使用Editor.js添加彩色警报标注的实践指南》 在Web开发中,为文本编辑器添加功能丰富的插件可以极大地提升用户体验。Editor.js是一款现代化的、可扩展的富文本编辑器,它允许开发者通过插件自定义编辑器的功能。...

    PDF.js在线批注实现(附源码).zip

    PDF.js在线批注实现(附源码) JS+HTML5实现

Global site tag (gtag.js) - Google Analytics