lizhenqiu blog

<script type="text/javascript">
    var str1;
    var str=[];
    var flag1=true;
    var flag2=true;
    var flag3=true;
    var flag4=true;
    do{
        var num=parseInt(Math.round(Math.random()*(4-1))+1);
        if(num==1&&flag1){
            str[str.length]="a";
            flag1=false;
        }else if(num==2&&flag2){
            str[str.length]="b";
            flag2=false;
        }else if(num==3&&flag3){
            str[str.length]="c";
            flag3=false;
        }else if(num==4&&flag4){
            str[str.length]="d";
            flag4=false;
        }
    }while(flag1||flag2||flag3||flag4)
    str1=str[0]+str[1]+str[2]+str[3];
    document.write(str1);
</script>

<script type="text/javascript">
    var arr=["a","b","c","d"];
    function changestr(){
        var newArry=[];
        var temp=[];//新创建的两个数组
        for(var p in arr){
            temp[p]=arr[p];//将原本数组中的值复制给重新定义的数组
        }
        for(var i=0;i<arr.length;i++){
            var random=Math.round(Math.random()*(temp.length-1));//产生0~temp数组长度-1的值
            newArry[i]=temp[random];//将temp数组中随机出来的数组值赋给新数组
            temp.splice(random,1);//删除赋给新数组的值，temp数组的长度减一，直到temp中没有值为止
        }
        return newArry
    }
    document.write(Arry=changestr());
</script>

function Partion(&$arr,$low,$high)
{
    if($low >= $high)
    {
        return;
    }

    //标记位
    $povion = $arr[$low];
    while ($low <$high ) 
    {
        while ($low < $high && $arr[$high] <= $povion)
        {
            $high--;
        } 
        $arr[$low] = $arr[$high];
        while ($low < $high && $arr[$low] > $povion)
        {
            $low++;
        } 
        $arr[$high] = $arr[$low];
    }
    //循环完了之后将标记位回复到i=j相交的位置
    $arr[$low] = $povion; 
    return $low;
}

function Qsort(&$arr,$low,$high)
{
    if($low >= $high )
    {
        return;
    }
    while($low < $high)
    {
        $povision =  Partion($arr,$low,$high);
        Qsort($arr,$low,$povision-1);
        $low = $povision+1;
    }

     //正常的递归调用快排算法如下

     //    $povision =  Partion($arr,$low,$high);    
     //    Qsort($arr,$low,$povision);
     //    Qsort($arr,$povision+1,$high);
}

function   Feb($n)
{
     if($n<=2)
     {
         return 1;
     }
     $res = Feb($n-1)+Feb($n-2);
     return $res;
}

$res = Feb(20);
print_r($res);



function Febs($n,$sum1,$sum2)
{
     if($n<2)
     {
         return $sum1;
     }
     else
     {
        return Febs($n-1,$sum2,$sum1+$sum2);
     }
}

 print_r(Febs(20,1,1));

// 缓存是怎么使用的？
// 一般的缓存结构就是：键值对（对象 或者 数组）
// var obj = {};
// var arr = [];
// 使用缓存的方式：
// 1 先去缓存中查找有没有键对应的数据
// 2 如果有，就直接拿过来使用
// 3 如果没有，就计算或者是查询到，然后，要放到缓存中！
// 4 以后，就通过缓存来去数据
// 简化的步骤：先去缓存中查询有没有，如果没有就计算，并将结果放到缓存中
// 问题：缓存放到什么位置去？？
// 如果是全局变量，此时，任何人都能修改全局变量的内容
// 那就造成：数据不准确
// var obj = {};

// 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89....
var count = 0;
var fib = (function() {
// 使用闭包，将缓存放到闭包中去，
// 此时，就对这个缓存起到了保护的作用
// var cache = {};
var cache = [];

// 这个函数使用来计算：斐波那契数列
return function(n) {
count++;
// 1 先去缓存中查找有没有该键对象的值
if(cache[n] !== undefined) {
// 2 如果有，就直接返回当前的值
return cache[n];
}

// 3 如果没有，就计算，然后要添加到缓存中去
if(n === 0 || n === 1) {
// return 1;
cache[n] = 1;
return cache[n];
}

var temp = arguments.callee(n - 1) + arguments.callee(n - 2);
// 放到缓存中去
cache[n] = temp;
return cache[n];
};
})();

fib(40);

console.log(count);// 计算次数为：79次。

