前端开发——Javascript的定义函数、事件处理、Math对象、Date对象

---

当你去的地方多了，你就会摆脱地域的偏见

当你看的书籍多了，你就会走出时代的局限

---

——Lungcen

目录

JS函数

JS 定义函数

参数的默认值

JS事件（event）处理

事件绑定

 事件示例

 Math（数学）对象

有关随机数的知识 

Date（时间/日期）对象

创建 Date 对象

---

---

JS函数

---

        函数是一组执行特定任务（具有特定功能）的，可以重复使用的代码块，前面用到的 alert()、write() 就是 JavaScript 中内置的函数。

       除了使用内置函数外，我们也可以自行创建函数（自定义函数），然后在需要的地方调用这个函数，这样不仅可以避免编写重复的代码，还有利于代码的后期维护。

JS 定义函数

        JS 函数声明需要以 function 关键字开头，后为要创建的函数名称，function 关键字与函数名称之间使用空格分开，函数名之后为一个括号( )，括号中用来定义函数中要使用的参数（多个参数之间使用逗号,分隔开），一个函数最多可以有 255 个参数，最后为一个花括号{ }，花括号中用来定义函数的函数体（即实现函数的代码）

函数定义的方式一（函数声明）：

function functionName()
{
    return "第一种方式"
}

函数定义的方式二（函数表达式）：

var fun2 = function()
    {
        return "第二种命名的方式"
    };

函数定义的方式三：

var fun3 = new function(a, b, c)
    {
        return "第三种命名的方式"
    };

函数定义的方式四（匿名函数）：

 (function(){
        alert("我是第三种(匿名函数)")
    })();

函数声明和函数表达式虽然看起来非常相似，但它们的运行方式是不同的

declaration();          // 输出: function declaration
function declaration() {
    document.write("function declaration");
}

expression();           // 报错：Uncaught TypeError: undefined is not a function
var expression = function() {
    document.write("function expression");
};

        如果函数表达式在定义之前被调用，会抛出异常（报错），但函数声明则可以成功运行。

        这是因为在程序执行前，JavaScript 会先对函数声明进行解析，因此无论是在函数声明前还是声明后调用函数都是可行的。

        而函数表达式则是将一个匿名函数赋值给一个变量，所以在程序还没有执行到该表达式之前，相当于函数还未定义，因此无法调用。

参数的默认值

        在定义函数时， 可以为函数的参数设置一个默认值，这样当我们在调用这个函数时，如果没有提供参数，就会使用这个默认值作为参数值

function a(name = "李华")
    {
        console.log("你的名字——>", name)
    }

---

JS事件（event）处理

---

        JS 事件（event）是当用户与网页进行交互时发生的事情，例如单击某个链接或按钮、在文本框中输入文本、按下键盘上的某个按键、移动鼠标等等。

        一般情况下事件的名称都是以单词on开头的，例如点击事件 onclick、页面加载事件 onload 等。

事件绑定

事件只有与 HTML 元素绑定之后才能被触发，为 HTML 元素绑定事件处理程序的方法由很多，最简单的就是通过 HTML 事件属性来直接绑定事件处理程序

    按钮

还有一种方法就是直接使用 JavaScript 中提供的内置函数来为指定元素绑定事件处理程序

    按钮

 事件示例

一般情况下，事件可以分为四大类——鼠标事件、键盘事件、表单事件和窗口事件，另外还有一些其它事件

1) onmouseover 事件

        onmouseover 事件就是指当用户鼠标指针移动到元素上时触发的事件

    请将鼠标移动至此处

    请将鼠标移动至此处

2) onmouseout 事件

         onmouseout 事件与 onmouseover 事件正好相反，onmouseout 事件会在鼠标从元素上离开时触发

    
        请将鼠标移动至此处后再移出

    请将鼠标移动至此处后再移出

3）onkeydown 事件

​         onkeydown 事件是指当用户按下键盘上的某个按键时触发的事件

4）onkeyup 事件

​        onkeyup 事件是指当用户按下键盘上的某个按键并将其释放（即按下并松开某个按键）时触发的事件

---

 Math（数学）对象

---

        Math 是 JavaScript 中的一个内置对象，其中提供了一些数学中常用的常量值和函数，用来实现一些数学中常见计算，例如计算平均数、求绝对值、四舍五入等，下面罗列出一部分在Math里的方法：

abs(x)    返回 x 的绝对值

cbrt(x)    返回 x 的立方根

ceil(x)    对 x 进行向上取整，即返回大于 x 的最小整数

exp(x)    返回算术常量 e 的 x 次方，即 Ex

expm1(x)    返回 exp(x) - 1 的值

floor(x)    对 x 进行向下取整，即返回小于 x 的最大整数

hypot([x, [y, [...]]])    返回所有参数平方和的平方根

log(x)    返回 x 的自然对数

max([x, [y, [...]]])    返回多个参数中的最大值

min([x, [y, [...]]])    返回多个参数中的最小值

pow(x,y)    返回 x 的 y 次幂

random()    返回一个 0 到 1 之间的随机数

round(x)    返回 x 四舍五入后的整数

sqrt(x)    返回 x 的平方根

toSource()    返回字符串"Math"

trunc(x)    返回 x 的整数部分

valueOf()    返回 Math 对象的原始值

