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

JS基本语法

JS代码写在body结束标签的上面

如点击按钮调用方法:

在浏览器的控制台打印测试数据 console.log()

<body><button type="button" onclick="easymethod()">点击我</button><script>//JS代码,写在body标签的上面function easymethod(){//在浏览器的控制台打印测试数据console.log("this is easymethod");//打印}</script></body>

在浏览器中右键点检查,查看控制台输出

声明变量

JavaScript是一种弱类型语言。这意味着在JavaScript中,变量的数据类型可以随时改变,不需要事先声明或指定。可以在同一个变量中存储不同类型的数据,而不会引发错误。这使得JavaScript非常灵活,但也可能导致一些类型相关的错误。

  1. let关键字用于声明一个局部变量,作用域限制在当前的代码块内。使用let声明的变量可以被重新赋值,也可以在相同作用域内重新声明。

  2. const关键字用于声明一个常量,表示其值是不可变的。一旦被赋值后,不能再重新赋值。const声明的变量必须在声明时进行初始化。

  3. var关键字用于声明一个变量,其作用域可以是全局的或函数内部的。使用var声明的变量可以被重新赋值,也可以在相同作用域内重新声明。

                //弱类型语言:变量可以指向任意类型的对象//局部变量let obj={};//大括号就是一个对象//常量const username="张三";var sex="男";

对象操作

给对象添加属性和方法,直接在点后面跟上即可:

                obj.name="李四";obj.study=function(){}obj["sex"]="男";var proName="sex";obj[proName]="nv";

删除属性 delete

				//删除属性delete obj.sex;

方法调用

			//程序运行阶段赋值的函数只有在后面才能调用var method=function(a,b){//只需要声明传入几个形参,跟实参的个数没有关系if(a){console.log(true);}else{console.log(false);}console.log(a+"-----");console.log(b+"-----");console.log(arguments);//当做传入实参的数值,可变参数}

在 JavaScript 中,函数可以赋值给变量,并且可以作为参数传递和返回值。在这段代码中,函数赋值给了 method 变量。

在这个函数中,形参数量是 (a, b),但是实际传入的参数数量可以是任意个数在函数体内,可以通过 arguments 对象来访问传入的所有实参。arguments 对象是一个类数组对象,包含了调用函数时传入的所有实参


判断类型

typeof 返回这个变量的类型名称:字符串类型 string小写、数字类型 number

            var str="123";console.log(typeof str);//typeof obj返回这个变量的类型名称小写num=123;console.log(typeof num);//打印number

数组操作

5个方法:

1.从头部添加,其他元素后移 arr.unshift("头部");
2.从尾部添加 arr.push("尾部");
3.从头部删除 arr.shift();
4.从尾部删除 arr.pop();
5.删除并插入
        删除下标位置以及其后所有元素 arr.splice(1);
        删除下标位置以及删除个数 arr.splice(1,2);
        删除下标位置,删除个数(只加不删就是0),添加元素 arr.splice(1,0,33,44,55);

            //数组添加元素//从头部添加,其他元素后移arr.unshift("头部");console.log(arr);//从尾部添加arr.push("尾部");console.log(arr);//从头部删除arr.shift();console.log(arr);//从尾部删除arr.pop();console.log(arr);//删除并插入arr=[1,2,3,4];arr.splice(1);//删除下标位置以及其后所有元素console.log(arr);arr=[1,2,3,4];arr.splice(1,2);//删除下标位置以及删除个数console.log(arr);arr=[1,2,3,4];arr.splice(1,0,33,44,55);//删除下标位置,删除个数(只加不删就是0),添加元素console.log(arr);

DOM

(Document Object Model)

DOM(文档对象模型)是 HTML 文档的编程接口,它可以使 JavaScript 与 HTML 文档进行交互。通过使用 DOM,可以动态地修改 HTML 元素的结构、样式和内容,以及响应用户的交互事件

DOM 是一个树状结构,它由多个节点组成。每个节点代表 HTML 文档中的一个元素、属性、文本或注释。

在 JavaScript 中,可以通过 DOM 方法和属性来操纵 HTML 元素。

修改组件内容样式:

box.innerHTML="<h1>标题</h1>"  修改内容作为html标签

box.innerText="文本内容"  修改内容作为文本

