09/10
2015
这套“炎热夏天比基尼”是9月2日活动箱子里的，但是开出来的几率没有之前白色比基尼的几率高。世界上很少看到有人卖，我收了一套，结果又被代价坑了，出价太高了。
这次的只有褐色的，并不怎么好看，怨念
Read More →
09/10
2015
WordPress的文章编辑器好蛋疼，代码模式下如果插入的代码有空行，就会自动加上p标签，还把&符号给转码了，想插入直接运行的代码还是只好用iframe。
前两天看到bilibili个人中心的收藏夹，收藏夹改版后，左侧显示的是分类列表，那里用了一个自定义滚动条。于是我也想做一个出来。花了大半天时间，终于做出来了，运行良好。
由于最外层div设置了overflow:hidden属性，所以滚动也需要用鼠标滚动事件来做。这个之前做过，没费多大事就做出来了。到了用滚动条控制滚动的时候就犯难了。因为以前用到鼠标事件基本上就是onclick，现在的拖动则要使用mousedown、mousemove、mouseup这三项。百度之后看到了别人写的结构，这才明白了一些。然后设置鼠标移动时的事件，设法减小计算量（有些值甚至有三种方法可以设置），增加必要的限制。真是步步维艰，光拖动这块，最少用了4个小时才完成。不过做完了收获也不小。
做这部分的时候我发现如果把mousemove事件写到mousedown里面，而且过后不解除绑定的话，会累计次数。就是说你第2次触发mousemove的时候是执行2次，触发第10次的时候是10次……写到外面不知道是否可以避免。
代码比较多，不贴了，查看demo更好一些。demo里也保留了很多注释。
需要jq支持；代码已经封装成了函数，可以直接饮用（参数代码里有说明）。你需要在网页中预设的高度有三个：外层box的高度，主体部分的高度和滚动条容器的高度。鼠标滚轮每次滚动多少个像素是由变量preHeight规定的。
当然，在实际使用中也要注意这几个主要结构的css属性，例如外层box的overflow:hidden;以及一些定位属性等。
此代码在chromeV45、firefoxV39、IE8、IE11中测试通过。
注意：
在实际中使用，不建议应用到全网页上（虽然我已经在本站上成功试验过了）。因为外层box的高度小于内容的高度（要不怎么会出现滚动条），而且设置了overflow:hidden属性。这将导致这个区域的翻页快捷键无效（例如上下方向键、翻页键等），会影响用户体验。如果把body标签作为最外层容器，很容易被发现。
此外，在移动设备上这个完全没卵用。
所以这个玩意较为适合的使用场景是在单独的区域上使用。
js制作的的自定义滚动条
09/9
2015
现在可以直接设置进度条的长度、或手动指定，以及读取特定属性来设置。
先看看基础结构：
<div id="box">
<div id="lbar" data-l="70"></div>
</div>
<br><br>
<input type="button" id="setLBtn" value="设置一个进度">
<style>
#box{width: 500px;height: 16px;border-radius: 8px;background: #ccc;}
#lbar{width: 0px;height: 16px;border-radius: 8px;background: #0c0;transition:all .4s;}
</style>
<script src="http://apps.bdimg.com/libs/jquery/1.9.0/jquery.js"></script>
js代码：
function setL (element,length) {
element.width(element.parent().eq(0).width()*length);
}
//读取特定属性来设置进度，适用于多个进度条的场景
var allL=$("[data-l]");
for (var i = 0; i < allL.length; i++) {
setL ($(allL[i]),parseInt($(allL[i]).attr("data-l"),10)/100);
};
//直接设置进度条的百分比
setL($("#lbar"),0.4);
//手动指定进度条的百分比
$("#setLBtn").click(function (argument) {
setL($("#lbar"),parseInt(window.prompt("请输入一个表示百分比的整数", ""),10)/100);
});[/code]
这次学到了把JQuery对象和DOM对象互相转换的方法。 JQuery对象和DOM对象的方法不通用，例如上面代码中读取特定属性的代码中，本来取到的属性的集合是jquery对象，可是在for循环里用了索引之后就成了DOM对象了，然后使用函数里的parent()方法就报错。这时候需要把索引之后的DOM对象重新转换为Jquery对象。
[code lang="js"]//把Jquery对象转换为dom对象，方法1：使用索引
$("p")[0];
//把Jquery对象转换为dom对象，方法2：使用get()方法，参数和索引一样
$("p").get(0);
//把DOM对象转换为Jquery对象，使用$()包含DOM对象
var box=document.getElementById("box");
box=$(box);[/code]
查看demo
做了一个js控制的进度条效果
09/8
2015
今天久违的刷机了一次，上次刷机还是去年12月的时候了。之前一直用的乐蛙5.0，没出过大毛病，现在是想寻求点新鲜感，所以换了新出的乐蛙6.0.
令人失望的是安卓内核没有提升，还是4.2.2。乐蛙6.0的特点是系统应用的颜色区域会跟随壁纸的颜色变化，这点很不错。下拉通知的字体调小了，看起来空间更大了。通知栏和鸟瞰的背景是高斯模糊的，叠加在屏幕上。屏幕四周的圆角也取消掉了，乍一看感觉屏幕变大了←_←
刷完之后换了新壁纸，还把以前用过的live2d全裸壁纸拿出来怀念了一下。感觉还是excited！
Read More →
今天又刷机了喵
09/8
2015
现在支付宝在二维码付款时，右上角有个帮助区域，可以切换两张图片。这时候我想到了一个问题，如果这里是使用banner切换的思路做的话——那样的话图片需要用排列，圆点指示器也得用html元素做出来，用在这么简单的一个地方，就显得太繁重了。于是我看了下源代码，不得不赞一声，毕竟是支付宝，人家不会像我一样低级。
支付宝是怎么做的呢？一个图片容器，里面两张图片，就这么简单。
你可能会问，指示器哪里去了呢？其实支付宝这里的指示器是做到图片上的，当图片切换的时候，指示器看起来就像是切换了一样。我一看到指示器和切换，就想到banner那里去了，这是思维定势，毕竟图样图森破。
但是我们点击指示器的时候，图片确实会切换。我想了一下，应该是在鼠标点击时判断点击位置，如果点击在左半边，图片就切换到第一张；如果点击在右半边，图片就切换到第二张。
于是做了个demo：
做出来之后才发现一件好玩的事情，指示器（实际上并没有真正的指示器）的心理作用大于实际作用，因为你即使在指示器之外点击鼠标（哪怕是点击图片左上角和右上角），图片也会正确的切换。
如果要切换的图片多的话，用这种方法就不那么简便了。
Read More →
仿支付宝帮助图片切换效果
09/7
2015
各个浏览器在鼠标滚轮事件上的兼容性问题简直可以让人抓狂。事件名、添加事件的方法、向上向下滚动的判断这三部分的兼容都存在差异。今天看到了一片文章——《JS事件-鼠标滚轮事件》，整理修改了一下，亲测有效。
function addEvent(obj,xEvent,fn) {//区别浏览器来添加鼠标滚轮事件
if(obj.attachEvent){
obj.attachEvent('on'+xEvent,fn);
}else{
obj.addEventListener(xEvent,fn,false);
}
}
var oDiv = document.body;
addEvent(oDiv,'mousewheel',onMouseWheel);
addEvent(oDiv,'DOMMouseScroll',onMouseWheel);
function onMouseWheel(ev) {//当鼠标滚动时执行
var ev = ev || window.event;
var down = true; // 定义一个标志，当滚轮向下滚时，执行一些操作
down = ev.wheelDelta?ev.wheelDelta<0:ev.detail>0;
if(down){
alert("向下");
}else{
alert("向上");
}
/*下面这条语句可以阻止所有浏览器中的滚动条滚动
if(ev.preventDefault){ //FF 和 Chrome
ev.preventDefault();// 阻止默认事件
}
*/
//return false;//执行中出现return false语句会在IE8中阻止滚动条滚动，在其他浏览器中则需要上面的语句
}
第一部分和中间部分是给指定的元素添加鼠标滚动事件，第三部分是当鼠标滚动时要执行的代码。这里面判断鼠标方向和阻止浏览器默认行为的代码可以按需删改。
此代码在chromeV44、firefoxV39、IE11、IE8中测试通过。
Read More →
js中对鼠标滚动事件的兼容性处理
09/7
2015
昨天做了下百度答题（无力吐槽“冬”是个什么鬼），它的对错提示做的不错，直接在选项上显示对号或者叉号。审查元素发现原来是在结果上面覆盖了一层图片，我之前还以为是什么高深的技术……
这算个小技巧吧，我也自己仿了个，记录一下：
要纯洁，不要H！
百度答题用图片提示对错
09/7
2015
for(var key in objectName){
console.log(objectName[key])
}
一开始不会做fon in这部分，因为objcet对象的属性名或值不能像数组一样使用数字索引来输出。百度之后学会了用for in来取得属性名。拿到了属性名之后就可以获取到值了，不过此时要写成object[key]的形式。
js中使用for in遍历输出object的值
09/6
2015
虽然作为一个半吊子前端来说，数据库和我没什么关系，不过维护网站的时候还是难免和数据库打交道。以前在学校的时候SQLServer学的还不错，但是现在早都忘光了，基本的语句都得去网上查。更可气的是有时候查到的还是错的，我内心一万头草泥马奔腾而过……所以在这里记下常用的语句，做个书签。
添加字段：
alter table dede_sysconfig add cfg_data_about varchar(500);
删除字段：
alter table dede_sysconfig drop column cfg_data_about;
插入记录：
INSERT INTO `dede_addonarticle` (`body`) VALUES('test'); //只插入对应字段的记录
INSERT INTO `dede_sysconfig` VALUES(800,'cfg_data_about',"网页中关于我们的文字",1,"bstring",NULL);//插入所有字段的记录（没有指定字段，所以要把每个字段的值都写出来）
删除记录：
DELETE FROM `wp_users` WHERE `user_email` like '%yahoo%';
替换：
UPDATE `dede_addonarticle` SET `body`=replace(body,'最好','');
修改：
UPDATE dede_arctype SET typedir='{cmspath}/a/yyjj' where id=1;
查找：
select * from dede_addonarticle where body like '%最好%';
清空表：
TRUNCATE TABLE dede_diyform1
删除表：*
DROP TABLE wp_links,wp_options,wp_postmeta
删除数据库：
drop database datebaseName
修改字段的类型和长度：
alter table dede_arctype modify column typedir char(100) ;
另可参考《mysql sql语句大全》
*一次性删除数据库内所有所有表的办法：
先执行
SELECT CONCAT('drop table ',table_name,';') FROM information_schema.`TABLES` WHERE table_schema='datebaseName';
执行结果里有许多DROP TABLE语句，全部复制然后执行，就删除了所有的表。
（如果是phpmyadmin的话，由于查询结果不便于复制，可以得到的结果导出为word文件，然后复制“转存表中的数据 TABLES”一项的内容并执行。）
常用sql语句
09/5
2015
表单中的file上传控件在各个浏览器中的外观都不太一样，所以我们可以自己做一个外观。原理是隐藏file控件，然后自己做出文件名的显示区域，以及选择按钮。
<form id="form0">
<input type="file" id="fileinput1">
<span id="showfile">尚未选择文件</span>
<span title="选择文件" id="selectbtn1">选择文件</span>
<span class="tip">图片必须为jpg格式，体积小于2M，文件名不能包含“sox”三个字</span>
</form>
<style>
#fileinput1{display: none;}
#form0 span{border-radius: 5px;font-family: '微软雅黑';display: inline-block;}
#showfile{width: 300px;height: 34px;line-height: 34px;color: #aaa;padding:0 5px 0 10px;border:1px solid #0c0;white-space:nowrap; text-overflow:ellipsis;overflow: hidden;vertical-align:top;}
#selectbtn1{width: 100px;height: 36px;line-height: 36px;background:#4DB849;color: #fff;text-align: center;cursor: pointer;vertical-align:top;}
.tip{margin-left: 5px;color: #aaa;height: 36px;line-height: 44px;}
</style>
<script>
document.getElementById("selectbtn1").onclick=function () {
document.getElementById("fileinput1").click();
}
document.getElementById("fileinput1").onchange=function(){
if (this.files[0].type!="image/jpeg") {
alert("文件格式不正确！");
return false;
}else if(this.files[0].size>2000000){
alert("文件体积过大！");
return false;
}else if (this.files[0].name.toLowerCase().indexOf("sox")>-1) {
alert("文件名包含非法字符！");
return false;
};
document.getElementById("showfile").innerHTML=this.files[0].name;//这里没有用value，因为获取不到真实的绝对路径的，不如只显示文件名
document.getElementById("showfile").style.color="#333";
}
</script>
点击选择文件按钮的时候用js去触发file控件;在选取文件之后，将文件信息显示到文件名区域里。
你可能会注意到files[]这个集合：
this.files[0]
这是html5中为file控件增加的属性，通用的有name、size、type、lastModified这几个属性。这些属性可以用来对上传的文件做一些检测。
注意，size的单位是Byte（字节）。
