当前位置: 首页 > news >正文

前端开发——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

相关文章:

  • GPT-4老板:AI可能会杀死人类,已经出现我们无法解释的推理能力
  • CSS(三)
  • 华为nat配置实验:内网能够访问外网,内网服务器80端口映射出去
  • Linux使用:环境变量指南和CPU和GPU利用情况查看
  • 《C++那些事》Step By Step上手学习
  • CentOS8提高篇22:制作crontab计划任务,at一次性计划任务
  • Java云电子病历系统源码,提供电子病历在线制作、管理和使用的一体化电子病历
  • 【ansible】实施任务控制
  • 【愚人节专场】Java实现定时发送小情话
  • 基于SpringBoot实现CSGO游戏赛事管理系统演示【附项目源码】分享
  • 一个年薪40w软件测试员的职业规划,写给还在迷茫中的朋友
  • 使用Xarray解码GFS气象源文件和pip国内源
  • Beats:在 Docker 中同时部署 Metricbeat 和 Elasticsearch
  • 【数据仓库-7】-- 使用维度建模的一些缘由
  • node-fs
  • 无人机动力测试台-自动化测试系统拉力、扭矩、电压、电流、转速和效率
  • 国产机器人抢滩进行时!优艾智合引领智能制造浪潮
  • Autosar标准与其他标准的关系
  • 语音通知短信 API:一种新型的信息传递方式
  • 网络现代化势在必行,VMware 发布软件定义网络 SD-WAN 全新方案
  • https://app.hackthebox.com/machines/Inject
  • Spring —— Spring简单的读取和存储对象 Ⅱ
  • 渗透测试之冰蝎实战
  • Mybatis、TKMybatis对比
  • Microsoft Office 2019(2022年10月批量许可版)图文教程
  • 《谷粒商城基础篇》分布式基础环境搭建
  • 哈希表题目:砖墙
  • Vue 3.0 选项 生命周期钩子
  • 【车载嵌入式开发】AutoSar架构入门介绍篇
  • 【计算机视觉 | 目标检测】DETR风格的目标检测框架解读