有关随机数的知识 

        我们都知道，随机数random()是返回从0到1的随机数（不包括1），那么如果我要求从0到6之间的随机数呢？我们可以再后面乘以6，就可以达成目的

var ran = Math.random()*6
    console.log(ran)

        如果我不想从0开始勒，我想要从3到6之间的随机数那该这么办呢？

var ran = (Math.random()) +1 
    console.log(ran)

        我们再后面随机数后面加上1，那么就是从1到2之间的随机数了，想要得到一个从3到6的随机数，那么我们可以先得到一个从0到3的随机数，然后再这个基础上加上3，就可以达成目标了。

var ran = (Math.random()*3) + 3 
    console.log(ran)

不过需要注意的是，用random（）方法获取的随机数不是整数，而是小数。如果需要获取的是整数，我们有以下几个方法：

1、使用“parseInt (float值)”语句；（转换类型）

2、使用“Math.ceil (float值)”语句；（向上取整）

3、使用“Math.round (float值)”语句；（四舍五入）

4、使用“Math.floor (float值)”语句；（向下取整）

5、使用float.toFixed(参数)语句；（参数为保留几位小数，遵循四舍五入；这个返回的是字符串，前面的几种都是数值）

    var ran = (Math.random()*3) + 3 
    console.log(parseInt(ran))
    console.log(Math.ceil(ran))
    console.log(Math.round(ran))
    console.log(Math.floor(ran))
    console.log(ran.toFixed(0))

---

Date（时间/日期）对象

---

        Date 对象是 JavaScript 内置的对象，通过它可以访问计算机系统的时间，此外，Date 对象中还提供了多种用于管理、操作和格式化时间/日期的方法。​

以下是对日期对象进行获取操作的方法：

getDate()    从 Date 对象返回一个月中的某一天 (1 ~ 31)

getDay()    从 Date 对象返回一周中的某一天 (0 ~ 6)

getMonth()    从 Date 对象返回月份 (0 ~ 11)

getFullYear()    从 Date 对象返回四位数字的年份

getHours()    返回 Date 对象的小时 (0 ~ 23)

getMinutes()    返回 Date 对象的分钟 (0 ~ 59)

getSeconds()    返回 Date 对象的秒数 (0 ~ 59)

getTime()    返回 1970 年 1 月 1 日至今的毫秒数

以下是对日期对象进行修改操作的方法：

setDate()    设置 Date 对象中月的某一天 (1 ~ 31)

setMonth()    设置 Date 对象中月份 (0 ~ 11)

setFullYear()    设置 Date 对象中的年份（四位数字）

setHours()    设置 Date 对象中的小时 (0 ~ 23)

setMinutes()    设置 Date 对象中的分钟 (0 ~ 59)

setSeconds()    设置 Date 对象中的秒钟 (0 ~ 59)

setTime()    以毫秒设置 Date 对象

toString()    把 Date 对象转换为字符串

toTimeString()    把 Date 对象的时间部分转换为字符串

toDateString()    把 Date 对象的日期部分转换为字符串

创建 Date 对象

        在开始处理时间和日期之前，我们需要先创建一个 Date 对象。与其他对象（数组对象、字符串对象等）不同，Date 对象不能直接声明，必须通过 Date() 函数定义

var time = new Date();
var time = new Date(milliseconds);
var time = new Date(datestring);
var time = new Date(year, month, date[, hour, minute, second, millisecond]);

var time1 = new Date();
var time2 = new Date(1517356800000);
var time3 = new Date("2018/12/25 12:13:14");
var time4 = new Date(2020, 9, 12, 15, 16, 17);

var time = new Date();

1、不提供参数：若调用 Date() 函数时不提供参数，则创建一个包含当前时间和日期的 Date 对象；

var time = new Date(milliseconds);

2、milliseconds（毫秒）：若提供一个数值作为参数，则会将这个参数视为一个以毫秒为单位的时间值，并返回自 1970-01-01 00:00:00 起，经过指定毫秒数的时间，例如 new Date(5000) 会返回一个 1970-01-01 00:00:00 经过 5000 毫秒之后的时间；

var time = new Date(datestring);

3、datestring（日期字符串）：

若提供一个字符串形式的日期作为参数，则会将其转换为具体的时间，日期的字符串形式有两种

• YYYY/MM/dd HH:mm:ss（推荐）：若省略时间部分，则返回的 Date 对象的时间为 00:00:00；

• YYYY-MM-dd HH:mm:ss：若省略时间部分，则返回的 Date 对象的时间为 08:00:00（加上本地时区），若不省略，在 IE 浏览器中会转换失败。

var time = new Date(year, month, date[, hour, minute, second, millisecond]);

4、若提供一个具体的年月日、时分秒转换为 Date 对象，其中：

• year：表示年，为了避免错误的产生，推荐使用四位的数字来表示年份；

• month：表示月，0 代表 1 月，1 代表 2 月，以此类推；

• date：表示月份中的某一天，1 代表 1 号，2 代表 2 号，以此类推；

• hour：表示时，以 24 小时制表示，取值范围为 0 ~ 23；

• minute：表示分，取值范围为 0 ~ 59；

• second：表示秒，取值范围为 0 ~ 59；

• millisecond：表示毫秒，取值范围为 0 ~ 999。

---

当你去的地方多了，你就会摆脱地域的偏见

当你看的书籍多了，你就会走出时代的局限

---

——Lungcen