JS学习：定时器、箭头函数、BOM

最新推荐文章于 2024-07-17 15:02:16 发布
最新推荐文章于 2024-07-17 15:02:16 发布
阅读量586 收藏 1
点赞数 3
分类专栏： js 文章标签： javascript es6 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xuan_659/article/details/110562924
版权
本文介绍了JavaScript高级应用，包括定时器的设置与清除，Date对象的方法如getDate()、getFullYear()等，箭头函数的简洁语法及作用，以及BOM中的窗口尺寸和页面信息相关属性。
摘要由CSDN通过智能技术生成

js高级

​ 接下来的这一周就要开始学习js的一些高级应用了呢,这周的学习内容主要是js定时器的使用，Date函数的简单使用，箭头函数的简单介绍以及BOM的相关函数。话不多讲，直接上代码。

定时器

参考：https://www.w3school.com.cn/js/js_timing.asp

设置定时器
setTimeout(function, milliseconds); 
  							//等同于=>(window.setTimeout(function, milliseconds);)
setInterval(function, millseconds);
清除定时器
clearInterval(timerVariable)
e.g：一个关于定时器的简单使用的小例子
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
    
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .num {
    
        background-color: skyblue;
        width: 300px;
        height: 300px;
        font-weight: 700;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 50px;
      }

      .container {
    
        display: flex;
        height: 500px;
        width: 500px;
        flex-direction:column;
        justify-content: center;
        align-items: center;
      }

      .stop {
    
        width: 150px;
        height: 50px;
      }
    </style>
  </head>
  <body>
    <div class="container">
