所有由罗佳(博主)发布的文章

博客已顺利搬家到4ove

上上周博客在openshift所在的ip被和谐以后,我就不再打算重开应用换ip了,因为总有那么一个时候还是会被和谐的。
于是我就把博客搬到了另一个空间。

本着免费使用的原则,还是要来提一下用的空间的。

这个空间名字叫4ove,看起来用的人不多,因为速度比较快,而且这个空间看起来非常不成熟。

广告没有发现,只是请求量略大就会出来服务器的提示。。。

另外这个空间可以自定义很多东西,比如默认的404和403页面[在此类文件不起作用时],邮件系统也没问题,还有自带的邮件服务器(虽然我没用它)。另外这个空间还有很多蛋疼的地方。

[PS:只有博客被搬到了这个空间来,www.luojia.me由于还没有被和谐就暂时懒得搬过来了]

[PS2:搬家的同时我启用了storage.luojia.me来存放博客里的资源外链了]

memcache用法笔记

PS:虽然本文是我写的但是我还没有经过实验。。。如果发现了错误请留言让我修正
PS:[ ]中的都为可有可无的内容
ps:第一次给文章加这么多样式。。感慨万千吖

Memcache是一个内存存储方案[多简洁的描述啊。。]

在PHP官方有比较全面的说明文档

http://www.php.net/manual/zh/book.memcache.php【中文】

这里就来简单写一下他的数据操作部分的用法

创建一个Mencache对象

$memobj=new Memcache;
//使用函数形式的时候不需要创建这个对象

然后就可以以对象的形式对他进行操作

继续阅读memcache用法笔记

响应式布局练习

今天我稍微试了试响应式布局的操作方法来为iti做准备,于是就拿我的博客开刀了。
想了一想,这个博客的主题本身就是响应式的了,可以非常好的适应小屏幕,于是我就不再做小屏幕的响应了,于是我做了更大屏幕的响应。

级别[我做的]:800~1299,1300~1460,1461~1880,1881~+∞

由于只是练习,所以我就拿多说评论框做实验了。

目标:让多说评论框在宽度超过1300的屏幕上从文章底部跑到右边,文章靠到左边。
[请掠过代码先看下面]。 继续阅读响应式布局练习

卡西欧 fx-82es plus大bug

这篇文章原来早就应该发了,只是因为种种原因一直没有发。

这是在很久以前发现的问题。

本人测试环境:iPhone4、2G移动网络、CASIO fx-82ES Plus。
方法:打开计算器,让手机2G网进行大量的连续数据访问,紧贴在计算器上[我把手机紧贴在计算器背面],可能需要进行小幅度的手机和计算器间相对位移才可以看到最明显的效果。
显现:乱码、花屏、错误计算、卡死、得到不同的SUM值、神奇的花屏类动画
继续阅读卡西欧 fx-82es plus大bug

阻止手机输入框得到输入焦点时缩放页面

[手机]有的时候网页上一个输入框,点他一下,这个框框就会被放大或缩小到适当大小,有的时候这种自动缩放会很蛋疼,就比如这个博客,缩放的时候旁边的边栏会露出来。而且我这个主题是从Twenty eleven主题改来的,Twenty eleven本身是响应式主题,无需缩放就可以清楚的看完整个页面的内容。

于是我就开始百度,找了好久找到了这样的代码

//神奇代码
WebSettings webSettings = m_WebView.getSettings(); 
webSettings.setSupportZoom(false);

虽然我还没有理解,但是至少知道它有用。
如果读者有什么其他的方法或建议也可以留言。

选择性使用网站背景图片

最近的一篇文章主题【3】的背景坎坷里写到了背景图片的background-size: cover这个css对移动设备并不怎么友好,无法达到标准的显示效果,于是我一直在想办法使用img标签来填补这个bug,不过今天我又不想做了,所以找了个理由。[接下来就是理由]

如可以正常浏览本站的童鞋们所见,我的div背景大部分都是半透明的,寒假里了解openGL的时候感觉透明处理真心很费神啊[对计算机来说],所以我决定让移动设备就干脆不显示背景图了。这样不仅省去好多渲染步骤,看起来还清爽,顺便间接的帮我解决了移动设备上背景图的撑满问题。
继续阅读选择性使用网站背景图片

腾讯微博自带博客RSS发布功能

刚刚发现腾讯微博的设置项里自带了通过博客RSS获取博文并自动发布微博的功能,于是我就来试试了

这个功能在设置->隐私设置->同步设置里,如图

[更新]刚才发现主页无法识别是因为我的插件中屏蔽了head里的RSS才会这样,正常的博客应该直接输入自己的博客地址即可,输入RSS地址也可以。

