JS基础概念

JS基础

JS概念

JS特点

  1. 脚本语言:简单的程序,规模小,不需要编译,运行快.在web浏览器内有解释器解释执行的编程语言,每次运行程序的时候,解释器会把程序代码翻译成可执行的格式。一
  2. 基于对象语言:"基于对象"是使用对象,但是无法利用现有的对象模板产生新的对象类型,也就是说"基于对象"没有继承的特点。没有了继承的概念也就无从谈论"多态;面向对象包括(封装,继承,多态)
  3. 事件驱动:在网页中执行了某种操作的动作,被称为"事件"(Event),比如按下鼠标、移动窗口、选择菜单等都可以视为事件。当事件发生后,可能会引起相应的事件响应。
  4. 弱类型:变量类型是采用弱类型,并未使用严格的数据类型。var a,b,c; a=123; b=“abc”; a=b;
  5. 安全性:JavaScript不能访问本地的硬盘,不能将数据存入到服务器上,不能对网络文档进行修改和删除,只能通过浏览器实现信息浏览或动态交互

JS的引入方式

方式一:内嵌式引入

实现方式:在head标签中,用一对script标签,嵌入JS代码

图文说明:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-raqAAXB0-1675693976145)(JS%E5%9F%BA%E7%A1%80%202a9fae1143844666be48ff28adea2dcb/Untitled.png)]

  • 代码

    DOCTYPE html>
    <html>
            <head>
                    <meta charset="utf-8" />
                    <title>title>
                    <script type="text/javascript">
                            
                            /*定义一个函数(方法)*/
                            function fun1(){
                                    /*弹窗提示一点信息 */
                                    alert("你好")
                            }
                            
                            
                    script>
            head>
            <body>
                    
                    <input type="button" value="点我呀" onclick="fun1()" />
                    
            body>
    html>
    

方式二:链接式引入

实现方式:

  1. 创建一个js文件,写入js代码
  2. 在html文件中

注意点:

  1. 在一个页面上可以同时引入多个JS文件
  2. 每个JS文件的引入都要使用一个独立的script标签
  3. 内嵌式和链接式的引入不能使用同一标签
  4. src属性可以指向一个网络路径,就是第三种引入方式

图文说明:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RRvl8Krp-1675693976146)(JS%E5%9F%BA%E7%A1%80%202a9fae1143844666be48ff28adea2dcb/Untitled%201.png)]

  • 代码

    myjs.js

    function fun1(){
    	alert('又见面了')
    }
    

    ceshi.html

    DOCTYPE html>
    <html>
            <head>
                    <meta charset="UTF-8">
                    <title>title>
                    
                    <script type="text/javascript" src="js/myjs.js">script>
                    <script type="text/javascript" src="js/myjs2.js">script>
                    
            head>
            <body>
                    <input type="button" value="点我呀" onclick="fun1()" />
                    <input type="button" value="点我呀2" onclick="fun2()" />
                    <input type="button" value="点我呀3" onclick="fun3()" />
                    <script >
                            function fun3(){
                                    alert("总能见到你")
                            }
                    script>
            body>
    html>
    

JS基础语法

数据类型

类型种类:

  1. 数值型:number
    整数和浮点数统称为数值。例如85或3.1415926等。
  2. 字符串型:String
    由0个,1个或多个字符组成的序列。在JavaScript中,用双引号或单引号括起来表示,如"您好"、‘学习JavaScript’ 等。
  3. 逻辑(布尔)型:boolean
    boolean用true或false来表示。
  4. 空(null)值:
    表示没有值,用于定义空的或不存在的引用。要注意,空值不等同于空字符串""或0。
  5. 未定义(undefined)值:
    它也是一个保留字。表示变量虽然已经声明,但却没有赋值。
  6. 除了以上五种基本的数据类型之外,JavaScript还支持复合数据类型Object,复合数据类型包括对象和数组两种。

