- 博客(55)
- 收藏
- 关注
RSS订阅原创 采用面向对象的方法来实现留言板的添加和删除功能
添加功能思路：使用空数组 ---创建对象---追加到数组中---最后调用一个重载函数（专门根据数组来拼接成页面结构到页面中）删除功能思路：使用filter函数，将数组中的时间戳time值进行相比较，把与点击时的时间戳不相等的过滤出来。最后在使用重载函数，进行刷新页面即可。若在拼接的字符串中添加一个点击事件来进行删除的时候，会出现一个小问题：会报错del is not defined .其原因在于在拼接字符串结构中的方法必须是全局变量解决方法有两种：方法1：将del定义为全局函数----.
2022-04-07 12:22:24
399
原创 自己定义构造函数来实现tab栏效果以及this的指向问题
方法1（老方法）：此方法使用的是排他思想来实现tab栏效果，以及使用一个变量that的方法来解决构造函数中的this指向问题。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport".
2022-04-06 22:14:52
406
原创 仿淘宝侧边栏滚动效果
思路：由于是页面滚动，所以需要使用scroll滚动事件，事件源为document。滚动到某个位置就是判断页面被卷去的上部分值。页面被卷去的头部：通过window.pageYoffset获得 若是被卷去的是左侧 通过window.pageXoffset获得。注：若是元素被卷去的头部用scrollTop<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> ..
2022-04-05 18:34:37
154
原创 模态框拖拽效果
思路：1、当点击弹出层时，模态框和遮挡层就会显示出来-->display:block2、当点击关闭按钮时，模态框和遮挡层就会隐藏起来-->display:none3、在页面中拖拽的原理：鼠标按下并且移动，之后松开鼠标4、触发事件：鼠标按下mousedown、鼠标移动mousemove、鼠标松开mouseup5、拖拽过程：鼠标移动过程中，获得最新的值赋值给模态框的left和top值，这样模态框就可以跟着鼠标走了6、鼠标按下触发的事件源是最上面一行，id为title7..
2022-04-05 16:25:40
592
原创 发送短信倒计时案例
思路：每次点击完按钮的时候，都会将按钮禁用一段时间，需要将按钮的disabled设为true即可。点击完之后按钮里面的内容发生变化（button里面的内容通过innerHTML来获取）。内容里面的秒表数是不断的变化的，因此需要一个定时器。同时需要定义一个变量，在定时器里面，不断递减。当变量的为0的时候。说明时间到了需要停止定时器。并且还需要复原按钮原始的状态（按钮里面的内容）。注：恢复完原始状态之后不要忘记将变量的值也恢复原始数值，便于连续使用定时器的倒计时效果。<!DO.
2022-04-04 12:36:20
156
原创 模拟京东快递单号查询
思路：首先获取到两个事件源，使用keyup事件，如果快递单号里面的值value为空时，就隐藏上面的大盒子，否则就将盒子出现并且将快递单号的获取来的值赋值给大盒子作为内容。当鼠标失去焦点(blur)的时候，就隐藏大盒子。当获得焦点（focus）并且快递单号的值不为空时，就显示这个大盒子。注：keydown和keypress在文本框里面的特点：他们两个事件触发的时候，文字还没有落入到文本框中。keyup事件触发的时候，文字就已经落入到了文本框里面了。<!DOCTYPE html>&l.
2022-04-03 23:16:21
584
原创 跟随鼠标移动的小狗
思路：鼠标移动事件：mousemove由于是在页面中移动，所以给document注册事件。图片要移动距离，并且不会占用位置，使用决定定位即可。核心原理：每次鼠标移动，我们都会获得最新的鼠标坐标，把这个x坐标和y坐标作为图片的top和left值就可以移动图片。注：千万不要忘记给lef和top加上px单位 若想实现鼠标在图片的居中对齐，分别用xy减去宽高的一半<!DOCTYPE html><html lang="en"><head&g...
2022-04-03 21:49:29
415
原创 实现日历的效果
js实现思路：第一步首先获取到所有使用的到的事件源，然后定义一个空数组来存放每个月对应的活动，目的是为了将其内容存放到段落标签中。第二步使用for循环来遍历有的小li，给每个对象增加index属性，把每次遍历的i值赋值给小li作为索引下标。第三步设置每个小li点击时的事件，使用了排他思想（优先把所有的都干掉（使用for循环来设置），最后单独自己设置样式）第四步改变对应标签里面的内容即可（注：下标从0开始，故月份需要加1）<!DOCTYPE html><ht..
2022-04-02 15:00:59
128
原创 选项卡效果
功能实现效果：点击选项卡按钮，出现相对应的详细模块思路：第一步需要先获取到所有的按钮，然后为每个按钮添加点击事件。循环遍历每一个按钮的时候使用forEach更加方便(相比之前的for循环)。当某个按钮想要一枝独秀的时候，首先在其之前为所有的按钮都添加同一种样式或则效果。比如当点击某个按钮的时候，只想让被点击的按钮自己变红，首先要做的就是让所有的先全部变黑，然后再让被点击的那个变红。对应的详情展示效果也是如此，先让全部的隐藏，最后把被点击按钮的详情展示即可。<!DOCTYPE html.
2022-03-30 21:40:24
448
原创 获取输入框的值添加到表格中并且实现删除表格内容的功能
思路：采用字符串拼接的方式，将数组中对象添加到表格中。实现获取文本框的内容添加到表格中的效果：首先定义一个空数组用来存放数据对象。接着执行事件三要素（获取事件源、注册事件，事件的执行过程）。简单的可以理解为把获取的元素值封装成对象放到数组中，然后调用封装好的loadList()函数遍历数组中的每个元素将其采用字符串拼接的方式放到tbody中即可。（注：若想使每次添加完文本框为空方便下次输入，只需将文本框的值等于空）实现删除表格内容的效果：在封装好的函数loadList()中添加一个删除按钮，并为其.
2022-03-28 13:12:22
767
原创 动态生成单元格效果
思路：在html中只需要写thead即可，tbody里面的内容通过动态来生成。在js中，使用数组来存放模拟的对象，一个对象即是一条数据，一条数据也即是一行的内容。在此需要使用两个for循环，外层来控制有多少行，内层来控制每行有多少个单元格（类似于打印三角形）。外层循环的次数根据数组的长度来定，长度是几就创建几行，然后在循环体内进行创建行、添加行。内层循环使用for...in来获取对象的属性，有几个属性就创建几个单元格。通过obj[k]的方式将属性值赋值给单元格，再添加单元格。由于最后一列是删除.
2022-03-27 16:34:43
250
原创 简单版留言发布\删除效果
思路：当点击按钮的时候，就会自动的创建一个li添加到ul里面。首先使用createElement创建li，然后把文本域里面的值通过.value赋值给li（注：此处是内容的赋值，即使把text里面的内容赋值给li里面作为内容），最后将创建的元素进行添加即可。（如果想要新的留言在已有的后面显示使用appendChild,如果想要前面显示就用insertBefore）<!DOCTYPE html><html lang="en"><head> &l.
2022-03-27 11:47:36
1227
原创 新浪导航下拉菜单效果
效果：当鼠标经过每个小模块的时候，其相对应的下拉菜单会显示出来。思路：第一步首先把html css写好（基础也真的好重要。。） html基本结构思想：在一个ul里面放3个小li，然后在每个小li里面分别再嵌套1个a和1个ul，接着再分别在每个ul里面嵌套3个小li（套娃思想）。在css中采用定位的方法将每个小li里面的ul定位到该小li的下面。初始的时候使用display：none将其隐藏起来，使用js实现相关的效果。 第二步为其添加js效果 首先获取元素（...
2022-03-27 10:56:49
565
原创 tab栏切换制作
分析：tab栏切换有两个大的模块。上模块选项卡，点击某个，当前这个底色会是红色，其余不变（排他思想）修改类名的方式。下面的模块内容，会跟随上面的选项卡变化，所以下面模块变化点击写到事件里面。规律：下面的模块显示内容和上面的选项卡一一对应，相匹配思路：给上面的tab_list里面的小li添加自定义属性，属性值从0开始编号当我们点击tab_list里面的某个小li，让tab_con里面对应的内容显示，其余隐藏（排他思想）<!DOCTYPE html><html la
2022-03-26 23:38:13
541
原创 表单复选框按钮全选-取消全选小案例
思路：第一部分--全选和取消全选做法：让下面所有的复选框的checked属性（选中状态）跟随全选按钮即可第二部分--下面复选框需要全部选中，上面全选复选框才能选中：利用for循环将每个复选框添加点击事件，接着使用一个小技巧（设置一个flag变量控制全选按钮是否选中。并为其赋值为true默认选中,因为checked的属性返回值为true和false）。再一次使用for循环，当每次点击下面的复选框时，都需要检查一下同类的复选框是否被全部选中。若有一个未被选中，执行if条件语句的内容将flag赋.
2022-03-26 19:59:36
1100
原创 表格隔行变色效果
思路：首先将表格写出，再为其添加js效果。把表头放到thead中，把表身放到tbody中，这样可以区分开来实现效果。始终要遵守事件三要素，获取元素，然后利用循环绑定注册事件。鼠标经过事件：onmouseover鼠标离开事件：onmouseout<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-C.
2022-03-26 18:03:55
462
原创 百度换肤效果
思路：当点击了某个图片时，就把页面背景改为当前图片。核心就是把当前图片的src路径给取出来，给body当做背景即可。注：当使用querySelector来获取元素的时候：类名前加"." id名前加"#" (不要忘了)<body> <ul class="baidu"> <li><img src="./img/1.jpg" alt="" /></li> <li><img sr..
2022-03-26 17:08:40
104
原创 排他思想（小算法）
思路：该算法思想适用于有同一组元素，我们想要某一元素实现某种样式，需要用到循环的排他思想。1、先把所有元素的样式全部清除掉（干掉他人）2、再给当前元素设置样式（留下自己）3、注意顺序不能颠倒。<body> <button>按钮1</button> <button>按钮2</button> <button>按钮3</button> <button>按钮4<.
2022-03-26 15:54:55
73
原创 仿新浪密码框验证信息
思路：首先获取事件源，然后判断是什么事件-->表单失去交单onblur。根据输入框里面值的长度来判断用户输入的是否正确。然后通过className来更改元素的样式，innerHTML来修改元素内容。（使用className来修改样式时，若原来也有样式，则会覆盖原有的样式，可以在原有样式的后面加空格再加上新的类名，则可以保留原有的样式）<!DOCTYPE html><html lang="en"><head> <meta charset=.
2022-03-26 11:37:08
64
原创 显示隐藏文本框内容小案例
思路：首先需要知道表单的两个事件 （获得焦点 onfocus 失去焦点 onblur）在注册事件的获得焦点中需要判断，表单里面的内容是否为默认文字，若是默认文字就清空表单（内容为空即可）。在注册事件的失去焦点中需要判断，表单里面的内容是否为空，若是空就把表单内容改为默认内容即可。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta .
2022-03-26 10:16:12
108
原创 循环精灵图小案例
思路：使用js循环精灵图的好处在于不用再像以前那个一个个的进行定位了。写好html css代码之后，在js中首先获取每个存放精灵图的元素。由于精灵图排列是有规律的，所以利用for循环，根据观察的规律来修改精灵图的背景位置background-position（不要忘记加单位，否则无效）。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta .
2022-03-26 09:46:49
170
原创 仿淘宝点击关闭二维码小案例
思路：利用样式的显示和隐藏完成，要分清事件三要素分别是什么。事件源：大盒子旁边的小叉号注册事件和事件处理程序：点击按钮，让大盒子隐藏 display:none 隐藏元素 display:block 显示元素 big.style.display = "none" 此处的big不能使用this(因为this指向的是事件的调用者)<!DOCTYPE html><html lang="en"><...
2022-03-26 09:37:38
120
原创 仿京东显示隐藏密码明文
分析：点击按钮将密码框切换为文本框，并可以查看密码明文。一个按钮有两个状态，点击一次切换文本框，在点击一次切换密码框。小算法技巧（适用于）：利用一个flag变量（一正一反），通过判断flag的值来进行不同的操作，并且每次执行最后需要把另一种情况的值赋值给flag，便于反复的执行。思路：首先写出静态页面，然后写js。js的第一步是获取事件源，第二步是注册事件，第三步是添加事件的处理程序。（注：在标签较多的情况下，为标签写上id名便于区分）<!DOCTYPE html><h
2022-03-25 22:49:27
285
原创 实现时钟效果
第一个setInterval实现的是在span标签中实现时钟效果。思路：首先给每个span定义id名，然后在下面写定时器setInterval。通过new Date()获得当前日期，在根据getHours、getMinutes、getSeconds获取时分秒。最后通过id.innerHTML来得到里面的元素。第二个setInterval实现的是用图片的方式来实现时钟效果。思路：原理同上，不过需要通过计算时分秒的个位和十位的数字来修改图片地址。<!DOCTYPE html>.
2022-03-25 16:09:58
132
原创 日期对象小典例
1、将日期格式化输出 “2015|01|24”（日期对象-》字符串）思路：通过new Date()获取当前日期getFullYear()获取年份 getMonth()获取月份 getDate()获取第几天由于月份和第几天有可能是个位数字，需要在前面补0。故需要在对月份和第几天进行判断，如果小于10就在前面加上0，最后将字符串拼接即可。 function formateDate(date) { var y = date.getFullYear(); ...
2022-03-25 12:35:59
133
原创 字符串小典例
1、随机生成一个五位以内的数，然后输出该数共有多少位，每位分别是什么思路：Math.random()生成的随机数在0-1，要想生成五位数以内的数--》随机数*100000此时生成的数是数字型，(数字型转换为字符型的简单方法：在数字的后面加上一个空的字符串即可)。最后循环遍历字符串即可得到每个字符串元素。var n = parseInt(Math.random() * 100000); var str = n + ""; console.log(str);.
2022-03-25 11:10:15
402
原创 数组的小典例
1、编写函数map(arr) 把数组中的每一位数字都增加30%，并返回一个新数组思路：首先定义一个空的数组用来接收计算后的结果，使用for...of来遍历的到原数组中的值，然后用数组的push方法将计算后的结果追加到新的数组里面。最后将新数组返回即可。var newArr = []; function map(arr) { for (var v of arr) { newArr.push(v * 1.3);
2022-03-24 17:30:36
129
原创 for in 和for of用法
1、编写函数map(arr) 把数组中的每一位数字都增加30%，并返回一个新数组补：for...in 语句用于遍历数组或者对象的属性（对数组或者对象的属性进行循环操作），使用for...in遍历Array时，拿到的是每个元素索引。语法：for(变量in对象){在此执行代码 }“变量”用来指定变量，指定的变量可以是数组元素，也可以是对象的属性。for...of 语句遍历的是对象的属性所对应的值(value：键值)。所以它用来遍历数组时得到每个元素的值。思路：首先定义...
2022-03-24 14:53:49
382
原创 选择排序算法
选择排序算法思想：首先在未排序序列中找到最小元素，存放到排序序列的起始位置。再从剩余未排序元素中继续寻找最小元素，然后放到已排好序列后面，即是选择最小的元素与未排序部分的首部交换。以此类推，直到所有元素均排序完毕。编写代码思路：首先定义一个数组，使用双循环来进行遍历。外层循环来控制一共需要比较多少次，由于数组下标都是从0开始，故定义j的初值为0，最大索引为数组长度减1。假设第0个为最小值索引，也即是j的初始值。内层循环来查找每次比较的最小索引号，判断条件为arr[i] < arr[minInd.
2022-03-24 12:28:17
268
原创 通过循环按行顺序为一个5×5的二维数组a赋1到25的自然数，然后输出该数组的左下半三角。
var arr = []; for (var i = 0; i <= 4; i++) { for (var j = 1; j <= i + 1; j++) { var num = j + 5 * i; document.write(num + "\t"); } document.write("<br&.
2022-03-24 11:10:12
1936
原创 定义一个含有30个整型元素的数组，按顺序分别赋予从2开始的偶数； 然后按顺序每五个数求出一个平均值，放在另一个数组中并输出。
思路：首先定义一个空的数组来循环的添加30个偶数，接着定义一给空的数组用来存放每组所得的平均值。令sum和的初始值为0，循环的遍历数组中的元素，来进行累加。由于是按顺序每五个求一个平均值，也即是每次五个结束开始下一次的循环。所以需要一个变量用来记录每次从第几个开始(由于数组下标是从0开始的，所以变量值需要+1)，控制每次的个数采用取模的方法。满足条件就进行求取平均值，否则就继续进行循环。注：在条件判断的最后需要将sum的值重新置为0，因为每组和都是从0开始进行累加的。 var arr = [].
2022-03-24 09:47:35
3044
原创 山上有一口缸可以装50升水，现在有15升水。老和尚叫小和尚下山挑水，每次可以挑5升。问：小和尚要挑几次水才可以把水缸挑满？通过编程解决这个问题。
思路：首先定义一个数组来存放现有的水量，再定义一个计数器来记录挑水的次数。接着使用一个while循环（在不知道具体结束条件的时候可以使用，先做成死循环，然后根据具体条件退出循环）。在循环体内利用数组的push()方法，每push一次，计数器就加一。接着就是数组元素的求和问题了，利用for循环将数组中的每一个元素取出进行累加。while循环的退出条件也即是总和等于一口缸可容纳的水量。var arr = [15]; var time = 0; while (true) { .
2022-03-24 08:39:54
1721
原创 函数递归的典例
利用递归求100的阶乘 f(n)=f(n-1)*n思路： function jieCheng(n) { if (n == 1) { return 1; } else { return n * jieCheng(n - 1); } } var result = jieCheng(100); console.log(result);.
2022-03-23 22:16:36
928
原创 某个公司采用公用电话传递数据，数据是四位的整数，在传递中是加密的，规则如下：每位数字加上5,然后用除以10的余数代替该数字，再将第一位和第四位交换，第二位和第三位交换，编写函数，传入原文，输出密文。
方法一思路：首先求出个、十、百、千位上分别对应的数字，然后对其进行相关运算之后在将值赋值给它自身。最后根据题目要求交换位置进行字符串的拼接即可。function mw(num) { var g = parseInt(num / 1) % 10; var s = parseInt(num / 10) % 10; var b = parseInt(num / 100) % 10; var q = parseInt(num / 1000) % 10; g = .
2022-03-23 18:26:00
4318
原创 编写一个函数，计算任意两个数字之间所能组成的奇数个数，数字必须是个位数比如： 计算0-3之间能组成的奇数个是01、03、11、13、21、23、31、33
思路：首先定义一个变量来记录是奇数的个数，两个数字任意组合可以为：个数 0 --》十位 0 1 2 3个数 1 --》十位 0 1 2 3个数 2 --》十位 0 1 2 3个数 3 --》十位 0 1 2 3因此使用两次for循环，外层循环来遍历个位的可能结果，内层来遍历十位的可能结果。然后将十位上的数乘10再加上个位上的数即可得到一个两位数。最后对得到的两位数进行判断即可，若为奇数将变量的值++。function jiShu(num1, num2) { var time..
2022-03-23 17:22:49
794
原创 编写生成4位数字验证码的函数，并调用10次提示：使用Math.random()函数可以产生[0-1）之间的随机小数
思路：首先定义一个空的字符串，来做生成数字所存放的地方。然后利用for循环进行4次生成随机数字。Math.random()函数可以产生[0-1）之间的随机小数。所以在此*10 -->取整-->[0,9]。将每次生成的数字都进行累加到空的字符串上，可以得到4位数字。最后使用for循环来进行10次函数的调用即可function ran() { var num = ""; for (var i = 0; i < 4; i++) { // 得到四个 ..
2022-03-23 16:58:03
1159
原创 编写任意个数字的求和、差、积、商的函数 sum(1,2,3,4,5,6,‘-‘)
思路：首先利用arguments可以遍历所有的元素（在不确定有多少字符的情况下），由于最后一个位存放的是操作符，因此使用arguments.length - 1可以找到最后一位的运算符的下标。再使用arguments[arguments.length - 1]将其操作符取出。arguments[i]可以取出对应下标的内容，让第一个参数为初始值（不能使用0作为初始值，否则进行乘除运算就无意义了）。接着使用for循环，将每一个元素遍历出来。在for循环内部嵌套一个switch判断语句，用来判断操作符来.
2022-03-23 16:35:05
551
原创 循环的典例
求1+2!+3!+...+20!的值var sum = 0;for (var i = 1; i <= 3; i++) { var res = 1;//记录阶乘 for (var j = 1; j <= i; j++) { res = res * j; } sum = sum + res;}console.log(sum);使用 `*` 打印三角形 for (var i = 1; i <= 9; i++) { ..
2022-03-23 15:18:51
69
原创 根据输入的三个数字，判断是这一年的第几天
思路：首先使用if条件判断输入的年份是闰年还是平年（平年2月有28天，闰年2月有29天），然后使用switch对月份进行判断，对每个月的天数进行做累加即可。判断平年和闰年的方法闰年：年份是4的倍数，且不是100的倍数的倍数的，或则年份必须是400的倍数var year = parseInt(prompt("输入年份"));var month = parseInt(prompt("输入月份"));var day = parseInt(prompt("输入日"));var temp =
2022-03-23 11:39:17
628
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人