function 定义函数

            let num=0;function clickme(){console.log("Ok");let box=document.getElementById("box");num++;//box.innerHTML="<h1>大家很帅</h1>"//作为html标签box.innerText="点击次数:"+num;//作为文本}//clickme();

获取dom组件对象:通过id、class、name属性以及标签名

            //获取dom组件对象var btn=document.getElementById("btn");btn.onclick=clickme;document.getElementsByClassName("");//通过class属性获取document.getElementsByName("");//通过name属性获取document.getElementsByTagName("");//通过标签名

在js中,Math方法如随机数、下取整等与java类似

定时器

定时执行 setInterval 每隔多少毫秒执行一次

延迟执行 setTimeout 延迟多少毫秒执行

这种计时独立于主线程之外执行,clearInterval() 用于清空计时

        // function easymethod(){}// setInterval(easymethod);var interval = setInterval(function(){console.log(Math.random());},300);//每隔300毫秒执行一次setTimeout(function(){clearInterval(interval);console.log(Math.random());},1000)//延迟一秒执行

综合案例:抽号网页JS实现

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">.maxBox {padding: 4px 6px;font-size: 16px;color: #3EAFE0;}.clickBtn {border: 1px solid #3EAFE0;background-color: #3EAFE0;color: #FFF;font-size: 14px;padding: 4px 6px;}.result {font-size: 80px;color: #3EAFE0;font-weight: bold;padding: 30px;}.txt_center {text-align: center;}.exist {border: 1px solid #EEE;padding: 20px;margin: 20px auto;width: 600px;min-height: 100px;text-align: left;}.exist span {display: inline-block;padding: 2px 10px;margin: 4px;border-radius: 3px;background-color: #3EAFE0;color: #FFFFFF;}.info {border: 1px solid blue;color: #000;font-weight: 500;padding: 20px;margin: 20px auto;width: 600px;}</style>
</head><body><div class="txt_center"><div class="result"><span class="" id="result">0</span></div><input class="maxBox" type="text" id="txt" placeholder="请在里面输入号码最大值!"><input class="clickBtn" type="button" id="btn" value="抽号"><div class="exist"><div>已抽取:</div><div id="exist"><span>23</span><span>65</span><span>12</span></div></div></div><!--练习说明--><div class="info">1、在文本框中输入抽号最大值<br/> 2、点击按钮,开始抽号,随机生成1~最大值之间的整数<br/> 3、已经抽取的号码存入一个数组<br/> 4、为了保证号码的唯一性,每次生成一个号码,跟数组中的已抽取的号码比对<br/> 5、如果已存在,重新生成号码<br/> 6、如果不存在,放入数组中保存,并显示出来<br/> 7、将号码结果放入result中显示出来<br/> 8、将已经生成的号码(数组)存入exist中显示出来<br/> 9、给抽号按钮添加一个3s倒计时,倒计时结束前不可点击按钮</div><script></script>
</body></html>

<br/>标签是HTML语言中的一个空标签,用于在页面中插入一个换行符。它不需要闭合标签,直接写为<br/>即可。它常用于段落之间、列表项之间或需要强制换行的其他情况。

<span>标签是HTML语言中用来定义文本样式的标签之一。它可以用来改变文本的颜色、字体、大小等样式。在HTML中,<span>标签是一个行内元素,它可以嵌套在其他标签之中,或者包裹一部分文本。嵌套在<span>标签中的文本可以使用CSS样式表的选择器来定义样式,从而改变其外观。通过使用<span>标签,可以对文本进行灵活的样式设计,使页面看起来更加美观、有层次感。


下面是JS代码实现:

这里我将代码做了些许调整,改为了一个简易的抽卡模拟器,逻辑大致相同

<script>const btn=document.getElementById("btn");const txt=document.getElementById("txt");const result=document.getElementById("result");const exist=document.getElementById("exist");const arr=[];//const不能赋值但是可以修改里面的内容var start=false;btn.onclick=method;//将函数当做变量赋给这个属性,没有小括号function method(){//获取输入框中的内容(数字)var val=txt.value;//如果输入框内没有数据,就提示填入数据if(!val){alert("请输入内容");}else{//如果有数据if(!start){//初始化//如果不是开始状态就要初始化//初始化,设置开始start=true;txt.setAttribute("readonly","readnoly");//准备数组for(let i=1;i<=val;i++){arr[i-1]=i;}console.log(arr);//清空之前抽取出来的部分exist.innerText="";}//如果是启动状态,并且数组中没有可选元素//恢复可填入状态if(start&&arr.length==0){//输入框清空txt.value="";//输入框删除readonlytxt.removeAttribute("readonly");//状态改为falsestart=false;//结束方法return;}//数字跳动起来,计时独立于主线程之外var interval = setInterval(function(){let ranIndex=Math.floor(Math.random()*(arr.length));let num=arr[ranIndex];//将内容显示在result中result.innerText=num;btn.disabled=true;},50);setTimeout(function(){//清空之前计时显示clearInterval(interval);////如果是开始状态就开始抽号//随机下标let ranIndex=Math.floor(Math.random()*(arr.length));//取值[0,51)向下取整//console.log(ranIndex);//获取下标位置的内容let num=arr[ranIndex];//将内容显示在result中result.innerText=num;//追加到exist组件中if(num>val*0.9){exist.innerHTML=exist.innerHTML+"<span style=\"background-color:#F1C40F\">"+num+"</span>";}else if(num<val*0.3){exist.innerHTML=exist.innerHTML+"<span style=\"background-color:#BA68C8\">"+num+"</span>";}else{exist.innerHTML=exist.innerHTML+"<span>"+num+"</span>"}//将该位置的元素删除掉arr.splice(ranIndex,1);//要有一个数组,如果没有数据,提示已经抽完,并且将状态改为false//console.log(arr);btn.disabled=false;},1000);}}</script>

其中:

setAttribute("readonly", "readonly") 是一个 DOM 方法,用于将指定属性设置为指定的值。这里用于将输入框设置为只读模式

removeAttribute("readonly") 也是一个 DOM 方法,用于从元素中移除指定的属性。这里用于取消输入框的只读模式

相关文章:

JS基本语法

JS代码写在body结束标签的上面 如点击按钮调用方法&#xff1a; 在浏览器的控制台打印测试数据 console.log() <body><button type"button" onclick"easymethod()">点击我</button><script>//JS代码&#xff0c;写在body标签的…...

LSTM详解总结

LSTM&#xff08;Long Short-Term Memory&#xff09;是一种用于处理和预测时间序列数据的递归神经网络&#xff08;RNN&#xff09;的改进版本。其设计初衷是为了解决普通RNN在长序列训练中出现的梯度消失和梯度爆炸问题。以下是对LSTM的详细解释&#xff0c;包括原理、公式、…...

制品库nexus

详见&#xff1a;Sonatype Nexus Repository搭建与使用&#xff08;详细教程3.70.1&#xff09;-CSDN博客 注意事项&#xff1a; 1.java8环境使用nexus-3.69.0-02-java8-unix.tar.gz包 2.java11环境使用nexus-3.70.1-02-java11-unix.tar.gz包 3.注意使用制品库/etc/yum.repos.…...

2022.11.17 阿里钉钉数据开发岗位一面

今天晚上和阿里钉钉面试官聊了一面&#xff0c;整个过程持续45分钟&#xff0c;还是相当持久的。前面先让我自我介绍&#xff0c;包括自身背景、工作经历和项目经验&#xff0c;在介绍的时候面试官几次打断&#xff0c;让我停下来&#xff0c;然后他提问&#xff0c;我很纳闷还…...

【无标题】Git(仓库,分支,分支冲突)

Git 一种分布式版本控制系统&#xff0c;用于跟踪和管理代码的变更 一&#xff0e;Git的主要功能&#xff1a; 二&#xff0e;准备git机器 修改静态ip&#xff0c;主机名 三&#xff0e;git仓库的建立&#xff1a; 1.安装git [rootgit ~]# yum -y install git 2.创建一个…...

访问控制列表(ACL)

文章目录 ACL原理与基本配置ACL分类ACL组成ACL规则的匹配与应用 ACL原理与基本配置 ACL(Access Control List&#xff0c;访问控制列表) 读取二层、三层、四层报文信息根据预先定义好的规则对报文进行过滤和分类实现网络访问控制、防止网络攻击和提高网络带宽利用率等目的提高…...

自用git命令(待完善)

----------------------------------------------------------------------------------------- ###基础 git config --global user.name "xxxxx" #设置提交人 name git config --global user.email "xxxxxx163.com" #设置提交人 email git …...

突破•指针四

听说这是目录哦 函数指针数组&#x1fae7;用途&#xff1a;转移表 回调函数&#x1fae7;能量站&#x1f61a; 函数指针数组&#x1fae7; 函数指针数组是存放函数地址的数组&#xff0c;例如int (*parr[5])()中parr先和[]结合&#xff0c;说明parr是可以存放5个函数地址【元…...

深入解析Python `requests`库源码,揭开HTTP请求的神秘面纱!

&#x1f538; 第一部分&#xff1a;requests库的入口 我们从requests库的入口开始&#xff0c;通常我们会使用 requests.get() 或 requests.post() 等方法发送HTTP请求。那么&#xff0c;这些方法背后究竟做了些什么呢&#xff1f;我们从requests.get()方法开始看起&#xff…...

day1 服务端与消息编码

文章目录 消息的序列化与反序列化通信过程服务端的实现main 函数(一个简易的客户端) 本文代码地址&#xff1a; 本文是7天用Go从零实现RPC框架GeeRPC的第一篇。 使用 encoding/gob 实现消息的编解码(序列化与反序列化)实现一个简易的服务端&#xff0c;仅接受消息&#xff0c…...

部署WMS仓储管理系统项目后的注意事项

在探讨现代WMS仓储管理系统的部署与运营时&#xff0c;我们不得不深入剖析其背后的多维度考量与策略&#xff0c;以确保这一核心系统能够无缝融入并推动企业的整体供应链优化。WMS仓储管理系统作为连接仓库内部操作与外部供应链的桥梁&#xff0c;其重要性不言而喻&#xff0c;…...

跨网段 IP 地址通信故障分析

现如今计算机网络的规模和复杂性不断增加&#xff0c;跨网段通信成为网络运行中的常见需求。但如果设备处于不同网段且路由设置出现偏差时就会导致通信故障&#xff0c;严重影响网络的正常运行和数据传输。 1.跨网段通信的基本原理 跨网段通信依赖于路由器的路由功能。路由器根…...

存储引擎MySQL和InnoDB(数据库管理与高可用)

1、存储引擎 存储引擎是核心组成部分&#xff0c; 是构成数据库最基础最底层的部件&#xff0c; 利用这个部件&#xff0c;你的Mysql能够对数据进行查询、创建、更新、删除等操作&#xff0c; 也就是说&#xff0c;用户所输入的一系列的mysql语句&#xff0c;是由存储引擎来…...

探索局域网传输新境界 | 闪电藤 v2.2.7

在这个数字化时代&#xff0c;文件的快速、安全传输是我们日常工作中不可或缺的一部分。今天&#xff0c;电脑天空向大家介绍一款革命性的局域网文件传输工具——闪电藤&#xff0c;它将彻底改变你的文件传输体验。 &#x1f3a8; 界面设计 —— 极简之美 闪电藤采用极简的设…...

Tiling Window Management

我主要说一下windows版的 下面这个链接用的人比较多 GitHub - LGUG2Z/komorebi: A tiling window manager for Windows &#x1f349; 建议搭配 GitHub - da-rth/yasb: A highly configurable cross-platform (Windows) status bar written in Python. GitHub - amnweb/ya…...

9. kubernetes资源——pv/pvc持久卷

kubernetes资源——pv/pvc持久卷 一、volume数据卷1、hostPath2、挂载nfs实现持久化 二、pv/pvc 持久卷/持久卷声明1、pv/pvc介绍2、pv/pvc的使用流程2.1 创建pv2.2 创建pvc2.3 创建pod&#xff0c;使用pv做持久化 一、volume数据卷 用于pod中的数据的持久化存储 支持很多的卷…...

2024西安铁一中集训DAY27 ---- 模拟赛((bfs,dp) + 整体二分 + 线段树合并 + (扫描线 + 线段树))

文章目录 前言时间安排及成绩题解A. 倒水&#xff08;bfs dp&#xff09;B. 让他们连通&#xff08;整体二分 按秩合并并查集 / kruskal重构树&#xff09;C. 通信网络&#xff08;线段树合并 二分&#xff09;D. 3SUM&#xff08;扫描线 线段树&#xff09; 前言 T1没做出…...

STM32F401VET6 PROTEUS8 ILI9341 驱动显示及仿真

stm32cubemx新建工程代码&#xff0c;并生成工程 设置gpio 设置SPI 其他的参考stm32默认设置 然后编辑驱动代码 ili9341.h #ifndef ILI9341_H #define ILI9341_H#include <stdbool.h> #include <stdint.h>#include "glcdfont.h" #include "stm32…...

抖音视频素材网站有哪些?非常好用的5个抖音视频素材库分享

在打造引人入胜的抖音视频时&#xff0c;选择高品质的视频素材至关重要。优选的素材不仅能够显著提升视频的吸引力&#xff0c;还能让你的作品在众多视频中突出重围。对于抖音创作者而言&#xff0c;让我们探索一些备受推崇的视频素材平台&#xff0c;帮助你制作出既专业又引人…...

【数据结构】链式二叉树的实现和思路分析及二叉树OJ

【数据结构】链式二叉树的实现和思路分析及二叉树OJ &#x1f525;个人主页&#xff1a;大白的编程日记 &#x1f525;专栏&#xff1a;数据结构 文章目录 【数据结构】链式二叉树的实现和思路分析及二叉树OJ前言一.链式二叉树的定义及结构二.链式二叉树的遍历2.1前序遍历2.2中…...

接口测试中缓存处理策略

在接口测试中&#xff0c;缓存处理策略是一个关键环节&#xff0c;直接影响测试结果的准确性和可靠性。合理的缓存处理策略能够确保测试环境的一致性&#xff0c;避免因缓存数据导致的测试偏差。以下是接口测试中常见的缓存处理策略及其详细说明&#xff1a; 一、缓存处理的核…...

大数据学习栈记——Neo4j的安装与使用

本文介绍图数据库Neofj的安装与使用&#xff0c;操作系统&#xff1a;Ubuntu24.04&#xff0c;Neofj版本&#xff1a;2025.04.0。 Apt安装 Neofj可以进行官网安装&#xff1a;Neo4j Deployment Center - Graph Database & Analytics 我这里安装是添加软件源的方法 最新版…...

线程同步:确保多线程程序的安全与高效!

全文目录&#xff1a; 开篇语前序前言第一部分&#xff1a;线程同步的概念与问题1.1 线程同步的概念1.2 线程同步的问题1.3 线程同步的解决方案 第二部分&#xff1a;synchronized关键字的使用2.1 使用 synchronized修饰方法2.2 使用 synchronized修饰代码块 第三部分&#xff…...

CentOS下的分布式内存计算Spark环境部署

一、Spark 核心架构与应用场景 1.1 分布式计算引擎的核心优势 Spark 是基于内存的分布式计算框架&#xff0c;相比 MapReduce 具有以下核心优势&#xff1a; 内存计算&#xff1a;数据可常驻内存&#xff0c;迭代计算性能提升 10-100 倍&#xff08;文档段落&#xff1a;3-79…...

在 Nginx Stream 层“改写”MQTT ngx_stream_mqtt_filter_module

1、为什么要修改 CONNECT 报文&#xff1f; 多租户隔离&#xff1a;自动为接入设备追加租户前缀&#xff0c;后端按 ClientID 拆分队列。零代码鉴权&#xff1a;将入站用户名替换为 OAuth Access-Token&#xff0c;后端 Broker 统一校验。灰度发布&#xff1a;根据 IP/地理位写…...

质量体系的重要

质量体系是为确保产品、服务或过程质量满足规定要求&#xff0c;由相互关联的要素构成的有机整体。其核心内容可归纳为以下五个方面&#xff1a; &#x1f3db;️ 一、组织架构与职责 质量体系明确组织内各部门、岗位的职责与权限&#xff0c;形成层级清晰的管理网络&#xf…...

Keil 中设置 STM32 Flash 和 RAM 地址详解

文章目录 Keil 中设置 STM32 Flash 和 RAM 地址详解一、Flash 和 RAM 配置界面(Target 选项卡)1. IROM1(用于配置 Flash)2. IRAM1(用于配置 RAM)二、链接器设置界面(Linker 选项卡)1. 勾选“Use Memory Layout from Target Dialog”2. 查看链接器参数(如果没有勾选上面…...

ServerTrust 并非唯一

NSURLAuthenticationMethodServerTrust 只是 authenticationMethod 的冰山一角 要理解 NSURLAuthenticationMethodServerTrust, 首先要明白它只是 authenticationMethod 的选项之一, 并非唯一 1 先厘清概念 点说明authenticationMethodURLAuthenticationChallenge.protectionS…...

AI,如何重构理解、匹配与决策?

AI 时代&#xff0c;我们如何理解消费&#xff1f; 作者&#xff5c;王彬 封面&#xff5c;Unplash 人们通过信息理解世界。 曾几何时&#xff0c;PC 与移动互联网重塑了人们的购物路径&#xff1a;信息变得唾手可得&#xff0c;商品决策变得高度依赖内容。 但 AI 时代的来…...

10-Oracle 23 ai Vector Search 概述和参数

一、Oracle AI Vector Search 概述 企业和个人都在尝试各种AI&#xff0c;使用客户端或是内部自己搭建集成大模型的终端&#xff0c;加速与大型语言模型&#xff08;LLM&#xff09;的结合&#xff0c;同时使用检索增强生成&#xff08;Retrieval Augmented Generation &#…...