设置的时候我发现填了自己的博客地址没用= =。。。出现以下提示

然后点’知道了’,回到面板会发现输入框后面多了点什么东西

于是我大脑小脑中枢神经外加所有细胞共同思考这个问题,于是瞬间得出答案,打开博客拉出侧边栏,滚到最下面,找到文章RSS,右键复制链接地址,粘贴到这里,最后它就这么神奇的好了。

写这篇文章前特意去渣浪找了找,暂时没发现这个功能。(/ □ \)

本博客加入了多说插件

本来其实是很不想用这个插件的,后来发现WP自带的评论确实太麻烦了。。。
在WP插件搜索的时候,输入’多说’竟然找不到这个插件!
然后输入’duoshuo’才找到了这个插件。
后来我发现这个插件似乎还是灰常好用的,它会在所有使用多说的页面上显示所有站点的评论回复。
而且支持自定义样式喵~[虽然暂时懒得去搞样式]
似乎没话说了。

关于元素子节点的奇怪事件

[前言]请注意这是一只新手写的文章,请高手不要吐槽,假如可以帮我解答或更正错误请在下面留言
今天想修掉本博客的主题【3】的母主题Twenty eleven在评论数显示上的bug
[对我来说是bug,在首页或其他的文章聚合页面,每篇文章右上都会有个评论数框,在没有评论时,它就是一个框在那,非常莫名奇妙。有评论时才会显示数字。]

在这个过程中,由于包含评论数的链接没有任何id或class类,所以决定使用它带有comments-link类的父标签来获取子节点。

于是我在浏览器里先试了一下是否可以成功获取,结果出现这样的情况

20130220-004827.jpg

[吐槽]我了个去啊!是我睁眼瞎还是浏览器故意的啊!

[恢复]
很明显可以看出,在chrome开发人员工具里,父标签中除了链接没有其它任何东西,那么获取子节点的结果中前后两个是啥?

我们先来单独获取每个#text看看是啥
第一个

$(".comments-link")[0].childNodes[0]
#text
attributes: null
baseURI: "http://localhost:56964/"
childNodes: NodeList[0]
data: "↵	 "
firstChild: null
lastChild: null
length: 5
localName: null
namespaceURI: null
nextSibling: a
nodeName: "#text"
nodeType: 3
nodeValue: "↵	 "
ownerDocument: #document
parentElement: div.comments-link
parentNode: div.comments-link
prefix: null
previousSibling: null
textContent: "↵	 "
wholeText: "↵	 "
__proto__: Text

然后是第二个

$(".comments-link")[0].childNodes[2]
#text
attributes: null
baseURI: "http://localhost:56964/"
childNodes: NodeList[0]
data: "			"
firstChild: null
lastChild: null
length: 3
localName: null
namespaceURI: null
nextSibling: null
nodeName: "#text"
nodeType: 3
nodeValue: "			"
ownerDocument: #document
parentElement: div.comments-link
parentNode: div.comments-link
prefix: null
previousSibling: a
textContent: "			"
wholeText: "			"
__proto__: Text

第一个的内容看似是回车的符号【难道是换行符?
第二个是一堆tab【在电脑上记事本中选中时是一长条,所以我认为它是TAB

现在我个人得出了结论:在父子节点间的所有内容会分别成为两个文本节点[前后两个](仅个人观点,欢迎修正)

最后我想说:搞什么灰机啊!

QQ空间日志同步测试

今天装了把博文同步到QQ空间的插件。
这个插件没用TX的API,是利用QQ空间的邮箱写日志功能实现的[找到这个插件的网站上这么说的]。大概看了一下,似乎没有后门(可能我水平不够,有也看不出来)。
整个插件就一个PHP文件,代码也不多。

[更新]
已经确认此插件有效,而且立刻就发送出去了。
效果

只不过这一次发表我收到了一个验证邮件,

希望这只是特例,以后不要再出现。
今后这里的博客日志和QQ空间日志就会同步发表。

[更新]
经检验,这里的日至更新不会同步到QQ空间。

[更新]日志更新会作为一篇新文章发布到QQ空间,得出上面的错误结论是因为上一次测试更新时又要填验证码但我没看见。

[最后一次更新]
不用这个苦逼的插件了。。。

本博加上了loading大菊花

[前言:由于种种原因,功能性的代码全放到一个单独页面去了]

大部分修改自无聊的等待状态一枚

今天因为?????,我给博客加上了一个菊花来表示页面还在加载,防止有些朋友因为我的博客加载时间过长(这是为什啊!)而以为我博客挂了.

