JavaScript实例

1.JavaScript变量类型

<script type="text/javascript">
    var name = "zhangsan";
    document.write(name+"字串类型：" +typeof(name)+"<br/>");    //string
    a = 'b';
    document.write(a+"的数据类型：" +typeof(a)+"<br/>");        //string
    var a = 10;
    document.write(a+"的数据类型：" +typeof(a)+"<br/>");        //number
    a = 20.8;
    document.write(a+"的数据类型：" +typeof(a)+"<br/>");        //number
    a = true;
    document.write(a+"的数据类型：" +typeof(a)+"<br/>");        //boolean
    a = [10,20,30]; //数组
    document.write(a+"的数据类型：" +typeof(a)+"<br/>");        //object
    a = null; //空
    document.write(a+"的数据类型：" +typeof(a)+"<br/>");        //object
    a = new Object; //对象
    document.write(a+"的数据类型：" +typeof(a)+"<br/>");        //object

    document.write("未定义的变量类型：" +typeof(b)+"<br/>");    //undefined
    a = function(){} //定义函数类型
    document.write(a+"的数据类型：" +typeof(a)+"<br/>");        //function
</script>

2.变量作用域

<script type="text/javascript">
    var    tt="aa";
    function fun () {
        alert(tt);        //2、undefined
        var tt="bb";    //var惹的祸
        alert(tt);        //3、bb
    }
    alert(tt);            //1、aa
    fun();
    alert(tt);            //4、aa
</script>

3.‘+’号运算符：  其中+号具有两重意思：字串连接和数值求和。
　　　　　　　　就是加号‘+’两侧都是数值则求和，否则做字串连接

<script type="text/javascript">
    document.write(10+20+30+"<br/>");          //60
    document.write("10"+20+30+"<br/>");     //102030
    document.write(10+"20"+30+"<br/>");     //102030
    document.write(10+20+"30"+"<br/>");     //3030
</script>

4.for-in 语句: 语句是严格的迭代语句，用于枚举对象的属性。

<script type="text/javascript">
    var a = [10,20,30,40,50];
    //迭代的是数组的下标。
    for(i in a){
       document.write(a[i]);    //1020304050
    }
</script>

5.定时相关函数：
　　setTimeout(vCode, iMilliSeconds [, sLanguage]) -- 单次定时执行指定函数
　　clearTimeout(iTimeoutID) -- 取消上面的单次定时

　　setInterval(vCode, iMilliSeconds [, sLanguage]) --无限次定时执行指定函数
　　clearInterval(iIntervalID)-- 取消上面的多次定时

6.倒计时1 　　按钮控制

<button id="bid">同意(30)</button>
<script type="text/javascript">
    var m=30;
    var bid=document.getElementById("bid");
    var mytime=setInterval(function(){
        bid.disabled=true;
        m--;
        bid.innerHTML="同意("+m+")";
        if (m==0) {
            bid.disabled=false;
            clearInterval(mytime);
        };
    },1000);
</script>

7.倒计时2 　　闹钟

<form name="myform">
    <input type="text" size="4" name="h"/>时 
    <input type="text" size="4" name="m"/>分 
    <input type="text" size="4" name="s"/>秒 
    <input type="button" onclick="doStart()" value="开始"/>
    <input type="button" onclick="doStop()" value="暂停"/>
    <input type="button" onclick="running()" value="继续"/>
</form><br/>
<div style="font-size:40px;" id="did">00:00:00</div>

<script type="text/javascript">
    //初始化信息
    var did = document.getElementById("did");
    var hh=0,mm=0,ss=0;
    var mytime = null;
    function doStart(){
        if(mytime==null){
            //获取输入框中的值
            hh = parseInt(document.myform.h.value);
            mm = parseInt(document.myform.m.value);
            ss = parseInt(document.myform.s.value);
           
            running();

        }
    }
           
    //定制执行
    function running(){
           //显示
           did.innerHTML = hh+":"+mm+":"+(ss<10?"0"+ss:ss);
           //定时调用
           ss--;
           if(ss<0){
             ss=59;
             mm--;
             if(mm<0){
                mm=59;
                hh--;
                if(hh<0){
                       alert("闹铃！！！");
                    return;
                }
             }
           }
          mytime = setTimeout("running()",1000);
    }
           
    //暂停
    function doStop(){
           if(mytime!=null){
             clearTimeout(mytime);
             mytime=null;
           }
    }
