- 博客(44)
- 问答 (1)
- 收藏
- 关注
RSS订阅原创 JavaScript - 面向对象与面向对象的发展过程
一、面向对象与面向过程面向过程 c注重问题的解决面向对象 JAVA完成对真实世界的模拟，把一个对象的共同特点抽离出现，有了所有的’属性’和’方法’ classjs并不是一个真正的面向对象的语言 , js在模拟面向对象对象的特点：属性 + 方法对象在js里面是由构造函数new出来的这里我们举个例子~：问题1：有一只两岁的柯基 // 面向过程 const dog = '柯基' ; const age
2022-01-08 16:02:24
939
6
原创 JavaScript - 函数返回多个值、闭包、设置参数默认值
一、函数返回多个值函数返回多个值的时候，可以返回一个数组，然后数组的解构，将两个值分别取出来 function fn() { const a = 1; const b = 2; return [a, b] } //利用数组的解构，将两个值分别取出来 const [a, b] = fn(); console.log(a, b); // 1 2二、闭
2022-01-07 23:23:40
2929
原创 JavaScript - 箭头函数和箭头函数的this指向
一、具名函数和赋值式函数1. 具名函数有预编译 fn() //输出：bye-bye function fn() { console.log('bye-bye'); }2. 赋值式函数没有预编译 fn() const fn = function() { console.log('hello'); }此时会报错：匿名函数也属于赋值式函数，可以改写成
2022-01-07 20:21:42
854
原创 JavaScript - 展开运算符
在ES6中,使用 … 来表示展开运算符,它可以展开数组/对象。一、展开运算符…在数组中的使用展开一个数组 const arr = [1,2,3] ; console.log(...arr); //输出： 1 2 3复制一个数组，也称深拷贝数组 const arr = [1,2,3] ; //深拷贝，拷贝的是数组中的值 const arr3 = [...arr] ; consol
2022-01-06 13:17:57
2868
原创 JavaScript - 数组的解构和对象的解构
定义：从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。一、数组的解构数组： const arr = [1 , 2 , 3] ;1.1解构所有值常规数组值的获取是通过索引： const a = arr[0] ; const b = arr[1] ; const c = arr[2] ; console.log(a,b,c); //输出 1 2 3通过数组解构进行:
2022-01-06 01:56:01
891
原创 JavaScript的ES6语法 - let 、const 、var
一、变量声明的方式let / constlet / const 共同点1.都是块级作用域2.在同一个作用域下,变量名不允许重复3.他们声明的全局变量并没有挂在 window对象上4.都没有预编译let / const 不同点1.let 声明的变量值可以改变2.const 声明的变量值不能改变,必须声明后立即赋值 (如：const a = 3.14;)3.const 存引用数据类型时，内容可以发生改变(地址不能改变)优先考虑使用const , 如果变量会发生改变，就使用le
2022-01-05 23:51:49
269
原创 day20 - JavaScript正则的创建、修饰符、方法、语法和元字符、转义字符、简写、中文匹配、字符串使用到的正则方法、常见的正则练习
一、正则的创建正则表达式：字符串的校验(验证) — 字符串字面量创建 /匹配的字符串/ const reg1 = /good/ ;实例化对象 new RegExp(‘匹配的字符串’)RegExp是regular expression 的简写 const reg2 = new RegExp('good') ;二、正则的修饰符i ignore 忽略大小写 const reg1 = /tmd/i ;g global
2022-01-05 01:24:59
460
2
原创 day15 - JavaScript鼠标的事件、坐标、跟随
一、鼠标事件介绍主要有以下几个事件，通过代码来逐个展示功能。css样式： .a{ width: 300px; height: 300px; background-color: pink; } .b{ width: 100px; height: 100px; background-color: yellowgre
2021-12-28 01:09:09
397
4
原创 JavaScript用事件委托实现留言板功能
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do
2021-12-26 23:59:17
389
1
原创 day15 - JavaScript伪数组、事件处理函数、事件对象、绑定事件的方式、移除事件、事件流(事件冒泡)、事件委托
一、伪数组1.伪数组的含义：拥有length属性，但是无法直接调用数组的方法或期望length属性有什么特殊的行为，但仍可以对真正数组遍历方法来遍历它们。2.常见的伪数组：html通用代码： <p>1</p> <p>2</p> <p>3</p>Arguments: function fn(){ console.log(arguments) ;
2021-12-25 16:15:13
956
1
原创 JavaScript -- 实现留言板功能
实现留言板功能<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <tit
2021-12-25 10:48:26
647
原创 day14 - JavaScript中文档碎片、重绘与回流
一、重绘与回流重绘(repaint)：当元素样式的改变不影响布局时，浏览器将使用重绘对元素进行更新，此时由于只需要 UI 层面的重新像素绘制，因此损耗较少。常见的重绘操作：1.改变元素颜色2.该百年元素背景色3.more…回流(reflow)：又叫重排（layout）,类似于插队。当元素的尺寸、结构或者触发某些属性时，浏览器会重新渲染页面，称为回流。此时，浏览器需要重新经过计算，计算后还需要重新页面布局，因此是较重的操作。常见的回流操作：1.页面初次渲染2.浏览器窗口大小改变3.元素尺
2021-12-24 20:24:11
620
3
原创 day14 - JavaScript中DOM节点的操作--新增、删除和替换、获取父节点、兄弟节点、克隆节点、查找元素
一、DOM的新增1.innerHTML:innerHTML会把原来的内容先清空，然后再添加新的内容，原来的内容已经没有了。只不过是新添加的内容与原来的内容长得一样而已（原本具有的事件不具存在。innerHTML 只能解析字符串<body> <div class="a"> <span>hello</span> </div> <script> var oDiv = docume
2021-12-24 14:06:32
1670
原创 day13 - JavaScript的DOM操作、页面的几种宽高、返回顶部底部、标签相关操作知识
一、DOM基础DOM：document object model，用来操作页面标签和cssDOM实际上是BOM的一部分DOM的基本操作： console.log(document) ; //打印整个页面 console.log(document.documentElement) ; //打印html console.log(document.body) ; //打印body内容 console.log(document.head) ; //打印head内容 console.
2021-12-23 02:14:56
835
2
原创 day12 - JavaScript的三大组成部分及方法、移动端适配、高频率触发事件的处理方案
一、JavaScript的三大组成部分1.ECMAScript：ECMA是（欧洲计算机制造商协会）它规定了js的语法标准。2.BOM：BOM（browser object model）：浏览器对象模型。就是浏览器自带的一些功能样式，如搜索框，设置，等学习浏览器窗口交互的对象3.DOM：DOM（document object model）：文档对象模型。规定了文档的显示结构，可以轻松地删除、添加和替换节点二、BOM1.认识BOM：每个浏览器窗口都是一个window对象在每一次打开一个页面
2021-12-22 00:54:14
1629
11
原创 JavaScript实现流氓小广告效果
我们在浏览网页的时候，经常会遇到各种各样的垃圾弹窗，当你把它关闭之后，过一段时间他又弹出来，非常的让人心烦。这种流氓弹窗我们是可以通过JavaScript的 setTimeout() 方法来实现的。 <style> #ad{ width: 400px; height: 300px; display: none; background-color: #ddd;
2021-12-20 23:44:44
1463
4
原创 day10 - JavaScript字符串、切割数据地址、过滤数据、日期对象相关知识、定时器、页面停留时间、倒计时
一、字符串1.字符串创建方式1.字面量方式：var str = 'hello' ; //string2.new String() 方式var str = new String('hello') ; //object2.字符串的角标的长度字符串的长度和角标只能读取，不能改写// 字符串的长度和角标只能读取，不能改写 var str = 'hello' ; console.log(str.length) ; // 5 console.l
2021-12-19 22:19:17
987
4
原创 day09 - JavaScript有关数组和对象的的深拷贝和浅拷贝问题
我们知道数据类型分为两类：基本数据类型：string、number、boolean、null、undefined存储方式：存储在栈内存中，变量存储的就是值引用数据类型：Object（在JS中除了基本数据类型以外的都是对象，数据是对象，函数是对象，正则表达式是对象）存储方式：存储在堆内存中，变量存储的是地址...
2021-12-17 00:48:15
941
2
原创 JavaScript数组函数封装例题 - 在排序好的数组中插入一个值
题目：在一个已经排序好的数组中插入一个值, [1,4,6,9,12] 10分析：要想插入这个值，就需要找到这个值应该插入在哪个位置。也可以采用冒泡，来比较相邻的数。关于这个值的位置还需要具体分析是插入在数组的前面、中间、还是后面。方法一：通过比较与之相邻数的大小插入该数function insert(arr, n) { //此时n可能在前面，中间，后面插入 if (n < arr[0]) { arr.unshi
2021-12-16 19:40:07
963
原创 JavaScript函数封装与数组生成随机验证码
利用函数的封装与数组生成一个随机验证码，随机验证码必须包含小写，大写，数字。这里为了更方便看，我将封装的函数也写在了html文件中。<body> <input type="text" id='inp'> <button id='btn'>刷新</button> <!-- 引入js外部样式 --> <script src="../js/tools.js"></script> <
2021-12-16 01:02:30
777
原创 day08 - JavaScript函数的封装基础知识+函数的回调+数组的迭代方法
知识点回顾：首先，让我们来回顾一下之前关于函数的知识吧~1.函数的性质：封装性，复用性，调用性2.函数名命名 ：小驼峰（首字母不要大写）3.形参：是指函数声明是的参数；用于接受实参的；本质上是局部变量4.实参：函数调用时的参数；5.返回值 return 作用 ：返回一个结果；结束整个函数6.函数的预编译：函数可以先调用后声明7.arguments 用于接受实参列表（伪数组）8. 递归函数：自己调用自己9. 构造函数 ：创建对象数组：1.数组的2种创建方式：[ ] 、 new
2021-12-16 00:06:48
941
2
原创 day07 - JavaScript函数基础知识+数组相关知识
事件处理函数的问题1.代码并不永远是从上而下执行的2.事件处理函数是后面才执行的，也就是点击的时候才会执行// 事件处理函数是后面才执行的，也就是点击的时候才会执行 document.onclick = function () { console.log(666); } console.log(222); //222 此时666不会执行，需要点击才会执行...
2021-12-14 20:14:52
333
2
原创 JavaScript例题-随机产生0-100之间的数，多少次才会取到0
随机产生0-100之间的数，多少次才会抓到0 – 递归写法 // 随机产生0-100之间的数，多少次才会抓到0 -- 递归？ var count = 0 ; function randZero(){ //产生0-100的随机数 var n = parseInt(Math.random()*100) ; count++ ; if(n === 0){
2021-12-14 19:31:11
561
1
原创 JavaScript求最大公约数
1.最大公约数 — 循环求余数 <script> //最大公约数 --- 循环求余数 //功能：两个数的最大公约数 //参数：x,y number //返回值：最大公约数 number function gcd(x , y){ //比较两个数的大小，取较小的数 var min = x < y ? x : y ; //从大到小
2021-12-14 01:38:26
665
1
原创 day06 - JavaScript函数基础知识(2)
知识回顾：js的作用：1.操作html + css ; 2.动态数据渲染数据类型：number(数字)、string(字符串)、boolean(布尔值)、null空()、undefined(未定义)判断数据类型：typeof数据转换：1.转字符串：String() +’’2.转数字 Number() + / - / * / / / % 、 Math.round()、Math.floor() 、Math.ceil()、parseInt() ：把小数转为整数的时候 == Math.floo
2021-12-13 22:57:59
520
2
原创 JavaScript函数调用例题
某个公司采用公用电话传递数据，数据是四位的整数，在传递过程中是加密的，加密规则如下：每位数字都加上5,然后用除以10的余数代替该数字，再将第一位和第四位交换，第二位和第三位交换，请编写一个函数，传入原文，输出密文。分析：先输入一个四位数的整数，然后求出个位、十位、百位、万位，再利用函数让其满足条件。html代码： <span>传入原文</span> <input type="text" id='inp1'> <button id='btn
2021-12-11 18:00:39
545
原创 JavaScript函数调用经典例题
1.输入框判断是不是闰年2.随机数判断是不是闰年3.输入框判断是不是质数4.随机数判断是不是质数5.封装函数，判断日期是否合法思考：首先我们采用函数调用的方法，将需要调用的函数都写在 js 文件夹里面，需要调用的时候会更方便。需要注意的是不要忘记再html中引入js.html代码：<body> <span>是否为闰年</span> <input type="text" id='inp1'> <br> &
2021-12-11 01:46:38
993
2
原创 day05 - JavaScript函数基础知识
函数function 函数函数：把同一个功能的代码放在一起作用：封装性 + 复用性函数分类：1.系统函数（）2.自定义函数函数：就是一个工具，是可以重复使用的。函数有的有参数，有的没有。如Math.random()、alert(666)函数的语法：function 函数名（参数）{功能是怎么实现的}注意：函数名（参数） —函数必须调用函数的说明书包括：1.函数的功能：求两个数的和2.参数说明：（声明参数的类型）第一个参数是一个数字第二个参数也是一个数字利用函数求和
2021-12-11 00:08:28
228
原创 JavaScript求水仙花数
水仙花数是指一种三位数,其各个数之立方和等于该数for(i = 100 ; i <= 999 ; i++){ var bai = Math.floor(i / 100); var shi = Math.floor(i % 100 / 10) ; var ge = Math.floor(i % 10) ; var sum = bai*bai*bai + shi*shi*shi + ge*ge*ge ;
2021-12-10 01:08:59
405
原创 JavaScript打印三角形
利用JavaScript打印三角形！1.直角三角形⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐// i 控制行数 for(var i = 0 ; i < 5 ; i++) { // 打印星星,星星的个数跟行数一样 for(var j = 0 ; j <= i ; j++) { document.write('*') } // 打印换行
2021-12-10 01:05:36
3219
原创 JavaScript百钱百鸡问题
百个铜钱买了一百只鸡，其中公鸡一只5钱、母鸡一只3钱，小鸡一钱3只，问一百只鸡中公鸡、母鸡、小鸡各多少？ <script> //公鸡 5 不多于20只 //母鸡 3 不多于33只 //小鸡 1钱3只 不多于100只 for(var i = 1 ; i <= 20 ; i++ ){ for(var j = 1 ; j <= 33
2021-12-10 00:37:33
550
原创 day04 - JavaScript基础
， 控制台console.log打印多个值 ,用逗号隔开var a = 1, b = 2 ; console.log(a,b);. 对象才有（）函数、优先级、if（）、switch( )注意：代码块中只有一句话的时候，可以省略大括号if（） 只有一条语句，可以省略大括号switch case 只有一条语句，可以省略大括号 //console.log()打印多个值 var a = 1,b = 2; console.
2021-12-09 20:59:59
307
原创 有关value不能提前保存的问题
当利用var n1 = v1.value;传的是值！但是当我们获取结果的时候，不能利用 n3 = v3.value , 然后利用 n3 = sum,因为利用 n3 = v3.value 拿的是值，没有框！不能将n3放入结果框里面。因为 “ = ”是赋值，但是赋值是不能赋框的。<body> <input type="text" id="inp1"> <span>+</span> <input type="te
2021-12-08 20:39:37
99
原创 day03 -JavaScript基础
操作对象注意事项：1.先拿对象尽量不要把对象放在点击事件里面，因为这个点击事件会执行很多次2.select的使用option里面的 value 要么写要么不写，不能空着，js在获取值的时候，优先拿value，没有value就拿 option的内容3.value不能提前保存JS常用运算符的优先级：闰年问题闰年普通闰年：能被4整除，但是不能被100整除黄金闰年：能被400整除<script> var y = Math.floor(Math.random()
2021-12-08 20:06:41
255
2
原创 判断年月日输入是否合法
判断年月日输入是否合法(年 1000-2000之间)(月 1-12)(日)<body> <span>请输入年份</span> <input type="text" id="year"> <span>请输入月份</span> <input type="text" id="month"> <span>请输入日期</span> <input ty
2021-12-08 00:57:33
579
原创 利用JavaScript操作标签对象和循环写一个简易计算器
利用JavaScript操作标签对象和循环语句写一个简易计算器<body> <input type="text" id = "inp1"> <select name="" id="symbol"> <option value="+">+</option> <option value="-">-</option> <option value="*">
2021-12-08 00:03:31
310
原创 随机产生一个5位数，显示万千百十个 显示在输入框中
随机产生一个5位数，显示万千百十个 显示在输入框中<body> <span>随机数为：</span> <input id="inp1" type="text"> <span>随机数的万位是：</span> <input id="inp2" type="text"> <span>随机数的千位是：</span> <input id="inp3" t
2021-12-07 23:12:07
811
原创 day02 - JavaScript入门知识
有关NaN1.NaN : Not a Number 非数字的集合。NaN六亲不认，不会和任何人相等，包括自己 。isNaN( )用于判断是NaN!isNaN( )用于判断是数字== 两个等号判断的是值相等=== 三个等号判断的是值和数据类型相等 console.log(NaN == NaN); //false console.log(NaN === NaN); //false var x = 3; conso
2021-12-07 20:38:59
135
原创 day01-JavaScript入门基础介绍
javascript的介绍javascript 简称 js （js : javascript）脚本语言 依赖其他的程序弱类型 语法要求不严格，数据类型分类相对其他语言没有那么严格直译型 直接翻译js 的作用1.加强页面动画效果2.js接受后端传来的数据3.js给后端传数据js 最早是为了解决表单验证的问题js的引入方式与css一样，js的引入方式分为内部样式，外部样式，行内样式<!DOCTYPE html><html
2021-12-07 00:32:56
277
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人