web学习笔记(十五)

news2024/9/26 1:28:17

目录

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()常用方法汇总

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>

效果: 

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异步函数

函数可以调用另外一个函数,因为每个函数都是独立的代码块,用于完成特殊任务,因此经常会用到函数相互调用的情况。

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 语句中的值,同时还可以结束当前的函数体内的代码

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1380046.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

挖种子小游戏

欢迎来到程序小院 挖种子 玩法&#xff1a;看到种子点击鼠标左键进行挖种子&#xff0c;30秒内看你能够挖多少颗种子&#xff0c;快去挖种子吧^^。开始游戏https://www.ormcc.com/play/gameStart/251 html <canvas id"canvas" width"640" height"…

BSC/平衡记分卡

一、Balanced Score Card BSC即平衡计分卡&#xff08;Balanced Score Card&#xff09;&#xff0c;是常见的绩效考核方式之一&#xff0c;是从财务、客户、内部运营、学习与成长四个角度&#xff0c;将组织的战略落实为可操作的衡量指标和目标值的一种新型绩效管理体系。 是…

关于lombok插件的使用

在 idea 中有个非常好用的插件 lombok&#xff0c;可以用来在实体类中自动生成 get 、set以及构造方法&#xff0c;下面我们来学习如何使用它&#xff1a; 首先打开settings&#xff0c;按照以下方法&#xff1a; 到 marketplace 中搜索 lombok&#xff0c;我这里已经安装好了…

STM32——OLED实验

1.OLED简介 OLED&#xff0c;即有机发光二极管 OLED引脚说明 引脚说明&#xff1a; 1、CS&#xff1a;OLED片选信号&#xff08;低电平有效&#xff09; 2、WR&#xff1a;向OLED写入数据 3、RD&#xff1a;向OLED读取数据 4、D[7:0]&#xff1a;8位双向数据线&#xff0c;有…

本地静态资源打包出来,本地配置ng访问服务器(uniapp打包成h5后,使用打包资源连接测试环境测试)

1.下载ng https://nginx.org/en/download.html 2.解压下载的压缩包 3.打包h5静态资源 4.将打包出来的资源放入ng -》html文件夹下面 5.进入ng-》conf-》nginx.conf 进行转发配置 6.启动ng服务&#xff0c;点击nginx.exe 7.浏览器直接访问http://localhost:8081/#/&#x…

element-ui el-table表格勾选框条件禁用,及全勾选按钮禁用, 记录

项目场景&#xff1a; 表格的部分内容是可以被勾选的&#xff0c;部分内容是不可以被勾选的 使用的是 “element-plus”: “^2.2.22”, 以上应该都是兼容的 问题描述 要求el-table表格中&#xff0c;部分内容不可以被勾选&#xff0c;全选框在没有可选内容时&#xff0c;是禁…

日志审计系统Agent项目创建——获取Linux的ip并将得到的日志插入数据库中(Linux版本)

上一篇文章可以直接展示系统在运行过程中的日志&#xff0c;读取日志文件https://blog.csdn.net/wjl990316fddwjl/article/details/135553685 如何将得到的日志插入数据表中&#xff0c;进行更可观的展示&#xff1f; 1、创建表格并执行&#xff0c;可以看到数据库已经创建好…

基于ssm的校园预点餐系统(有报告)。Javaee项目。ssm项目。

演示视频&#xff1a; 基于ssm的校园预点餐系统&#xff08;有报告&#xff09;。Javaee项目。ssm项目。 项目介绍&#xff1a; 采用M&#xff08;model&#xff09;V&#xff08;view&#xff09;C&#xff08;controller&#xff09;三层体系结构&#xff0c;通过Spring Sp…

前端规范扩展

前端编程规范是基于原有vue2基础上那套《编码风格及标准》上&#xff0c;应用于vue3、typescript、vite2基础上延伸出来的扩展补充&#xff0c;持续完善 一、编码规范 ESLint 代码检测工具 Pretter 代码格式化工具配合双校验代码 Git 规范 - 编码工具 vscode 同步参考文档中…

用通俗易懂的方式讲解:如何用大语言模型构建一个知识问答系统

