xinxin's little world

关于vue2中watch侦听器的简单使用

这次实现的效果图如下： 这个二级菜单实现的效果是： 当点击某一个框时，会将已经打开的框的内容收回，再展开现在点击的框的内容。 要如何实现这个效果呢？ 我们可以step by step 首先我们要将整个框架显示出来，即所有框展开的样子，因为其显示/不显示是拿overflow:hidden做的。但是要注意不要所有的框都拿一种类型的盒子做，因为那样不方便写js代码，毕竟我们之后的操作是点击绿色的框=>使得收起或展开白色的框，所以我们需要为每一个天数+对应课程的框放在一个div父盒子下。然后为其初始化：设置高度等于span的高度，设置overflow:hidden，如下图，可以结合下面代码 然后开始写js部分：确保点击某一框时，它会由闭合变为展开。我们的框是span，如果想要span的父盒子div中的内容全部显示，我们首先需要通过document.getElementsByTagName("span")获取所有的span，然后利用for循环在每一个span的onclick响应函数中通过parentNode获取其对应的父盒子，使其父盒子的高度变为其scrollH ...

今天的效果如下： 这个案例的要点有两个： ==一==是使用CSS显示样式 ==二==是使用js比较输入的内容和数组中的内容使得包含输入内容的数据显示出来 首先来看==CSS显示样式==的难点： 两个div的接触部分，要想让它们无缝隙接触，就需要设置float：left； 两个div盒子左右两侧的圆角边框，我们需要分别为border-top-left-radius等设置值，这样就大致得到了搜索框的样式，剩下的细节可以去代码中查看~ 接着来看==JS进行比较==的部分： 总的思想呢，就是当输入内容时使下方显示搜索框，显示匹配的数据；不输入或输入数据不匹配时，不显示数据或显示暂无数据；搜索框失去焦点时使下方的搜索框消失 当我们在搜索框中输入内容时，我们可以调用onkeyup函数，先使下方的搜索框display属性值为block；然后在其中调用forEach遍历数组中的所有数据，通过value获得输入的内容，调用indexOf将该内容与数组中的数据进行比较，若有匹配项的话，其返回值是数组中数据的下标，否则为-1；若有匹配项的话，我们可以利用innerHTML，在下面的显示框中添加p标签，p ...

使用webpack在本地进行简单的项目搭建

今天的案例，效果如下： 这个案例的实现其实没有很多难点，让我们一起来看看吧~ html和css的实现，在这里就不做解释啦，可以比对下面的代码自己实现一下，注意一下细节就好了 接着咱们来看看js的实现： 我们需要做到的有两点： 实现验证码的随机产生，使其在==页面刷新和点击更换==时能够生成 实现输入字符串和验证码的比较 ==第一点呢==，我们需要用到for循环和Math.round(Math.random()*n)，使得在每一次循环中可以产生随机数字 ==第二点呢==，我们只需要通过input.value来获得用户输入的字符串，然后将其与之前随机产生的字符串进行比较即可（使用===） 其他的细节可以去代码中查看哦1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495<!DO ...

效果图如下： 这个案例其实很简单，只要掌握了js基础中的onclick函数以及定时器的使用，就能快速的做出这样的效果，让我们一起来看看怎么做吧~ 首先需要两个html文件，在两个文件中利用html和css分别写好初始页面效果，在这里就不多说啦，具体可以看下面的代码 让我们来谈谈js需要做出的效果： 在页面1中点击支付要跳转到另一个文件中 刚进入页面2时要开始计时10秒，计时结束后返回页面1 点击页面2的立即返回能够返回到页面1 这就是我们需要做的效果 那我们要如何实现在两个页面之间的跳转呢？ => 利用onclick和location.href="url"，在鼠标点击时改变location.href（此处的url是指你所存放的另一个html文件的位置） 计时效果就很简单啦，利用setInterval使元素的innerText改变就可以了，当数字等于0时，同样改变location，使其页面跳转 代码如下： 页面1： 12345678910111213141516171819202122232425262728293031<!DOCTYPE ht ...

如何引入字体图标？ 从网上下载字体图标：进入该网站：https://icomoon.io/点进去之后，在其中选择你想要的图标，如果觉得不够用的话，可以点击左下角选择生成更多的图标 选择好图标后： 下载好之后，需要注意了，注意如何操作来在html文件中引入字体图标： （假如你想引入图标的html文件叫k） 把下载包中的fonts文件夹放入k所在的根目录中 把下载包中的style.css文件中@font-face的内容复制到k的style标签中 在下载包中的demo.html中找到对应图标后面的小方框（如下图），复制到k想要放的标签比如span 最后在k的style中为该span标签添加font-family属性，与@font-face中的一样，一般为‘icomoon’，这样你就可以得到想要的字体图标啦 而且你还可以修改图标的颜色、大小等属性，如图~ 如何追加字体图标？在这个页面点击左上角的import icons 然后选择你之前下载好的压缩包中的selection.json 之后就可以继续在页面中选择你想要添加的字体图标，选择好之后，还是按照之前的步骤，下载完成 ...

这次的效果图如下： 我认为这个实验的难点是保持盒子和鼠标的相对位置不变，通过鼠标按下和移动来实现拖拽的效果 如何实现拖拽的效果呢？ 我们需要用到三个函数：onmousedown、onmousemove、onmouseup，分别表示鼠标按下、鼠标移动、鼠标抬起 在鼠标按下的回调函数中，我们需要通过clientX和clientY获取鼠标的初始位置，通过offsetLeft和offsetTop获取盒子的初始位置，然后计算鼠标初始位置和盒子初始位置的差值； 在鼠标移动的回调函数中，我们需要根据鼠标的位置和之前计算得到的差值来获取盒子现在的位置，然后改变其left和top值，不要忘记将position设置为absolute（因为我就忘记了。。。) 在鼠标抬起的回调函数中，我们需要清除鼠标移动和鼠标抬起，通过将onmousemove和onmouseup值设置为null即可 注意！！！ 鼠标移动函数和抬起函数均要写在鼠标按下函数中，因为我们是要在鼠标按下这个动作之后来设计之后的行为，而且很重要的一点是： 鼠标按下函数是div的，鼠标移动和鼠标抬起是document的 因为我们的意思并不 ...

记录一下引入iconfont的过程

包括CSS JS 浏览器原理等一些知识点的总结