JavaScript实例

 1 <script type="text/javascript">
 2     var name = "zhangsan";
 3     document.write(name+"字串类型：" +typeof(name)+"<br/>");    //string
 4     a = ‘b‘;
 5     document.write(a+"的数据类型：" +typeof(a)+"<br/>");        //string
 6     var a = 10;
 7     document.write(a+"的数据类型：" +typeof(a)+"<br/>");        //number
 8     a = 20.8;
 9     document.write(a+"的数据类型：" +typeof(a)+"<br/>");        //number
10     a = true;
11     document.write(a+"的数据类型：" +typeof(a)+"<br/>");        //boolean
12     a = [10,20,30]; //数组
13     document.write(a+"的数据类型：" +typeof(a)+"<br/>");        //object
14     a = null; //空
15     document.write(a+"的数据类型：" +typeof(a)+"<br/>");        //object
16     a = new Object; //对象
17     document.write(a+"的数据类型：" +typeof(a)+"<br/>");        //object
18 
19     document.write("未定义的变量类型：" +typeof(b)+"<br/>");    //undefined
20     a = function(){} //定义函数类型
21     document.write(a+"的数据类型：" +typeof(a)+"<br/>");        //function
22 </script>

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

1 <script type="text/javascript">
2     document.write(10+20+30+"<br/>");          //60
3     document.write("10"+20+30+"<br/>");     //102030
4     document.write(10+"20"+30+"<br/>");     //102030
5     document.write(10+20+"30"+"<br/>");     //3030
6 </script>

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

 1 <button id="bid">同意(30)</button>
 2 <script type="text/javascript">
 3     var m=30;
 4     var bid=document.getElementById("bid");
 5     var mytime=setInterval(function(){
 6         bid.disabled=true;
 7         m--;
 8         bid.innerHTML="同意("+m+")";
 9         if (m==0) {
10             bid.disabled=false;
11             clearInterval(mytime);
12         };
13     },1000);
14 </script>

 1 <form name="myform">
 2     <input type="text" size="4" name="h"/>时 
 3     <input type="text" size="4" name="m"/>分 
 4     <input type="text" size="4" name="s"/>秒 
 5     <input type="button" onclick="doStart()" value="开始"/>
 6     <input type="button" onclick="doStop()" value="暂停"/>
 7     <input type="button" onclick="running()" value="继续"/>
 8 </form><br/>
 9 <div style="font-size:40px;" id="did">00:00:00</div>
10 
11 <script type="text/javascript">
12     //初始化信息
13     var did = document.getElementById("did");
14     var hh=0,mm=0,ss=0;
15     var mytime = null;
16     function doStart(){
17         if(mytime==null){
18             //获取输入框中的值
19             hh = parseInt(document.myform.h.value);
20             mm = parseInt(document.myform.m.value);
21             ss = parseInt(document.myform.s.value);
22            
23             running();
24 
25         }
26     }
27            
28     //定制执行
29     function running(){
30            //显示
31            did.innerHTML = hh+":"+mm+":"+(ss<10?"0"+ss:ss);
32            //定时调用
33            ss--;
34            if(ss<0){
35              ss=59;
36              mm--;
37              if(mm<0){
38                 mm=59;
39                 hh--;
40                 if(hh<0){
41                        alert("闹铃！！！");
42                     return;
43                 }
44              }
45            }
46           mytime = setTimeout("running()",1000);
47     }
48            
49     //暂停
50     function doStop(){
51            if(mytime!=null){
52              clearTimeout(mytime);
53              mytime=null;
54            }
55     }
56 </script>

 1 <script type="text/javascript">
 2     //可变参数函数
 3     function add(){
 4         var res=0;
 5         //获取函数调用时所有参数集合，并遍历输出
 6         for(var i=0;i<arguments.length;i++){
 7             //document.write(arguments[i]);
 8             res += arguments[i]; //累加
 9         }
10         document.write("求和结果："+res+"<br/>");
11     }
12     
13     add(10);                //10
14     add(10,20);                //30
15     add(10,20,30);            //60
16     add(10,20,30,40);        //100
17     add(10,20,30,40,50);    //150
18 </script>

 1 <script type="text/javascript">
 2     //1.使用原始的方式创建对象
 3     var ob = new Object();
 4     //定义属性
 5     ob.name="zhangsan";
 6     ob.age=20;
 7     //定义方法
 8     ob.getinfo = function(){
 9     return this.name+":"+this.age;
10     }
11 
12     //ob对象的使用
13     document.write(ob.name+"<br/>");
14     document.write(ob.age+"<br/>");
15     document.write(ob.getinfo()+"<br/>");
16 
17     document.write("<hr/>");
18 
19     //2.使用构造方式创建一个对象
20     function Stu(name,age){
21     this.name = name;
22     this.age = age;
23     this.getinfo = function(){
24         return this.name+":"+this.age;
25     };
26     }
27     //测试
28     var s = new Stu("zhangsan",22);
29     document.write(s.getinfo());
30 
31 
32     document.write("<hr/>");
33 
34     //3.使用快捷方式定义一个对象
35     var stu = {name:"wangwu",age:26,getinfo:function(){return this.name+":"+this.age;}};
36     document.write(stu.getinfo());
37 
38     //alert(s.constructor); //获取对象的结构
39 </script>

 1 <h4>你喜欢下面那些球</h4>
 2 <ul>
 3     <li><input type="checkbox" name="uid"/> 足球</li>
 4     <li><input type="checkbox" name="uid"/> 羽毛球</li>
 5     <li><input type="checkbox" name="uid"/> 篮球</li>
 6     <li><input type="checkbox" name="uid"/> 乒乓球</li>
 7     <li><input type="checkbox" name="uid"/> 网球</li>
 8     <li><input type="checkbox" name="uid"/> 橄榄球</li>
 9 </ul>
10     <button onclick="doSelect(1);">全选</button>
11     <button onclick="doSelect(2);">全不选</button>
12     <button onclick="doSelect(3);">反选</button>
13 
14 <script type="text/javascript">
15     function doSelect(b){
16         //获取所有多选框
17         var list = document.getElementsByTagName("input");
18         switch(b){
19             case 1:
20                 for(var i=0;i<bid.length;i++){
21                     bid[i].checked=true;
22                 }
23             break;
24             case 2:
25                 for(var i=0;i<bid.length;i++){
26                     bid[i].checked=false;
27                 }
28             break;
29             case 3:
30                 for(var i=0;i<bid.length;i++){
31                     bid[i].checked=!bid[i].checked;
32                 }
33             break;
34             }
35         }
36     }
37 </script>

1 <script type="text/javascript">
2     var stu = {"name":"\u5f20\u4e09","age":20,"sex":"\u7537","classid":"lamp149"};
3     document.write(stu.name+":"+stu.age+":"+stu.sex+":"+stu.classid);
4 </script>

 1 <button onclick="fun(1)">放大</button>
 2 <button onclick="fun(2)">缩小</button>
 3 <button onclick="fun(3)">隐藏</button><br><br>
 4 <div style="width:200px;height:200px;background-color:#ddd;" id="did"></div>
 5 <script type="text/javascript">
 6     var width=200;
 7     var height=200;
 8     function fun (c) {
 9         switch(c){
10             case 1:
11                 width+=10;
12                 height+=10;
13                 did.style.width=width+"px";
14                 did.style.height=height+"px";
15             break;
16             case 2:
17                 width-=10;
18                 height-=10;
19                 did.style.width=width+"px";
20                 did.style.height=height+"px";
21             break;
22             case 3:
23                 did.style.display="none";
24             break;
25         }
26     }
27 </script>