最低0.47元/天 解锁文章
xuan_659
关注
  • 3
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
wu_study:js全栈学习
03-31
6. **ES6及以后的新特性**：包括箭头函数、let和const、解构赋值、模板字符串、类和模块等，这些都是现代JavaScript开发的必备知识。 7. **Node.js**：JavaScript运行环境，允许开发者在服务器端使用JavaScript，...
【JavaScript】箭头函数
LuWeien的博客
02-04 861
箭头函数的this不取决于调用取决于定义, 定义在哪个作用域就是指向谁, 这里的箭头函数定义在了事件处理函数中, 所以this指向事件源。注意: 这里的定时器已经不再是原来的定时器, 原来的定时器里面的参数写的是普通函数, 将普通函数改成箭头函数之后就按照箭头函数的情况考虑。这里的this在定时器内, 定时器里的函数是自动执行, 指向window, 我们需要将this指向li, 所以接下来修改代码。箭头函数外面的函数this是啥，箭头函数this就是啥。会自动把这句话的结果当做函数的返回值。
coffeescript 函数 箭头表达式
weixin_30693183的博客
04-02 140
函数 do可以形成闭包，使方法作用域不受外部变化的影响。 隐式返回最后一个表达式的值 函数调用省略括号 用arguments数组访问传递给函数的所有对象（低可读性） @name为this.name的简写，this表示上下文环境。相应的，有new关键字，apply和call方法。 函数调用前若有new关键字，会把函数作为构造函数创建一个新对象，上下位即为该新对象。 使用ca...
js中使用箭头函数以及setTimeout时this的指向问题
最新发布
weixin_46194350的博客
07-17 275
js中使用箭头函数以及setTimeout时this的指向问题，new一个函数以及直接调用函数this的区别
JavaScript 语法糖 —— 箭头函数
Dablelv 的博客专栏。
02-04 2688
上面代码中，setTimeout() 的参数是一个箭头函数，这个箭头函数的定义生效是在 foo 函数生成时，而它的真正执行要等到 100 毫秒后。当直接调用的时候，执行 call 方法，执行函数体。上面代码中，obj.b() 方法是一个箭头函数，本意是想输出对象 obj 属性 i 的值，结果由于 this 指向全局对象 Window，输出了错误的结果。另外，如果函数体很复杂，有许多行，或者函数内部有大量的读写操作，不单纯是为了计算值，这时也不应该使用箭头函数，而是要使用普通函数，这样可以提高代码可读性。
js箭头函数实现函数延迟执行
qq_44848423的博客
04-16 497
function defer(f, ms) { return function() { // 由于箭头函数没有this，所以这个地方的 this 指代return function // 箭头函数也没有 arguments，所以这里 arguments 指代 return function 的参数 // 在这里 f.apply() 的意思就是在调用f的时候改变其上下文环境为指定的 this setTimeout(() => f.apply(this, arguments), m
你真的了解JavaScript里的箭头函数(Arrow Function)吗（二）？
zwf193071的专栏
07-23 552
你真的了解JavaScript里的箭头函数吗
javascript：学习javascript的一些笔记
02-19
7. **ES6及以后的新特性**：ES6（ECMAScript 2015）引入了许多新特性，如箭头函数、模板字符串、解构赋值、let和const、类和模块等。后续的版本如ES7、ES8也不断添加新功能，如async/await、Promise.all和Set、Map等...
学习记录：前端学习记录
02-24
3. **BOM处理**：浏览器对象模型（BOM）允许JavaScript与浏览器进行交互，如窗口管理（window对象）、历史记录（history对象）、位置（location对象）和定时器（setTimeout、setInterval）。 4. **异步编程**：...
JS_SumUp:javascript 的日常总结
05-15
在JavaScript中，基础知识点包括数据类型（如基本类型：字符串、数字、布尔值、null、undefined，以及引用类型：对象）、变量声明（var、let、const）、操作符（算术、比较、逻辑、三元运算符）、流程控制（条件语句...
JavaScript_Study_Notes:简单的javascript示例和学习笔记
05-05
9. ES6新特性：包括类（class）、箭头函数（=>）、模板字符串（``）、解构赋值、模块（import/export）等，增强了JavaScript的可读性和功能性。 "JavaScript_Study_Notes"中的项目可能涵盖了这些基本概念的实际应用...
javascript setTimeout()函数.rar
04-13
javascript setTimeout()函数的三种使用方法，刷新页面的源代码 [removed] function myrefresh(){ [removed].reload(); } setTimeout('myrefresh()',20000); //指定1秒刷新一次 [removed]
Cichorium:使用CoffeeScript基于Promise的路由框架
05-25
菊苣属 使用CoffeeScript基于Promise的路由框架。 Cichorium有一个路由表和一个错误路由表。 路由表是一个包含以下内容的数组： 子路由表（数组） 中间件(req, res) -> Promise 中间件将顺序执行。 如果中间件返回Promise，则Cichorium将在兑现诺言后执行下一个中间件。 在中间件内部，您可以使用nextRoute跳过此路由上的其他中间件，直接在父级输入下一个路由。 条件路由是通过此功能实现的，例如匹配HTTP方法或URL前缀。 如果中间件抛出Exception或Promise被拒绝，则Cichorium将进入错误处理，错误路由表中的中间件将被顺序执行。 如果引发了新的异常，则新的异常将替换原始的异常。 错误中间件可以使用errorResolved解决异常，其他错误中间件将不会执行。 除非有多个异常，否则最后一个异常将被传递到
JavaScript箭头函数
e1172090224的博客
03-06 171
代码摘录自https://www.cnblogs.com/fundebug/p/6904753.html 语法 我们先来按常规语法定义函数： function funcName(params) { return params + 2; } funcName(2); // 4 该函数使用箭头函数可以使用仅仅一行代码搞定！ var funcName = (params) =&amp;gt...
Js 箭头函数 详细介绍（多种使用场景差异，你学会了吗？）
高大志leo的博客
12-17 2377
简要认识 箭头函数是在ES6中添加的一种规范，简化了匿名函数定义的写法。 基本格式 完整写法 let fn = (x,y) => { return x + y; } //function()写法 let fn = function(x,y) { return x + y; } 只有1个参数时，可以省略 () //参数只有1个时，可以省略 () let fn = x => { return x + x; } //function()写法 let fn = funct
定时器中的箭头函数指向
weixin_30725315的博客
01-15 1191
1.箭头函数的定时器this指向当前对象 var obj ={ name:"Tina", popup:function(){ setTimeout(()=>{ console.log("打印名字",this.name) },3000) }} obj.popup(); //打印名字 Tina 2.普通函数定时器this指向windo...
关于vue组件中定时器中只能使用箭头函数的问题
王小森的成长博客
09-14 6832
vue组件中的定时器只能使用箭头函数的问题。（）=>{ }箭头函数。
ES6-箭头函数
qq_42943107的博客
10-24 289
ES6 允许使用“箭头”（=>）定义函数，箭头函数也是一个普通的函数，{}也可以用来写业务逻辑，是一个匿名函数。 下面先看几个函数的例子 函数声明的方式定义函数: function fn(){ console.log(123) } fn() 运行结果： 用函数表达式的方式定义函数： var f1 = function(){ console.log(456...
es6 的箭头函数 =>
热门推荐
现在学习也不晚
11-29 1万+
1  基本用法ES6 允许使用 “ 箭头 ” （=&gt;）定义函数。var f = v =&gt; v; //上面的箭头函数等同于： var f = function(v) { return v; }; //如果箭头函数不需要参数或需要多个参数，就使用一个圆括号代表参数部分。 var f = () =&gt; 5; // 等同于 var f = function () { return 5 }...
JavaScript DOM与BOM学习：动态HTML与元素操作
可以使用function关键字定义函数，或者使用箭头函数（=>）语法。 6. JavaScript的DOM DOM是HTML和XML文档的标准化表示，它将文档结构转化为一个由节点构成的树形结构。通过DOM，JavaScript可以访问和修改HTML元素...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值