![](https://img-blog.csdnimg.cn/20201014180756724.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
JavaScript笔记
前端学习笔记
蓝胖胖。
这个作者很懒,什么都没留下…
展开
-
css实现加载特效
效果如下:思路:这个效果给人一种只有只有四五个白点在转圈的感觉。,实际上使用的是八个有定位的白色圆圈,设置好每一个的缩放动画时间,在整个加载过程中并没有发生位置的改变。html:<body> <div class="container"> <div class="loadiing"> <div class="container1"> <div class="circle"></div> <原创 2020-10-29 11:00:42 · 1030 阅读 · 0 评论 -
原生js实现瀑布流
效果图如下一,思路,重要的点是第一行排列之后往后的图片如何自动排到高度最小的那一列,需要做的就是找出第一行排列之后的高度最小的图片所在列,将下一张图片排到最小图所在列的下面,排好之后重新计算每一行当前每一列中最小高度,继续如上操作。如图第一列高度小于第二列,所以第五张图片自动排到了第一列后面实现瀑布流的要点有①确定每行放几张图片,每行的个数(column)=页面宽度(pageWidth)/(图片盒子宽度+图片间距)②确定一行多少个之后首先需要将第一行排列好③找出每一行的最小高度,排列完原创 2020-10-29 10:35:36 · 442 阅读 · 4 评论 -
js设置首字母大写
返回一个字符串,确保字符串的每个单词首字母都大写,其余部分小写。像’the’和’of’这样的连接符同理。function titleCase(str) {var arr=str.toLowerCase().split(" ");for(var i=0;i<arr.length;i++){ arr[i]=arr[i].replace(arr[i].charAt(0),arr[i].charAt(0).toUpperCase());原创 2020-10-02 23:13:57 · 1927 阅读 · 0 评论 -
js确认末尾字符串
检查一个字符串(str)是否以指定的字符串(target)结尾。如果是,返回true;如果不是,返回false。 function confirmEnding(str, target) { // "Never give up and good luck will find you." // -- Falcor var str1=str.substr(str.length-target.length); return (str1==target); } c原创 2020-10-02 23:12:07 · 772 阅读 · 0 评论 -
js寻找最长单词
返回提供的句子中最长的单词的长度。function findLongestWord(str) {var arr=str.split(" ");var maxLen=arr[0].length;for(var i=0;i<arr.length;i++){ if(arr[i].length>maxLen) { maxLen=arr[i].length; } }r原创 2020-10-02 23:10:26 · 150 阅读 · 0 评论 -
js返回最大的数组
在右边的大数组中包含了4个小数组,请分别找到每个小数组中的最大值,然后把它们串联起来,形成一个新的数组。提示:你可以用for循环来迭代数组,并通过arr[i]的方式来访问数组的每个元素。 function largestOfFour(arr) { // You can do this! var arrMax = []; var max; for (var i = 0; i < arr.length; i++) { max=arr[i][0]; for原创 2020-10-02 23:08:02 · 416 阅读 · 0 评论 -
js回文算法
如果给定的字符串是回文,返回true,反之,返回false。palindrome(回文)是指一个字符串忽略标点符号、大小写和空格,正着读和反着读一模一样。注意:您需要删除字符串多余的标点符号和空格,然后把字符串转化成小写来验证此字符串是不是回文。函数参数的值可以为"racecar",“RaceCar"和"race CAR”function palindrome(str) {// Good luck! var str1=str.replace(/[\W_]/g,""); v原创 2020-10-02 23:06:18 · 448 阅读 · 0 评论 -
js省市联动
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <style type="text/css"> </style> <body> 省: <select name="" id="sheng" onchange="selecShi()"> <o原创 2020-09-29 20:53:58 · 162 阅读 · 0 评论 -
ES6 let变量与var变量的区别
一,let不存在变量提升,可以理解为let变量在使用前必须先声明再使用不存在预解析,否则就会报错,而var声明的变量存在预解析即变量提升,举个例子:这段代码的结果为undefine,原因为浏览器在解析代码时,会先解析变量c然后逐步加载代码,即解析过程为当使用let声明变量a时,浏览器则会直接报错,这是因为let声明的变量不存在变量提升二,let变量在同一作用域下不能重复定义相同名称的变量,而var能够重复定义变量,如:三,let块级作用域,声明后只作用域所在的{}内,var是函数作用域原创 2020-09-19 18:43:55 · 329 阅读 · 0 评论 -
原生js实现相册切换效果
今天学了一个相册切换效果,当鼠标放到下面的小图上时,以大图的形式显示在上面,当使用js来写这样的效果时我们可以通过监听mouseover或mouseenter事件来完成,这两者的区别在于:mouseover:当鼠标移入监听对象时触发事件,或者当鼠标在监听对象子元素之间移动时也会触发该事件mouseenter:只在鼠标移入监听对象时触发事件在这里使用哪个都是可行的。实现代码如下<!DOCTYPE html><html> <head> <meta c原创 2020-09-19 17:01:07 · 680 阅读 · 0 评论 -
js实现图片数组中的图片切换
写一个图片切换的小案例,巩固一下setAttribute的用法。setAttribute()方法能够给dom元素添加属性并指定属性值,如果属性已经存在则更改属性值。方法:将图片放入数组中首先给img一个初始值,使用index存放当前被点击图片的下标,当再一次点击时,下标+1赋值给数组下标,利用setAttribute()方法给img标签设置src属性。上一张效果反之,代码如下。<!DOCTYPE html><html> <head> <meta char原创 2020-09-19 09:20:42 · 3788 阅读 · 1 评论