改改名

分类： 技术

  • App内网址链接外部浏览器页面-kp appcan

    function ck(yWebsite){

    if (isAndroid) {

    //android设备

    uexWidget.loadApp(‘android.i appcanntent.action.VIEW’, ‘text/html’, yWebsite);

    }

    else {

    //IOS设备

    uexWidget.loadApp(yWebsite,null,null);

    }

    }

  • 自动切换选项卡

    //clearInterval(ID)
    //setInterval(函数名，时间)setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
    //oLi[i].index=i; 出现问题为“无法获取未定义或 null 引用的属性‘style’”
    //达到的效果，点击前进和后退皆可
    //问题点：当抛出点击箭头，直接点击onclick后，再点击箭头出现问题，回归到第一个箭头，不能从当前的地方开始。联系起来iNow和this.index
    //clearInterval() 方法可取消由 setInterval() 设置的 timeout。
    //clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值。语法clearInterval(id_of_setinterval)除掉, 必须要返回的数值，句柄，setInter




    无标题文档

    • 内容一
    • 内容二
    • 内容三
    • 内容四

    →
    ←



  • 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（数组）

  • 选项卡-左右箭头

    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

  • 吸顶菜单

    知识点:
    $(‘.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注册。

  • 宽度100%，缩小浏览器，有滚动条，右侧出现空白bug

    当浏览器窗口缩小，默认100%宽度为浏览器窗口的宽度。忽略下部内容层固定宽度(1100px)。就出现了固定宽度大于100%宽度的现象。查看以此理解来解析页面，就出现了容器宽度理解上的差异，出现了一个非常奇特的BUG。

    width:expression_r(document.body.clientWidth <= 1100? "1100px": "auto"); min-width:1100px; 这种bug一般不常见，或者没有注意到。 但网站放到手机上浏览的时候，就会发现，右侧大块空白。 直接设置 把最大宽度设置成 min-width:npx; 即可

  • style、currentStyle、getComputedStyle区别介绍

    样式表有三种方式

          内嵌样式（inline Style） ：是写在Tag里面的，内嵌样式只对所有的Tag有效。

         内部样式（internal Style Sheet）：是写在HTML的<head></head>里面的，内部样式只对所在的网页有效。

          外部样式表（External Style Sheet）：如果很多网页需要用到同样的样式(Styles)，将样式(Styles)写在一个以.css为后缀的CSS文件里，然后在每个需要用到这些样式(Styles)的网页里引用这个CSS文件。

         最常用的是style属性，在JavaScript中，通过document.getElementById(id).style.XXX就可以获取到XXX的值，但意外的是，这样做只能取到通过内嵌方式设置的样式值，即style属性里面设置的值。

       解决方案：引入currentStyle,runtimeStyle,getComputedStyle

       style                标准的样式！可能是由style属性指定的！
         runtimeStyle    运行时的样式！如果与style的属性重叠，将覆盖style的属性！
        currentStyle   指 style 和 runtimeStyle 的结合！

        通过currentStyle就可以获取到通过内联或外部引用的CSS样式的值了（仅限IE）

       如：document.getElementById("test").currentStyle.top

       要兼容FF，就得需要getComputedStyle 出马了

       注意:getComputedStyle是firefox中的，

               currentStyle是ie中的.

    比如说

    <style>

         #mydiv {

                width : 300px;

         }

    </styke>

    则:

    var mydiv = document.getElementById(‘mydiv’);

    if(mydiv.currentStyle) {

          var width = mydiv.currentStyle[‘width’];

          alert(‘ie:’ + width);

    } else if(window.getComputedStyle) {

          var width = window.getComputedStyle(mydiv , null)[‘width’];

          alert(‘firefox:’ + width);

    }

    另外在FF下还可以通过下面的方式获取

    document.defaultView.getComputedStyle(mydiv,null).width

    window.getComputedStyle(mydiv , null).width

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

  • 利用border制作小三角

    群里Alex提供，据测试ie6 ie7 ie8 兼容，其他自不必说

    用css 中border写出，可以取代图片

    <!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>

    /*zishu.cn*/

    *{ margin:0; padding:0; font-size:12px; font-family:Verdana, "宋体", Arial; line-height:1.8; list-style:none;}

    #info,#nav{ margin:50px; border:1px dashed #FF3300; background:#FFFFCC; padding:50px;}

    #info div{background:#FF0000; width:0px; height:0px; overflow:hidden; margin-bottom:10px;}

    /*一些三角的写法*/

    #com_a{ border-top:10px solid #FFFFCC;border-left:10px solid #FF3300;border-bottom:10px solid #FFFFCC;}

    #com_b{ border-top:10px solid #FFFFCC;border-right:10px solid #FF3300;border-bottom:10px solid #FFFFCC;}

    #com_c{ border-top:10px solid #FFFFCC;border-right:10px solid #FF3300;border-bottom:10px solid #FFFFCC;border-left:10px solid #FF3300;}

    #com_d{ border-top:10px solid #FF3300;border-right:10px solid #FFFFCC;border-bottom:10px solid #FF3300;border-left:10px solid #FFFFCC;}

    #com_e{ border-top:10px solid #FFFFCC;border-left:10px solid #FF3300;}

    #com_f{ border-top:10px solid #FF3300;border-right:10px solid #FFFFCC;border-left:10px solid #FFFFCC;}

    #com_g{ border-right:10px solid #FFFFCC;border-bottom:10px solid #FF3300;border-left:10px solid #FFFFCC;}

    #com_h{ border-top:10px solid #FF3300;border-bottom:10px solid #FF3300;border-left:10px solid #FFFFCC;}

    #com_i{ border-top:10px solid #FF3300;border-right:10px solid #FF3300;border-bottom:10px solid #FF3300;border-left:10px solid #FFFFCC;}

    </style>

    </head>

    <body>

    <div id="info">

    <h1>一些三角形的写法</h1>

      <div id="com_a"></div>

      <div id="com_b"></div>

      <div id="com_f"></div>

      <div id="com_g"></div>

      <div id="com_c"></div>

      <div id="com_d"></div>

      <div id="com_e"></div>

      <div id="com_h"></div>

      <div id="com_i"></div>

    </div>

    </body>

    </html>

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