注意点:

  1. 判断数据类型的函数:typeof
  2. JS是弱类型的脚本语言,所有的变量 对象 的数据类型的声明统统是var
  3. 变量声明时没有确定具体的数据类型,在变量赋值时确定变量具体的数据类型
  4. JS中数据类型有哪些 ? number string
  5. JS中的变量可以反复声明,后声明的会覆盖之前声明的同名变量
  6. JS中的得代码可以不用以;作为结尾 每一行代码都是一个独立的语句(建议写)
  7. JS中字符串一般不区分 “” ‘’ 只要不混用即可
  8. 可以用不同的类型的数据给变量赋值,变量会自动改变自身的数据类型
  9. 当给一个变量赋值为null时,变量的类型为 object
  10. 对象 数组其他类型可以叫做复合数据类型 object
  11. JS中的标识符命名规则和JAVA中的保持一致即可 尽量避免 使用$ 会和jQuery冲突
  • 代码

    DOCTYPE html>
    <html>
            <head>
                    <meta charset="UTF-8">
                    <title>title>
                    <script>
                            /*
                             * 1 JS是弱类型的脚本语言,所有的变量 对象 的数据类型的声明统统是var 
                             * 2  变量声明时没有确定具体的数据类型,在变量赋值时确定变量具体的数据类型
                             * 3 JS中数据类型有哪些 ?  number  string
                             * 4 JS中的变量可以反复声明,后声明的会覆盖之前声明的同名变量
                             * 5 JS中的得代码可以不用以;作为结尾  每一行代码都是一个独立的语句(建议写)
                             * 6 JS中字符串一般不区分 ""  ''  只要不混用即可
                             * 6 可以用不同的类型的数据给变量赋值,变量会自动改变自身的数据类型
                             * 7 当给一个变量赋值为null时,变量的类型为 object 
                             * 8 变量只声明不赋值的情况下,数据和数据类型都显示 undefined
                             * 9 对象 数组其他类型可以叫做复合数据类型 object
                             * 10 JS中的标识符命名规则和JAVA中的保持一致即可 尽量避免 使用$ 会和jQuery冲突
                             * */
                            
                            var i=10;
                            alert(i);
                            
                            /*var i;
                            i=10;*/
                            
                            /*var i =10;
                            i=20;
                            
                            var i=30;
                            alert(i);*/
                            
                            /*var i= 10;
                            alert(typeof i);*/
                            
                            /*var  i =3.14;
                            alert(i)*/
                            
                            
                            /*var j="你好";
                            var z ='hello js';
                            alert(j)
                            alert(z)
                            alert(typeof j)*/
                            
                            
                            /*var i=10;
                            alert(i);
                            alert(typeof i);
                            i="你好";
                            alert(i);
                            alert(typeof i);*/
                            
                            
                            /*var b=2>1;
                            alert(b);
                            alert(typeof b)*/
                            
                            
                            /*var i= null; 
                            alert(i);
                            alert(typeof i);*/
                            
                            
                            /*var i;
                            alert(i)
                            alert(typeof i);*/
                            
                            
                            /*var i=[1,2,3];
                            alert(i)
                            alert(typeof i)*/
                            
                            /*var i=new Date();
                            alert(typeof i)*/
    
                    script>
            head>
            <body>
            body>
    html>
    

运算符号

运算符分类:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Mpy5GZOq-1675693976147)(JS%E5%9F%BA%E7%A1%80%202a9fae1143844666be48ff28adea2dcb/Untitled%202.png)]

关于/%

  1. / 能除尽,则默认结果就是一个整数,不能除尽,结果默认就是浮点数
  2. / 除零不会出现异常,而是出现 Infinity
  3. % 和0取余数,出现NaN not a number 不是一个数字

图文说明:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wwEE2tBv-1675693976148)(JS%E5%9F%BA%E7%A1%80%202a9fae1143844666be48ff28adea2dcb/Untitled%203.png)]

  • 代码

    DOCTYPE html>
    <html>
            <head>
                    <meta charset="UTF-8">
                    <title>title>
                    <script>
      
                            alert(10/3);
                            alert(10/0);
                            alert(10%3);
                            alert(10%0);
                            
                    script>
            head>
            <body>
            body>
    html>
    

