用 Javascript 和 CSS3 来增加页面滚动的效果

整理代码看到里边还有一个 CSS3 写的彩虹圆圈。觉得要是让彩虹圆圈转动起来放到页面里边当个 loading 效果也不错。
当做起来的之后,突然觉得弄个跟随滚动条的效果更不错。
开始动手写。

如果想直接看成品代码的请直接看最后边第六步。

继续阅读“用 Javascript 和 CSS3 来增加页面滚动的效果”

用 prism 免插件实现代码高亮

博客一直没有用代码高亮,之前用过代码高亮的插件,但是用着总是不顺心,后来就直接加了个 code 的样式,用自带的 code 标签。
code 标签其实也算是凑合用,因为不能换两行,并且没有缩进。
终于找了个挺不错的代码高亮 js 工具,不用插件,只需要引入一个 css 和 js。

下边有请主角 prismjs

继续阅读“用 prism 免插件实现代码高亮”

控制台新玩法 console.log

不知道从几何时,有一些网站开始往控制台输出招聘、友情提醒、源码下载等信息。
不过这些信息当然只会被开发人员看到,一般人没事谁按 F12 呢,其实也是挺有针对性的。挺有意思的。我顺便找了找相关的说明,留个记录。

也许你调试也用过console.log(),但是默认输出只会是原样输出。是不是无法实现有图有链接有颜色的文字呢?其实默认就支持,原来一直都没有用过,只是简单的输出。

深入看了看,原来除了 console.log(),还有 cosole.warn() 和 console.error(),除了这些还是可以对输出到 console 控制台的文字进行 CSS 控制。
格式如下:

console.log("%c渐变文字", "background-image:-webkit-gradient( linear, left top, right top, color-stop(0, #fac),color-stop(1, #abc) );color:transparent;-webkit-background-clip: text;font-size:6em;");

图片也可以,弄个背景图就行了。

console.log("%c", "padding:50px;line-height:120px;background:url("gif") no-repeat;");

或者链接

console.log("%s", "http://www.dyniao.com");

下面是console.log() API的官方文档摘要。

%s Formats the value as a string.

%d / %i Formats the value as an integer.

%f Formats the value as a floating point value.

%o Formats the value as an expandable DOM element (as in the Elements panel).

%O Formats the value as an expandable JavaScript object.

%c Formats the output string according to CSS styles you provide.

批处理调用 PowerShell 校验文件哈希

依然是老规矩,不新装软件。

在这之前写过一个用 Linux 和 Windows 获取文件 MD5 值,后来发现 PowerShell 里边有个功能更加的强大,Get-FileHash 可以验证 SHA1、SHA256、SHA384、SHA512、MACTripleDES、MD5、RIPEMD160 等多种哈希算法。

下边是Bat调用PowerShell来实现数据的验证。

@echo off
PowerShell Get-FileHash -Path "%~1" -Algorithm SHA256
pause

SHA256 可以换成你需要验证的算法。

当然了,你要觉得托拖拽拽有的时候不方便,我这里在最后推荐一个软件 HashTab ,很好用,安装完直接集成到文件右键的属性里边了。

利用 VBS 批量将 PPT 转为 PDF

又来了需求,当然就是解决需求了!这次是“100多个 PPT 转换成 PDF ”!

首先看看在线工具有很多,但是只能一次传一个或者限制文件大小,有得下载还很慢,待处理的文件太多不现实。
其次是安装转化程序,其实一般我都不喜欢用这些,装了一堆工具其实就用这么一两下,然后还得卸载,还得担着有马的风险。

我最爱用的就是 BAT(批处理)和 VBS(其实这个也很危险,一般要慎用)

搜了搜有个网址介绍了这个方法 “批量ppt/pptx转pdf”,其原理就是用 VBS 调用 PowerPoint 打开文件并另存为pdf
挺好用,不过他这个还得修改注册表,太麻烦,我简单改了一下。

直接将一堆文件拖放到 VBS 文件上,接着就批处理了!可以处理的文件后缀多加了一个 pps。

唯一的缺陷就是……没有进度,只能看着处理完的文件来判断了。

最后提示 vbs 文件其实很危险,不是所有的 vbs 都是善良的,如果不清楚里边的内容的话,请千万不要使用运行!切记,切记!

以下是全部代码,需要保存并更改后缀名为.vbs

Set argv = WScript.Arguments
if argv.Count < 1 then
WScript.Quit
end if
For Each argv In WScript.Arguments
filename = argv
if right(filename, 3) = "ppt" or right(filename, 3) = "pps" then
pdfname = left(filename, len(filename)-3) + "pdf"
elseif right(filename, 4) = "pptx" then
pdfname = left(filename, len(filename)-4) + "pdf"
else
msgbox(filename+" is not ppt/pptx!")
WScript.Quit
end if
Set pptApp = CreateObject("PowerPoint.Application")
Set MyPress = pptApp.Presentations.Open(filename)
ppSaveAsPDF = 32
MyPress.SaveAs pdfname, ppSaveAsPDF, false
pptApp.Quit
Next