<script type="text/javascript">

function downloadJSAtOnload() {
  
    var element = document.createElement("script");

    element.src = "defer.js";

    document.body.appendChild(element);

}

if (window.addEventListener)

    window.addEventListener("load", downloadJSAtOnload, false);

    else if (window.attachEvent)

   window.attachEvent("onload", downloadJSAtOnload);

   else window.onload = downloadJSAtOnload;

</script>

var a = {};
var b = '我是b1';
a.name = 'aaaa';
(function(a,b) {
    a.name = 'bbbb';
	b='我是b2';
    a = {};
    a.name = 'cccc';
    console.log(a.name);
	console.log(b);
})(a,b); 
console.log(a.name);
console.log(b);

.file {
　　position: relative;
　　height: 40px;
　　line-height: 40px;
}
.file label {
　　display: inline-block;
}
.userdefined-file {
　　position: absolute;
　　top: 0;
　　left: 60px;
　　z-index: 2;
　　width: 300px;
　　height: 40px;
　　line-height: 40px;
　　font-size: 0;  /*应对子元素为 inline-block 引起的外边距*/
}
.userdefined-file input[type="text"] {
　　display: inline-block;
　　vertical-align: middle;
　　padding-right: 14px;
　　padding-left: 14px;
　　width: 220px;
　　box-sizing: border-box;
　　border: 1px solid #ccc;
　　height: 40px;
　　line-height: 40px;
　　font-size: 14px;
　　overflow: hidden;
　　text-overflow: ellipsis;
　　white-space: nowrap;
}
.userdefined-file button {
　　display: inline-block;
　　vertical-align: middle;
　　width: 80px;
　　text-align: center;
　　height: 40px;
　　line-height: 40px;
　　font-size: 14px;
　　background-color: #f54;
　　border: none;
　　color: #fff;
　　cursor: pointer;
}
.file input[type="file"] {
　　position: absolute;
　　top: 0;
　　left: 60px;
　　z-index: 3;
　　opacity: 0;
　　width: 300px;
　　height: 40px;
　　line-height: 40px;
　　cursor: pointer;
}

body { margin: 0; }
input { padding: 0; margin: 0; border: 0; }
.female, .male {
    position: relative;
    height: 40px;
    line-height: 40px;
    margin-left: 40px;
}
.sex label {
    display: block;
    height: 40px;
    width: 40px;
    line-height: 40px;
    font-size: 20px;
    cursor: pointer;
}
.sex input {
    z-index: 3;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 40px;
    margin: auto;
    display: block;
    width: 30px;
    height: 30px;
    cursor: pointer;
}

<form action="">
    <div class="sex">
        <div class="female">
            <label for="female">女</label>
            <input type="radio" name="sex" id="female">
            <span class="female-custom"></span> <!-- 同下面的 span 一样作为自定义的元素 -->
        </div>
        <div class="male">
            <label for="male">男</label>
            <input type="radio" name="sex" id="male">
            <span class="male-custom"></span>    
        </div>
    </div>
</form>

body { margin: 0; }
input { padding: 0; margin: 0; border: 0; }
.female, .male {
    position: relative; /* 设置为相对定位，以便让子元素能绝对定位 */
    height: 40px;
    line-height: 40px;
    margin-left: 40px;
}
.sex label {
    display: block;
    height: 40px;
    width: 40px;
    line-height: 40px;
    font-size: 20px;
    cursor: pointer;
}
.sex input {
    z-index: 3;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 40px;
    margin: auto; /* 这里及以上的定位，可以让该元素竖直居中。(top: 0; bottom: 0;) */
    opacity: 0;
    display: block;
    width: 30px;
    height: 30px;
    cursor: pointer;
}
.sex span {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 40px;
    margin: auto;
    display: block;
    width: 25px;
    height: 25px;
    border: 1px solid #000;
    border-radius: 50%;
    cursor: pointer;
}        
.sex span.active {
    background-color: #000;            
}

<form action="">
    <div class="fruit">
        <div class="apple">
            <label for="apple">苹果</label>
            <input type="radio" name="fruit" id="apple">
            <div class="user-defined">
                <span class="circle"></span>
            </div>
        </div>
        <div class="banana">
            <label for="banana">香蕉</label>
            <input type="radio" name="fruit" id="banana">
            <div class="user-defined">
                <span class="circle"></span>
            </div>
        </div>
        <div class="orange">
            <label for="orange">橘子</label>
            <input type="radio" name="fruit" id="orange">
            <div class="user-defined">
                <span class="circle"></span>
            </div>
        </div>
    </div>
