按 ‘ JavaScript ’ 标签归档

微博分享按钮

三年前往博客里添加了一个微博分享按钮,最近发现微博分享方式有WBML新版了,于是按照微博介绍的WBML界面重写了这段代码。

先贴代码。新版的添加微博分享按钮的方法:编辑正在使用的monochrome族主题(其它主题可能要微调)的header.php,做两个改动:

一、在<html>标签后增加wb命名空间:

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:wb="http://open.weibo.com/wb">

二、在</head>之前加入以下代码:

<script src="http://tjs.sjs.sinajs.cn/open/api/js/wb.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
jQuery(function(){
//  window.setTimeout(function() {  // Make it asynchronous if using the iframe mode.
    jQuery('div.post').each(function() {
        var url = jQuery(this).find('h2.post_title > a').first().attr('href');
        if (typeof(url) == 'undefined') {
            url = location.href;
        }
        var titlestr = jQuery(this).find('.post_title').text() + ': ' + jQuery(this).find('p').not('.wp-caption-text').text();
        titlestr = titlestr.replace(/\s\s+/g, ' ').substr(0, 110);

        var buttonstr = '<div style="width:95%;text-align:right;margin-top:-40px;margin-bottom:40px;">';

        var param = {
            url:url,
            type:'button',
            addition:'number',
            picture_search:'true',
            title:titlestr,
            ralateUid:'1691250947'  // 关联用户的微博用户号码
        };
        var temp = [];
        for(var p in param) {
            temp.push(p + '="' + encodeURIComponent(param[p] || '') + '"');
        }
        buttonstr += '<wb:share-button ' + temp.join(' ') + '></wb:share-button>';


        buttonstr += '</div>';
        jQuery(this).find('div.post_content').first().after(buttonstr);
    });        // jQuery.div.post.each
//  }, 5000);  // window.setTimeout
});
</script>

第一次重写后,IE不稳定地显示按钮、Firefox完全不行(IE竟然胜出,奇迹)。调试发现和一年前的一次优化有关。当时我把分享按钮的JS代码改为异步(橙色代码,页面加载完毕5秒后)运行,而此定时器似与WBML版按钮冲突。

之所以怀疑这个定时器,是因为观察了博客右边栏放置的静态代码“微博关注”按钮。我留意到它总能显示,并且当整个页面加载完毕、网页闲下来时才开始运作。猜想渣浪也发现这些按钮很耗时,于是也在按钮里内置定时器,把我这些外层的定时器顶得不干活了。

另注:渣浪程序员把“关联用户”的设置参数命名为ralateUid,嗯,从上一版延续至今以后也一直会继续错下去的拼写,厚道地猜想这是为了防鹅防寨故意拼错的。另外,微博文档里说抓图选项是searchPic,而快捷设置页里则可以看到是picture_search。我测试之后得知,picture_search是有效参数。

简单的图片循环播放器

WordPress不让我痛痛快快地在正文里写JavaScript(例如会把&符号编码,弄得我没法说“and”),所以我把示例播放器的页面放在这里了。打开页面,右击,可以看源代码。

代码说明:

首先这个程序需要jQuery的支持:

<script type='text/javascript' src='/js/jquery.min.js'></script>

其次,CSS需要用“position:absolute;”,使要播放的图片事先重叠在一起。

<style>
	.slide {
		position: absolute;
		left: 0px;
		top: 0px;

		width: 600px;	/* Customizable */
		height: 420px;	/* Customizable */
	}
</style>

下面这个不算代码,其实是HTML的正文部分,图片在这里被HTML使用。关键的三点:

  1. 顶层<div>的id需要和播放函数(等下会提到)的参数一致(示例是“YadingPhoto”)。
  2. 每张图片不是直接挂在顶层<div>下的<img>,而是放在一个子<div>里的,这是为了让播放器有播放文字的功能(<div>里想写啥都是可以的,不只可以放图片)。
  3. 包装图片的<div>的class要和上头的CSS代码保持一致(示例是“slide”)。