关于+

  1. 数字相加得数字
  2. 数字+字符相当于字符串拼接
  3. 数字+布尔会将true转化为1 将false 转化为0

图文说明:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Y4AAkt7g-1675693976150)(JS%E5%9F%BA%E7%A1%80%202a9fae1143844666be48ff28adea2dcb/Untitled%204.png)]

  • 代码

    DOCTYPE html>
    <html>
            <head>
                    <meta charset="UTF-8">
                    <title>title>
                    <script>
                 /*
                             * +号中 如果一段是字符串,就变成了文字拼接
                             * 数字和 boolean类型相加  true会转变成1  false会转变成0  再做数学运算
                             * */
                            var i=1;
                            alert(i+1);
                            alert(1+"b");
                            alert(1+true);
                            
                    script>
            head>
            <body>
            body>
    html>
    

关于== 和 ===

区别:

==:先比较类型,如果类型一致,再比较内容,如果类型不一致,会强制转换为number再比较内容

===:数据类型不同 直接返回false如果类型相同 才会比较内容

流程控制

三大流程控制:顺序结构、分支结构、循环结构;这里主要记录分支结构和循环结构

分支结构 :if 和 switch

if语法:

		if (条件){
            执行语句;
    }else if(条件2){
            执行语句;
    }else{
				执行语句;
    };

switch(条件){
		case X:
		执行语句;
}
  • 代码

    DOCTYPE html>
    <html>
            <head>
                    <meta charset="UTF-8">
                    <title>title>
                    <script>
                            var i =7;
                            if (i>20){
                                    alert("大于20");
                            }else if(i>5){
                                    alert('在5到20之间');
                            }
    
                            switch(i){
                                    case 3:
                                    case 4:
                                            alert('等于4')
                                    case 7:
                                    case 8:
                                            alert('等于8')
                            }
                            
                    script>
            head>
            <body>
            body>
    html>
    

循环语句:while 、do_while和for

  • 代码

    DOCTYPE html>
    <html>
            <head>
                    <meta charset="UTF-8">
                    <title>title>
                    <script>
                            var i=1;
                            while(i<=10){
                                    alert(i)
                                    i++;
                            }
                            /*
                             * 考试,直到分数过线为止
                             * 求1-10整数和 1+10*(10/2) */
                            var sum=0;
                            var j=1;
                            do{
                                    sum+=j;
                                    j++;
                            }while(j<=10);
                            alert(sum)
                            
                            var sum2=0;
                            for(var z=1;z<=10;z++){
                                    sum2+=z;
                            }
                            alert(sum2)
                            
                            
                            
                    script>
            head>
            <body>
                    
            body>
    html>
    

九九乘法表

  • 代码

    DOCTYPE html>
    <html>
            <head>
                    <meta charset="UTF-8">
                    <title>title>
                    <script>
                            
                            for(var a=1;a<10;a++){
                                  
                                 for(var b=1;b<=a;b++){
                                    document.write(b+"*"+a+"="+a*b+"      ");
                                 } 
                                 document.write("
    "
    ) }
    script> head> <body> body> html>

函数

创建函数的三种语法

第一种语法格式 常见

function 函数名(参数列表){js代码}

第二种语法

var 函数名=function(参数列表){JS代码}

第三种语法 不常用 了解

var 函数名=new Function('js代码')

  • 代码

    DOCTYPE html>
    <html>
            <head>
                    <meta charset="UTF-8">
                    <title>title>
                    <script>
                            /*
                             * 第一种语法格式 常见
                             * function 函数名(参数列表){js代码}
                             * 
                             * 
                             * 第二种语法
                             * var 函数名=function(参数列表){JS代码}
                             * 
                             * 第三种语法 不常用 了解
                             * var 函数名=new Function('js代码')
                             * 
                             * */
                            function fun1(){
                                    alert("你好");
                            }
                            
                            var fun2=function(){
                                    alert("你很好")
                            }
                            
                            var fun3=new Function('alert("你非常好");');
                            
                            // 调用方法
                            fun1();
                            fun2();
                            fun3();
    
                    script>
            head>
            <body>
            body>
    html>
    

