标签 JavaScript 下的文章

Typecho实现键盘左箭头右箭头按键切换到上一篇下一篇文章

github gist: https://gist.github.com/fr33m44/f2abc5a5204e0d14cdf915c56d5ffb10

if(document.getElementsByClassName('post-near')[0].childNodes[1].innerHTML != '上一篇: 没有了')
    var pre_link = document.getElementsByClassName('post-near')[0].childNodes[1].childNodes[1].href;
if(document.getElementsByClassName('post-near')[0].childNodes[3].innerHTML != '上一篇: 没有了')
    var next_link = document.getElementsByClassName('post-near')[0].childNodes[3].childNodes[1].href;
document.onkeydown=function(e){
    if(e.keyCode==37 && pre_link != undefined)
        window.location = pre_link;
    else if (e.keyCode ==39 && next_link != undefined)
        window.location = next_link;
};

Greasemonkey脚本:让wp-markdown编辑器和预览并列显示,适合大屏幕显示器

开始用wp-markdown写博文之后,发现了一个弊端。在编辑非常长的文章的时候。鼠标要狂滚动到下面的预览窗口查看效果。非常不方便。完全没有把我的24寸大显示器的空间给利用起来。

以下四行代码让wp-markdown编辑器和预览窗口水平显示。刚测试了发现仅支持我的1920X1080分辨率。不知道怎么兼容其他分辨率。没办法,CSS学得太烂了。不过小分辨率的显示器并列显示就显得太窄了点。

// ==UserScript==
// @name WP-Markdown parallel view
// @version 0.1
// @namespace localhost
// @author tunpishuang
// @description Let WP-Markdown preview section parallel to editor
// @match http://tunps.com/wp-admin/*
// @grant none
// ==/UserScript==


var editor = document.getElementById("wp-content-editor-container");
var preview = document.getElementById("wmd-previewcontent");
editor.setAttribute('style', 'float:left;width:50%');
preview.setAttribute('style', 'float:left;width:45%;clear:none');

将以上代码保存为markdownStyle.user.js。 修改@match为你的博客域名。放入Chrome或Firefox浏览器即可。

str2binl和binl2str

function str2binl(D) {
    var C = Array();
    var A = (1 << chrsz) - 1;
    for (var B = 0; B < D.length * chrsz; B += chrsz) {
        C[B >> 5] |= (D.charCodeAt(B / chrsz) & A) << (B % 32)
    }
    return C
}
function binl2str(C) {
    var D = "";
    var A = (1 << chrsz) - 1;
    for (var B = 0; B < C.length * 32; B += chrsz) {
        D += String.fromCharCode((C[B >> 5] >>> (B % 32)) & A)
    }
    return D
}

两个来自:http://imgcache.qq.com/ptlogin/ac/v9/js/comm.js?v=1.2.35 的JS函数。
字符串和数字之间转换。值得研究。

Code on Web

Introduction

Code on Web,简称COW。是一个基于SyntaxHighlighter 3.0.83 将代码转换为HTML的在线小工具。

一般我们在网页上展示各种计算机语言(C、C++、C#、PHP、JAVA.......)的源代码有3个途径

  1. 将原始代码写在HTML标签(比如<pre>),然后通过客户端的JavaScript让原始代码转换为HTML让浏览器解析。SyntaxHighlighter就是其中一个很优秀的工具之一,其他的还有Google的Prettify等等。这是一种最为流行的方法, 优点:节省带宽、节省硬盘。 缺点:占用客户端资源较多。如果你使用了wordpress的tinymce等WYSIWYG编辑器,在可视和HTML视图之间切换的时候,你的所有原始代码将会被弄乱。
  2. 第二种方法是将存储在数据库、文件系统里面的代码通过正则表达式提取,然后在服务器端进行转换,直接将生成的HTML代码输出到浏览器。 优点:节省带宽、节省硬盘。 缺点:代码多了,需要考虑服务器性能。
  3. 第三种就是Code on Web这种将生成好的HTML代码直接贴到网页上。 优点:客户端CPU资源占用少,无需任何server/client端脚本支持。 缺点:需要耗费更多的硬盘、网络带宽。因为显然HTML代码大小是原始代码的数倍。。`

原理

原理很简单,就是将原始代码通过正则表达式、字符串替换等方法转化为可读性强的HTML代码。HTML代码标签只含有具有一定意义的class属性,后续可以通过修改引用的css来美化代码样式.可以说也是具有一定的灵活性.

小例子

/*
 *    check the time ,disable update post_name where it is already unix time
 *      newest version goto: http://tunps.com/code-on-web/
 */
function is_valid_unixtime($timestamp)
{
    return preg_match('/^[0-9]+$/',$timestamp) && strlen($timestamp)&gt;=10 && strlen($timestamp)&lt;=13;
}

Feature

  • 支持多种语言,AppleScript、ActionScript、Bash、CodeFushion、C++、C#、CSS、Delphi、Diff、Erlang、Groovy、Java、JavaFx、Javascript、Perl、PHP、Plaint、PowerShell、Python、Ruby、SASS、Scala、SQL、VB、XML等,如需更多语言,可以自己写Brush,规范是很简单的。
  • 支持行号显示、已经定义起始行号数字。
  • 支持0填充行号。
  • 支持单行或者多行的高亮显示。
  • 支持混合HTML语法高亮(PHP、ASP等脚本都可以混合HTML)。
  • 支持Smart-Tab,让缩进对其,并且可以自己Tab大小。

usage

首先需要在您贴代码的博客或者网站引用SyntaxHighlighter的主题CSS,默认的是shCoreDefault.css.

如果是wordpress,可以在主题文件夹里面的header.php适当位置添加代码:

<link rel="stylesheet" type="text/css" media="all" href="<?php echo site_url('/YourCSSPath/shCoreDefault.css'); ?>" />

最新版本请到 http://tunps.com/lab/cow/

在"源代码"文本框中输入代码,然后进行各种设置,点击"转换"按钮,复制生成的"HTML代码"文本框的内容到文章即可.

changelog

  1. r3 2011.06.13 using external css file instead of inline style , so we can generate less code and configuring code stylesheet can be more flexible.
  2. r2 2011.06.12 fix bug: white-space:nowrap didn't work on Opera
  3. r1 2011.06.07 initial release

feedback

如果在使用中有任何的问题,请在本文下面写上你的评论。谢谢支持

javascript类数组对象 array-like Object

类数组对象中的“类”不是class的意思,而是like,类似的意思。

var a = {};  // Start with a regular empty object

// Add properties to make it "array-like"
var i = 0;
while(i < 10) {
a[i] = i * i;
i++;
}
a.length = i;

// Now iterate through it as if it were a real array
var total = 0;
for(var j = 0; j < a.length; j++)
total += a[j];

以上例子来自《Javascript : The Definitive Guide》7章8节。 a先是一个空数组,通过往里面填充数据,最后填写length使之成为array-like object 。 Javascript数据的特点是length随着新元素的添加,length自动增长,设定length会使javascript数组扩展或缩小,也就是length可以控制javascript数组的大小。 Javascript中的参数对象(Argument Object)也是一个array-like object。