</form>

* { box-sizing: border-box; }

body { padding: 50px; }

input { padding: 0; margin: 0; border: 0; }

.fruit:before { content: ""; display: table; }

.fruit:after { content: ""; display: table; clear: both; }

.fruit > div { position: relative; float: left; margin-right: 50px; width: 80px; height: 40px; line-height: 40px; }

.fruit > div:last-child { margin-right: 0; }

.fruit label { display: block; width: 50px; height: 40px; line-height: 40px; cursor: pointer; }

.fruit input { z-index: 3; display: block; opacity: 0; position: absolute; top: 0; bottom: 0; left: 50px; margin: auto; width: 30px; height: 30px; cursor: pointer; }

.fruit .user-defined { z-index: 2; position: absolute; top: 0; bottom: 0; left: 50px; margin: auto; width: 30px; height: 30px; border: 1px solid #000; border-radius: 50%; cursor: pointer; }

.fruit .user-defined span.circle  { display: block; width: 24px; height: 24px; margin-top: 2px; margin-left: 2px; background-color: transparent; border-radius: 50%; }

.fruit .user-defined span.active  { background-color: #000; }

JavaScript整理
JavaScript是脚本语言

常用对话框：

alert()——警告对话框，作用是弹出一个警告对话框
confirm()——带确定和取消按钮，返回True或false
prompt()——弹出一个可以输入内容的对话框
JavaScript语法

基本数据类型与C#基本一样，万能变量var——可以随便存储其它类型的值，可以直接使用

显式转换：

parseint()——转换为整数

parsefloat()——转换为小数

运算符：与C#一样

数学运算符：+ - * / % ++ --；

关系运算符：==  !=  >  >=  <  <=；

逻辑运算符:&&  ||  !；

其它运算符:+= -= *= /= %= ?:

分支语句：

if...else

循环语句：

for（）

数组：

new Array（）;——类型固定，长度不固定

数组属性：a.length；数组元素的个数

函数：

function 函数名(参数){}

function(){}——匿名函数

window对象：

window.open("打开的网址""打开的位置")
window.opener——打开此页面的上一个页面
window.close()——关闭当前页面
window.navigate("url")——超链接功能
window.moveTo(x,y)——移动浏览器至某一位置
window.resizeTo(x,y)——设置浏览器的宽高
window.scrollTo(x,y)——锚点功能
定时器：

window.setTimeout(function(){},间隔执行的时间)——等待多久后执行，仅执行一遍
window.setInterval(function(){},间隔执行时间)——每隔多长时间执行一次，不会停止
window.history:

window.history.back()——页面后退
window.history.forward()——页面前进
window.history.go(n)——前进后退,n为正数则前进n个页面，为负数则后退n个页面
window.location.href="url"  ——超链接，主要
window.status——操作页面底部工具条的对象
window.document：

docunment.getElementById("id")；根据id找，最多找一个；
docunment.getElementsByName("name")；根据name找，找出来的是数组；
docunment.getElementsByTagName("name")；根据标签名找，找出来的是数组；
docunment.getElementsByClassName("name") 根据classname找，找出来的是数组；
操作内容：

普通元素：

1.innerHTML：赋值：

var a= document.getElementById("id");

 a.innerHTML = "<h1>aaaaaaa</h1>";

有<h1></h1>元素标记会被编译

取值：会将此元素内的所有内容包括元素标记都取出来

2.interText

赋值：会将赋的东西原样呈现

取值：只取文本内容

 表单元素：所有表单元素取值赋值全用value

操作属性：

 添加修改属性：对象.setAttribute("属性名","值")

如果没有此属性，那么会添加进去
如果已经有了此属性，那么会修改此属性的值

删除属性：对象.removeAttribute("属性名")

获取属性：对象.getAttribute("属性名")

操作样式

添加、修改样式：对象.style.样式名称=值

获取样式：对象.style.样式名称

相关元素

var a = document.getElementById("id");

取同辈的上一个和下一个元素：

var b = a.previousSibling，找a的上一个同辈元素

var b = a.nextSibling，找a的下一个同辈元素

取父级元素：var b = a.parentNode，找a的上一级父级元素

取子级元素：childNodes[n]找第几个

注意：回车和空格都算作一个元素