传统搜索系统基于关键字匹配&#xff0c;在面向&#xff1a;游戏攻略、技术图谱、知识库等业务场景时&#xff0c;缺少对用户问题理解和答案二次处理能力。 本文探索使用大语言模型&#xff08;Large Language Model, LLM&#xff09;&#xff0c;通过其对自然语言理解和生成的…

APP自动化测试(超详细)

在实习过程中&#xff0c;我接触到了一些SDL安全提测的工作。原来我是学web端渗透比较多的&#xff0c;移动端这块基本没怎么试过手&#xff0c;结果刚开始一直踩坑&#xff0c;连抓包都抓不到(&#xff34;▽&#xff34;)。 下面记录下我遇到的部分问题和解决方法&#xff0…

有没有可以拖拉拽生成一个低代码平台?

据我所知&#xff0c;低代码平台都能拖拉拽生成。作为一组数字技术工具平台&#xff0c;它能基于图形化拖拽、参数化配置等更为高效的方式&#xff0c;实现快速构建、数据编排、连接生态、中台服务等。通过少量代码或不用代码实现数字化转型中的场景应用创新。 到底啥是低代码&…

【深度学习目标检测】十六、基于深度学习的麦穗头系统-含GUI和源码(python,yolov8)

全球麦穗检测是植物表型分析领域的一个挑战&#xff0c;主要目标是检测图像中的小麦麦穗。这种检测在农业领域具有重要意义&#xff0c;可以帮助农民评估作物的健康状况和成熟度。然而&#xff0c;由于小麦麦穗在视觉上具有挑战性&#xff0c;准确检测它们是一项艰巨的任务。 全…

c++算法之枚举

目录 解空间的类型 循环枚举解空间 例题 特别数的和 输入格式 输出格式 输入样例&#xff1a; 输出样例&#xff1a; 解 例题 反倍数 问题描述 输入格式 输出格式 样例输入 样例输出 解 例题 找到最多的数 解 枚举算法是一种基本的算法思想&#xff0c;它通过…

leaflet:加载本地shp文件,并在地图上显示出来 (138)

第138个 点击查看专栏目录 本示例的目的是介绍演示如何在vue+leaflet中加载本地shp文件,利用shapefile读取shp数据,转换为json,利用L.geoJSON()在地图上显示图形。 直接复制下面的 vue+leaflet源代码,操作2分钟即可运行实现效果 文章目录 示例效果安装加载shapefile.js配…

记录汇川:H5U与Factory IO测试12

主程序&#xff1a; 子程序&#xff1a; IO映射 子程序&#xff1a; 辅助出料 子程序&#xff1a; 自动程序 Factory IO配置&#xff1a; 实际动作如下&#xff1a; Factory IO测试12

2023极客大挑战web小记

拿到题目提示post传参还以为是道签到题 刚开始直接把自己极客大挑战的username以及password怼上去&#xff0c;但是不对。看看F12&#xff0c;有提示。 当一个搜索蜘蛛访问一个站点时&#xff0c;它会首先检查该站点根目录下是否存在robots.txt&#xff0c;如果存在&#xff0c…

如何提高混合云项目的成功率

企业正在将工作负载迁移到公共云并在内部实施私有云。随着这些形式的云计算不断扩展&#xff0c;大型和小型企业都专注于混合云策略&#xff0c;以桥接两种模型并形成混合云环境。 企业正在将工作负载迁移到公共云并在内部实施私有云。随着这些形式的云计算不断扩展&#xff0…

图像中部分RGB矩阵可视化

图像中部分RGB可视化 今天室友有个需求就是模仿下面这张图画个示意图&#xff1a; 大致就是把图像中的一小部分区域的RGB值可视化了一下。他居然不知道该怎么画&#xff0c;我寻思这不直接秒了。 import cv2 as cv import numpy as np import matplotlib.pyplot as pltclass …

Flink定制化功能开发,demo代码

前言&#xff1a; 这是一个Flink自定义开发的基础教学。本文将通过flink的DataStream模块API&#xff0c;以kafka为数据源&#xff0c;构建一个基础测试环境&#xff1b;包含一个kafka生产者线程工具&#xff0c;一个自定义FilterFunction算子&#xff0c;一个自定义MapFunctio…