web学习笔记(十五)

这篇具有很好参考价值的文章主要介绍了web学习笔记(十五)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录

1.Date对象

1.1日期对象的概念

1.2Date()方法的使用

 1.3Date()常用方法汇总

1.4例题:用函数编写一个倒计时

2.函数

2.1函数的概念

2.2函数的使用

2.3函数的参数

2.4函数的声明 

 2.5函数的返回值

2.6异步函数

3特殊函数类型

3.1匿名函数

3.2箭头函数 

3.3 函数形参和实参个数不匹配问题

3.4break ,continue ,return 的区别


1.Date对象

1.1日期对象的概念

  • Date对象和Math对象不一样,他是一个构造函数,所以我们需要实例化后才能使用
  • Date实例用来处理日期和时间。

1.2Date()方法的使用

       格式:let now = new Date();

                  console.log(now);

  • 当Date()没有参数时,默认返回当前的时间。
  • 当Date()里面写参数时,就返回括号内输入的时间,此处的参数可以有多种格式,  eg:'2024-1-11 12:00:00'   '2024 1 11 12:00:00'    '2024/1/11 12:00:00'

 1.3Date()常用方法汇总

web学习笔记(十五),笔记,学习,笔记

1.4例题:用函数编写一个倒计时

<!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>
        #div {
            width: 800px;
            height: 100px;
            margin: 200px auto;
            background-color: black;
            color: #fff;
            font-size: 30px;
            text-align: center;
            line-height: 100px;
            border-radius: 20px;
        }
    </style>
</head>

<body>


