改改名

年度归档： 2014 年

  • 1、表格隔行变色且隔td单元格变色，2、多色的th

    1、表格隔行变色且隔td单元格变色

    感谢 boahy给的思路，让我抛却了各种想的索引值的写法。不然还得在索引值的大坑里面扑腾下去。
    td，行和列交叉有重色块。 需要看每行的颜色。（这个地方的颜色要用
    “各一行一种样式
    Boahy 16:35:30
    写两种样式就够了
    Boahy 16:35:42
    然后交替显示每种样式
    Boahy16:35:55
    哪里有什么叠加”）“

    为了表现明显些，我准备把这张图由1 变成2.
    12014-07-25_094755
    22014-07-25_095722

    td颜色 第一行 32 32 32， 隔行 21 21 21（从每行来看，再找共同点奇偶行相同）

    //td颜色
$('.tb tr:even td:even,.tb tr:odd td:odd').css({'background':'#ddd'});
$('.tb tr:even td:odd').css({'background':'#ccc'});

    .tb tr:even td:even    tr：even 偶数行里面的 偶数td 和 奇数行里面的 奇数 td
    偶数第一行是tr th行。实际有表现的是 偶数第二行 标注黑色字号的2 1 2 1 中的 2，2 为#ddd是偶数td。

    .tb tr:odd td:odd    tr：odd  奇数行里面的 奇数td  32 32的2

    $(‘.tb tr:even td:odd’).css({‘background’:’#ccc’})    偶数行的 奇数td。

    以往做的时候多考虑，奇偶行数，这次把奇偶行数tr和奇偶表格td全考虑到了。

    （私以为不会有人会遇到这么奇葩的表格）

    2、多色的th ，这个用了两种方法

    ① 利用th索引值，添加递增样式。

     //th 的颜色
        $('.tb th').each(function(){
                        i=$(this).index();
                        $(this).addClass('tab_th'+i);
        });

    所需要建立多个class

    css文件

    .tb  .tab_th0{ background:#64badc;}
.tb  .tab_th1{ background:#fdd059;}
.tb  .tab_th2{ background:#ec985f;}
.tb  .tab_th3{ background:#ec61ae;}
.tb  .tab_th4{ background:#7ae85a;}
.tb  .tab_th5{ background:#7b9ca3;}
.tb  .tab_th6{ background:#f4c377;}
.tb  .tab_th7{ background:#ca837b;}

    麻烦，不过有可能其他项目会用到

    ② 利用数组存储背景颜色赋值 √  这个好用，有多个表格也不怕了

    function tb_th(id){
	//th颜色
		var Arr=['#64badc','#fdd059','#ec985f','#ec61ae','#7ae85a','#7b9ca3','#f4c377','#ca837b'];
		for(var j=0 ;j<Arr.length;j++){
			$(id+' tbody tr th:eq('+j+')').css({'background':Arr[j]});
		};
	};
	//表格添加th背景色
	tb_th('#tb1');
	tb_th('#tb2');

    ps：要保证Arr的颜色值个数= 最大的表格th个数。Arr.length  >=   th.length

    demo1（class名字）

    demo2（数组）

  • 啊哟今天看了byvoid的故事

    啊哟，今天看了byvoid的故事，感觉好震撼。真羞愧。

    如果你不喜欢这份工作，却勉强自己做。不仅仅浪费了自己的生命，最重要的是也亵渎了这份职业。因为你不是专业的，你不能和那些天赋热情，努力钻研的人说同一个等级的，同一个职业的。

    刚百里~

    本文使用Blog_Backup未注册版本导出，请到soft.pt42.com注册。

  • 选项卡-左右箭头

    3<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>左右点击选项卡</title>
<style type="text/css">
#box{width:300px; margin:0 auto;}
#box input{ padding:4px 10px; background:#ccc; display:inline-block;}
#box input.on{ background:red;}
#box span{color:red; cursor:pointer;}
#box div{ width:298px; border:1px solid #000; display:none; height:200px;}
</style>
<script>
window.onload=function(){
	var oBox=document.getElementById('box');
	var oBtn=oBox.getElementsByTagName('input');
	var oCon=oBox.getElementsByTagName('div');
	var oPrev=document.getElementById('prev');
	var oNext=document.getElementById('next');
	var iNow=0;

	for(var i=0;i<oBtn.length;i++){
		oBtn[i].index=i;
		oBtn[i].onmouseover=function(){
			iNow=this.index;
			tb();
		}	
	}
	oPrev.onclick=function(){
		iNow--;
		if(iNow==-1){
			iNow=2;
		}
		tb();
	}
	oNext.onclick=function(){
		iNow++;
		if(iNow==3){
			iNow=0;
		}
		tb();
	}
	function tb(){
		for(var i=0;i<oBtn.length;i++){
			oBtn[i].className='';
			oCon[i].style.display='none';
		}
		oBtn[iNow].className='on';
		oCon[iNow].style.display='block';
	}

}

</script>
</head>

<body>
<div id="box">
<input type="button" value="菜单一" /><input type="button" value="菜单二" /><input type="button" value="菜单三" />
<span id="prev">←</span>  <span id="next">→</span>
<div style="display:block">12121212</div>
<div>22222222222</div>
<div>33333333333</div>
</div>
</body>
</html>

     Demo

  • 弹性菜单-js

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>弹性菜单</title>
<style>
*{ padding:0; margin:0; list-style:none;}
#ul1{ width:800px; position:relative; margin:10px auto; background:#9C0; height:30px;}
#ul1 li{ width:200px; height:30px; line-height:30px; text-align:center; float:left; z-index:2; position:relative;}
#ul1 li a{ display:block}
#ul1 li.box{ position:absolute; background:#ff0; left:0; top:0; z-index:1;}
</style>
</head>
<script>
window.onload=function(){
var oUl=document.getElementById('ul1');
var aLi=oUl.children;
var oBox=aLi[aLi.length-1];

for(var i=0;i<aLi.length-1;i++){
aLi[i].onmouseover=function(){
startMove(oBox,this.offsetLeft);
};
}
};
var i=0;
function startMove(obj,iTarget){
obj.speed=obj.speed||0;
obj.left=obj.left||obj.offsetLeft;

clearInterval(obj.timer);
obj.timer=setInterval(function(){
obj.speed+=(iTarget-obj.left)/5;
obj.speed*=0.7;
obj.left+=obj.speed;
obj.style.left=Math.round(obj.left)+'px';

if(Math.abs(obj.speed)<1&&obj.offsetLeft==iTarget){
clearInterval(obj.timer);
}
document.title=i++;

},30);
}
</script>
<body>
<ul id="ul1">
<li><a href="http://www.gaigaiming.com">首页</a></li>
<li><a href="javascript:;">作品</a></li>
<li><a href="javascript:;">用户</a></li>
<li><a href="javascript:;">论坛</a></li>
<li class="box"></li>
</ul>
</body>
</html>

     

    利用定位，运动展示弹性菜单。

    先清再定时器。

    DEMO

  • 时间带给你的痕迹

    人越长大，胆子越小，亦或者称之为谨慎。

    这几日如无头的苍蝇般乱飞，惶惶不可终日。

    前一段时间有个项目各种忙碌，虽辛苦，却也感觉乐陶陶的充实。

    这几日闲暇下来，反而各种左右挪动，总想找事找人把自己的时间占上。

    恍然，我大概不习惯主动独立的走路了。幸好在内心的争斗让我已经长大。

    在紫竹院看着那两个小学生的coser，帮她们拍着照。还有两人指点了我一下拍照要点。

    端午回家，先看看娴子和她的小宝。哈哈哈 麦子应该成熟了

  • 吸顶菜单

    知识点:
    $(‘.nav’).offset():获取匹配元素在当前视口的相对偏移 offset().top offset().left
    返回对象包含两个属性：top和left。 此方法只对可见元素有效

    $(‘.nav’).width():取得匹配元素的当前计算的宽度值
    参数：设定css中的width值，可以是字符串或者数字，还可以是一个函数。返回要设置的数值。

    $(‘p’).width() 获取第一段的宽度
    把所有的段落的宽度设为20
    $(‘p’).width(20);

    函数接受两个参数，第一个参数是元素在原先集合中的做因为只，第二个参数为原先的宽度。
    function(index,width)

    以10像素的复读增加p元素的宽度

    $('button').click(function(){
$('p').width(function(n,w){
return w+10;
})
})

    $(window).scroll()|| $(‘.div’).scroll 当页面滚动条变化时，执行的函数
    scrollTop() 获取匹配元素相对滚动提条顶部的偏移
    demo

  • svn working copy locked问题

    问题描述：

               用svn在项目文件夹下commit或者update时会出现错误提示“working copy locked”

    解决：

             1、在项目文件夹下，单机鼠标右键，选择tortoisesvn-》cleanup；

             2、如果cleanup没有效果的话只好手动删除锁定文件。

                   cd 到svn项目目录下，然后执行如下命令

                   del lock /q/s

    本文使用Blog_Backup未注册版本导出，请到soft.pt42.com注册。

  • 略记2048

    这两天，玩2048玩high了，在地铁上都不看小说了，感觉坐车的时间都过得很快了，吃饭的时候，还拿着同事的手机玩。（因为我的手机都玩没电了 – -！）

    故此，为了给我的逝去时间些许安慰，总结如下，我对游戏的略感！

    1、开始四处尝试，碰壁，兴趣点不要太多，集中一个方块的数字，

    2、玩多了，找到规律，反复做，耐心，关注小小的地方就能持续积累

    3、不要违反规律（）

    4、不要违反规律，最后只是看你想坚持多久，重复多久

     

    你一定要有个坚持点，稳固不动，虽然短时间会损失小的数字集合。其实我没有仔细观察过，出现2的位置规律，我想是随机或者规则。不过只要看护好你手头的数字，专注于他们，其他的无伤大雅。

    后期你会整出一列的兴趣点和高分，在你追求最大数字的时候，你的score就已经成为了附加值。

    哈哈哈

    我会说以前玩植物大战僵尸，还在本子上，画植物排兵分布图吗？

    再来个重大说教！

    工作也是如此，你追求工作它本身时。薪水就成为了附加值，就会水涨船高！

    好了，这个游戏没有挑战性了。

     

    时间你好，我太久没有写这些小P文了。莫辜负时间，其实我在考虑对你怎么整治，你看我有个个人网站啦

     

     

    本文使用Blog_Backup未注册版本导出，请到soft.pt42.com注册。

  • 母亲节快乐

    母亲的勇气

    距离母亲节还有三天，买礼物邮寄来的及。
    祝天下父母，身体健康。

  • 读书笔记-现在的躁动是为以后平静做的韵脚

    我为什么在奔跑，在知乎上面看到http://www.zhihu.com/question/23208119 为什么大家都要上大学找工作，而不太喜欢开出租车、开小店、开饭馆、摆街边早餐小吃摊等「短平快」项目？
    “孩子，我要求你读书用功，不是因为我要你跟别人比成绩，而是因为，我希望你将来会拥有选择的权利，选择有意义、有时间的工作，而不是被迫谋生。当你的工作在你心中有意义，你就有成就感。当你的工作给你时间，不剥夺你的生活，你就有尊严。成就感和尊严，给你快乐。”—-龙应台
    突然想到，某天的下午我跟宏兰说的话。我为什么来北京，我希望有更多的选择，而不是我只有一个选择。我想试试自己能跳多高，努力跳得更高，看到更好的风景。然后安稳下来选择适合自己的，而不是手里啃着玉米，我告诉自己我最喜欢吃玉米，可是吃过菠萝，也许会告诉别人我喜欢吃菠萝，不想没有尝试，不想没有努力过，就说，我不喜欢那个。我希望的是，吃完菠萝 香蕉 玉米后的自己说，我喜欢吃玉米，因为我尝试过其他，对比起来，我真的喜欢吃玉米。而不是我只有玉米可吃。

    龙应台的那句话恍若当头棒喝，醍醐灌顶。

    手里有很多的选项，才叫选择，只有一个选项的叫做无奈叫做生活所迫。好似在很久前我就已经在重申，不过这件事竟然被我遗忘好久，当那一段时间总有种无事生非的无根之源的置气和惶恐。我才明白，我遗忘了某些重要的精神。

    还有人从经济学方面计算回答这个问题

    “1、普通本科毕业生工作第三年，在京工资年薪六万，工作时间朝十晚六就算八小时。按照一般公司的计算方法，每月算22个工作日，那么折合每小时薪水28元。（但我必须说一句事实上这是我身边所有人本科毕业在京第一份工作的水平）
    2、普通本科在校实习生，现在北京的价码一般是一百块一天八小时，折合每小时12.5元。
    3、我家小区门口开小饭馆的安徽一家三口，月纯利约两万元，平日全勤，三个人三班倒（每日总耗费工时48个），折合每工时13.88元。
    4、北京的哥月均纯利润五千元左右，每日出勤十二小时，基本平日全勤，折合每工时也是13.88元。
    5、西单五道口等地服装店站店小妹每月两千八，早十点到晚十点月休四天，折每工时8.97元。

    这个对比中其实应该至少是五围对比：薪资、工时时长、社会接受度、潜在发展、福利与稳定水平。但我懒，大家根据五围自己脑补吧。
    至于隐形的站着还是坐着，动嘴皮子手指头还是扛菜杀鸡看人脸色，简直都不用继续算了。”

    70ef76fe829c42779438839b3bb89ab6_r (1)

     

    勿忘初心