函数参数和返回值

注意点:

传入的实参可以和形参个数不一致,传多了相当于没传

如果函数中有返回值,那么直接用return关键字返回即可

函数本身可以作为参数

  • 代码

    DOCTYPE html>
    <html>
            <head>
                    <meta charset="UTF-8">
                    <title>title>
                    <script>
                            /*
                             *
                             * 1传入的实参可以和形参个数不一致 
                             * 2如果函数中有返回值,那么直接用return关键字返回即可
                             * */
                            function fun1(a,b,c){
                                    alert("a:"+a);
                                    alert("b:"+b);
                                    alert("c:"+c);
                            }
                            
                            //fun1(10,"hello js",false);
                            // 少传参数 OK
                            //fun1(1,2);
                            // 多传参数 OK 多出来的参数相当于没传
                            //fun1(10,"hello js",false,new Date());
                            
                            
                            function fun2(a,b){
                                    var c=a*b;
                                    return c;
                            }
                            
                            //var x =fun2(10,20);
                            //alert(x)
                            
                            // 方法本身作为参数(了解)
                            
                            function funa( i ,j){
                                    return i+j;
                            }
                            
                            function funb(a){
                                    return a(10,20);
                            }
                    
                            var sum =funb(funa)
                            alert(sum)
                            
                            
                    script>
            head>
            <body>
            body>
    html>
    

数组

数组的创建方式

方式一:创建空数组

方式二:创建定长数组

方式三:指定元素值创建

方式四:简化创建方式

  • 代码

    DOCTYPE html>
    <html>
            <head>
                    <meta charset="UTF-8">
                    <title>title>
                    <script>
                            // 方式一:创建空数组
                            var arr=new Array();
                            arr[0]=1;
                            console.log(arr);
                            // 方式二:创建定长数组
                            var arr2 = new Array(5);
                            arr2[0] = 'x';
                            arr2[4] = true;
                            console.log(arr2)
                            // 方式三:指定元素值创建
                            var arr3 = new Array('asdf',10.22,true);
                            console.log(arr3)
                            // 方式四:简化创建方式
                            var arr4=['asdf',10.22,true];
                            console.log(arr4)
                            
                    script>
            head>
            <body>
            body>
    html>
    
  • 效果

    https://www.notion.so

数组的元素和长度

获取数组的长度

数组.length

修改数组的长度

  1. 通过修改length来修改数组长度-(数组.length=5)
  2. 通过改变索引修改数组长度-(数组[10]=1)

图文说明:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ydJGCSA5-1675693976151)(JS%E5%9F%BA%E7%A1%80%202a9fae1143844666be48ff28adea2dcb/Untitled%205.png)]

  • 代码

    DOCTYPE html>
    <html>
            <head>
                    <meta charset="UTF-8">
                    <title>title>
                    <script type="text/javascript">
                            var arr=[11,22,33];
                            console.log(arr)
                            console.log(arr[0]);
                            console.log(arr.length)
                            
                            /*
                             * JS中的数组是可以通过修改length属性来改变数组长度的
                             * */
                            arr.length=5;
                            console.log(arr)
                            /*
                             * JS的数组可以通过索引改变数组的长度
                             * */
                            arr[9]=99;
                            console.log(arr);
                            
                    script>
            head>
            <body>
            body>
    html>
    

数组的遍历方式

方式一:for循环遍历

方式二:foreach遍历

  • 代码

    DOCTYPE html>
    <html>
            <head>
                    <meta charset="UTF-8">
                    <title>title>
                    <script>
                            var arr=[5,7,3,1,6,2,4,9,8];
                            /*
                             * 普通for循环遍历数组
                             * */
                            for(var i=0;i<arr.length;i++){
                                    console.log(arr[i])
                            }
                            
                            /*
                             *foreach循环遍历数组
                             * JS 中foreach写法为  for( var i in 数组)
                             * i 不是元素  是索引
                             * */
                            for (var i in arr){
                                    console.log(arr[i])
                            }
                            
                    script>
            head>
            <body>
            body>
    html>
    

数组的常用方法

