前端开发——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 事件属性来直接绑定事件处理程序
<body> <button type="button" onclick="myBtn()">按钮</button> </body> <script type="text/javascript"> function myBtn(){ alert("Hello World!"); } </script>
还有一种方法就是直接使用 JavaScript 中提供的内置函数来为指定元素绑定事件处理程序
<body> <button type="button" id="myBtn()">按钮</button> </body> <script type="text/javascript"> function sayHello(){ alert("Hello World!"); } document.getElementById("myBtn").onclick = sayHello; </script>
事件示例
一般情况下,事件可以分为四大类——鼠标事件、键盘事件、表单事件和窗口事件,另外还有一些其它事件
1) onmouseover 事件
onmouseover 事件就是指当用户鼠标指针移动到元素上时触发的事件
<body> <button type="button" onmouseover="alert(' 的鼠标已经移动到了该按钮上');">请将鼠标移动至此处</button><br> <a href="#" onmouseover="myEvent()">请将鼠标移动至此处</a> </body> <script> function myEvent() { alert('你的鼠标已经移动到了该链接上'); } </script>
2) onmouseout 事件
onmouseout 事件与 onmouseover 事件正好相反,onmouseout 事件会在鼠标从元素上离开时触发
<body> <button type="button" onmouseout="alert('你的鼠标已经移出了该按钮上');"> 请将鼠标移动至此处后再移出</button><br> <a href="#" onmouseout="myEvent()">请将鼠标移动至此处后再移出</a> </body> <script> function myEvent() { alert('你的鼠标已经移出了该链接上'); } </script>
3)onkeydown 事件
onkeydown 事件是指当用户按下键盘上的某个按键时触发的事件
<body> <input type="text" onkeydown="myEvent()"> </body> <script> function myEvent(){ alert("按下了键盘上的某个按钮"); } </script>
4)onkeyup 事件
onkeyup 事件是指当用户按下键盘上的某个按键并将其释放(即按下并松开某个按键)时触发的事件
<body> <input type="text" onkeyup="myEvent()"> </body> <script> function myEvent(){ alert("按下了键盘上的某个按钮,然后又松手了"); } </script>
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