JavaScript实例
1.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>
2.变量作用域
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>
3.‘+’号运算符： 其中+号具有两重意思：字串连接和数值求和。
就是加号‘+’两侧都是数值则求和，否则做字串连接
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>
4.for-in 语句: 语句是严格的迭代语句，用于枚举对象的属性。
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>
5.定时相关函数：
setTimeout(vCode, iMilliSeconds [, sLanguage]) -- 单次定时执行指定函数
clearTimeout(iTimeoutID) -- 取消上面的单次定时
setInterval(vCode, iMilliSeconds [, sLanguage]) --无限次定时执行指定函数
clearInterval(iIntervalID)-- 取消上面的多次定时
6.倒计时1 按钮控制
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>
7.倒计时2 闹钟
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>
8.函数中的参数
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>
9.自定义对象和使用
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>
10.选项框
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>
11.JSON格式还原一个对象
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>
12.控制元素css样式
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>