合并多个数组:arr1.concat(arr2,arr3);

合并数组中的字符串:arr.join();

移除最后一个元素:arr.pop(); 这里会记录删除的数据

想结尾增加元素:arr.push(’value’);

反转数组:arr.reverse();

删除第一个元素:arr.shift(); 这里会记录删除的数据

添加元素到第一个位置:arr.unshift(’value’);

截取数组:arr.slice(1,3);包头不包尾

删除某些元素:arr.splice(index,number)

如果第二个参数是0 那么就变成了在指定索引位置增加元素:arr.splice(2,0,100);

  • 代码

    DOCTYPE html>
    <html>
            <head>
                    <meta charset="UTF-8">
                    <title>title>
                    <script>
                            var arr=[1,2,3,4,5,6,7,8,9];
                            var index =arr.indexOf(7);//查询元素索引的方法
                            console.log(index)
                            
                            // 合并两个数组
                            var hege = ["Cecilie", "Lone"];
                            var stale = ["Emil", "Tobias", "Linus"];
                            var children = hege.concat(stale);
                            console.log(children)
                            
                            // 合并三个数组
                            var parents = ["Jani", "Tove"];
                            var brothers = ["Stale", "Kai Jim", "Borge"];
                            var children = ["Cecilie", "Lone"];
                            var family = parents.concat(brothers, children);
                            console.log(family)
                            
                            
                            // 合并字符串
                            var fruits = ["Banana", "Orange", "Apple", "Mango"];
                            var fs =fruits.join();
                            console.log(fs)
                            
                            
                            // 移除最后一个元素
                            var fruit=fruits.pop();
                            console.log(fruits)
                            console.log(fruit)
                            
                            // 想结尾增加元素
                            fruits.push("Grape");
                            console.log(fruits)
                            
                            
                            //反转数组
                            fruits.reverse();
                            console.log(fruits)
                            
                            //删除数组第一个元素
                            var ss =fruits.shift();
                            console.log(fruits);
                            console.log(ss)
                            
                            //向第一个位置添加元素
                            fruits.unshift("火龙果");
                            console.log(fruits);
                            
                            // 截取子数组  从哪个索引开始,到哪个索引结束 包头不包尾
                            
                            var citrus = fruits.slice(1,3);
                            console.log(citrus)
                            
                            var numbers =[1,2,3,4,5,6,7,8,9]
                            /*
                             * 删除数组中的某些元素
                             * 2 从哪个索引开始删除
                             * 3 删除多个少个元素
                             * */
                            /*numbers.splice(2,3);
                            console.log(numbers)*/
                            /*
                             * 如果第二个参数是0 那么就变成了在指定索引位置增加元素
                             * */
                            numbers.splice(2,0,100);
                            console.log(numbers)
                    script>
            head>
            <body>
            body>
    html>
    

数组元素的排序

正序:arr.sort()