另辟蹊径,Javascript 通过 base64 编码保存文件

最近要实现 js 的文件保存下载,用了几个插件 FileSaver.js 和 html5 的 api 下载,但是用起来还是不好操作。兼容问题确实是个大问题。有的时候会突然没有反应。

突然想到图片的 base64 的编码,未尝不试试直接编码下载呢?

首先确定自己需要下载的文件类型。我要下载是csv,所以类型选为data:application/vnd.csv

之后写好了 base64 的头data:application/vnd.csv;base64,

添加的 base64 的编码,随便你什么语言生成的,只要能赋值给 js 就行了。

<a href="data:application/vnd.csv;base64,vs3P8dXi0fksvPK1paOst72x4w==" download="file.csv">Download</a>

示例下载

当然了除了方便也是有缺点的,就是 URL 的长度限制,如果太长的还是用其他的方法吧。

其他常用 Data URL 的 MIME,如果是 base64 编码,则数据前需要添加[base64,]来告知浏览器后边是编码的数据。
data:,文本数据
data:text/plain,文本数据
data:text/html,HTML代码
data:text/css,CSS代码
data:text/javascript,Javascript代码
data:image/gif;base64,base64编码的gif图片数据
data:image/png;base64,base64编码的png图片数据
data:image/jpeg;base64,base64编码的jpeg图片数据
data:image/x-icon;base64,base64编码的icon图片数据

//js版本的生成Base64格式函数
var base64Value = base64encode(utf16to8("你的数据"));
//下面是64个基本的编码
var base64EncodeChars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
var base64DecodeChars = new Array(
    -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,
    -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,
    -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 62, -1, -1, -1, 63,
    52, 53, 54, 55, 56, 57, 58, 59, 60, 61, -1, -1, -1, -1, -1, -1,
    -1, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14,
    15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, -1, -1, -1, -1, -1,
    -1, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40,
    41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, -1, -1, -1, -1, -1);
//编码的方法
function base64encode(str) {
    var out, i, len;
    var c1, c2, c3;
    len = str.length;
    i = 0;
    out = "";
    while (i < len) { c1 = str.charCodeAt(i++) & 0xff; if (i == len) { out += base64EncodeChars.charAt(c1 >> 2);
            out += base64EncodeChars.charAt((c1 & 0x3) << 4); out += "=="; break; } c2 = str.charCodeAt(i++); if (i == len) { out += base64EncodeChars.charAt(c1 >> 2);
            out += base64EncodeChars.charAt(((c1 & 0x3) << 4) | ((c2 & 0xF0) >> 4));
            out += base64EncodeChars.charAt((c2 & 0xF) << 2); out += "="; break; } c3 = str.charCodeAt(i++); out += base64EncodeChars.charAt(c1 >> 2);
        out += base64EncodeChars.charAt(((c1 & 0x3) << 4) | ((c2 & 0xF0) >> 4));
        out += base64EncodeChars.charAt(((c2 & 0xF) << 2) | ((c3 & 0xC0) >> 6));
        out += base64EncodeChars.charAt(c3 & 0x3F);
    }
    return out;
}
function utf16to8(str) {
    var out, i, len, c;
    out = "";
    len = str.length;
    for (i = 0; i < len; i++) { c = str.charCodeAt(i); if ((c >= 0x0001) && (c <= 0x007F)) { out += str.charAt(i); } else if (c > 0x07FF) {
            out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));
            out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F));
            out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
        } else {
            out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F));
            out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
        }
    }
    return out;
}

JS 实现小时候的记忆:上上下下左右左右BA

每次玩到魂斗罗或者和每次看到手柄都会想起这个秘笈。后来看到也有网站把这个秘笈弄上来,也学习了一下,结构很简单。

vvar kkeys = [], konami = "38,38,40,40,37,39,37,39,66,65";
        //jQuery
        $(document).keydown(function (e) {
        //JS 
document.body.addEventListener('keydown', function (e) {
            kkeys.push(e.keyCode);
            if (kkeys.toString().indexOf(konami) >= 0) {
              alert("HI!");
            }
        });

JS 和 PHP 获取某月的第一天和最后一天

PHP

//获取本月第一天和最后一天
$today=date("Y-m-d");
//直接把第一天设为1号,简单粗暴
$firstday = date('Y-m-01', strtotime($today)); 
$lastday = date('Y-m-d', strtotime("$firstday +1 month -1 day")); 
echo $firstday;
echo $lastday;

Javascript

var today = new Date();
var year = today.getFullYear();
//同上,直接设为1日。
var month = today.getMonth() + 1;
var   firstday = year + '-' + month + '-01';
var  day = new Date(year,month,0);
var lastday = year + '-' + month + '-' + day.getDate();//获取当月最后一天日期
alert(firstday+" and "+lastday);
冀ICP备17005573号-1