- 博客(47)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 JavaScript事件委托(代理)
事件委托(代理)是什么？事件委托，也叫事件代理(event delegation)把每个元素都需要的事件委托给这些元素的父元素。通过事件冒泡传递的原理，只需要为父元素绑定事件函数，其子元素的事件函数就可以通过冒泡直接触发父元素的事件函数。简单理解就是通过冒泡让子元素使用父元素的事件函数，避免为大量同类型的子元素绑定相似事件函数。事件委托效果如何实现事件委托就是把子元素的事件函数交给父元素。可以使用到ul或ol下的li。为ul绑定事件函数，需要对其中的某个li进行操作时可以使用event.ta
2022-05-26 22:22:57
322
2
原创 JavaScript事件对象
事件对象是什么？事件对象表示事件的状态。由浏览器创建，具有鼠标位置坐标，事件元素位置坐标，元素事件是否冒泡等。获取事件对象当事件触发时，事件对象会作为参数传递给事件响应函数。我们定义一个形参就可以获得事件对象(使用arguments也可以获取)。即使不写形参，在事件响应函数中也可以直接使用event获取事件对象(亲测Edge，谷歌，火狐可以)。div.onclick=function(){console.log(event); console.log("box响应点击");}IE浏览器
2022-05-26 17:41:04
457
原创 JavaScriptDOM事件流
事件流描述的是从页面接受事件的顺序。事件发生时会在元素节点间按照特定的顺序传递，这个传递过程就是DOM事件流。DOM事件流分为三个阶段捕获阶段：浏览器从HTML文档，到body标签，再逐层深入到事件元素。途中不会触发各级元素的对应事件。从另一角度理解：为了寻找事件元素而从上到下依次寻找。 当前目标阶段：捕获阶段找到事件元素，该事件元素的对应事件触发。 冒泡阶段：事件元素的事件触发后，浏览器按照捕获阶段的原路返回。返回过程中途径每一级元素，便触发对应元素的同一事件。...
2022-05-25 19:53:06
274
原创 Javascript节点操作
节点操作是Javascript获取元素的方式之一。另一种是利用Javascript提供的DOM方法获取元素。常见的有getElementById，getElementsByTagName()等；这种方法每获取一次元素就要getElement一次，较为繁琐(相对于节点操作而言)。我们可以使用节点操作，在获取某一个元素后，使用节点操作就可以直接获取它的子元素，子节点，兄弟节点等。节点简介节点在Javascript中包括文本节点，属性节点，元素节点，注释节点。节点具有节点类型(nodeType)，节点
2022-05-24 17:35:43
730
1
原创 HTML5自定义属性中的使用数据属性(using data attributes)
HTML5允许用户使用自定义属性来保存并使用这些数据。自定义属性出现在元素标签内部，这些属性与特定的元素项关联，允许我们在html元素中保存信息。使用数据属性是以data-为前缀的。后面内容也可以跟连字符-。例如data-first-name，data-index保存信息多种多样。例如为了计数li的顺序使用data-index，为了指定父子关系使用data-parent。这个是bilibili的一部分网页代码，可以看到使用数据属性的大量使用。读写使用数据类型由于使用数据类型是自定..
2022-05-23 20:21:53
323
原创 JavaScript操作元素属性方式的辨析
目录读取属性写入属性移除属性检测属性是否存在getAttributeNSJavaScript操作元素属性具有很多方式。这里主要辨析Element.属性名与Element.getAttribute()这两类方式的区别。读取属性Element.属性名：这个方法可以读取title，id，className等，注意属性名要按照javascript的格式来。特例：类名是className。Element.getAttribute()：这个方法同样是读取属性，但是略有不同。.
2022-05-23 18:01:33
234
1
原创 JavaScript排他思想
什么是排他思想？排他思想是为一组同类型元素中的某一个元素设置样式时，采用的一种特定顺序。首先将所有元素的样式设置为一般样式(包括特定的某个元素)，再为特定元素设置特定样式。排他思想的优势排他思想适用于为多个同类型元素设置样式或效果的情况。避免为单个元素重复设置相同样式，可以有效显示出用户操作下某一元素的改变。实现排他思想的步骤为全部元素设置一般效果 为特定元素设置特定效果<!DOCTYPE html><html lang="en"><head>
2022-05-22 21:22:32
2120
原创 JavaScript 密码输入框的显隐切换
密码输入框我们常常可以见到显隐切换的小眼睛，点击可以将········转换为密码原文，便于核对。实现这个小效果需要两个点改变输入框的type(类型) 改变图片路径(只要实现切换图片即可，不一定非要切换路径)。代码如下，图片素材可以在iconfont上下载图片或使用web字体。代码下附上实例中的图片。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">
2022-05-22 20:42:29
642
原创 JavaScript innerHTML和innerText和textContent的区别
textContent，innerHTML和innerText都是元素的属性，通过修改这个元素的属性可以达到修改元素内容的目的。但是三者之间略有不同。innerHTML表示元素所有的后代html。该范围包括文本节点，注释节点，元素节点等内容。在读写该属性时，我们可以获取一个字符串，这个字符串包括元素内部的内容，包含空格，换行，注释。innerText表示元素所有的文本内容，包括文本节点，子元素和后代元素的文本节点。值得注意的是不包括注释内容，设置样式为display为none的话，也不会包含
2022-05-22 18:07:14
868
原创 javascript事件
事件类型事件类型是一个用来说明发生什么类型事件的字符串。例如onmousemove onclick。事件类型是一个字符串，实际上也可以说事件类型就是事件名字。事件目标:事件目标是发生的事件或与之相关的对象。window的onload事件,按钮的onclick事件都具有指定的对象。一般对象可以分为window,document,Element。事件处理程序事件处理程序或事件监听程序是处理或响应事件的函数。当特定的目标上发生了特定类型的事件时，浏览器会调用相应的事件处理程序。事件对象是与
2022-05-22 15:49:29
93
原创 JavaScript脚本化CSS
脚本化CSS可以理解为使用javascript操作CSS。CSS指定HTML元素在浏览器显示的样式,规定了元素的外观。它允许开发者指定元素的字体，颜色，边距，缩进，边框，定位等。脚本化CSS使得CSS和JavaSccript结合在一起，可以更加丰富网页视觉效果。CSS相关html文档视觉效果包括字体，颜色，间距等。CSS指定许多样式作为属性名来控制元素的字体颜色，下划线，边距等样式，属性名后跟冒号和属性值。属性值指定了CSS样式要展现什么效果。eg:font-size: 20px;
2022-05-18 19:30:57
1465
原创 JavaScript函数
函数定义函数是一段可以被重复执行或调用的代码块。当某一段代码使用次数较为频繁时，使用函数将这一段代码简化为一个函数，只需要函数名就可以调用这一整段代码，可以减少程序员工作量，使开发工作更有条理性。函数分类函数分为用户自定义和系统自带两类用户自定义函数：function add(num1,num2){······}系统自带函数：alert(),Math对象的方法······函数参数函数定义时会在函数名后的小括号内书写至少0个参数。参数类型不限，命名遵循标识符规则，写在小括号内的参数
2022-05-16 20:10:45
286
原创 javascript闭包
闭包定义MDN的官方解释：一个函数和对其周围状态（lexical environment，词法环境）的引用捆绑在一起（或者说函数被引用包围），这样的组合就是闭包（closure）。一般理解：在嵌套定义的函数中闭包让你可以在一个子函数中访问到父函数的作用域。在 JavaScript 中，每当创建一个函数，闭包就会在函数创建的同时被创建出来。作用域javascript的变量作用域分为两种类型全局作用域：直接在script标签内部定义或函数内部未声明直接赋值的变量(就是没写var.
2022-05-14 20:12:57
109
原创 Javascript实现拖拽效果
我们执行拖拽操作时，1.按住某元素2.移动鼠标3.移动鼠标到相应位置后松开鼠标基于以上操作，页面拖拽效果需要三个事件onmousedown onmousemove onmouseup在onmousedown事件中，我们需要定义函数表明，该元素被按住，即将进行移动操作，需要计算x坐标值，并触发后续的onmousemove事件。在onmousemove事件中，我们需要计算元素坐标位置，根据鼠标移动改变元素位置，准备执行鼠标松开时的事件函数。在onmouseup事件中，我们需要以
2022-05-09 20:21:22
970
原创 正则表达式对象
正则表达式是对象，是由RegExp构造函数创建的。正则表达式对象具有三个方法和一些属性。正则表达式构造函数我们使用var reg1=new RegExp();创建一个正则表达式对象。这个构造函数具有两个字符串参数。第一个参数是正则表达式的主体部分，第二个参数是正则表达式的修饰符(g m i)。eg: var reg1=new RegExp("name","gi");这里创建的就是一个不区分大小写的，全局范围内的检索name字符串的正则表达式。当需要根据使用范围动态创建正则表达式时，我们需
2022-05-06 20:23:39
521
原创 JavaScript正则表达式
正则表达式定义正则表达式(Regular Expression,简称为regex,regexp,或re)使用单个字符串来描述，匹配一系列符合某个句法规则的字符串搜索模式,属于对象范畴。可以理解为描述字符模式的对象应用于文本搜索和文本替换的操作。正则表达式的创建正如同其他对象的创建，正则表达式可以使用字面量直接创建，也可以使用构造函数创建。值得注意的是字面量创建时需要把要匹配的字符串放在两个斜杠内。eg:var reg1=/a/ ------------------使用字...
2022-05-05 20:33:23
641
1
原创 CSS层叠上下文
当元素在某一位置重叠时，部分元素显示的优先级较高，部分元素显示的优先级较低。这些元素在网页上堆叠形成三维结构，指向用户的就是z轴。网页上可能重叠的元素，在显示上具有一定顺序。网页可能重叠的元素的优先级背景background 边框border 常规流块级元素 浮动元素float 块级元素block 行级(内联)元素inline z-index为默认值 定位元素z-index为0 z-index为正数(越高显示优先级越高)效果展示源代码如下<!DOCTYP..
2022-05-03 19:03:55
434
原创 javascript获取元素方式
eg：<img id="img1" class="i1" src="">document.getElementById("id")-通过id获取元素 document.getElementsByTagName(name)-通过元素名(也可称为标签名)获取元素 document.getElementsByClassName(name)-通过类名获取元素 document.querySelectorAll(.i1)-通过CSS选择器获取元素-不适用ie8及更早版本 document.fo
2022-01-28 11:57:13
784
原创 寒假刷刷算法题（20）
3333题目描述：输入一个小于 1000 的自然数，输出小于该自然数且数字中含有 “3” 的所有数。要求：不分行、连续显示，相邻两数间隔 2 个空格，具体显示格式参见样例。输入格式2∼1000 之间的自然数输出格式小于输入数且数字中含有 “3” 的所有数输入样例36输出样例3 13 23 30 31 32 33 34 35闲聊：拆分原数字的个位十位，百位，寻找有无3.有则输出原数字。注意两个数字间有两个空格。代码如下#i.
2022-01-09 13:23:16
259
原创 寒假刷刷算法题（19）
回文子串题目描述给定一个字符串，输出所有长度至少为2的回文子串。 回文子串即从左往右输出和从右往左输出结果是一样的字符串，比如：abba，cccdeedccc都是回文字符串。输入一个字符串，由字母或数字组成。长度1000以内。输出输出所有的回文子串，每个子串一行。子串长度小的优先输出，若长度相等，则出现位置靠左的优先输出。输入样例123321125775165561输出样例3311775523322112577565561233211655
2022-01-09 13:11:33
115
原创 寒假刷刷算法题（18）
完美立方题目描述形如 a^3= b^3 + c^3 + d^3 的等式被称为完美立方等式。例如 12^3= 6^3 + 8^3 + 10^3编写一个程序，对任给的正整数N(N≤100)，寻找所有的四元组(a,b,c,d)，使得 a^3 = b^3 + c^3 + d^3，其中 a,b,c,d大于 1，小于等于 N，且b≤c≤d。输入格式一个正整数 N(N≤100)。输出格式每行输出一个完美立方。输出格式为：Cube = a, Triple = (b,c,d)其中 a,
2022-01-09 12:47:54
314
原创 寒假刷刷算法题（17）
暖气坏了题目描述蒜头君家的暖气经常出问题，每当暖气坏了，蒜头君就会持续感冒 m 天（从坏的那天算起，两次感冒时间重叠不会累加）。蒜头君去寻求预言家的帮助，预言家告诉他接下来 n次暖气片坏掉的时间。根据这个时间，蒜头君就能知道他未来获得感冒的总天数。输入格式第一行两个整数n,m，表示暖气片坏掉的次数以及每次感冒的持续天数。第二行 nn 个整数 a_iai，表示暖气片坏掉的日期。数据范围：1≤n≤10000，1≤m,ai≤10^9，保证ai 是严格递增的。输出格式一个整数，
2022-01-09 12:28:18
413
原创 寒假刷刷算法题（16）
数字反转题目描述：给定一个整数，请将该数各个位上数字反转得到一个新数。新数也应满足整数的常见形式，即除非给定的原数为零，否则反转后得到的新数的最高位数字不应为零(参见样例 2)。输入格式输入共 11 行，一个整数 NN。输出格式输出共 1 行，一个整数，表示反转后的新数。数据范围−1,000,000,000≤N≤1,000,000,000。输入样例1123输出样例1321输入样例2-380输出样例2-83闲聊：这一...
2022-01-09 11:53:31
56
原创 寒假刷刷算法题（15）
出生日期题目描述输入某人的 1818 位身份证号，输出其出生日期。输入格式多实例测试。首先输入一个整数 n，表示测试实例的个数，然后是 n 行，每行是一个18位身份证号。输出格式对于输入的每个身份证号，输出一行，即其对应的出生日期，输出格式为：'yyyy-mm-dd'。提示：scanf()函数中，可用%md指定读取位数。(m为指定位数)输入样例341010619941117865X410104198202095479410122197911218097输
2022-01-09 11:37:30
176
原创 寒假刷刷算法题（14）
做核酸喽题目描述：蒜头君要乘坐飞机去北京了。但是北京现在要求外地进京人员需要 7 天以内的核酸检测阴性证明。蒜头君看了看自己核酸检测报告的时间，再看了看他的机票。他想知道飞机起飞的时候他的核酸检测报告是否依然有效。输入格式第一行为两个整数 d1,t1，表示蒜头君的报告从 2 月 d1 日 t1 时开始生效。第二行为两个整数 d2,t2，表示蒜头君的航班起飞时间是 2 月 d2 日 t2 时。数据范围满足1≤d1≤d2≤28,0≤t1,t2<24输出格式如果有效，输出
2022-01-09 11:25:16
258
原创 寒假刷刷算法题（13）
素数对题目描述蒜头君定义两个相差为 2 的素数称为素数对，如 5 和7，17和 19 等，要求找出所有两个数均不大于 n 的素数对。输入格式一个正整数 n。1≤n≤10000。输出格式所有小于等于 n 的素数对。每对素数对输出一行，中间用单个空格隔开。若没有找到任何素数对，输出"empty"。输入样例100输出样例3 55 711 1317 1929 3141 4359 6171 73闲聊：判断质数个人感觉用函数比较方便 针对题目.
2022-01-09 11:07:36
878
原创 寒假刷刷算法题（12）
统计字符串题目描述：给定一个由 a-z 这 26 个字符组成的字符串，统计其中哪个字符出现的次数最多。输入格式输入包含一行，一个字符串，长度不超过 1000。输出格式输出一行，包括出现次数最多的字符和该字符出现的次数，中间以一个空格分开。如果有多个字符出现的次数相同且最多，那么输出 ascii 码最小的那一个字符。输入样例abbccc输出样例c 3闲聊：使用一个数组针对a,b,c,d·····z计数即可代码如下#include<stdi.
2022-01-09 10:28:38
61
原创 寒假刷刷算法题（11）
计算器题目描述：蒜术师有一个最简单的计算器，支持'+'、'-'、'*'、'/'四种运算。仅需考虑输入输出为整数的情况，数据和运算结果不会超过 int 表示的范围。输入格式输入只有一行，共有三个参数，其中第 1、2 个参数为整数，第 3 个参数为操作符（'+'、'-'、'*'、'/'或其它符号）。输出格式输出只有一行，一个整数，为运算结果。然而：如果出现除数为0的情况，则输出："Divided by zero!"； 如果出现无效的操作符(即不为'+'、'-'、'*'、'/..
2022-01-09 10:06:48
344
原创 寒假刷刷算法题（10）
题目：分麻将喽题目描述：一年一度的日麻大赛结束啦，作为本场比赛的主裁判汪次郎要给大家发奖品了一姬、二阶堂美树、三上千织等雀士排成一排，等待发奖品。本届比赛的奖品为麻将，发奖规则如下：每个人都有一个自己的分数a，代表本次比赛中获得的成绩。 每个选手至少可以获得1张麻将作为奖励。 如果两位选手站位相邻，积分高的选手一定比积分低的选手获得的麻将多。作为主裁判的汪次郎，当然想减少在奖品上的开销，现在他已经知道了每个人的分数，请你帮他计算一下最少他需要多少麻将来发奖。输入：输入数据
2022-01-08 23:08:35
174
原创 寒假刷刷算法题（9）
题目：测血压描述：监护室每小时测量一次病人的血压，若收缩压在90 - 140之间并且舒张压在60−90之间（包含端点值）则称之为正常。现给出某病人若干次测量的血压值，计算病人保持正常血压的最长小时数。输入格式第一行为一个正整数 n，n < 100。其后有 n行，每行 22 个正整数，分别为一次测量的收缩压和舒张压（都在 [1,200]范围内），中间以一个空格分隔。输出格式输出仅一行，血压连续正常的最长小时数。输入样例4100 8090 5012...
2022-01-08 13:21:39
144
原创 寒假刷刷算法题（8）
第几天有一本记录了从1年到9999年的日历，假设1年1月1日为第一天，现在问第Y年的第M月的第D天是第几天。对于每组数据，输出这是第几天。输入样例21 1 12 2 2输出样例1398代码如下...
2022-01-08 13:07:45
251
原创 寒假刷刷算法题（7）
母牛生小牛有一头母牛，它每年年中生一头小母牛。每头小母牛从第四个年头开始，每年年中也生一头小母牛。请编程实现在第 n 年的时候（不算第 n 年出生的小母牛），共有多少头母牛？输入格式输入包括一个整数 n(0<n<55)。输出格式输出在第 n 年的时候母牛的数量。输入样例2输出样例2输入样例5输出样例6奶牛生子问题形似斐波那契数列，可以用递归和循环两种方法解决。代码如下！#include<stdi
2022-01-07 23:15:02
235
原创 寒假刷刷算法题（6）
去掉重复的数给定一个升序排列的数组，去掉重复的数，并输出新的数组的长度。例如：数组 A = {1, 1, 2}，你的程序应该输出 2 即新数组的长度，新数组为 {1,2}。要求：不能新开数组分配额外的空间，即常数空间限制。输入格式输入一个整数 n(1<=n <=1000)。接下来一行 n个整数 A(-1000<=A<=1000),表示数组 A中的每个元素。输出格式输出一个整数，表示新数组长度。输入样例50 0 1 1 2输出样例
2022-01-07 21:27:58
59
原创 寒假刷刷算法题（5）
买鸡买鸡百钱买百鸡问题：公鸡五文钱一只，母鸡三文钱一只，小鸡三只一文钱，用 100100 文钱买 100100 只鸡，公鸡、母鸡、小鸡各买多少只？本程序要求解的问题是：给定一个正整数 nn，用 nn 文钱买 nn 只鸡，问公鸡、母鸡、小鸡各买多少只？输入格式输入一个正整数 nn。输出格式如果有解，依次输出公鸡、母鸡、小鸡的个数（用正整数表示）。如果无解，输出"No Answer."。数据范围1 <= n <= 200 1≤n≤200。输入样例100
2022-01-07 21:10:01
156
原创 寒假刷刷算法题（4）
扔盘子有一口井，井的高度为N，每隔1个单位它的宽度有变化。现在从井口往下面扔圆盘，如果圆盘的宽度大于井在某个高度的宽度，则圆盘被卡住（恰好等于的话会下去）。盘子有几种命运：1、掉到井底。2、被卡住。3、落到别的盘子上方。盘子的高度也是单位高度。给定井的宽度和每个盘子的宽度，求最终落到井内的盘子数量。如图井和盘子信息如下：井：5 6 4 3 6 2 3盘子：2 3 5 2 4最终有4个盘子落在井内。输入第1行：2个数N, M中间用空格分隔，N为井的深度，M为盘子的
2022-01-07 21:03:44
117
1
原创 寒假刷刷算法题（3）
C - 赶时间题目描述花椰妹要去约会了！因为花椰妹已经是老女人了，所以必然需要打扮一番，抹点粉啊，涂涂口红啦，画点眼影啊……许久过后，花椰妹已然变成美女了！！花椰妹看了下时间，已经不早了，可是桌面上还有好多好多瓶瓶罐罐没用，这怎么行！花椰妹现在想知道，她还有多少时间可以用于化妆？输入格式读入两个标准格式的时间，有小时，有分钟，有秒，格式如：h:m:sh:m:s，即 时：分：秒。输出格式输出这两个时间的差（秒为单位）。数据范围1 \le h < 24, 0 \le
2022-01-07 18:32:29
70
原创 寒假刷刷算法题（2）
B - 上车上车【问题描述】公共汽车从始发站(称为第1站)开出,在始发站上车的人数为a,然后到达第2站,在第2站有人上、下车,但上、下车的人数相同，因此在第2站开出时（即在到达第3站之前）车上的人数保持为a人。从第3站起（包括第3站）上、下车的人数有一定的规律：上车的人数都是前两站上车人数之和，而下车人数等于上一站上车人数，一直到终点站的前一站（第n-1站），都满足此规律。现给出的条件是：共有n个车站，始发站上车的人数为a,最后一站下车的人数是m（全部下车）。试问从x站开出时车上的人数是多少？.
2022-01-07 17:40:55
392
原创 寒假刷刷算法题(1)
题目描述国王有一个魔镜，可以把任何接触镜面的东西变成原来的两倍——只是，因为是镜子嘛，增加的那部分是反的。比如一条项链，我们用AB来表示，不同的字母表示不同颜色的珍珠。如果把B端接触镜面的话，魔镜会把这条项链变为ABBA。如果再用一端接触的话，则会变成ABBAABBA（假定国王只用项链的某一端接触魔镜）。给定最终的项链，请编写程序输出国王没使用魔镜之前，最初的项链可能的最小长度。输入格式只有一个字符串，由大写英文字母组成（字母数小于等于 100000100000），表示最终的项链。输出格式
2022-01-07 17:37:20
118
原创 CSS块级格式化上下文（BFC）
定义视觉格式化模型中规定了块级格式化上下文（Block Formatting Context）简称BFC。触发该效果的元素是一个独立的渲染区域。该区域常规流块盒与一般块盒略有不同。不同点常规流块盒在水平方向上必须撑满包含块。常规流块盒在垂直方向上依次排列。常规流块盒中盒子间若无其他元素则会发生外边距合并。常规流块盒计算高度时无视浮动元素，排列时同样无视浮动元素。BFC中独立的渲染元素：不同BFC元素的渲染互不干扰，BFC元素内部的渲染不会影响到外部。计算BFC块盒高度时.
2021-12-06 22:14:38
200
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人