12 2017 档案
摘要：今天写一个时间例子，用图片组成时分秒。具体来看代码，当然今天的写法只是一种，还有很多种实现方法，来看布局： 先默认放上第一张图片，我是提前把图片标号序号从0-9，然后这样依次读取。js代码如下： 效果图如下： 最后一个数字是一直循环的效果，因为截不了gif图，所以这里说下了，你们可以拷贝代码试试看！
阅读全文
摘要：关于时间日常项目中可能会有很多需求，今天就写一个最简单的，将系统时间写入到页面上。直接来看js代码： 这样就可以了，具体该注意的地方在注释上已经写清楚了。最简单的写法希望对大家有帮助！
阅读全文
摘要：关于swiper图片切换有很多类型，我就不一一介绍了，可以直接到官网查询，今天来写一个适配于页面正中间的图片切换，也同时适配于任何图片的大小（也就是这个图片切换不用限制图片的本身大小，特别是移动端动态获取的图片有可能大小不一致），所以无论任何图片若是都想让其一直处于移动页面的正中间的话，那么就要获取
阅读全文
摘要：昨天把多组图片抖动效果实现了，但是有一个问题就是关于快速多次移动到图片上的时候会出现移动事件结束之后图片不在原来位置。就像下图所示： 这个问题的关键是：获取的位置都是移动事件之后重新刷新的位置，所以又去加抖动频率，重新又实现一次抖动效果，以便于会有图片最后出现上图的问题了。解决这个关键就是要做个判断
阅读全文
摘要：昨天提到了单个图片的抖动效果，那么今天来写一下多组图片实现抖动效果的封装，这种效果也许在日常的项目中会用到，简单封装一下，就不用每次都写差不多一样的代码了，好的来看html和css的布局，其实很简单就是两张图片： js代码如下： 好了，就是这样了，我写的比较啰嗦，也是希望看的比较明白，这只是两张图片
阅读全文
摘要：今天来写一个关于图片抖动的效果，需求是：点击图片，让其抖动几下停止（类似于苹果手机填错密码之后会抖一下的效果），其实想要实现这个效果，原理就是，点击之后，让其左移动下然后右移动一下（每移动一下减几像素知道减到0），然后将其放入定时器内，让其慢慢自动停下来。来看代码布局： 接下来就是js的实现： 这样
阅读全文
摘要：今天写一个简单的小例子，需求：页面有多个div，点击屏幕，div有顺序的依次下来。 来看js代码： 效果图如下： 好了，今天就这样！
阅读全文
摘要：今天还是来说昨天的小例子，昨天实现的效果就是点击按钮“向前”即往前相反则往后，那么需要细化的几个问题就是：代码可以简化以及可以用一个变量来控制方向直接来看js： 这是昨天的例子简化之后的代码，接下来看看怎么添加回调函数，那么昨天的布局就要稍微改动一下，用一个按钮来控制： 那么js代码是： 这个例子是
阅读全文
摘要：昨天的例子是针对只有单个函数运行的结果，但是实际中可能会有多组函数这样同时进行，那么这个时候就要对函数进行封装传参，来实现效果了。就还拿昨天的例子来说吧，昨天写的例子实现的效果是点击按钮，让div向前移动，那么今天就扩展一下，点击按钮让div向后移动，想要实现这个效果，就必须要传参了，来看代码： 那
阅读全文
摘要：今天简单写一个小案例：点击按钮，让div“走”起来。主要是为了说明给定时器设定开关时需要注意的几个问题。需求是：当点击按钮，让div向右一直移动，当移动到500像素时，停下来。好了那么简单的布局代码看一下： 那么简单的js效果是这样的： 这里需要注意的几个问题是： 第一，就是获取div的样式一定要用
阅读全文
摘要：今天实现一个很简单的下拉菜单的小实例，也就是鼠标移入菜单，它的子菜单出现并延迟消失。大概效果如下图： 来看下布局： 关于css代码： js如下： 以上例子总结一下三点： 1、首先看布局，主菜单div没有包含子菜单，这样的话不同于被包含的关系，扩展性应该会强一些； 2、鼠标移出事件开启时，并没有让子菜
阅读全文
摘要：之前写过一个图片切换的实例，当时只是没有加定时器，今天加上定时器，让其自动播放，好的来看代码： css代码： html代码： 接下来就是js代码： 注意：加定时器这一部分代码标粗了，为了看的更加清楚，特别要注意的小细节就是我注释里的内容：事件调用不能加括号，函数名称加括号就等于函数返回的值，若你函数
阅读全文
摘要：关于setInterval定时器的一个小实例，点击换背景按钮，让其每一秒换一个背景，点击停止就让其停止。 css js代码 注意：关于setInterval还有就是这里在调用fn函数时候不需要传参所以后面不要加括号。当然这是网盘认为的原因，也欢迎各大神给我指出问题。 今天就到这里！
阅读全文
摘要：当函数的参数个数无法确定的时候：用 arguments。函数的 arguments 对象并不是一个数组，它相当于是一个实参的集合，但是访问单个参数的方式与访问数组元素的方式相同。访问 函数中的第n个参数 则可以使用arguments[n-1]。 1、arguments实际为实参的集合。既然是集合，那
阅读全文
摘要：return返回值的应用，主要分为两大类： 一、返回函数结果； return可以返回所有的数据类型：数字、字符串、布尔、函数、对象（元素\[]\{}\null）、未定义3、 1、数字 2、字符串 3、函数 4、对象 5、未定义 注意说有函数都默认会有一个retrun，而没有任何定义的情况下，返回的都
阅读全文
摘要：模仿一个百度音乐的全选和反选的的操作。 html代码如下： css代码如下： js代码如下： 代码运行效果图如下：
阅读全文
摘要：今天来实现下星级评分，后边并跟有评价文字。 html代码如下： css如下： js如下： 代码运行效果如下：
阅读全文
摘要：关于运算符的应用，取模应该是比较重要的了，今天写一个关于将秒转为时分秒的小例子。 上面的p标签用来储存转化出来的时间，js应该这样写： 效果图： 当然这种直接将秒转化为时分秒的例子应该不多，但是其宗旨还是用到取模，主要的思路不变。
阅读全文
摘要：今天写一个取模的小实例，将数组中的内容循环写入到 li 中。来看代码： 布局就是一些li，那么想在每个li里循环写如规定的内容，并且点击任何一个加入颜色，看js： 效果图如下： 这个就是取模的一个最简单的小实例。
阅读全文
摘要：关于作用域，可能大家都在用，但是真正能说的清楚的却不多，我呢也只是简单谈一下我所了解的比较浅的认识。 作用域顾名思义可以分“作用”和“域”： 域：空间、范围、区域…… 作用：读、写 我们写的s内容都知道是在<script></script>里面，其实这就相当于是一个作用域，而在这个作用域里的内容还分
阅读全文
摘要：今天来看一个稍微复杂的例子，选项卡里套选项卡，先来看看布局： 简单的css代码： 效果图如下： 点击左侧的模块1~模块4，右边的改变相对应的模块内容，然后点击模块内容里的下方tit，同样相对应的内容再次切换。 就像上图颜色相对应的模块内容。点击黑色框选的，右边黑色框选的相对应的出现，点击当前黑色框选
阅读全文
摘要：关于修改文本的内容，有好多不同的写法，今天实现一个简单的的案例就是点击“编辑”按钮，文本内容可以保存。看下图： 这个例子想要实现的效果就是点击编辑，出现文本框，然后可以更改内容，关键就是在实际项目中可能会遇到有多行这样的内容，那么现在就只能用到传参来解决了，只要实现一个剩下的就都好说了，来看看代码：
阅读全文
摘要：在昨天的案例的基础上，若是想要计算总价，那么就要把每一个li的小计都要加一遍，所有要循环每个li，并且要获取到每个li里的小计的值。 要计算出商品的总件数，然后还有总计带的价格，那么js应该这样写： 无论点击任何按钮都要循环每个li里的小计并且要相加，所以考虑到代码的重用，那么就要把这段代码定义为函
阅读全文
摘要：通常购物网站中会有一些价格计算，合计或者小计，今天写一个简单的计算商品价格的小例子： 先来看看布局： 效果图如下： 看看js代码： 因为li不止一个，那么需要先实现出一个的效果，然后通过传参，来解决多个的计算！ 好了，今天就到这里，明天继续！
阅读全文
摘要：之前的博客有一个图片切换的例子，实现了简单轮播图的点击切换的案例，今天就说一下多组轮播切换，前提是布局差不多，通过函数传参的形式减少代码应用，但是同时还能实现效果。先来看一下之前那个例子的实现图片： 那么今天我来实现两组这样的图片切换，通过传参数来实现，这样分可以减少js代码： css样式： js代
阅读全文
摘要：js中数据类型转换是一个很频繁会用到的一部分，那么在实际案例中会出现各种的数据类型，想要满足某些条件，那还必须要不同类型的数据进行转换，今天就通过一个小例子，来找出相对应的数据类型。 先看一个一个数组，数组里的内容很复杂，包含了所有的数据类型，然后我们通过不同的条件找到相对应的内容： 题目是： 1、
阅读全文
摘要：关于判断表单元素中QQ号码的既定的几个标准： 1、不能为空 2、不能不是数字 3、不能有0在前面 4、不能是小数 5、输入的数字必须在5位以上、10位以内（先判断10位以下的，目前存在11位和12位的忽略不计） 先来简单写一下布局： 那么js应该这样写： 要一层一层的判断才行，任何一个条件不能忽略，
阅读全文
摘要：js中的数据类型有几个特殊的，其中NaN就是一个，今天来说一下NaN的特点以及和isNaN的区别。 JS中的数据类型：数字（NaN）、字符串、布尔、函数、对象(obj、[]、{}、null)、未定义。 一、那么NaN在以下几种情况中会比较特殊： 从上面的分析中得出几个NaN的特点： 1、NaN属于数
阅读全文