</script>

8.函数中的参数

<script type="text/javascript">
    //可变参数函数
    function add(){
        var res=0;
        //获取函数调用时所有参数集合，并遍历输出
        for(var i=0;i<arguments.length;i++){
            //document.write(arguments[i]);
            res += arguments[i]; //累加
        }
        document.write("求和结果："+res+"<br/>");
    }
    
    add(10);                //10
    add(10,20);                //30
    add(10,20,30);            //60
    add(10,20,30,40);        //100
    add(10,20,30,40,50);    //150
</script>

9.自定义对象和使用

<script type="text/javascript">
    //1.使用原始的方式创建对象
    var ob = new Object();
    //定义属性
    ob.name="zhangsan";
    ob.age=20;
    //定义方法
    ob.getinfo = function(){
    return this.name+":"+this.age;
    }

    //ob对象的使用
    document.write(ob.name+"<br/>");
    document.write(ob.age+"<br/>");
    document.write(ob.getinfo()+"<br/>");

    document.write("<hr/>");

    //2.使用构造方式创建一个对象
    function Stu(name,age){
    this.name = name;
    this.age = age;
    this.getinfo = function(){
        return this.name+":"+this.age;
    };
    }
    //测试
    var s = new Stu("zhangsan",22);
    document.write(s.getinfo());


    document.write("<hr/>");

    //3.使用快捷方式定义一个对象
    var stu = {name:"wangwu",age:26,getinfo:function(){return this.name+":"+this.age;}};
    document.write(stu.getinfo());

    //alert(s.constructor); //获取对象的结构
</script>

10.选项框

<h4>你喜欢下面那些球</h4>
<ul>
    <li><input type="checkbox" name="uid"/> 足球</li>
    <li><input type="checkbox" name="uid"/> 羽毛球</li>
    <li><input type="checkbox" name="uid"/> 篮球</li>
    <li><input type="checkbox" name="uid"/> 乒乓球</li>
    <li><input type="checkbox" name="uid"/> 网球</li>
    <li><input type="checkbox" name="uid"/> 橄榄球</li>
</ul>
    <button onclick="doSelect(1);">全选</button>
    <button onclick="doSelect(2);">全不选</button>
    <button onclick="doSelect(3);">反选</button>

<script type="text/javascript">
    function doSelect(b){
        //获取所有多选框
        var list = document.getElementsByTagName("input");
        switch(b){
            case 1:
                for(var i=0;i<bid.length;i++){
                    bid[i].checked=true;
                }
            break;
            case 2:
                for(var i=0;i<bid.length;i++){
                    bid[i].checked=false;
                }
            break;
            case 3:
                for(var i=0;i<bid.length;i++){
                    bid[i].checked=!bid[i].checked;
                }
            break;
            }
        }
    }
</script>

11.JSON格式还原一个对象

<script type="text/javascript">
    var stu = {"name":"u5f20u4e09","age":20,"sex":"u7537","classid":"lamp149"};
    document.write(stu.name+":"+stu.age+":"+stu.sex+":"+stu.classid);
</script>

12.控制元素css样式

<button onclick="fun(1)">放大</button>
<button onclick="fun(2)">缩小</button>
<button onclick="fun(3)">隐藏</button><br><br>
<div style="200px;height:200px;background-color:#ddd;" id="did"></div>
<script type="text/javascript">
    var width=200;
    var height=200;
    function fun (c) {
        switch(c){
            case 1:
                width+=10;
                height+=10;
                did.style.width=width+"px";
                did.style.height=height+"px";
            break;
            case 2:
                width-=10;
                height-=10;
                did.style.width=width+"px";
                did.style.height=height+"px";
            break;
            case 3:
                did.style.display="none";
            break;
        }
    }
</script>