前情提要:
今天学习的是js的函数以及简单的类的使用
一:函数的初识别
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> // <!--函数声明不需要加上关键字var--> function sayhello (name) { document.write("<h1>"+"hello"+name+"</h1>") } function getname() { return "小宝" } get1name =function (name) { return "大宝" } // 如果函数有参数,调用时需要传入参数 sayhello("咱三") var username =getname() document.write(username) var username1 =get1name() document.write(username1) </script> </head> <body> </body> </html>
二:全局变量以及局部变量
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> // <!--全局变量,可以被该页面中的所有函数引用--> var num =10; function test1() { //加上var 浏览器就会在去全局中定义该函数 num1 =12; var num3 =21; // 局部变量只有当前函数中有效 document.write(num+"<br>"); document.write(num1+"<br>"); document.write(num3+"<br>") } function test2(){ document.write(num+"<br>"); document.write(num1+"<br>"); document.write(num3+"<br>"); } test1(); test2() </script> </head> <body> </body> </html>
三:自定义对象
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> // <!--自定义对象--> function Person() { } //使用new 关键字创建对象 var person =new Person(); //给person 对象增加name属性 person.name ="张三"; // 给person 对象增加age属性 person.age =18; // 给person 对象增加eat 方法 person.eat =function () { document.write(this.name +"正在吃饭") }; // 调用属性 document.write(person.name,person.age+"<br>"); //调用方法 person.eat() </script> </head> <body> </body> </html>
四:创建对象
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> function Person(name,age) { this.name =name; this.age =age; // this.sleep =function () { // alert(this.name+'正在树胶') // } this.sleep =function () { alert(this.name +"正在睡觉") } } // var person =new Person("李四",20); // document.write(typeof person) document.write(person.name); document.write(person.age); person.sleep() </script> </head> <body> </body> </html>
五:使用object 创建对象
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> var person =new Object(); person.name ="小钟"; person.age =25; person.code =function (something) { document.write(this.name+"正在做"+something) }; person.code("作业") </script> </head> <body> </body> </html>
六:使用json 创建对象
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> var person ={ name :"太白金星", age :20, run :function () { alert(this.name+"正在跑步"); } }; person.run() </script> </head> <body> </body> </html>
七:string 对象
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> let s1 ="10"; let s2 =new String("10"); alert("s1==s2"+(s1==s2)) </script> </head> <body> </body> </html>
八:string的常用方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> var counter ="中国".fontcolor("red"); document.write(counter.concat("<br>")); var str ="Hello World Hello World"; document.write(str.charAt(6) + "<br/>"); //根据索引查找字符 document.write(str.charCodeAt(6)+"<br>"); //根据字符查找unideo的编码 document.write(str.indexOf("World")+"<br>"); //查询字符串中指定字符串的第一次出现的索引值 document.write(str.substring(12,17)+"<br>"); //提取12到17索引出现的内容 document.write(str.valueOf()) //返回本身内容 </script> </head> <body> </body> </html>
九:实现字符串的翻转
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> //定义一个函数实现字符串的翻转功能 function reverse(srcStr) { var temstr ='' for (i=srcStr.length -1;i>=0;i--){ var c =srcStr.charAt(i) temstr+=c } return temstr } var s =reverse("abcd") alert(s) </script> </head> <body> </body> </html>
十:number 对象
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> var s =10; var s1 =new Number(10) var s2 ="11" var s3 =new Number("a11") /* 执行parseInt函数的时候，默认它只会把字符串第一个非数字（包含空格）前面字符进行转换。 如果第一个字符是非数字（不包含空格），那么转换结果为NaN。 */ var num =parseInt(s3) document.write(typeof s) document.write(typeof s1) document.write(typeof s2) document.write(typeof s3) document.write(s3) document.write(num) </script> </head> <body> </body> </html>
十一:math 对象
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> document.write("绝对值"+Math.abs(-10)+"<br>") document.write("向上取整"+Math.ceil(3.14)+"<br>") document.write("向下取整"+Math.floor(3.14)+"<br>") document.write("四舍五入"+Math.round(3.6)+"<br>") document.write("求最大值"+Math.max(3,5)+"<br>") document.write("求最小值"+Math.min(3,5)+"<br>") document.write("生成随机数"+Math.random(1,5)+"<br>") </script> </head> <body> </body> </html>
十二:生成4位数验证码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> var num =''; for (i=1 ;i<5;i++){ var s1 =Math.floor(Math.random()*10) num =s1+num } document.write(num) </script> </head> <body> </body> </html>
十三:date 对象
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> function getdate(d) { var dd = d.getDate() //获取日 var mm =d.getMonth()+1 //获取月 var yy =d.getFullYear() //获取年 var hh =d.getHours() //获取小时 var min =d.getMinutes() //获取分 var sec =d.getSeconds() //获取秒 return yy +"年" +mm +"月"+dd+"日"+hh+"时"+min+"分"+sec+"秒" } var dd =new Date() document.write(dd+"<br>") var time1 =dd.getDate() document.write(time1+"<br>") var times1 =getdate(dd); document.write(times1) </script> </head> <body> </body> </html>
十四:array 对象
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> var arr4 =[10,20,30] var arr5 =[11,22,33] arr4 =arr4.concat(arr5,99,100) document.write(arr4+"<br>") document.write(arr4[0]+"<br>") document.write(arr4[1]+"<br>") for (i=1;i<arr4.length;i++){ document.write(arr4[i]+"<br>") } </script> </head> <body> </body> </html>
十五:对象的常用方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> function join(arr,sep) { var arrstr='' for (var i=0;i<arr.length;i++){ arrstr =arrstr+arr[i] +sep } return arrstr.substring(0,arrstr.length-1) } var arr =["java","python","go"] var str =arr.join('-') document.write(str) </script> </head> <body> </body> </html>
十六:扩展对象功能
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> // function search(arr,key) { // for(i =0;i<arr.length;i++){ // if (arr[i]==key){ // return i // } // else { // return -1 // } // // } // // } // var arr =[1,2,3,4,5] // var i =search(arr,1) // alert(i) // seach1 =function (arr,key) { // for(i =0;i<arr.length;i++){ // if (arr[i]==key){ // return i // } // else { // return -1 // } // // } // } // var arr =[6,7,8,9,10] // var i =seach1(arr,6) // alert(i) // Array.prototype.search =function (key) { for (i =0;i<this.length;i++){ if (this[i]==key){ return i } } return -1; } var arr =[6,7,8,9,10] var ss= arr.search(6) document.write(ss) </script> </head> <body> </body> </html>
十七:push 和pop 方法
十八:resreve
十九:slice
二十:splice
二十一:sort
二十二:tofixed