做这个东西几乎用了我一天的时间..说明我的技术还是不足啊,加油!

接下来是正文.

本次修改用到了jquery(我是赖上它了么),原本是把所有代码都写在header里的,后来我发现这样并不好,这样每次加载这个载入画面也要废一些资源,于是我把它单独放在一个html文件里,这样也是有好处的(虽然对有些人来说这样做并不好),好处在于此页面会单独缓存,不用每次一起加载,就算强制刷新也不会牵涉到刷新iframe里的内容,这样可以更快速的加载。

首先是html里的内容,

<html>
  
  <head>
    <script src="../js/jquery.js"></script>
    <style>div#waitallload { position: fixed; height: 100%; width: 100%; background-color: rgba(204,204,204,0.5); } div.huaban { position: absolute; background-color: #000; opacity: 0.4; border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; -ms-border-radius: 2px; -o-border-radius: 2px; } .caozuodingweidiancenter { -webkit-transform-origin: center; -moz-transform-origin: center; -o-transform-origin: center; -ms-transform-origin: center; transform-origin: center; } div#loadingall { position: relative; height: 28px; width: 28px; display: block; -webkit-transform: scale(3); -moz-transform: scale(3); -ms-transform: scale(3); -o-transform: scale(3); transform: scale(3); margin: 0 auto; opacity: 0.5; top: 50%; }</style></head>
  
  <body>
    <div id="waitallload">
      <div id="loadingall" class="caozuodingweidiancenter">
        <div class="huaban" id="huaban1" style="top:0px;left:12px;width:4px;height:8px;"></div>
        <div class="huaban" id="huaban2" style="right:3px;top:5px;width:8px;height:4px;-webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(45deg);"></div>
        <div class="huaban" id="huaban3" style="right:0px;top:12px;width:8px;height:4px;"></div>
        <div class="huaban" id="huaban4" style="right:5px;bottom:3px;width:4px;height:8px;-webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(45deg);"></div>
        <div class="huaban" id="huaban5" style="bottom:0px;left:12px;width:4px;height:8px;"></div>
        <div class="huaban" id="huaban6" style="left:3px;bottom:5px;width:8px;height:4px;-webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(45deg);"></div>
        <div class="huaban" id="huaban7" style="left:0px;top:12px;width:8px;height:4px;"></div>
        <div class="huaban" id="huaban8" style="left:5px;top:3px;width:4px;height:8px;-webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(45deg);"></div>
      </div>
    </div>
  </body>
  <script>huaban = 1;
    function huabanblack() {
      $("#huaban" + huaban).fadeTo(0, 1);
    }
    function huabanwhite() {
      var xiaoshi = 0;
      if (huaban < 8) {
        huaban = huaban + 1;
      } else {
        huaban = 1;
      }
      if (huaban == 1) {
        xiaoshi = 8;
      } else {
        xiaoshi = huaban - 1;
      }
      $("#huaban" + xiaoshi).fadeTo(600, 0.4);
    }
    /*等待菊花*/
    var juhua1haohei, juhua1haobai;
    function loadingstart() {
      juhua1haohei = setInterval('huabanblack()', 90);
      juhua1haobai = setInterval('huabanwhite()', 90);
    }
    loadingstart();</script>

</html>

然后在header里加入html的iframe

<iframe src="<?php echo get_template_directory_uri();?>/framepage/wait.html" style="z-index:-2;display:none;" id='waitiframe' class="bgiframe"></pre>

请无视php脚本,把它放在z-index的-2层上,以便显示在最下面,【z-index的-1层为太阳君和月亮酱】,先让他的显示为none,这样可以利用fadeIn淡入.接下来是就剩js的事了.

在head中的functions.js文件中进行了一下定义

$("#waitiframe").ready(function(e) {      //iframe加载好时进行操作,防止出现元素不存在的错误
	var waitiframe = $("#waitiframe");//获取这个iframe
	waitiframe.fadeIn(500,         //500毫秒(0.5秒)飘进
	function() {                            
		function loadingstop() {      //停止加载状态的函数
			waitiframe.fadeOut(500,//菊花iframe飘出去
			function() {
				waitiframe.remove();    //删掉这个iframe【这样就可以省去启动和停止菊花转动的代码了~~】
			});
		}
		$(window).load(function(e) { // 当完全加载好的时候
			loadingstop();    //停止载入动画
		})
	});
});

但是使用$(window).load有时还是会失效,所以我在页面最底下的修bug的js文件中加入了

