标签: js

2017
0
前端

特效篇--图片环绕

2017年快要结束了，来点特效的东西作为2017年博客的结束篇吧，其实特效这东西看看就好了，实际用处不是特别的大，不过效果什么的还是挺酷的。 本文介绍的是图片环绕，散列切换如何完成的，一共三个切换效果，先看看效果吧：当然博客展示的面积不够：请点这里查看全部效果链接。废话不多说直接上代码了：html：1234567891011121314151617181920212223242526<div

0
前端

Canvas --雪花图

昨天冬至，又到了白色相簿的季节了，︿(￣︶￣)︿笑，后天就是圣诞了，安安心心做个剩蛋老人吧(ノへ￣、)。好了好了，重庆还是没下雪，冷着不下雪，感觉好亏。既然不下，那就只有自己写点雪花了。canvas这个东西一直是想深入学习的，做出来的东西各种炫酷吊炸天，但是没啥时间，就只会点小东西，大家将就着看吧：首先既然是用canvas，那么结构就非常简单啦，html什么都不用写，用js创建canvas。我们把

0
前端

时间--时钟篇

这天是越来越冷了，人也越发的懒起来，早上起来简直要老命，下班回去也只想进被子里面，游戏都不想打了╮（﹀_﹀）╭，冷呀。。。。好了，写个时钟来激励一下懒惰的自己吧。 旋转方式做时钟首先要把样式给搞定，主要是围绕中心旋转的样式。围绕中心旋转形成等分状态其实有两种做法，假设html样式如下：1234567891011121314<ul class="pox"> <li>1&

0
前端

初探Promise

一个星期没更新了，先来个小游戏来放松放松，勇者大战魔王： 考验人品的时候到了，反复进攻，看你能几次进攻打败魔王。 上面只是个小例子，如何实现上面的效果呢，这就要说到我们今天的正主了–Promise，Promise译为承诺。在ES6发布时Promise被ES6列为正式规范，成为最重要的特性之一，Promise 对象用于一个异步操作的最终完成（或失败）及其结果值的表示。简单来说就是把一个函数放进去

0
前端

瀑布流小实例

网站备案终于下来了，等了十几天，不容易呀，顺便搞了个免费的https证书，把评论也换成畅言的了，来必力太挫了，ui看见想打人系列。瀑布流，又称瀑布流式布局。其特点是随着页面滚动条向下滚动，不断加载数据块并附加至当前尾部。从Pinterest开始兴起，国内也有许多网站采用这种样式，不过大多数为了节约代码采用的是等宽等高的样式。今天我要演示的是等宽不等高如何进行瀑布流加载。 html结构由于我们这里瀑

0
前端

计算器小实例

最近在学react，没啥时间更新博客，等有空的时候把react基础写一写，react写法还是挺有意思的。这个实例没啥可说的，就是一个小实例而已，js实现最简单的计算器功能。当然原理很简单的，就是通过eval()可以计算字符串的特性实现字符串的运算，当然eval()还是少用为好，它的可读性非常差，不好再做优化和编译。 关键js代码12345678910111213141516171819202122

0
前端

图片上传那些事-总结篇

好了，总结篇终于开工了，这次来说说关于上传的一些琐碎事情。 1.file input的美化file input 好用是好用但是论起颜值来说差得不是一点半点，怎么能让这玩意儿拉低我们写好的页面颜值呢(ง •̀_•́)ง，来整整容吧，其实这个东西实现起来也很简单的首先我们把这个上传的input用display: none;隐藏掉，然后发挥自己力量写个高颜值的上传按钮，给这个按钮添加点击事件，点击的时候

0
前端

图片上传那些事-图片上传篇

上次说完了图片上传预览，使用form提交就可以把图片进行提交了，但是在现实中这样的操作往往满足不了用户需求，一般在进行上传操作时可能会进行图片的多次重新选择和增删所选择的图片，这时用form提交就实现不了。 这时就该我们本篇的主角闪亮登场了：FormData。W3C在2008年提出XMLHttpRequest Level 2的草案中改进了XMLHttpRequest对象，在新版本的一些功能中就有F

0
前端

图片上传那些事-图片预览篇

在前端工作中，有一些小功能是大家经常遇到的，图片的上传就是经常遇到的功能之一，平时图片上传有很多的需求，比如图片预览，批量上传，有些还要有上传进度，本文将介绍如何实现图片的批量上传和删除以及预览。以前的浏览器由于安全问题和兼容问题，实现不了本地图片信息的读取预览，只能选择一张就上传一张图片到服务器，然后服务器返回图片地址从而实现图片的预览，但是随着老的浏览器(ie)的逐渐淘汰，以及各个浏览器标准的

0
前端

Circle 进度环--css篇

网上有各种进度，进度条啊，进度环，进度条做起来简单，可是有很多时候需要的是进度环，本篇是用css3的效果结合js完成进度环的。废话不多说了，上结构html:12345<div class="loading"> <div class="left"><span></span></div> <div class="right"