<div id="div"> </div>
    <script>
        function countdown() {
            var targetDate = new Date("2024-01-15 12:00:00");
            var currentDate = new Date();
            var timeDiff = targetDate.getTime() - currentDate.getTime();
            var days = Math.floor(timeDiff / (1000 * 60 * 60 * 24));
            var hours = Math.floor((timeDiff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            var minutes = Math.floor((timeDiff % (1000 * 60 * 60)) / (1000 * 60));
            var seconds = Math.floor((timeDiff % (1000 * 60)) / 1000);
            let time = `距离2024-01-15 12:00:00还有:${days}天${ hours}时${minutes}分${seconds}秒 `;
            document.querySelector('#div').innerHTML = time;
        }
        countdown()
        setInterval(function () {
            countdown()
        }, 1000);
    </script>
</body>

</html>

效果:web学习笔记(十五),笔记,学习,笔记 

2.函数

2.1函数的概念

        函数就是封装了一段可被重复调用执行的代码块。通过此代码块可以实现大量代码的重复使用。函数对任何语言来说都是一个核心的概念,通过函数可以封装任意多条语句,而且可以在任何地方,任何时候调用执行。

2.2函数的使用

(1)声明函数:    function 函数名(){

                                             代码块

                                         }

(2)调用函数:  函数名()

  可以多次对函数进行调用,调用位置不限,前调和后调都可以。

2.3函数的参数

(1)形参:声明函数的参数叫形参,是局部变量,在函数之外是不起作用的(形参的个数和类型没有限制,多个参数之间以逗号隔开)

(2)实参:   调用函数时传的参数叫做实参

(3)补充: 

  •  在JavaScript中,形参的默认值是undefined。
  • 函数分为三种:有参、无参和带返回值。
  • 函数可以带参数,也可以不带参数,不带参数的函数叫做无参函数。

2.4函数的声明 

  •  可以包含数字 字母  _   $
  •  不能以数字开头
  •   区分大小写
  •   推荐用驼峰命名法,或者下划线命名法 eg:stuName  StuName
  •   见名知意,实在不知道怎么表达时可以用demo
  •   不能使用关键字和保留字
  •    尽量使用动词

 2.5函数的返回值

函数都是有返回值的,如果有return 则返回 return 后面的值,如果没有return 则返回 undefined。

return有两个作用:

  1.   返回表达式的结果。
  2.   结束函数(如果函数里面嵌套了循环,那循环也会跟着一块结束)
  3.   函数中有retrun表达式,函数调用时才可以用变量接受,或直接输入函数调用。

2.6异步函数

函数可以调用另外一个函数,因为每个函数都是独立的代码块,用于完成特殊任务,因此经常会用到函数相互调用的情况。文章来源地址https://www.toymoban.com/news/detail-786182.html

function fn1() { 
  console.log(111); 
   fn2(); 
   console.log('fn1');
}
function fn2() {
  console.log(222); 
  console.log('fn2');
}
fn1();

3特殊函数类型

3.1匿名函数

// 这是函数表达式写法,匿名函数后面跟分号结束
var fn = function(){...};
// 调用的方式,函数调用必须写到函数体下面
fn();
  • 因为函数没有名字,所以也被称为匿名函数
  • 这个fn 里面存储的是一个函数
  • 函数表达式方式原理跟声明变量方式是一致的
  • 函数调用的代码必须写到函数体后面,必须先声明,后调用
  • 和普通函数一样分为有参、无参和带返回值。

3.2箭头函数 

  let show=()=>{
            // 函数体
            console.log('111');
        }
  1.  () 如果括号里面的参数只有一个的话,括号可以省略。
  2.  {} 花括号中只有一句代码的时候,花括号可以省略
  3.   如果花括号中是一句返回值,return也必须省略。

3.3 函数形参和实参个数不匹配问题

参数个数 说明
实参个数等于形参个数 输出正确结果
实参个数多与形参个数 只取到形参的个数
实参个数小于形参个数 多的形参定义为undefined,结果为NaN

3.4break ,continue ,return 的区别

  • break :结束当前的循环体(如 for、while)
  • continue :跳出本次循环,继续执行下次循环(如 for、while)
  • return :不仅可以退出循环,还能够返回 return 语句中的值,同时还可以结束当前的函数体内的代码

到了这里,关于web学习笔记(十五)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • ZA303学习笔记十五企业状态漫游/传递事件或消息

    企业状态漫游为用户提供了跨 Windows 设备的统一体验,并减少了配置新设备所需的时间。 借助 Windows 10,Azure Active Directory (Azure AD) 用户能够将其用户设置和应用程序设置数据安全地同步到云中。企业状态漫游为用户提供跨其 Windows 设备的统一体验,并减少了配置新设备所

    2023年04月08日
    浏览(41)
  • Redis核心技术与实战-学习笔记(十五):消息队列(Redis的解决方案)

    消息队列: 分布式系统 必备的一个 基础软件 ,能支持 组件通信消息 的 快速读写 Redis本身 支持数据的快速访问 ,满足 消息队列的读写性能需求 消息队列存取消息的过程 在分布式系统中,两个组件要基于消息队列进行通信,一个组件就会把要处理的数据以消息的形式传递

    2023年04月09日
    浏览(46)
  • web学习笔记(四十四)

    目录 1. 接口 1.1 什么是接口 1.2 接口的请求过程 1.3 接口文档 1.3.1 什么是接口文档 1.3.2 接口文档的组成部分 1.3.3 接口文档示例  2. XMLHttpRequest 2.1 什么是XMLHttpRequest 2.2 XHR发起Get请求的步骤 2.3 XHR发起post请求的步骤 2.4 什么是查询字符串   2.5 什么是XML        使用Ajax 请求数

    2024年04月17日
    浏览(35)
  • web学习笔记(七)

    目录 1.css动画 1.1动画的编写格式 1.2引入动画 1.3用动画实现简单轮播图的效果 2.媒体查询 2.1媒体查询的编写格式 2.2媒体查询总结 3.html表示大小的单位 动画需要先编写出想要的动画,然后在所需位置引入动画。动画的命名是随意的,可以根据自己的习惯命名。 动画的编写格

    2024年01月23日
    浏览(32)
  • web学习笔记(十七)

    目录 1.Bootstrap知识点汇总 1.1什么是Bootstrap 1.2引入Bootstrap 1.3Bootstrap提供的类名  1.4Bootstrap栅格系统 2.Math对象常用方法和属性汇总 2.1属性 2.2方法 Bootstrap 是全球最受欢迎的前端组件库,用于开发响应式布局、移动设备优先的 WEB 项目。 可以在页面引入在线文件,也可以将文件

    2024年01月21日
    浏览(33)
  • web学习笔记(二十八)

    目录 1.JSON 1.1JSON简介 1.2JSON的语法 1.3JSON字符串分类  1.4JSON方法  2.数据存储  2.1会话存储 2.1.1会话存储的特点 2.1.2会话存储的常用方法  2.2本地存储 2.2.1本地存储的特点 2.2.2本地存储的常用方法  2.3两者的共同点 JSON(JavaScript Object Notation)是JavaScript的对象表示法,是轻量级

    2024年03月24日
    浏览(39)
  • web学习笔记(十八)

    目录 1.函数的参数 1.1显式参数 1.2隐式参数 (1)this (2)Arguments 1.3伪数组转换为真数组 2.函数补充知识点 2.1函数可以调用另一个函数 2.2闭包函数 2.3递归函数 2.4回调函数 2.5高阶函数 显式参数就是我们自定义的参数。 JavaScript函数定义显式参数时没有指定数据类型。 系统给定的

    2024年02月21日
    浏览(31)
  • WEB学习笔记3

    输入输出语句  外部js:这种写法有一个不好的地方就是,两个不同的开发人员在使用不同的js写function的时候有可能造成重复,导致程序紊乱。在这推荐一种用json格式方式书写js函数的方法 变量: 变量命名规范: let和var的区别: const常量: 字符串类型: 布尔类型: 1.nosh

    2024年02月16日
    浏览(25)
  • web学习笔记(一)

    目录 1.HTML的基础认识 1.1 什么是HTML 1.2 vscode快速生成基本骨架 1.3 HTML基本骨架的含义 2.HTML的基础语法 2.1 HTML的注释 2.2标签的分类 (1) HTML标签分为三类:块状元素、行内元素和行内块元素。 (2) 元素模式的转换 2.3 标题标签 2.4 段落标签 2.5图像标签 2.6超链接标签 2.7锚点链接

    2024年02月03日
    浏览(26)
  • web学习笔记(四)

    目录 1.超链接的伪类 1.1link 1.2visited 1.3hover 1.4active 1.5超链接伪类总结 1.6补充:nth-child() 选择器 2.字体图标 2.1在线字体图标 2.2本地字体图标 3.背景 3.1背景颜色透明度 3.2背景图片 1.将图片设置为背景: 2.设置背景图片不平铺: 3.背景图片定位: 4.设置背景图片大小: 5.总结: 格

    2024年02月02日
    浏览(23)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包