var checkwaitiframetimeout;         //延时变量
function checkwaitiframe(){      //检测加载状态的函数[叫这个名字是因为原本它是用来检测iframe是否还在的函数,后来就没改]
	if(document.readyState =="complete"){            //加载状态
		clearTimeout(checkwaitiframetimeout);     //清除延时
		$("#waitiframe").remove();               //清除iframe
	}	
}

接着给下面的$(document).ready中加入

checkwaitiframetimeout=setInterval("checkwaitiframe()",3000);//3秒检测一次载入状态

至于不用自带的状态改变事件是因为担心事件不被捕获。。毕竟连上面的load事件都会丢失,所以还是用这种方法了。

主题【3】的背景坎坷

[2013年2月17日更新]:此CSS在我的iPhone的浏览器上(chrome和safari)表现不同于电脑上的浏览器,它会使背景图片撑满整个page层(整个网页的大小而不是显示区的大小)。所以针对移动设备也许也需要进行js级的背景调整

正文:
在昨天还是前天记不清了,我终于做好了新主题【3】,最后在弄背景图片的时候废了很长时间。
一开始我以为css里没有可以控制背景图片大小的样式【css2里确实没有,但我忘了伟大的css3..】
于是乎我就用一个img标签来充当背景【曾经也有想用img做背景而被blackglory喷过。。。】,然后再用javascript控制img标签自适应大小[这里我做了很长时间,在获取元素的时候出了些问题,后来还是解决了]。

后来发现了css3里又可以控制背景图大小的样式了,我表情如这个

先说说要用css3实现图片填充背景该怎么做

background-image: url(图片地址);  /*加载背景图*/
background-size: cover;/*设置尺寸,这里是第一个重点,可以让浏览器把背景图铺满整个显示区*/
background-attachment: fixed;/*这里不是必须,但一般要用上面那功能的话也都会需要这个功能:把图片固定住不随滚动条滚动*/
background-position: center;/*这里是两个样式[background-position-x和background-position-y]的集合版,设置为center可以让背景图完全居中*/

接下来还是说说img的做法吧,毕竟花了这么长的时间才弄好的QAQ[这个方法现在用来兼容不支持css3的浏览器{到底可不可以兼容还没有测试过}]

先是一个div包一个img标签

 
 

现在已被注释处理了,低于IE9的版本[我也不清楚IE从哪个版本开始支持css3的,于是就大概IE9好了]才会使用这个img标签的背景
这段代码放在了body内第一位
这个img的id被我定义成backgroundimg。。,外面包围的div设置了固定定位[fixed]样式,而且没有宽高,在显示区正中间。
接着把这个img放在div里,初始就这么定位在了50%,50%的地方。接下来的工作全交给js来完成了。

这一句放在head里,同样也被区别注释了。用来载入兼容模式背景图。

里面放了这些东西

 /*加载背景图*/

    bgimgjopj.ready(function(e) {     //背景图这个标签被解析时
        bgimg = document.getElementById('backgroundimg');//一个背景图的对象
        bgimg.style.display = 'none';//先让它隐藏
        bgimg.src = bgsrc;//bgsrc是config.js中的变量[配置]
        bgimgjopj.load(function() {//图片载入时
            bgimg.realwidth = bgwidth;
            bgimg.realheight = bgheight;//拿到宽高[宽高也是config.js中的变量]
            bgimg.w_h = bgimg.realwidth / bgimg.realheight;//计算宽高比
            bgimg.style.display = 'block';//这个其实不该放在这里的,应在最后才出现,但是由于那什么就懒得改了

            resetbgimg();//运行重设背景图函数
        });

        $(window).resize(function() {//窗口变动时
            windowwidth = window.innerWidth;
            windowheight = window.innerHeight;//得到窗口宽高
            resetbgimg();//运行重设背景图函数
        });

        function resetbgimg() {//重设背景图函数
            /*重设背景图*/
            var winw_h = windowwidth / windowheight;//计算窗口宽高比
            if (winw_h > bgimg.w_h) {//窗口宽高比大于图片宽高比时(这时情况是图片左右撑满,上下溢出窗口外)
                bgimgjopj.height('auto');
                bgimgjopj.width(windowwidth);

            } else {//窗口宽高比小于等于图片宽高比时(这时情况是图片上下撑满,左右溢出窗口外)
                bgimgjopj.width('auto');
                bgimgjopj.height(windowheight);
            }
            bgimgjopj.css({//让图片居中
                "margin-left": (bgimg.offsetWidth / -2),
                "margin-top": (bgimg.offsetHeight / -2)
            });
        }
    });

这样就可以让图片永远撑满窗口而且尽量显示全了。

实在不知该写什么了,这篇完结。