倒序:arr.sort(function(a,b){return b-a)

  • 代码

    DOCTYPE html>
    <html>
            <head>
                    <meta charset="UTF-8">
                    <title>title>
                    <script>
                            var fruits = ["Banana", "Orange", "Apple", "Mango"];
                            fruits.sort();
                            console.log(fruits)
                            
                            var numbers=[5,7,9,6,1,8,3,4,2];
                            numbers.sort(function(a,b){return b-a});
                            console.log(numbers)
                            
                            
                            
                    script>
            head>
            <body>
            body>
    html>
    

js中的对象

常用对象:

Array、String对象、Math对象、Number对象、Date对象

String对象:

  • 常用的方法:

    方法 描述
    charAt() 返回在指定位置的字符。
    charCodeAt() 返回在指定的位置的字符的 Unicode 编码。
    concat() 连接两个或更多字符串,并返回新的字符串。
    repeat() 复制字符串指定次数,并将它们连接在一起返回。
    fromCharCode() 将 Unicode 编码转为字符。
    indexOf() 返回某个指定的字符串值在字符串中首次出现的位置。
    lastIndexOf() 从后向前搜索字符串,并从起始位置(0)开始计算返回字符串最后出现的位置。
    includes() 查找字符串中是否包含指定的子字符串。
    match() 查找找到一个或多个正则表达式的匹配。
    replace() 在字符串中查找匹配的子串, 并替换与正则表达式匹配的子串。
    search() 查找与正则表达式相匹配的值。
    slice() 提取字符串的片断,并在新的字符串中返回被提取的部分。
    split() 把字符串分割为字符串数组。
    startsWith() 查看字符串是否以指定的子字符串开头。
    substr() 从起始索引号提取字符串中指定数目的字符。
    substring() 提取字符串中两个指定的索引号之间的字符。
    toLowerCase() 把字符串转换为小写。
    toUpperCase() 把字符串转换为大写。
    trim() 去除字符串两边的空白
    toLocaleLowerCase() 根据本地主机的语言环境把字符串转换为小写。
    toLocaleUpperCase() 根据本地主机的语言环境把字符串转换为大写。
    valueOf() 返回某个字符串对象的原始值。
    toString() 返回一个字符串。
  • 代码

    DOCTYPE html>
    <html>
            <head>
                    <meta charset="UTF-8">
                    <title>title>
                    <script>
    
                            // 根据索引获取字符
                            var s = "abcdef"
                            console.log(s.charAt(2))
                            // 根据索引获取字符的 Unicode 编码。 
                            console.log(s.charCodeAt(2))
    
                            // 拼接字符串
                            
                            var a="hi";
                            var b="good";
                            var c ="China";
                            
                            var d=c.concat(a,b);
                            console.log(d)
                            
                            // 复制字符串字数
                            var e ="adsf";
                            var f=e.repeat(3);
                            console.log(f)
    
                            // 获取某个字符在字符串中首次出现的次数。与lastIndexOf相反
                            var a = "abcdab"
                            var b = a.indexOf('b')
                            console.log(b)
                            
                            // 查找字符串中是否包含指定的子字符串,返回布尔值
                            var a = "abcdefgabaceab"
                            console.log(a.includes("ab"))
    
                            // 替换字符串,从前向后只替换一次
                            var a = "abcdefgabaceab"
                            console.log(a.replace("ab",11))
    
                            // 截取字符串
                            var g="helloJhon";
                            var h=g.substr(1,5);// 从哪里开始,连续截取多少个字符
                            console.log(h)
                            // 包头不包尾
                            var i=g.substring(1,7);// 从哪里开始,到哪里结束
                            console.log(i)
                            
                            // 获取长度
                            console.log(g.length)// length属性
                            
                            
                            // JS中非常特殊的一个函数,可以将一段字符串当做JS代码来执行
                            // 将字符串内容解析称JS代码并运行
                            var testStr=" var x =10 ";
                            eval(testStr);
                            console.log(x)
                            
                    script>
            head>
            <body>
            body>
    html>
    

Number对象

  • 常用方法

    属性 描述
    Number.MAX_VALUE 最大值
    Number.MIN_VALUE 最小值
    Number.NaN 非数字
    Number.NEGATIVE_INFINITY 负无穷,在溢出时返回
    Number.POSITIVE_INFINITY 正无穷,在溢出时返回
    Number.EPSILON 表示 1 和比最接近 1 且大于 1 的最小 Number 之间的差别
    Number.MIN_SAFE_INTEGER 最小安全整数。
    Number.MAX_SAFE_INTEGER 最大安全整数。
    Number.parseFloat() 将字符串转换成浮点数,和全局方法 parseFloat() 作用一致。
    Number.parseInt() 将字符串转换成整型数字,和全局方法 parseInt() 作用一致。
    Number.isFinite() 判断传递的参数是否为有限数字。
    Number.isInteger() 判断传递的参数是否为整数。
    Number.isNaN() 判断传递的参数是否为 isNaN()。
    Number.isSafeInteger() 判断传递的参数是否为安全整数。
  • 代码

    DOCTYPE html>
    <html>
            <head>
                    <meta charset="UTF-8">
                    <title>title>
                    <script>
                            console.log(Number.MAX_VALUE)
                            console.log(Number.MIN_VALUE)
                            console.log(Number.MAX_SAFE_INTEGER)
                            console.log(Number.MIN_SAFE_INTEGER)
                            
                            
                            console.log(Number.parseFloat("10.123")+20);
                            console.log(Number.parseInt("30")+20);
                            
                            
                            var i = 10%0;
                            var j = 10/0;
                            console.log(i)
                            console.log(j)
                            console.log(Number.isNaN(i)) // is not a number 是不是NAN
                            console.log(Number.isFinite(j))
                            console.log(Number.isSafeInteger(Number.MAX_VALUE))
                            console.log(Number.isSafeInteger(Number.MAX_SAFE_INTEGER))
                            
                    script>
            head>
            <body>
            body>
    html>
    

Math对象

  • 代码

    DOCTYPE html>
    <html>
            <head>
                    <meta charset="UTF-8">
                    <title>title>
                    <script>
                            console.log(Math.round(3.64))
                            console.log(Math.floor(3.14))// 地板数
                            console.log(Math.ceil(3.01))// 天花板数
                            console.log(Math.max(1,2,3,5.6))
                            console.log(Math.min(1,2,3,5.6))
                            console.log(Math.random())
                            console.log(Math.sqrt(16))
                            // 属性
                            console.log(Math.PI)
                            // 生成给定范围内的随机数
                            
                            var start =10;
                            var end =16;
                            var result =Math.floor(Math.random()*(end-start+1)+start);
                            console.log(result)
                            
                            
                    script>
            head>
            <body>
            body>
    html>
    

Data对象

Date 对象用于处理日期与时间。

创建对象的方法

var d = new Date();
var d = new Date(milliseconds);
var d = new Date(dateString);
var d = new Date(year, month, day, hours, minutes, seconds, milliseconds);

  • 常用方法

    方法名 方法描述
    getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)。
    getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)。
    getFullYear() 从 Date 对象以四位数字返回年份。
    getHours() 返回 Date 对象的小时 (0 ~ 23)。
    getMilliseconds() 返回 Date 对象的毫秒(0 ~ 999)。
    getMinutes() 返回 Date 对象的分钟 (0 ~ 59)。
    getMonth() 从 Date 对象返回月份 (0 ~ 11)。
    getSeconds() 返回 Date 对象的秒数 (0 ~ 59)。
    getTime() 返回 1970 年 1 月 1 日至今的毫秒数。
    getTimezoneOffset() 返回本地时间与格林威治标准时间 (GMT) 的分钟差。
    getUTCDate() 根据世界时从 Date 对象返回月中的一天 (1 ~ 31)。
    getUTCDay() 根据世界时从 Date 对象返回周中的一天 (0 ~ 6)。
    getUTCFullYear() 根据世界时从 Date 对象返回四位数的年份。
    getUTCHours() 根据世界时返回 Date 对象的小时 (0 ~ 23)。
    getUTCMilliseconds() 根据世界时返回 Date 对象的毫秒(0 ~ 999)。
    getUTCMinutes() 根据世界时返回 Date 对象的分钟 (0 ~ 59)。
    getUTCMonth() 根据世界时从 Date 对象返回月份 (0 ~ 11)。
    getUTCSeconds() 根据世界时返回 Date 对象的秒钟 (0 ~ 59)。
    getYear() 已废弃。 请使用 getFullYear() 方法代替。
    parse() 返回1970年1月1日午夜到指定日期(字符串)的毫秒数。
    setDate() 设置 Date 对象中月的某一天 (1 ~ 31)。
    setFullYear() 设置 Date 对象中的年份(四位数字)。
    setHours() 设置 Date 对象中的小时 (0 ~ 23)。
    setMilliseconds() 设置 Date 对象中的毫秒 (0 ~ 999)。
    setMinutes() 设置 Date 对象中的分钟 (0 ~ 59)。
    setMonth() 设置 Date 对象中月份 (0 ~ 11)。
    setSeconds() 设置 Date 对象中的秒钟 (0 ~ 59)。
    setTime() setTime() 方法以毫秒设置 Date 对象。
    setUTCDate() 根据世界时设置 Date 对象中月份的一天 (1 ~ 31)。
    setUTCFullYear() 根据世界时设置 Date 对象中的年份(四位数字)。
    setUTCHours() 根据世界时设置 Date 对象中的小时 (0 ~ 23)。
    setUTCMilliseconds() 根据世界时设置 Date 对象中的毫秒 (0 ~ 999)。
    setUTCMinutes() 根据世界时设置 Date 对象中的分钟 (0 ~ 59)。
    setUTCMonth() 根据世界时设置 Date 对象中的月份 (0 ~ 11)。
    setUTCSeconds() setUTCSeconds() 方法用于根据世界时 (UTC) 设置指定时间的秒字段。
    setYear() 已废弃。请使用 setFullYear() 方法代替。
    toDateString() 把 Date 对象的日期部分转换为字符串。
    toGMTString() 已废弃。请使用 toUTCString() 方法代替。
    toISOString() 使用 ISO 标准返回字符串的日期格式。
    toJSON() 以 JSON 数据格式返回日期字符串。
    toLocaleDateString() 根据本地时间格式,把 Date 对象的日期部分转换为字符串。
    toLocaleTimeString() 根据本地时间格式,把 Date 对象的时间部分转换为字符串。
    toLocaleString() 根据本地时间格式,把 Date 对象转换为字符串。
    toString() 把 Date 对象转换为字符串。
    toTimeString() 把 Date 对象的时间部分转换为字符串。
    toUTCString() 根据世界时,把 Date 对象转换为字符串。 实例:  var today = new Date();var UTCstring = today.toUTCString();
    UTC() 根据世界时返回 1970 年 1 月 1 日 到指定日期的毫秒数。
    valueOf() 返回 Date 对象的原始值。
  • 代码

    DOCTYPE html>
    <html>
            <head>
                    <meta charset="UTF-8">
                    <title>title>
                    <script>
                            /*
                             * 在程序中 西方的月份编号从0开始
                             * 1 2 3 4 5 6 
                             * 0 1 2 3 4 5
                             * */
                            var today = new Date()
                            var d1 = new Date("October 13, 1975 11:13:00")
                            var d2 = new Date(79,5,24)
                            var d3 = new Date(79,5,24,11,33,0)
                            console.log(d1);
                            console.log(d2);
                            console.log(d3);
                            
                            
                            var d4 = new Date(2048,0,13,16,51,20,123)
                            console.log(d4)
                            // set***  略自己尝试一下
                            console.log(d4.getYear());// 和1900年的年份差
                            console.log(d4.getFullYear());// 完整的年份
                            console.log(d4.getMonth());
                            console.log(d4.getDate());
                            console.log(d4.getHours());
                            console.log(d4.getMinutes());
                            console.log(d4.getSeconds());
                            console.log(d4.getMilliseconds());
                            var d5 = new Date(2048,0,13,16,51,20,456)
                            console.log(d4<d5)
                            
                            
                            // 关于日期对象格式化处理
                            /*date对象的格式化方法*/
                            /*修改Date原型,添加一个format格式化的方法*/
                            Date.prototype.format = function(fmt){
                              var o = {
                                "M+" : this.getMonth()+1,                 //月份
                                "d+" : this.getDate(),                    //日
                                "h+" : this.getHours(),                   //小时
                                "m+" : this.getMinutes(),                 //分
                                "s+" : this.getSeconds(),                 //秒
                                "q+" : Math.floor((this.getMonth()+3)/3), //季度
                                "S"  : this.getMilliseconds()             //毫秒
                              };
                            
                              if(/(y+)/.test(fmt)){
                                fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));
                              }
                                    
                              for(var k in o){
                                if(new RegExp("("+ k +")").test(fmt)){
                                  fmt = fmt.replace(
                                    RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));  
                                }       
                              }
                              return fmt;
                            }
                            
                            
                            var fmt=d4.format("yyyy-MM-dd hh:mm:ss");
                            console.log(fmt)
                            
                    script>
            head>
            <body>
            body>
    html>
    

你可能感兴趣的:(前端,python)