<div id='YadingPhoto' style='position:relative;width:600px;height:420px;'>
	<div class='slide'>
		<img src='../pic/xianuoduoji-slidedemo.jpg' alt='XiaNuoDuoJi' title='XiaNuoDuoJi'>
		<div style='text-align:center;'>Yading - Xia Nuo Duo Ji</div>
	</div>
	<div class='slide'>
		<img src='../pic/xiannairi-slidedemo.jpg' alt='XianNaiRi' title='XianNaiRi'>
		<div style='text-align:center;'>Yading - Xian Nai Ri</div>
	</div>
	<div class='slide'>
		<img src='../pic/yangmaiyong-slidedemo.jpg' alt='YangMaiYong' title='YangMaiYong'>
		<div style='text-align:center;'>Yading - Yang Mai Yong</div>
	</div>
</div>

最后是播放器本身的JavaScript代码,由于jQuery的selector和hide/show的淡入淡出效果都已做好,这个程序可以写得很短。程序的主要思路,是每隔几秒钟,就把排头的<div>挪到队尾去,这样排第二的那个<div>的内容就露出来了。

两个小函数接受的参数,其实并不精确地是id,而是一个jQuery selector,示例中,是“#YadingPhoto”,这是为了更广泛地利用jQuery强大的页面元素定位功能。

<script type='text/javascript'>
	initSlide('#YadingPhoto');	// Customizable, must equal to the slide show top div's ID.
	setInterval("switchSlide('#YadingPhoto')", 5000);	// Customizable.

	function initSlide(slideID)
	{
		if ($(slideID + " > div").length <= 1)
			return;
		var selector = slideID + " > div";
		$(selector).hide(0);
		$(selector).css("z-index", "-1");
		$(selector + ":first").show(0);
	}

	function switchSlide(slideID)
	{
		if ($(slideID + " > div").length <= 1)
			return;
		var selector = slideID + " > div";
		$(selector + ":first").next().fadeIn("slow");
		$(selector + ":first").fadeOut("slow");
		$(selector + ":first").appendTo($(slideID));
	}
</script>

判断夏时制的JavaScript代码

“三月的第二个星期日”这种表达,用计算机语言说起来很复杂的。所以不辞辛苦写了段代码,用来判断世界的其他地方现在是不是夏时制。

函数需要两个参数:

  • timezone是想要计算的地方所在的时区,是一个数字,用正数表示东半球,用负数表示西半球,零表示本初子午线附近。此数字可以是小数,为了照顾加德满都这种“东5小时零45分钟”的时区。
  • summerrule是所需要使用的规则,此参数是一个字符串,目前这段JavaScript代码支持两种规则:“EUR”和“USA”。

如果所计算地点的当前时间,按照规则被认为是落在夏时制期间,则函数返回true,否则返回false。

function isDaylightSaving(timezone, summerrule)
{
    var today = new Date();
    var localtime = today.getTime() + timezone * 3600 * 1000;
    var localday = new Date(localtime);
    var hour = localday.getUTCHours();	// 0-24
    var month = localday.getUTCMonth();	// 0-11
    var date = localday.getUTCDate();	// 1-31
    var wkday = localday.getUTCDay();	// 0-6
    var summer = false;
    if (summerrule == "EUR") {
        if (month > 2 && month < 9)
            summer = true;
        else if (month == 2 && date - wkday > 24 && (wkday != 0 || hour > 0))
            summer = true;
        else if (month == 9 && (date - wkday < 25 || wkday == 0 && hour < 1))
            summer = true;
    } else if (summerrule == "USA") {
        if (month > 2 && month < 10)
            summer = true;
        else if (month == 2 && (date > 14 || date - wkday > 7 && (wkday != 0 || hour > 1)))
            summer = true;
        else if (month == 10 && (date < 8 && (date - wkday < 1 || wkday == 0 && hour < 2)))
            summer = true;
    }
    return summer;
}